opacity spin button

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')) {

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">

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

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;

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') : '';