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

7 files changed, 59 insertions, 3 deletions

diff --git a/src/components/settings/settings/EditSettingsForm.js b/src/components/settings/settings/EditSettingsForm.js
index 1a36cedb5..055831e3b 100644
--- a/src/components/settings/settings/EditSettingsForm.js
+++ b/src/components/settings/settings/EditSettingsForm.js
@@ -401,6 +401,8 @@ export default @observer class EditSettingsForm extends Component {
             <Toggle field={form.$('showDisabledServices')} />
             <Toggle field={form.$('showMessageBadgeWhenMuted')} />
 
+            {isMac && <Toggle field={form.$('showDragArea')} />}
+
             <Hr />
 
             {isMac && <Toggle field={form.$('adaptableDarkMode')} />}
diff --git a/src/config.js b/src/config.js
index f617555df..cfb9a3658 100644
--- a/src/config.js
+++ b/src/config.js
@@ -95,6 +95,7 @@ export const DEFAULT_APP_SETTINGS = {
   privateNotifications: false,
   showDisabledServices: true,
   showMessageBadgeWhenMuted: true,
+  showDragArea: false,
   enableSpellchecking: true,
   spellcheckerLanguage: 'en-us',
   darkMode: process.platform === 'darwin' ? nativeTheme.shouldUseDarkColors : false, // We can't use refs from `./environment` at this time
diff --git a/src/containers/settings/EditSettingsScreen.js b/src/containers/settings/EditSettingsScreen.js
index 7bf721bb0..fd6b334f1 100644
--- a/src/containers/settings/EditSettingsScreen.js
+++ b/src/containers/settings/EditSettingsScreen.js
@@ -146,6 +146,10 @@ const messages = defineMessages({
     id: 'settings.app.form.showMessagesBadgesWhenMuted',
     defaultMessage: '!!!Show unread message badge when notifications are disabled',
   },
+  showDragArea: {
+    id: 'settings.app.form.showDragArea',
+    defaultMessage: '!!!Show draggable area on window',
+  },
   enableSpellchecking: {
     id: 'settings.app.form.enableSpellchecking',
     defaultMessage: '!!!Enable spell checking',
@@ -223,6 +227,7 @@ export default @inject('stores', 'actions') @observer class EditSettingsScreen e
         iconSize: settingsData.iconSize,
         accentColor: settingsData.accentColor,
         showMessageBadgeWhenMuted: settingsData.showMessageBadgeWhenMuted,
+        showDragArea: settingsData.showDragArea,
         enableSpellchecking: settingsData.enableSpellchecking,
         spellcheckerLanguage: settingsData.spellcheckerLanguage,
         beta: settingsData.beta, // we need this info in the main process as well
@@ -422,6 +427,11 @@ export default @inject('stores', 'actions') @observer class EditSettingsScreen e
           value: settings.all.app.showMessageBadgeWhenMuted,
           default: DEFAULT_APP_SETTINGS.showMessageBadgeWhenMuted,
         },
+        showDragArea: {
+          label: intl.formatMessage(messages.showDragArea),
+          value: settings.all.app.showDragArea,
+          default: DEFAULT_APP_SETTINGS.showDragArea,
+        },
         enableSpellchecking: {
           label: intl.formatMessage(messages.enableSpellchecking),
           value: !this.props.stores.user.data.isPremium && !spellcheckerConfig.isIncludedInCurrentPlan ? false : settings.all.app.enableSpellchecking,
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);
+    },
+  );
 }
diff --git a/src/i18n/locales/defaultMessages.json b/src/i18n/locales/defaultMessages.json
index e6b457515..ea72edbd5 100644
--- a/src/i18n/locales/defaultMessages.json
+++ b/src/i18n/locales/defaultMessages.json
@@ -6725,6 +6725,19 @@
         }
       },
       {
+        "defaultMessage": "!!!Toggle Dark Mode",
+        "end": {
+          "column": 3,
+          "line": 117
+        },
+        "file": "src/lib/Menu.js",
+        "id": "menu.view.toggleDarkMode",
+        "start": {
+          "column": 18,
+          "line": 114
+        }
+      },
+      {
         "defaultMessage": "!!!Toggle Todos Developer Tools",
         "end": {
           "column": 3,
diff --git a/src/i18n/locales/en-US.json b/src/i18n/locales/en-US.json
index feb6ef124..14353e74e 100644
--- a/src/i18n/locales/en-US.json
+++ b/src/i18n/locales/en-US.json
@@ -157,8 +157,8 @@
   "menu.view.reloadFranz": "Reload Ferdi",
   "menu.view.reloadService": "Reload Service",
   "menu.view.resetZoom": "Actual Size",
-  "menu.view.toggleDevTools": "Toggle Developer Tools",
   "menu.view.toggleDarkMode": "Toggle Dark Mode",
+  "menu.view.toggleDevTools": "Toggle Developer Tools",
   "menu.view.toggleFullScreen": "Toggle Full Screen",
   "menu.view.toggleServiceDevTools": "Toggle Service Developer Tools",
   "menu.view.toggleTodosDevTools": "Toggle Todos Developer Tools",
@@ -512,4 +512,4 @@
   "workspaceDrawer.workspaceFeatureInfo": "<p>Ferdi Workspaces let you focus on what’s important right now. Set up different sets of services and easily switch between them at any time.</p><p>You decide which services you need when and where, so we can help you stay on top of your game - or easily switch off from work whenever you want.</p>",
   "workspaceDrawer.workspacesSettingsTooltip": "Edit workspaces settings",
   "workspaces.switchingIndicator.switchingTo": "Switching to"
-}
+}
\ No newline at end of file
diff --git a/src/i18n/locales/whitelist_en-US.json b/src/i18n/locales/whitelist_en-US.json
index fe51488c7..32960f8ce 100644
--- a/src/i18n/locales/whitelist_en-US.json
+++ b/src/i18n/locales/whitelist_en-US.json
@@ -1 +1,2 @@
-[]
+[
+]
\ No newline at end of file