From 110098a063270313c753fcc2dfc1488fbb8057c7 Mon Sep 17 00:00:00 2001
From: agriyadev5 <agriya.dev5@agriya.in>
Date: Tue, 17 Aug 2021 20:59:41 +0530
Subject: [PATCH] #612 width hardcode change to width attribute and define a
 global css variable --se-spin-input-width

---
 src/editor/components/seSpinInput.js | 11 +++++++++--
 src/editor/panels/BottomPanel.js     |  2 +-
 src/editor/svgedit.css               |  1 +
 3 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/editor/components/seSpinInput.js b/src/editor/components/seSpinInput.js
index ec0383cb..ded0b6f3 100644
--- a/src/editor/components/seSpinInput.js
+++ b/src/editor/components/seSpinInput.js
@@ -8,6 +8,10 @@ template.innerHTML = `
     margin: 5px 1px;
     padding: 3px;
   }
+  div.imginside {
+    --se-spin-input-width: var(--global-se-spin-input-width);
+    width: var(--se-spin-input-width);
+  }
   img {
     position: relative;
     right: -4px;
@@ -69,7 +73,7 @@ export class SESpinInput extends HTMLElement {
    * @returns {any} observed
    */
   static get observedAttributes () {
-    return [ 'value', 'label', 'src', 'size', 'min', 'max', 'step' ];
+    return [ 'value', 'label', 'src', 'size', 'min', 'max', 'step', 'width' ];
   }
   /**
    * @function attributeChangedCallback
@@ -84,7 +88,10 @@ export class SESpinInput extends HTMLElement {
     case 'src':
       this.$img.setAttribute('src', newValue);
       this.$label.remove();
-      this.$div.style.width = '82px';
+      break;
+    case 'width':
+      this.$div.classList.add('imginside');
+      this.$div.style.setProperty('--se-spin-input-width', newValue + 'px');
       break;
     case 'size':
       // access to the underlying input box
diff --git a/src/editor/panels/BottomPanel.js b/src/editor/panels/BottomPanel.js
index 15947b87..46377164 100644
--- a/src/editor/panels/BottomPanel.js
+++ b/src/editor/panels/BottomPanel.js
@@ -216,7 +216,7 @@ class BottomPanel {
               height="22px"></img></se-list-item>
         </se-list>
         <se-spin-input size="3" id="opacity" min=0 max=100 step=5 title="${i18next.t('properties.opacity')}"
-          src="${imgPath}/opacity.svg"></se-spin-input>
+          src="${imgPath}/opacity.svg" width="82"></se-spin-input>
         <se-palette id="palette"></se-palette>
       </div>
     `;
diff --git a/src/editor/svgedit.css b/src/editor/svgedit.css
index ae2132c7..cf53ca06 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 * {