From a0e0e50e2c19fd81330221654d1339a97a2390ff Mon Sep 17 00:00:00 2001 From: agriyadev5 Date: Tue, 17 Aug 2021 15:52:58 +0530 Subject: [PATCH 1/7] #612 Bottom toolbar has some visual issues --- src/editor/components/seExplorerButton.js | 2 +- src/editor/components/seSpinInput.js | 2 ++ src/editor/svgedit.css | 11 ++++++++--- 3 files changed, 11 insertions(+), 4 deletions(-) diff --git a/src/editor/components/seExplorerButton.js b/src/editor/components/seExplorerButton.js index d1926dfd..111ccca5 100644 --- a/src/editor/components/seExplorerButton.js +++ b/src/editor/components/seExplorerButton.js @@ -48,7 +48,7 @@ template.innerHTML = ` .button-icon { } .menu { - position: 'fixed'; + position: fixed; margin-left: 34px; background: none !important; display:none; diff --git a/src/editor/components/seSpinInput.js b/src/editor/components/seSpinInput.js index eae0931f..ec0383cb 100644 --- a/src/editor/components/seSpinInput.js +++ b/src/editor/components/seSpinInput.js @@ -58,6 +58,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 +84,7 @@ export class SESpinInput extends HTMLElement { case 'src': this.$img.setAttribute('src', newValue); this.$label.remove(); + this.$div.style.width = '82px'; break; case 'size': // access to the underlying input box diff --git a/src/editor/svgedit.css b/src/editor/svgedit.css index 5db6c45f..664744d1 100644 --- a/src/editor/svgedit.css +++ b/src/editor/svgedit.css @@ -314,7 +314,7 @@ hr { #tools_bottom { grid-area: bottom; - overflow: scroll; + overflow: auto; display: flex; align-items: center; } @@ -329,7 +329,7 @@ hr { #tools_left { grid-area: left; border-right: none; - overflow-y: scroll; + overflow-y: auto; } /*—————————————————————————————*/ @@ -583,4 +583,9 @@ ul li.current { .dropdown li.tool_button { width: 24px; -} \ No newline at end of file +} + +/* width */ +::-webkit-scrollbar { + width: 3px; +} From 95bcdc02058ed05a4863911c294e206b3cd300cc Mon Sep 17 00:00:00 2001 From: agriyadev5 Date: Tue, 17 Aug 2021 16:57:20 +0530 Subject: [PATCH 2/7] #612 scroll bar style changes --- src/editor/svgedit.css | 15 +++++++++++---- 1 file changed, 11 insertions(+), 4 deletions(-) diff --git a/src/editor/svgedit.css b/src/editor/svgedit.css index 664744d1..ae2132c7 100644 --- a/src/editor/svgedit.css +++ b/src/editor/svgedit.css @@ -317,6 +317,11 @@ hr { overflow: auto; display: flex; align-items: center; + scrollbar-width: thin; +} + +#tools_bottom ::-webkit-scrollbar { + width: 3px; } #tools_bottom se-list { @@ -330,6 +335,11 @@ hr { grid-area: left; border-right: none; overflow-y: auto; + scrollbar-width: thin; +} +/* width */ +#tools_left ::-webkit-scrollbar { + width: 3px; } /*—————————————————————————————*/ @@ -585,7 +595,4 @@ ul li.current { width: 24px; } -/* width */ -::-webkit-scrollbar { - width: 3px; -} + From 6996f837f0dd8d77b8431e962c53eda4d3d748e5 Mon Sep 17 00:00:00 2001 From: agriyadev5 Date: Tue, 17 Aug 2021 18:20:28 +0530 Subject: [PATCH 3/7] #612 Shape popup menu position problem and Menu popup position issue --- src/editor/components/seExplorerButton.js | 2 ++ src/editor/components/seFlyingButton.js | 3 +++ 2 files changed, 5 insertions(+) diff --git a/src/editor/components/seExplorerButton.js b/src/editor/components/seExplorerButton.js index 111ccca5..dee91b25 100644 --- a/src/editor/components/seExplorerButton.js +++ b/src/editor/components/seExplorerButton.js @@ -52,6 +52,8 @@ template.innerHTML = ` 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: From 110098a063270313c753fcc2dfc1488fbb8057c7 Mon Sep 17 00:00:00 2001 From: agriyadev5 Date: Tue, 17 Aug 2021 20:59:41 +0530 Subject: [PATCH 4/7] #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"> + src="${imgPath}/opacity.svg" width="82"> `; 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 * { From 5f6560154db86af1d7d4a7ff3e9c77bef49e1acf Mon Sep 17 00:00:00 2001 From: agriyadev5 Date: Wed, 18 Aug 2021 18:52:34 +0530 Subject: [PATCH 5/7] #599 TopPanel x,y and dimension for element, doesn't work --- src/editor/components/seSpinInput.js | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/src/editor/components/seSpinInput.js b/src/editor/components/seSpinInput.js index 3aa391de..bd8c6cb6 100644 --- a/src/editor/components/seSpinInput.js +++ b/src/editor/components/seSpinInput.js @@ -179,6 +179,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; From 9d56df3c8c82cdc4432d0ccaac9f4787ee67a7fa Mon Sep 17 00:00:00 2001 From: agriyadev5 Date: Thu, 19 Aug 2021 12:29:03 +0530 Subject: [PATCH 6/7] #612 sespininput width class set changes --- src/editor/components/seSpinInput.js | 2 +- src/editor/panels/BottomPanel.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/editor/components/seSpinInput.js b/src/editor/components/seSpinInput.js index ed87bfa9..0c3e38c8 100644 --- a/src/editor/components/seSpinInput.js +++ b/src/editor/components/seSpinInput.js @@ -88,9 +88,9 @@ export class SESpinInput extends HTMLElement { case 'src': this.$img.setAttribute('src', newValue); this.$label.remove(); + this.$div.classList.add('imginside'); break; case 'width': - this.$div.classList.add('imginside'); this.$div.style.setProperty('--se-spin-input-width', newValue + 'px'); break; case 'size': diff --git a/src/editor/panels/BottomPanel.js b/src/editor/panels/BottomPanel.js index dd9d82ad..4fd14c87 100644 --- a/src/editor/panels/BottomPanel.js +++ b/src/editor/panels/BottomPanel.js @@ -210,7 +210,7 @@ class BottomPanel { height="22px"> + src="${imgPath}/opacity.svg"> `; From b905f4ac4c587241a092a5fa699b100de967e85b Mon Sep 17 00:00:00 2001 From: agriyadev5 Date: Thu, 19 Aug 2021 12:57:08 +0530 Subject: [PATCH 7/7] #612 --global-se-spin-input-width to handle numberspinbox width changes --- src/editor/components/seSpinInput.js | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/src/editor/components/seSpinInput.js b/src/editor/components/seSpinInput.js index 0c3e38c8..d8b1885e 100644 --- a/src/editor/components/seSpinInput.js +++ b/src/editor/components/seSpinInput.js @@ -9,8 +9,7 @@ template.innerHTML = ` padding: 3px; } div.imginside { - --se-spin-input-width: var(--global-se-spin-input-width); - width: var(--se-spin-input-width); + width: var(--global-se-spin-input-width); } img { position: relative; @@ -73,7 +72,7 @@ export class SESpinInput extends HTMLElement { * @returns {any} observed */ static get observedAttributes () { - return [ 'value', 'label', 'src', 'size', 'min', 'max', 'step', 'width' ]; + return [ 'value', 'label', 'src', 'size', 'min', 'max', 'step' ]; } /** * @function attributeChangedCallback @@ -90,9 +89,6 @@ export class SESpinInput extends HTMLElement { this.$label.remove(); this.$div.classList.add('imginside'); break; - case 'width': - this.$div.style.setProperty('--se-spin-input-width', newValue + 'px'); - break; case 'size': // access to the underlying input box this.$input.shadowRoot.getElementById('input').size = newValue;