diff --git a/src/editor/components/seList.js b/src/editor/components/seList.js
index 7f573115..4b903a9b 100644
--- a/src/editor/components/seList.js
+++ b/src/editor/components/seList.js
@@ -11,7 +11,11 @@ elix-dropdown-list:hover {
background-color: var(--icon-bg-color-hover);
}
-::part(popup-toggle) {
+elix-dropdown-list::part(value) {
+ background-color: var(--main-bg-color);
+}
+
+elix-dropdown-list::part(popup-toggle) {
display: none;
}
::slotted(*) {
diff --git a/src/editor/components/seSelect.js b/src/editor/components/seSelect.js
new file mode 100644
index 00000000..d1fc629f
--- /dev/null
+++ b/src/editor/components/seSelect.js
@@ -0,0 +1,149 @@
+const template = document.createElement('template');
+template.innerHTML = `
+
+
+
+
+`;
+/**
+ * @class SeList
+ */
+export class SeSelect extends HTMLElement {
+ /**
+ * @function constructor
+ */
+ constructor () {
+ super();
+ // create the shadowDom and insert the template
+ this._shadowRoot = this.attachShadow({ mode: 'open' });
+ this._shadowRoot.append(template.content.cloneNode(true));
+ this.$select = this._shadowRoot.querySelector('select');
+ this.$label = this._shadowRoot.querySelector('label');
+ }
+ /**
+ * @function observedAttributes
+ * @returns {any} observed
+ */
+ static get observedAttributes () {
+ return [ 'label', 'width', 'height', 'options', 'values' ];
+ }
+
+ /**
+ * @function attributeChangedCallback
+ * @param {string} name
+ * @param {string} oldValue
+ * @param {string} newValue
+ * @returns {void}
+ */
+ attributeChangedCallback (name, oldValue, newValue) {
+ let options;
+ if (oldValue === newValue) return;
+ switch (name) {
+ case 'label':
+ this.$label.textContent = newValue;
+ break;
+ case 'height':
+ this.$select.style.height = newValue;
+ break;
+ case 'width':
+ this.$select.style.width = newValue;
+ break;
+ case 'options':
+ options = newValue.split(',');
+ options.forEach((option) => {
+ const optionNode = document.createElement("OPTION");
+ const text = document.createTextNode(option);
+ optionNode.appendChild(text);
+ this.$select.appendChild(optionNode);
+ });
+ break;
+ case 'values':
+ options = newValue.split(' ');
+ options.forEach((option, index) => {
+ this.$select.children[index].setAttribute('value', option);
+ });
+ break;
+ default:
+ // eslint-disable-next-line no-console
+ console.error(`unknown attribute: ${name}`);
+ break;
+ }
+ }
+ /**
+ * @function get
+ * @returns {any}
+ */
+ get label () {
+ return this.getAttribute('label');
+ }
+
+ /**
+ * @function set
+ * @returns {void}
+ */
+ set label (value) {
+ this.setAttribute('label', value);
+ }
+ /**
+ * @function get
+ * @returns {any}
+ */
+ get width () {
+ return this.getAttribute('width');
+ }
+
+ /**
+ * @function set
+ * @returns {void}
+ */
+ set width (value) {
+ this.setAttribute('width', value);
+ }
+ /**
+ * @function get
+ * @returns {any}
+ */
+ get height () {
+ return this.getAttribute('height');
+ }
+
+ /**
+ * @function set
+ * @returns {void}
+ */
+ set height (value) {
+ this.setAttribute('height', value);
+ }
+ /**
+ * @function connectedCallback
+ * @returns {void}
+ */
+ connectedCallback () {
+ const currentObj = this;
+ this.$select.addEventListener('change', () => {
+ const value = this.$select.value;
+ const closeEvent = new CustomEvent('change', { detail: { value } });
+ currentObj.dispatchEvent(closeEvent);
+ currentObj.value = value;
+ });
+ }
+}
+
+// Register
+customElements.define('se-select', SeSelect);
diff --git a/src/editor/components/seSpinInput.js b/src/editor/components/seSpinInput.js
index 24c82ed8..694bbfad 100644
--- a/src/editor/components/seSpinInput.js
+++ b/src/editor/components/seSpinInput.js
@@ -14,6 +14,7 @@ template.innerHTML = `
img {
position: relative;
right: -4px;
+ top: 2px;
}
span {
bottom: -0.5em;
diff --git a/src/editor/panels/BottomPanel.js b/src/editor/panels/BottomPanel.js
index 4fd14c87..801742e3 100644
--- a/src/editor/panels/BottomPanel.js
+++ b/src/editor/panels/BottomPanel.js
@@ -186,13 +186,10 @@ class BottomPanel {
-
- —
- ...
- - -
- - .
- - ..
-
+
+
diff --git a/src/editor/panels/TopPanel.js b/src/editor/panels/TopPanel.js
index 34928a31..e1709e72 100644
--- a/src/editor/panels/TopPanel.js
+++ b/src/editor/panels/TopPanel.js
@@ -920,12 +920,13 @@ class TopPanel {
-
- ${i18next.t('tools.selected_objects')}
- ${i18next.t('tools.largest_object')}
- ${i18next.t('tools.smallest_object')}
- ${i18next.t('tools.page')}
-
+
+