Refactoring pickers, added sub menu "Window", added disableAnimation …

…support during toggling of navigation
ransome1 · Jan 6, 2024 · ec8667e · ec8667e
1 parent fbb3ce2
commit ec8667e
Show file tree

Hide file tree

Showing 12 changed files with 130 additions and 161 deletions.
diff --git a/package.json b/package.json
@@ -141,7 +141,7 @@
     "webpack-merge": "^5.9.0"
   },
   "build": {
-    "buildVersion": "34",
+    "buildVersion": "35",
     "asar": true,
     "asarUnpack": "**\\*.{node,dll}",
     "files": [

diff --git a/src/main/main.tsx b/src/main/main.tsx
@@ -168,7 +168,7 @@ const handleWindowAllClosed = () => {
   const tray = configStorage.get('tray');
   if(process.platform !== 'darwin' && !tray) {
     app.quit();
-  } else if(!process.mas && process.platform === 'darwin' && tray) {
+  } else if(process.platform === 'darwin' && tray) {
     app.dock?.hide();
   } else {
     mainWindow?.hide();

diff --git a/src/main/modules/Menu.tsx b/src/main/modules/Menu.tsx
@@ -1,6 +1,6 @@
 import { app, Menu, dialog, shell } from 'electron';
 import { setFile } from './File/File';
-import { mainWindow } from '../main';
+import { mainWindow, handleCreateWindow } from '../main';
 import { openFile, createFile } from './File/Dialog';
 import { handleRequestArchive } from './File/Archive';
 import { configStorage, filterStorage } from '../config';
@@ -88,13 +88,7 @@ function createMenu(files: FileObject[]) {
                 setFile(index);
               },
             }))
-          : []),
-        { type: 'separator' },
-        {
-          label: 'Close window',
-          accelerator: 'CmdOrCtrl+W',
-          role: 'close',
-        },
+          : [])
       ],
     },
     {
@@ -112,14 +106,23 @@ function createMenu(files: FileObject[]) {
     {
       label: 'View',
       submenu: [
-        {
+      ...(files?.length > 0
+      ? [{
           label: 'Toggle drawer',
           accelerator: 'CmdOrCtrl+B',
           click: () => {
             const isDrawerOpen = configStorage.get('isDrawerOpen');
             configStorage.set('isDrawerOpen', !isDrawerOpen);
           },
         },
+        {
+          label: 'Toggle file tabs',
+          click: () => {
+            const showFileTabs = configStorage.get('showFileTabs');
+            configStorage.set('showFileTabs', !showFileTabs);
+          },
+        }]
+        : []),
         {
           label: 'Toggle navigation',
           accelerator: 'Ctrl+Alt+H',
@@ -128,13 +131,6 @@ function createMenu(files: FileObject[]) {
             configStorage.set('isNavigationOpen', !isNavigationOpen);
           },
         },
-        {
-          label: 'Toggle file tabs',
-          click: () => {
-            const showFileTabs = configStorage.get('showFileTabs');
-            configStorage.set('showFileTabs', !showFileTabs);
-          },
-        },
         {
           label: 'Toggle theme',
           accelerator: 'Ctrl+Alt+D',
@@ -145,51 +141,70 @@ function createMenu(files: FileObject[]) {
         },
       ],
     },
+    ...(files?.length > 0
+      ? [{
+          label: 'Todos',
+          submenu: [
+            {
+              label: 'Add new todo',
+              accelerator: 'CmdOrCtrl+N',
+              click: () => {
+                mainWindow?.webContents.send('isDialogOpen');
+              },
+            },
+            {
+              label: 'Find',
+              accelerator: 'CmdOrCtrl+F',
+              click: () => {
+                const isSearchOpen = configStorage.get('isSearchOpen');
+                configStorage.set('isSearchOpen', !isSearchOpen);
+              },
+            },
+            {
+              label: 'Toggle completed',
+              accelerator: 'Ctrl+H',
+              click: async () => {
+                const showCompleted = configStorage.get('showCompleted');
+                configStorage.set('showCompleted', !showCompleted);
+              },
+            },
+            {
+              label: 'Reset filters',
+              accelerator: 'CmdOrCtrl+0',
+              click: async () => {
+                filterStorage.set('filters', {});
+              },
+            },
+            {
+              label: 'Archive completed todos',
+              accelerator: 'Ctrl+Alt+A',
+              click: () => {
+                handleRequestArchive();
+              },
+            },
+            {
+              role: 'reload',
+              visible: false,
+            },
+          ],
+        }]
+    : []),
     {
-      label: 'Todos',
+      label: 'Window',
       submenu: [
         {
-          label: 'Add new todo',
-          accelerator: 'CmdOrCtrl+N',
-          click: () => {
-            mainWindow!.webContents.send('isDialogOpen');
-          },
-        },
-        {
-          label: 'Find',
-          accelerator: 'CmdOrCtrl+F',
-          click: () => {
-            const isSearchOpen = configStorage.get('isSearchOpen');
-            configStorage.set('isSearchOpen', !isSearchOpen);
-          },
-        },
-        {
-          label: 'Toggle completed',
-          accelerator: 'Ctrl+H',
-          click: async () => {
-            const showCompleted = configStorage.get('showCompleted');
-            configStorage.set('showCompleted', !showCompleted);
-          },
-        },
-        {
-          label: 'Reset filters',
-          accelerator: 'CmdOrCtrl+0',
-          click: async () => {
-            filterStorage.set('filters', {});
-          },
+          label: 'Close window',
+          accelerator: 'CmdOrCtrl+W',
+          role: 'close',
         },
+        { type: 'separator' },
         {
-          label: 'Archive completed todos',
-          accelerator: 'Ctrl+Alt+A',
+          label: 'sleek',
           click: () => {
-            handleRequestArchive();
-          },
-        },
-        {
-          role: 'reload',
-          visible: false,
-        },
-      ],
+            handleCreateWindow();
+          }
+        }
+      ]
     },
     {
       label: 'Help',

diff --git a/src/renderer/App.scss b/src/renderer/App.scss
@@ -27,7 +27,6 @@ body {
       display: flex;
       flex-direction: row;
       margin-left: 5em;
-      transition: margin-left 0.3s ease;
       header {
         height: 2.5em;
         display: flex;
@@ -45,6 +44,9 @@ body {
           left: -5em;
         }
       }
+      &.hideNavigation.disableAnimations {
+        transition: none;
+      }
       &.darkTheme {
         button.showNavigation {
           background: $darker-grey;

diff --git a/src/renderer/Dialog/AutoSuggest.tsx b/src/renderer/Dialog/AutoSuggest.tsx
@@ -124,11 +124,6 @@ const AutoSuggest: React.FC<Props> = ({
     onKeyDown: handleKeyDown,
     'test-id': 'dialog-autosuggest-textfield',
   };
-
-  const containerStyle = {
-    width: textFieldRef.current?.offsetWidth + 28 || 'auto',
-  };
-
   useEffect(() => {
     textFieldRef.current?.focus();
   }, [textFieldRef]);
@@ -140,7 +135,7 @@ const AutoSuggest: React.FC<Props> = ({
           <TextField {...inputProps} multiline className="input" />
         )}
         renderSuggestionsContainer={({ containerProps, children }) => (
-          <Box {...containerProps} style={containerStyle}>
+          <Box {...containerProps} style={{ width: textFieldRef.current?.offsetWidth ? textFieldRef.current.offsetWidth + 28 : 'auto' }}>
             {children}
           </Box>
         )}

diff --git a/src/renderer/Dialog/DatePicker.tsx b/src/renderer/Dialog/DatePicker.tsx
@@ -6,43 +6,29 @@ import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import dayjs from 'dayjs';
 import './DatePicker.scss';
 
-const { ipcRenderer } = window.api;
-
 interface Props extends WithTranslation {
   date: string | null;
   type: string;
   settings: Settings;
-  textFieldValue: string;
-  todoObject: TodoObject | null;
+  handleChange: function;
   t: typeof i18n.t;
 }
 
 const DatePickerComponent: React.FC<Props> = ({
   date,
   type,
   settings,
-  textFieldValue,
-  todoObject,
+  handleChange,
   t,
 }) => {
-
-  const handleChange = (date: dayjs.Dayjs | null) => {
-    try {
-      const dateString = (date) ? dayjs(date).format('YYYY-MM-DD') : null;
-      ipcRenderer.send('updateTodoObject', todoObject?.id, textFieldValue, type, dateString);
-    } catch(error: any) {
-      console.error(error);
-    }
-  };
-
   return (
     <LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale={settings.language}>
       <DatePicker
         className="datePicker"
         format="YYYY-MM-DD"
         label={t(`todoDialog.datePicker.${type}`)}
         value={date ? dayjs(date) : null}
-        onChange={(date) => handleChange(date)}
+        onChange={(date) => handleChange(type, date)}
         // data-testid={`dialog-picker-date-${type}`}
         // InputProps={{ 'data-testid': `dialog-picker-date-${type}` }}
         slotProps={{

diff --git a/src/renderer/Dialog/Dialog.tsx b/src/renderer/Dialog/Dialog.tsx
@@ -1,6 +1,7 @@
 import React, { useState, useEffect, memo } from 'react';
 import { Button, Dialog, DialogContent, DialogActions, AlertColor } from '@mui/material';
 import { withTranslation, WithTranslation } from 'react-i18next';
+import dayjs from 'dayjs';
 import AutoSuggest from './AutoSuggest';
 import PriorityPicker from './PriorityPicker';
 import DatePicker from './DatePicker';
@@ -87,7 +88,23 @@ const DialogComponent: React.FC<Props> = memo(({
       setRecurrence(todoObject?.rec || null);
       setPomodoro(todoObject?.pm || 0);
     }
-  }
+  };
+
+  const handleChange = (type: string, value: string) => {
+    try {
+      let updatedValue;
+      if(type === 'due' || type === 't') {
+        updatedValue = (value) ? dayjs(value).format('YYYY-MM-DD') : null;
+      } else if(type === 'pm') {
+        updatedValue = (value === '0') ? null : value;
+      } else {
+        updatedValue = value;
+      }
+      ipcRenderer.send('updateTodoObject', todoObject?.id, textFieldValue, type, updatedValue);
+    } catch(error: any) {
+      console.error(error);
+    }
+  };
 
   useEffect(() => {
     if(todoObject) {
@@ -129,32 +146,27 @@ const DialogComponent: React.FC<Props> = memo(({
         />
         <PriorityPicker
           priority={priority}
-          textFieldValue={textFieldValue}
-          todoObject={todoObject}
+          handleChange={handleChange}
         />
         <DatePicker
           date={dueDate}
           type="due"
           settings={settings}
-          textFieldValue={textFieldValue}
-          todoObject={todoObject}
+          handleChange={handleChange}
         />
         <DatePicker
           date={thresholdDate}
           type="t"
           settings={settings}
-          textFieldValue={textFieldValue}
-          todoObject={todoObject}
+          handleChange={handleChange}
         />
         <RecurrencePicker
           recurrence={recurrence}
-          textFieldValue={textFieldValue}
-          todoObject={todoObject}
+          handleChange={handleChange}
         />
         <PomodoroPicker
           pomodoro={pomodoro}
-          textFieldValue={textFieldValue}
-          todoObject={todoObject}
+          handleChange={handleChange}
         />
       </DialogContent>
       <DialogActions>

diff --git a/src/renderer/Dialog/PomodoroPicker.tsx b/src/renderer/Dialog/PomodoroPicker.tsx
@@ -3,36 +3,22 @@ import { FormControl, TextField } from '@mui/material';
 import { ReactComponent as TomatoIconDuo } from '../../../assets/icons/tomato-duo.svg'
 import './PomodoroPicker.scss';
 
-const { ipcRenderer } = window.api;
-
-interface Props {
+interface PomodoroPickerProps {
   pomodoro: number | string;
-  textFieldValue: string;
-  todoObject: TodoObject | null;
+  handleChange: function;
 }
 
-const PomodoroPicker: React.FC<Props> = ({
+const PomodoroPicker: React.FC<PomodoroPickerProps> = ({
   pomodoro,
-  textFieldValue,
-  todoObject,
+  handleChange,
 }) => {
-
-  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    try {
-      const value = (event.target.value === '0') ? null : event.target.value;
-      ipcRenderer.send('updateTodoObject', todoObject?.id, textFieldValue, 'pm', value);
-    } catch(error: any) {
-      console.error(error);
-    }
-  };
-
   return (
       <FormControl id="pomodoroPicker">
         <TextField
           id="pomodoroPicker"
           label={<TomatoIconDuo />}
           type="number"
-          onChange={handleChange}
+          onChange={(event) => handleChange('pm', event.target.value)}
           value={pomodoro}
           data-testid="dialog-picker-pomodoro"
           inputProps={{