From fd813e8dd941959f7e451473d75f82e562108dc7 Mon Sep 17 00:00:00 2001
From: JFH <20402845+jfhenon@users.noreply.github.com>
Date: Sun, 3 Jan 2021 17:59:19 +0100
Subject: [PATCH] opacity spin button

---
 src/editor/EditorStartup.js              | 9 ++-------
 src/editor/index.html                    | 9 +--------
 src/editor/panels/BottomPanelHandlers.js | 2 +-
 src/editor/svgedit.css                   | 4 ----
 src/editor/svgedit.js                    | 3 ---
 5 files changed, 4 insertions(+), 23 deletions(-)

diff --git a/src/editor/EditorStartup.js b/src/editor/EditorStartup.js
index fc2c504e..01db4886 100644
--- a/src/editor/EditorStartup.js
+++ b/src/editor/EditorStartup.js
@@ -414,13 +414,8 @@ class EditorStartup {
       seAlert(this.title);
     });
 
-    $('#stroke_width').val(this.configObj.curConfig.initStroke.width);
-    $('#group_opacity').val(this.configObj.curConfig.initOpacity * 100);
-
-    $('#group_opacityLabel').click(() => {
-      $('#opacity_dropdown button').mousedown();
-      $(window).mouseup();
-    });
+    $id('stroke_width').value = this.configObj.curConfig.initStroke.width;
+    $id('opacity').value = this.configObj.curConfig.initOpacity * 100;
 
     $('.push_button').mousedown(() => {
       if (!$(this).hasClass('disabled')) {
diff --git a/src/editor/index.html b/src/editor/index.html
index 576624aa..488ac19c 100644
--- a/src/editor/index.html
+++ b/src/editor/index.html
@@ -357,14 +357,7 @@
           <se-list-item id="linecap_square"><img title="Linecap: Square" src="./images/linecap_square.svg" height="22px"></img></se-list-item>
           <se-list-item id="linecap_round"><img title="Linecap: Round" src="./images/linecap_round.svg" height="22px"></img></se-list-item>
         </se-list>
-        <se-list id="opacity_dropdown" label="">
-          <se-list-item>0%</se-list-item>
-          <se-list-item>25%</se-list-item>
-          <se-list-item>50%</se-list-item>
-          <se-list-item>75%</se-list-item>
-          <se-list-item>100%</se-list-item>
-        </se-list>
-        <se-spin-input size="3" id="group_opacity" min=0 max=100 step=5 title="Change selected item opacity" label=""></se-spin-input>
+        <se-spin-input size="3" id="opacity" min=0 max=100 step=5 title="Change selected item opacity" src="./images/opacity.svg"></se-spin-input>
         <se-palette id="palette"></se-palette>
       </div> <!-- tools_bottom -->
     <div id="dialog_box">
diff --git a/src/editor/panels/BottomPanelHandlers.js b/src/editor/panels/BottomPanelHandlers.js
index 72d69554..43780e01 100644
--- a/src/editor/panels/BottomPanelHandlers.js
+++ b/src/editor/panels/BottomPanelHandlers.js
@@ -185,7 +185,7 @@ class BottomPanelHandlers {
     $id('stroke_style').addEventListener('change', (evt) => this.handleStrokeAttr.bind(this)('stroke-dasharray', evt));
     $id('stroke_linejoin').addEventListener('change', (evt) => this.handleStrokeAttr.bind(this)('stroke-linejoin', evt));
     $id('stroke_linecap').addEventListener('change', (evt) => this.handleStrokeAttr.bind(this)('stroke-linecap', evt));
-    $id('opacity_dropdown').addEventListener('change', this.handleOpacity.bind(this));
+    $id('opacity').addEventListener('change', this.handleOpacity.bind(this));
     $id('palette').addEventListener('change', this.handlePalette.bind(this));
     const {curConfig} = this.editor.configObj;
     $id('fill_color').setPaint(new $.jGraduate.Paint({alpha: 100, solidColor: curConfig.initFill.color}));
diff --git a/src/editor/svgedit.css b/src/editor/svgedit.css
index 10a47553..4661c3c6 100644
--- a/src/editor/svgedit.css
+++ b/src/editor/svgedit.css
@@ -734,10 +734,6 @@ ul li.current {
   -webkit-border-radius: 0;
 }
 
-#opacity_dropdown li {
-  width: 140px;
-}
-
  #copyright {
   text-align: right;
   padding-right: .3em;
diff --git a/src/editor/svgedit.js b/src/editor/svgedit.js
index 8ac43d4a..742ba63e 100644
--- a/src/editor/svgedit.js
+++ b/src/editor/svgedit.js
@@ -596,9 +596,6 @@ class Editor extends EditorStartup {
 
     // All elements including image and group have opacity
     if (!isNullish(this.selectedElement)) {
-      const opacPerc = (this.selectedElement.getAttribute('opacity') || 1.0) * 100;
-      $('#group_opacity').val(opacPerc);
-      $('#opac_slider').slider('option', 'value', opacPerc);
       $id('elem_id').value = this.selectedElement.id;
       $id('elem_class').value =
         (this.selectedElement.getAttribute('class') !== null) ? this.selectedElement.getAttribute('class') : '';