#304 Add option to show draggable window area (#532)

* #304 Add option to show draggable window area

* Address merge conflicts

* Re-apply npm run manage-translations

Co-authored-by: Amine Mouafik <amine@mouafik.fr>

1 files changed, 29 insertions, 0 deletions

diff --git a/src/features/appearance/index.js b/src/features/appearance/index.js
index 6dcdfc986..a14d1461e 100644
--- a/src/features/appearance/index.js
+++ b/src/features/appearance/index.js
@@ -63,6 +63,22 @@ function generateServiceRibbonWidthStyle(widthStr, iconSizeStr) {
   `;
 }
 
+function generateShowDragAreaStyle(accentColor) {
+  return `
+    .sidebar {
+      padding-top: 0px !important;
+    }
+    .window-draggable {
+      position: initial;
+      background-color: ${accentColor};
+    }
+    #root {
+      /** Remove 22px from app height, otherwise the page will be to high */
+      height: calc(100% - 22px);
+    }
+  `;
+}
+
 function generateStyle(settings) {
   let style = '';
 
@@ -70,6 +86,7 @@ function generateStyle(settings) {
     accentColor,
     serviceRibbonWidth,
     iconSize,
+    showDragArea,
   } = settings;
 
   if (accentColor !== DEFAULT_APP_SETTINGS.accentColor) {
@@ -79,6 +96,9 @@ function generateStyle(settings) {
       || iconSize !== DEFAULT_APP_SETTINGS.iconSize) {
     style += generateServiceRibbonWidthStyle(serviceRibbonWidth, iconSize);
   }
+  if (showDragArea) {
+    style += generateShowDragAreaStyle(accentColor);
+  }
 
   return style;
 }
@@ -121,4 +141,13 @@ export default function initAppearance(stores) {
       updateStyle(settings.all.app);
     },
   );
+  // Update draggable area
+  reaction(
+    () => (
+      settings.all.app.showDragArea
+    ),
+    () => {
+      updateStyle(settings.all.app);
+    },
+  );
 }