Updated design of toggle area overlay

Signed-off-by: Philipp <p.koenig@blockbyte.de>

package.json

@@ -18,7 +18,7 @@
     "concat": "^1.0.3",
     "create-file": "^1.0.1",
     "del": "^4.0.0",
-    "eslint": "^5.15.0",
+    "eslint": "^5.15.1",
     "fs-extra": "^7.0.1",
     "glob-concat": "^1.0.1",
     "html-minifier": "^3.5.21",

src/_locales/de/messages.json

@@ -638,6 +638,9 @@
     "settings_toggle_area_height_desc": {
         "message": "Du kannst die H\u00f6he des Bereichts verringern, so dass die Sidebar nur ge\u00f6ffnet wird, wenn der Mauszeiger in diesen Bereich des Browserrands bewegt wird."
     },
+    "settings_toggle_area_drag_desc": {
+        "message": "Ziehen zum Bewegen"
+    },
     "settings_keyboard_shortcut_button": {
         "message": "Tastenkombination einrichten"
     },

src/_locales/en/messages.json

@@ -641,6 +641,9 @@
     "settings_toggle_area_height_desc": {
         "message": "You can reduce the height of the area, so the sidebar will only open when you move your cursor into that location of the edge of your browser window."
     },
+    "settings_toggle_area_drag_desc": {
+        "message": "Drag to move"
+    },
     "settings_keyboard_shortcut_button": {
         "message": "Set keyboard shortcut"
     },

src/html/settings.html

@@ -684,12 +684,15 @@ <h2></h2>
 
 <div class="modal toggleAreaModal">
     <h2 data-i18n="settings_toggle_area"></h2>
-    <div class="preview"></div>
+    <div class="preview">
+        <div></div>
+        <span data-i18n="settings_toggle_area_drag_desc"></span>
+    </div>
     <div class="formElement" data-type="range" data-name="toggleArea_width" data-min="1" data-max="50" data-unit="px" data-i18n="settings_toggle_area_width"></div>
     <div class="formElement" data-type="range" data-name="toggleArea_widthWindowed" data-min="1" data-max="100" data-unit="px" data-i18n="settings_toggle_area_width_windowed"></div>
     <div class="formElement" data-type="range" data-name="toggleArea_height" data-min="5" data-max="100" data-unit="%" data-i18n="settings_toggle_area_height"></div>
     <div class="hidden">
-        <div class="formElement" data-type="range" data-name="toggleArea_top" data-min="0" data-max="100" data-unit="%"></div>
+        <div class="formElement" data-type="range" data-name="toggleArea_top" data-min="0" data-step="0.1" data-max="100" data-unit="%"></div>
     </div>
     <p class="buttons">
         <a class="button save" data-i18n="settings_save"></a>

src/js/settings/sidebar.js

@@ -159,10 +159,11 @@
          */
         const initToggleAreaEvents = async () => {
             const modal = s.elm.body.children("div." + $.cl.settings.toggleArea.modal);
-            const preview = modal.children("div." + $.cl.settings.toggleArea.preview);
+            const previewWrapper = modal.children("div." + $.cl.settings.toggleArea.preview);
+            const preview = previewWrapper.children("div");
 
             $([s.elm.range.toggleArea_width, s.elm.range.toggleArea_height, s.elm.range.toggleArea_top]).on("change input", (e) => {
-                const minWidth = 14;
+                const minWidth = 19;
 
                 const val = {
                     width: +s.elm.range.toggleArea_width[0].value,
@@ -184,8 +185,8 @@
                         s.elm.range.toggleArea_top.trigger("change");
                     }
                 } else {
+                    previewWrapper.css("width", (minWidth + val.width) + "px");
                     preview.css({
-                        width: (minWidth + val.width) + "px",
                         height: (val.height) + "%",
                         top: val.top + "%"
                     });
@@ -244,7 +245,7 @@
             }).on("mousemove", (e) => { // drag move
                 if (preview.hasClass($.cl.settings.toggleArea.dragging) && e.which === 1) {
                     const pos = preview.data("pos");
-                    s.elm.range.toggleArea_top[0].value = ((pos.start + e.pageY - pos.y) / modal[0].offsetHeight) * 100;
+                    s.elm.range.toggleArea_top[0].value = ((pos.start + e.pageY - pos.y) / previewWrapper[0].offsetHeight) * 100;
                     s.elm.range.toggleArea_top.trigger("change");
                 }
             }, {passive: true});

src/scss/include/settings/_infos.scss

@@ -120,7 +120,7 @@ body > section#wrapper {
       h3 {
         display: inline-block;
         font-size: 120%;
-        font-weight: 400;
+        font-weight: $__fontWeightMedium;
         line-height: 150%;
         padding: 5px 0;
         margin: 20px 0 0 0;