alex
/
prueba_CGI
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Move back icon to it's own component

This commit is contained in:
Alex Piqueras 2024-10-14 19:59:29 +02:00
parent 7d5ee0a1d3
commit ede0c91457
2 changed files with 29 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/app.js
View File

@ -4,6 +4,7 @@ import './components/item-list.js';
import './components/custom-item.js'; import './components/custom-item.js';
import './components/custom-modal.js'; import './components/custom-modal.js';
import './components/custom-text.js'; import './components/custom-text.js';
import './components/back-icon.js';
import Store from './modules/store.js'; import Store from './modules/store.js';
import text from './modules/text.js'; import text from './modules/text.js';
@ -72,9 +73,6 @@ class AppBase extends HTMLElement {
.button-bar > .right-button { .button-bar > .right-button {
margin-left: auto; margin-left: auto;
} }
#undo-char {
margin-top: 3px;
}
</style> </style>
<main-window width="900px" gap="35px"> <main-window width="900px" gap="35px">
<h1 id="title">${this.text.title}</h1> <h1 id="title">${this.text.title}</h1>
@ -83,12 +81,7 @@ class AppBase extends HTMLElement {
${this.store.getRecords().map((item) => `<option is="custom-item" color="${this.properties.color}" value=${item.id}>${item.text}</option>`)} ${this.store.getRecords().map((item) => `<option is="custom-item" color="${this.properties.color}" value=${item.id}>${item.text}</option>`)}
</select> </select>
<span class="button-bar"> <span class="button-bar">
<button is="custom-button" action="${Store.actions.UNDO}" outline width="81px" color="${this.properties.color}"> <button is="custom-button" action="${Store.actions.UNDO}" outline width="81px" color="${this.properties.color}"><back-icon color="${this.properties.color}"></back-icon></button>
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" id="undo-char" width="21" height="19" viewBox="0 0 5.556 5.027">
<path d="M.681 2.22a2.38 2.38 0 0 1 4.742.294v0a2.38 2.38 0 0 1-4.526 1.03" style="fill:none;stroke:${this.properties.color};stroke-width:.264583;stroke-linecap:round;stroke-dasharray:none"/>
<path d="m.132 1.525.437.964.964-.437" style="fill:none;stroke:${this.properties.color};stroke-width:.264583;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"/>
</svg>
</button>
<button is="custom-button" action="${Store.actions.REMOVE_LINE}" outline width="124px" color="${this.properties.color}">Delete</button> <button is="custom-button" action="${Store.actions.REMOVE_LINE}" outline width="124px" color="${this.properties.color}">Delete</button>
<button is="custom-button" class="right-button" action="${Store.actions.OPEN_MODAL}" width="138px" color="${this.properties.color}">Add</button> <button is="custom-button" class="right-button" action="${Store.actions.OPEN_MODAL}" width="138px" color="${this.properties.color}">Add</button>
</span> </span>

27
src/components/back-icon.js Normal file
View File

@ -0,0 +1,27 @@
class BackIcon extends HTMLElement {
static observedAttributes = ['color'];
constructor() {
super();
this.attachShadow({ mode: 'open' });
}
connectedCallback() {
this.render();
}
attributeChangedCallback() {
this.render();
}
render() {
this.shadowRoot.innerHTML = `
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" marginTop="3px" width="21" height="19" viewBox="0 0 5.556 5.027">
<path d="M.681 2.22a2.38 2.38 0 0 1 4.742.294v0a2.38 2.38 0 0 1-4.526 1.03" style="fill:none;stroke:${this.getAttribute('color')};stroke-width:.264583;stroke-linecap:round;stroke-dasharray:none"/>
<path d="m.132 1.525.437.964.964-.437" style="fill:none;stroke:${this.getAttribute('color')};stroke-width:.264583;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"/>
</svg>
`;
}
}
customElements.define('back-icon', BackIcon);