fix #66

src/editor/components/seFlyingButton.js

@@ -107,7 +107,7 @@ export class FlyingButton extends HTMLElement {
    * @returns {any} observed
    */
   static get observedAttributes () {
-    return ['title', 'pressed', 'disabled'];
+    return ['title', 'pressed', 'disabled', 'opened'];
   }
   /**
    * @function attributeChangedCallback
@@ -132,6 +132,13 @@ export class FlyingButton extends HTMLElement {
         this.$overall.classList.remove('pressed');
       }
       break;
+    case 'opened':
+      if (newValue) {
+        this.$menu.classList.add('open');
+      } else {
+        this.$menu.classList.remove('open');
+      }
+      break;
     case 'disabled':
       if (newValue) {
         this.$div.classList.add('disabled');
@@ -178,6 +185,28 @@ export class FlyingButton extends HTMLElement {
       this.setAttribute('pressed', 'true');
     } else {
       this.removeAttribute('pressed', '');
+      // close also the menu if open
+      this.removeAttribute('opened');
+    }
+  }
+  /**
+   * @function get
+   * @returns {any}
+   */
+  get opened () {
+    return this.hasAttribute('opened');
+  }
+
+  /**
+   * @function set
+   * @returns {void}
+   */
+  set opened (value) {
+    // boolean value => existence = true
+    if (value) {
+      this.setAttribute('opened', 'opened');
+    } else {
+      this.removeAttribute('opened');
     }
   }
   /**
@@ -214,7 +243,7 @@ export class FlyingButton extends HTMLElement {
       switch (ev.target.nodeName) {
       case 'SE-FLYINGBUTTON':
         if (this.pressed) {
-          this.$menu.classList.toggle('open');
+          this.setAttribute('opened', 'opened');
         } else {
           // launch current action
           this.activeSlot.click();
@@ -231,7 +260,11 @@ export class FlyingButton extends HTMLElement {
         break;
       case 'DIV':
         // this is a click on the handle so let's open/close the menu.
-        this.$menu.classList.toggle('open');
+        if (this.opened) {
+          this.removeAttribute('opened');
+        } else {
+          this.setAttribute('opened', 'opened');
+        }
         break;
       default:
         // eslint-disable-next-line no-console

src/editor/components/seSpinInput.js

@@ -6,7 +6,7 @@ template.innerHTML = `
   <style>
   img {
     position: relative;
-    margin:0 2px 0 0;
+    right: -4px;
   }
   span {
     bottom: 1px;

src/editor/svgedit.css

@@ -311,6 +311,52 @@ hr {
   margin-top: 5px;
 }
 
+#tools_top > div > * {
+  float: left;
+  margin-right: 2px;
+}
+#tools_top se-input {
+  margin-top: 6px;
+  height: 15px;
+}
+#tools_top se-spin-input {
+  margin-top: 5px;
+  height: 15px;
+}
+
+#tools_top se-dropdown-list {
+  margin-top: 5px;
+  height: 15px;
+}
+
+/*—————————————————————————————*/
+
+#tools_bottom {
+  position: absolute;
+  left: 40px;
+  right: 0;
+  bottom: 0;
+  height: 33px;
+  overflow: visible;
+}
+
+#tools_bottom * {
+  float: left;
+  margin-right: 2px;
+}
+
+#tools_bottom se-spin-input {
+  float: left;
+  vertical-align: middle;
+  display:flex;
+  align-items: center;
+}
+#tools_bottom elix-dropdown-list{
+  width:22px;
+}
+
+/*—————————————————————————————*/
+
 #tools_left {
   position: absolute;
   border-right: none;
@@ -319,10 +365,12 @@ hr {
   left: 1px;
   margin-top: -2px;
   padding-left: 2px;
-  background: --main-bg-color; /* Needed so flyout icons don't appear on the left */
+  background: --main-bg-color;
   z-index: 4;
 }
 
+/*—————————————————————————————*/
+
 #workarea.wireframe #svgcontent * {
   fill: none;
   stroke: #000;
@@ -343,11 +391,6 @@ hr {
   fill: #FFF !important;
 }
 
-#tools_top div[id$="_panel"]:not(#editor_panel):not(#history_panel) {
-  display: none;
-  float: left;
-}
-
 #editor_panel, #history_panel {
   height: 34px;
   float: left;
@@ -396,20 +439,7 @@ div.toolset label span {
   display: inline-block;
 }
 
-#tools_top > div > * {
-  float: left;
-  margin-right: 2px;
-}
 
-#tools_top label {
-  margin-top: 0;
-  margin-left: 5px;
-}
-
-#tools_top se-input, #tools_top se-spin-input {
-  margin-top: 5px;
-  height: 15px;
-}
 
 input[type=text] {
   padding: 2px;
@@ -521,16 +551,6 @@ input[type=text] {
   height: 24px;
 }
 
-.icon_label {
-  float: left;
-  padding-top: 3px;
-  padding-right: 3px;
-  box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  -webkit-box-sizing: border-box;
-  height: 0;
-}
-
 .width_label {
   padding-right: 5px;
 }
@@ -545,29 +565,6 @@ input[type=text] {
   display: none;
 }
 
-#tools_bottom {
-  position: absolute;
-  left: 40px;
-  right: 0;
-  bottom: 0;
-  height: 33px;
-  overflow: visible;
-}
-
-#tools_bottom * {
-  float: left;
-  margin-right: 2px;
-}
-
-#tools_bottom se-spin-input {
-  float: left;
-  vertical-align: middle;
-  display:flex;
-  align-items: center;
-}
-#tools_bottom elix-dropdown-list{
-  width:22px;
-}
 .bottom-icon {
   width: 22px;
 }
@@ -718,24 +715,4 @@ ul li.current {
   z-index: 20001;
 }
 
-@media screen and (max-width: 1250px) {
-  #tools_top {
-    height: 71px;
-  }
-  #workarea, #sidepanels {
-    top: 70px;
-  }
-
-  #tools_left {
-    top: 71px;
-  }
-
-  #cur_context_panel {
-    top: 87px;
-  }
-
-  #selected_panel {
-    clear: right;
-  }
-}
 

src/editor/svgedit.js

@@ -1487,7 +1487,7 @@ class Editor extends EditorStartup {
 
     // Copy title for certain tool elements
     this.elems = {
-      '#stroke_color': '#tool_stroke .icon_label, #tool_stroke .color_block',
+      '#stroke_color': '#tool_stroke .color_block',
       '#fill_color': '#tool_fill label, #tool_fill .color_block',
       '#linejoin_miter': '#cur_linejoin',
       '#linecap_butt': '#cur_linecap'