diff --git a/src/editor/components/seExplorerButton.js b/src/editor/components/seExplorerButton.js index d1926dfd..dee91b25 100644 --- a/src/editor/components/seExplorerButton.js +++ b/src/editor/components/seExplorerButton.js @@ -48,10 +48,12 @@ template.innerHTML = ` .button-icon { } .menu { - position: 'fixed'; + position: fixed; margin-left: 34px; background: none !important; display:none; + top: 30%; + left: 171px; } .image-lib { position: fixed; diff --git a/src/editor/components/seFlyingButton.js b/src/editor/components/seFlyingButton.js index 51298a3a..ddcc957b 100644 --- a/src/editor/components/seFlyingButton.js +++ b/src/editor/components/seFlyingButton.js @@ -262,6 +262,9 @@ export class FlyingButton extends HTMLElement { this.removeAttribute('opened'); } else { this.setAttribute('opened', 'opened'); + // In case menu scroll on top or bottom position based popup position set + const rect = this.getBoundingClientRect(); + this.$menu.style.top = rect.top + "px"; } break; default: diff --git a/src/editor/components/seSpinInput.js b/src/editor/components/seSpinInput.js index 3aa391de..24c82ed8 100644 --- a/src/editor/components/seSpinInput.js +++ b/src/editor/components/seSpinInput.js @@ -8,6 +8,9 @@ template.innerHTML = ` margin: 5px 1px; padding: 3px; } + div.imginside { + width: var(--global-se-spin-input-width); + } img { position: relative; right: -4px; @@ -58,6 +61,7 @@ export class SESpinInput extends HTMLElement { this._shadowRoot = this.attachShadow({ mode: 'open' }); this._shadowRoot.append(template.content.cloneNode(true)); // locate the component + this.$div = this._shadowRoot.querySelector('div'); this.$img = this._shadowRoot.querySelector('img'); this.$label = this.shadowRoot.getElementById('label'); this.$event = new CustomEvent('change'); @@ -83,6 +87,7 @@ export class SESpinInput extends HTMLElement { case 'src': this.$img.setAttribute('src', newValue); this.$label.remove(); + this.$div.classList.add('imginside'); break; case 'size': // access to the underlying input box @@ -179,6 +184,19 @@ export class SESpinInput extends HTMLElement { * @returns {void} */ connectedCallback () { + const shadow = this.$input.shadowRoot; + const childNodes = Array.from(shadow.childNodes); + childNodes.forEach( (childNode) => { + if(childNode?.id === "input") { + childNode.addEventListener('keyup', (e) => { + e.preventDefault(); + if (!isNaN(e.target.value)) { + this.value = e.target.value; + this.dispatchEvent(this.$event); + } + }); + } + }); this.$input.addEventListener('change', (e) => { e.preventDefault(); this.value = e.target.value; diff --git a/src/editor/svgedit.css b/src/editor/svgedit.css index 10269450..510b5974 100644 --- a/src/editor/svgedit.css +++ b/src/editor/svgedit.css @@ -8,6 +8,7 @@ --icon-bg-color: #72797A; --icon-bg-color-hover: #2B3C45; --input-color: #B2B2B2; + --global-se-spin-input-width: 82px; } .svg_editor * { @@ -314,9 +315,14 @@ hr { #tools_bottom { grid-area: bottom; - overflow: scroll; + overflow: auto; display: flex; align-items: center; + scrollbar-width: thin; +} + +#tools_bottom ::-webkit-scrollbar { + width: 3px; } #tools_bottom se-list { @@ -596,4 +602,6 @@ ul li.current { .dropdown li.tool_button { width: 24px; -} \ No newline at end of file +} + +