Merge branch 'master' into issue-#609

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;

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:

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;

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;
-}
+}
+
+