Merge pull request #75 from OptimistikSAS/issue/43

#43 With a small window, the look of the top toolbar is broken

src/editor/components/seButton.js

@@ -12,7 +12,7 @@ template.innerHTML = `
   {
     height: 24px;
     width: 24px;
-    margin: 2px 2px 4px;
+    margin: 2px 1px 4px;
     padding: 3px;
     background-color: var(--icon-bg-color);
     cursor: pointer;

src/editor/components/seExplorerButton.js

@@ -28,7 +28,7 @@ template.innerHTML = `
   .menu-button {
     height: 24px;
     width: 24px;
-    margin: 2px 2px 4px;
+    margin: 2px 1px 4px;
     padding: 3px;
     background-color: var(--icon-bg-color);
     cursor: pointer;

src/editor/components/seFlyingButton.js

@@ -27,7 +27,7 @@ template.innerHTML = `
   .menu-button {
     height: 24px;
     width: 24px;
-    margin: 2px 2px 4px;
+    margin: 2px 1px 4px;
     padding: 3px;
     background-color: var(--icon-bg-color);
     cursor: pointer;

src/editor/components/seMenu.js

@@ -12,7 +12,7 @@ template.innerHTML = `
     color: #fff;
   }
   elix-menu-button::part(popup-toggle) {
-    padding: 0.25em 0.60em !important
+    padding: 0.25em 0.30em !important
   }
   :host ::slotted([current]){
     background-color: var(--icon-bg-color-hover) !important;

src/editor/index.html

@@ -88,23 +88,31 @@
           <se-button id="tool_clone" title="Duplicate Element" shortcut="D" src="./images/clone.svg"></se-button>
           <se-button id="tool_delete" title="Delete Element" shortcut="Backspace" src="./images/delete.svg">
           </se-button>
+        </div>
+        <div class="toolset">
           <div class="tool_sep"></div>
           <se-button id="tool_move_top" title="Bring to Front" shortcut="Ctrl+Shift+]" src="./images/move_top.svg">
           </se-button>
           <se-button id="tool_move_bottom" title="Send to Back" shortcut="Ctrl+Shift+[" src="./images/move_bottom.svg">
           </se-button>
+        </div>
+        <div class="toolset">
           <se-button id="tool_topath" title="Convert to Path" src="./images/to_path.svg"></se-button>
           <se-button id="tool_reorient" title="Reorient path" src="./images/reorient.svg"></se-button>
           <se-button id="tool_make_link" title="Make (hyper)link" src="./images/globe_link.svg"></se-button>
+        </div>
+        <div class="toolset">
           <div class="tool_sep"></div>
           <se-input id="elem_id" data-attr="id" size="10" label="id" title="Identify the element"></se-input>
+        </div>
+        <div class="toolset">
           <se-input id="elem_class" data-attr="class" size="10" label="class" title="Element class"></se-input>
         </div>
         <se-spin-input size="3" id="angle" min=-180 max=180 step=5 src="./images/angle.svg"
           title="Change rotation angle"></se-spin-input>
         <se-spin-input size="2" id="blur" min=0 max=100 step=5 src="./images/blur.svg"
           title="Change gaussian blur value"></se-spin-input>
-        <se-list id="tool_position" title="Align Element to Page" label="">
+        <se-list id="tool_position" title="Align Element to Page" label="" width="22px" height="24px">
           <se-list-item id="tool_posleft" value="l">
             <img title="align left" src="./images/align_left.svg" height="22px">
           </se-list-item>

src/editor/panels/TopPanelHandlers.js

@@ -206,7 +206,7 @@ class TopPanelHandlers {
         });
 
         if (tagName === 'text') {
-          $('#text_panel').css('display', 'inline');
+          $('#text_panel').css('display', 'inline-block');
           $('#tool_font_size').css('display', 'inline');
           $id('tool_italic').pressed = this.svgCanvas.getItalic();
           $id('tool_bold').pressed = this.svgCanvas.getBold();

src/editor/svgedit.css

@@ -306,12 +306,12 @@ hr {
 
 #tools_top {
   position: absolute;
-  left: 105px;
+  left: 96px;
   top: 2px;
   min-height: 40px;
   border-bottom: none;
-  overflow: auto;
+  overflow: visible;
-  right:2px;
+  right:1px;
 }
 
 #tools_top .tool_sep {
@@ -320,20 +320,19 @@ hr {
 
 #tools_top > div > * {
   float: left;
-  margin-right: 1px;
 }
 #tools_top se-input {
-  margin-top: 6px;
+  margin-top: 5px;
-  height: 15px;
+  height: 34px;
 }
 #tools_top se-spin-input, #tools_top se-list {
   margin-top: 5px;
-  height: 15px;
+  height: 34px;
 }
 
 #tools_top se-dropdown-list {
   margin-top: 5px;
-  height: 15px;
+  height: 34px;
 }
 
 /*—————————————————————————————*/
@@ -726,3 +725,46 @@ ul li.current {
 .dropdown li.tool_button {
   width: 24px;
 }
+
+@media screen and (max-width:1250px) {
+  .expanded #palette_holder {
+    left: 560px;
+    overflow-x: scroll;
+    padding: 0 5px;
+    margin-top: 2px;
+    height: 30px;
+  }
+  #tools_top {
+    height: 71px;
+    overflow-x: scroll;
+  }
+  #workarea, #sidepanels {
+    top: 70px !important;
+  }
+  #rulers #ruler_corner,
+  #rulers #ruler_x, #tools_left {
+    top: 71px;
+  }
+
+  #rulers #ruler_y {
+    top: 86px;
+  }
+
+  #cur_context_panel {
+    top: 87px;
+  }
+
+  #selected_panel {
+    clear: right;
+  }
+}
+
+@media screen and (max-width:1100px) {
+  #tools_bottom:not(.expanded) #palette_holder {
+    left: 410px;
+    overflow-x: scroll;
+    padding: 0 5px;
+    margin-top: 2px;
+    height: 30px;
+  }
+}