Fixed line break issue on Windows, refactored some CSS, added icons t…

…o splash screens, added keyboard shortcut to toggle settings
ransome1 · Sep 13, 2023 · 6ffec30 · 6ffec30
1 parent a231145
commit 6ffec30
Show file tree

Hide file tree

Showing 15 changed files with 94 additions and 54 deletions.
diff --git a/release/app/package.json b/release/app/package.json
@@ -1,6 +1,6 @@
 {
   "name": "sleek",
-  "version": "2.0.0-dev9",
+  "version": "2.0.0-dev10",
   "description": "todo.txt manager for Linux, Windows and MacOS, free and open-source (FOSS)",
   "synopsis": "todo.txt manager for Linux, Windows and MacOS, free and open-source (FOSS)",
   "keywords": [

diff --git a/src/__tests__/__mock__/recurrence.txt b/src/__tests__/__mock__/recurrence.txt
@@ -1,7 +1,7 @@
 
-2023-09-12 Line 1 rec:1d due:2023-09-13
-2023-09-12 Line 1 rec:w due:2023-09-19
-2023-09-12 Line 1 rec:2m due:2023-11-12
-2023-09-12 Line 1 rec:+1d due:2023-09-14
-2023-09-12 Line 1 rec:7w due:2023-10-31
+2023-09-13 Line 1 rec:1d due:2023-09-14
+2023-09-13 Line 1 rec:w due:2023-09-20
+2023-09-13 Line 1 rec:2m due:2023-11-13
+2023-09-13 Line 1 rec:+1d due:2023-09-15
+2023-09-13 Line 1 rec:7w due:2023-11-01
 2023-07-21 Line 1 rec:+1b due:2023-07-24
diff --git a/src/__tests__/__mock__/test.txt b/src/__tests__/__mock__/test.txt
@@ -1,5 +1,5 @@
 Line 1
 Edited line
 New line
-2023-09-12 New line with creation date
+2023-09-13 New line with creation date
 New line with relative threshold date t:June 3rd, 2005
diff --git a/src/main/config.ts b/src/main/config.ts
@@ -41,6 +41,7 @@ const defaultConfigData = {
   shouldUseDarkColors: false,
   notificationsAllowed: true,
   showFileTabs: true,
+  isNavigationOpen: true,
 };
 
 const userDataDirectory = path.join(app.getPath('userData'), 'userData' + app.getVersion());
@@ -75,7 +76,7 @@ filterStorage.onDidChange('filters' as never, async () => {
   mainWindow!.webContents.send('requestData', todoObjects, attributes, headers, filters);
 });
 
-configStorage.onDidChange('files', (files: File[] | undefined) => {
+configStorage.onDidChange('files', async (files: File[] | undefined) => {
   if (files) {
     buildMenu(files);
     mainWindow!.webContents.send('updateFiles', files);

diff --git a/src/main/menu.ts b/src/main/menu.ts
@@ -30,6 +30,14 @@ function buildMenu(files: File[]) {
             dialog.showMessageBox(options);
           },
         },
+        {
+          label: 'Settings',
+          accelerator: 'CmdOrCtrl+.',
+          click: () => {
+            mainWindow!.webContents.send('setIsSettingsOpen');
+          },
+        },
+        { type: 'separator' },
         {
           label: 'Hide',
           accelerator: isMac ? 'Cmd+H' : 'Win+D',
@@ -91,14 +99,27 @@ function buildMenu(files: File[]) {
     },
     {
       label: 'View',
-      submenu: [        
+      submenu: [
+        {
+          label: 'Toggle drawer',
+          accelerator: 'CmdOrCtrl+B',
+          click: () => {
+            mainWindow!.webContents.send('setIsDrawerOpen');
+          },
+        },        
         {
           label: 'Toggle navigation',
           accelerator: 'Ctrl+Alt+H',
           click: () => {
-            mainWindow!.webContents.send('setIsNavigationHidden');
+            mainWindow!.webContents.send('setIsNavigationOpen');
           },
         },
+        {
+          label: 'Toggle file tabs',
+          click: () => {
+            mainWindow!.webContents.send('setShowFileTabs');
+          },
+        },        
       ],
     },    
     {

diff --git a/src/main/modules/CreateTodoObjects.ts b/src/main/modules/CreateTodoObjects.ts
@@ -3,11 +3,12 @@ import { handleNotification } from './HandleNotification';
 import { TodoObject, DateAttributes } from '../util';
 import { extractSpeakingDates } from './Date';
 import dayjs from 'dayjs';
+import os from 'os';
 
 let lines: string[];
 
 function createTodoObjects(fileContent: string): TodoObject[] {
-  lines = fileContent.split('\n');
+  lines = fileContent.split(os.EOL);
   const todoObjects: TodoObject[] = lines
     .map((line, i) => {
       try {

diff --git a/src/main/modules/Ipc.ts b/src/main/modules/Ipc.ts
@@ -15,11 +15,9 @@ async function handleDataRequest(event: IpcMainEvent, searchString: string): voi
 async function handleWriteTodoToFile(event: IpcMainEvent, id: number, string: string, state: boolean | undefined, remove: boolean): Promise<void> {
   try {
     let updatedString: string = string;
-
     if (state !== undefined && id >= 0 && !remove) {
       updatedString = await changeCompleteState(string, state);
     }
-
     writeTodoObjectToFile(id, updatedString, remove).then(function (response) {
       console.log('ipcEvents.ts:', response);
     }).catch((error) => {
@@ -41,6 +39,7 @@ function handleStoreGetConfig(event: IpcMainEvent, value: string): void {
 
 function handleStoreSetConfig(event: IpcMainEvent, key: string, value: any): void {
   try {
+    if(!key) return false;
     configStorage.set(key, value);
     console.log(`ipcEvents.ts: Set ${key} to ${value}`);
   } catch (error) {

diff --git a/src/main/modules/ProcessTodoObjects.ts b/src/main/modules/ProcessTodoObjects.ts
@@ -82,7 +82,7 @@ function sortAndGroupTodoObjects(todoObjects: TodoObject[], sorting: Sorting[]):
     return grouped;
   }
 
-  function sortAndGroupObjects(objects: any[], sortIndex: number): any {
+  function sortAndGroupObjects(objects: any[], sortIndex: number, sorting: Sorting[]): any {
     if (sortIndex >= sorting.length) {
       return objects;
     }
@@ -98,13 +98,13 @@ function sortAndGroupTodoObjects(todoObjects: TodoObject[], sorting: Sorting[]):
 
     const sortedGroups: { [key: string]: any } = {};
     for (const key of sortedKeys) {
-      sortedGroups[key] = sortAndGroupObjects(grouped[key], sortIndex + 1);
+      sortedGroups[key] = sortAndGroupObjects(grouped[key], sortIndex + 1, sorting);
     }
     return sortedGroups;
   }
 
   const sortedTodoObjects = Object.values(todoObjects).sort(sortObjectsBySorting);
-  const sortedAndGrouped = sortAndGroupObjects(sortedTodoObjects, 0);
+  const sortedAndGrouped = sortAndGroupObjects(sortedTodoObjects, 0, sorting);
   return sortedAndGrouped;
 }
 

diff --git a/src/main/preload.ts b/src/main/preload.ts
@@ -12,7 +12,9 @@ export type Channels =
   | 'storeSetConfig'
   | 'storeSetFilters'
   | 'archiveTodos'
-  | 'shouldUseDarkColors';
+  | 'setIsNavigationOpen'
+  | 'setShowFileTabs'
+  | 'setIsSettingsOpen';
 
 interface ElectronStore {
   get: <T>(key: string) => T;

diff --git a/src/renderer/App.tsx b/src/renderer/App.tsx
@@ -11,6 +11,7 @@ import Search from './Search';
 import TodoDialog from './TodoDialog';
 import ArchiveTodos from './ArchiveTodos';
 import ToolBar from './ToolBar';
+import { Sorting } from '../main/util';
 import './App.scss';
 
 const ipcRenderer = window.electron.ipcRenderer;
@@ -21,25 +22,24 @@ const App = () => {
   const [isDrawerOpen, setIsDrawerOpen] = useState<boolean>(store.get('isDrawerOpen') || false);
   const [isSearchOpen, setIsSearchOpen] = useState<boolean>(store.get('isSearchOpen') || false);
   const [splashScreen, setSplashScreen] = useState<string | null>(null);
-  const [drawerParameter, setDrawerParameter] = useState<string | null>();
   const [snackBarOpen, setSnackBarOpen] = useState<boolean>(false);
-  const [fileTabs, setFileTabs] = useState<boolean>(true);
   const [snackBarContent, setSnackBarContent] = useState<string | null>(null);
   const [snackBarSeverity, setSnackBarSeverity] = useState<string | null>(null);
   const [dialogOpen, setDialogOpen] = useState(false);
-  const [todoObject, setTodoObject] = useState(null);
   const [searchString, setSearchString] = useState(null);
   const [todoObjects, setTodoObjects] = useState<object>(null);
+  const [todoObject, setTodoObject] = useState(null);
   const [headers, setHeaders] = useState<object>(null);
   const [filters, setFilters] = useState<object>({});
   const [attributes, setAttributes] = useState<object>({});
   const [textFieldValue, setTextFieldValue] = useState('');
-  const [sorting, setSorting] = useState<string[]>(store.get('sorting') || null);
+  const [sorting, setSorting] = useState<Sorting>(store.get('sorting') || null);
   const searchFieldRef = useRef(null);
-  const [isNavigationHidden, setIsNavigationHidden] = useState<boolean>(store.get('isNavigationHidden') || false);
+  const [isNavigationOpen, setIsNavigationOpen] = useState<boolean>(store.get('isNavigationOpen'));
   const [colorTheme, setColorTheme] = useState<boolean>(store.get('colorTheme') || 'system');
   const [shouldUseDarkColors, setShouldUseDarkColors] = useState<boolean>(store.get('shouldUseDarkColors') || false);
   const [showFileTabs, setShowFileTabs] = useState<boolean>(store.get('showFileTabs'));
+  const [isSettingsOpen, setIsSettingsOpen] = useState(false);
 
   const responseHandler = function(response) {
     if (response instanceof Error) {
@@ -62,7 +62,7 @@ const App = () => {
   };
 
   const handleUpdateFiles = (files: object) => {
-    setFiles(files)
+    setFiles(files);
   };
 
   const handleUpdateSorting = (sorting: object) => {
@@ -73,17 +73,25 @@ const App = () => {
     setIsSearchOpen(prevIsSearchOpen => !prevIsSearchOpen);
   };
 
-  const handleSetIsNavigationHidden = () => {
-    setIsNavigationHidden(prevIsNavigationHidden => !prevIsNavigationHidden);
+  const handleSetIsNavigationOpen = () => {
+    setIsNavigationOpen(prevIsNavigationOpen => !prevIsNavigationOpen);
   };
 
   const handleSetShouldUseDarkColors = (shouldUseDarkColors: boolean) => {
     setShouldUseDarkColors(shouldUseDarkColors);
   };
 
-  useEffect(() => {
-    store.set('isNavigationHidden', isNavigationHidden)
-  }, [isNavigationHidden]);
+  const handleSetShowFileTabs = () => {
+    setShowFileTabs(prevShowFileTabs => !prevShowFileTabs);
+  };
+
+  const handleSetIsDrawerOpen = () => {
+    setIsDrawerOpen(prevIsDrawerOpen => !prevIsDrawerOpen);
+  };
+
+  const handleSetIsSettingsOpen = () => {
+    setIsSettingsOpen(prevIsSettingsOpen => !prevIsSettingsOpen);
+  };  
 
   useEffect(() => {
     if(!headers) return;
@@ -119,6 +127,10 @@ const App = () => {
     store.set('isSearchOpen', isSearchOpen)
   }, [isSearchOpen]);
 
+  useEffect(() => {
+    store.set('', isNavigationOpen)
+  }, [isNavigationOpen]);
+
   useEffect(() => {
     if(!snackBarContent) return;
     setSnackBarOpen(true);
@@ -137,33 +149,35 @@ const App = () => {
     ipcRenderer.on('updateFiles', handleUpdateFiles);
     ipcRenderer.on('updateSorting', handleUpdateSorting);
     ipcRenderer.on('setIsSearchOpen', handleSetIsSearchOpen);
-    ipcRenderer.on('setIsNavigationHidden', handleSetIsNavigationHidden);
-    ipcRenderer.on('shouldUseDarkColors', handleSetShouldUseDarkColors);
+    ipcRenderer.on('setIsNavigationOpen', handleSetIsNavigationOpen);
+    ipcRenderer.on('setShouldUseDarkColors', handleSetShouldUseDarkColors);
+    ipcRenderer.on('setShowFileTabs', handleSetShowFileTabs);
+    ipcRenderer.on('setIsDrawerOpen', handleSetIsDrawerOpen);
+    ipcRenderer.on('setIsSettingsOpen', handleSetIsSettingsOpen);
   }, []);
 
   return (
     <ThemeProvider theme={shouldUseDarkColors ? lightTheme : lightTheme}>
       <CssBaseline />
-      <div className={isNavigationHidden ? 'flexContainer hideNavigation' : 'flexContainer'}>
+      <div className={isNavigationOpen ? 'flexContainer' : 'flexContainer hideNavigation'}>
         <NavigationComponent
           isDrawerOpen={isDrawerOpen}
           setIsDrawerOpen={setIsDrawerOpen}
-          drawerParameter={drawerParameter}
-          setDrawerParameter={setDrawerParameter}
           setDialogOpen={setDialogOpen}
           files={files}
           headers={headers}
-          isNavigationHidden={isNavigationHidden}
-          setIsNavigationHidden={setIsNavigationHidden}
+          isNavigationOpen={isNavigationOpen}
+          setIsNavigationOpen={setIsNavigationOpen}
           colorTheme={colorTheme}
           setColorTheme={setColorTheme}
           showFileTabs={showFileTabs}
           setShowFileTabs={setShowFileTabs}
+          isSettingsOpen={isSettingsOpen}
+          setIsSettingsOpen={setIsSettingsOpen}
         />
         <DrawerComponent 
           isDrawerOpen={isDrawerOpen}
           setIsDrawerOpen={setIsDrawerOpen}
-          drawerParameter={drawerParameter}
           attributes={attributes}
           filters={filters}
           sorting={sorting}

diff --git a/src/renderer/Navigation.js b/src/renderer/Navigation.js
@@ -7,9 +7,7 @@ import './Navigation.scss';
 
 const ipcRenderer = window.electron.ipcRenderer;
 
-const NavigationComponent = ({ isDrawerOpen, setIsDrawerOpen, drawerParameter, setDrawerParameter, setDialogOpen, files, headers, isNavigationHidden, setIsNavigationHidden, colorTheme, setColorTheme, showFileTabs, setShowFileTabs }) => {
-  const [isSettingsOpen, setIsSettingsOpen] = useState(false);
-
+const NavigationComponent = ({ isSettingsOpen, setIsSettingsOpen, isDrawerOpen, setIsDrawerOpen, setDialogOpen, files, headers, isNavigationOpen, setIsNavigationOpen, colorTheme, setColorTheme, showFileTabs, setShowFileTabs }) => {
   const openSettings = () => {
     setIsSettingsOpen(true);
   };
@@ -20,15 +18,14 @@ const NavigationComponent = ({ isDrawerOpen, setIsDrawerOpen, drawerParameter, s
 
   const handleButtonClicked = (parameter) => {
     setIsDrawerOpen(prevIsDrawerOpen => !prevIsDrawerOpen)
-    setDrawerParameter(parameter)
   };
 
   const handleOpenFile = () => {
     ipcRenderer.send('openFile');
   };
 
-  const hideNavigation = () => {
-    setIsNavigationHidden(prevIsNavigationHidden => !prevIsNavigationHidden);
+  const toggleNavigation = () => {
+    setIsNavigationOpen(prevIsNavigationOpen => !prevIsNavigationOpen);
   };
 
   useEffect(() => {
@@ -37,10 +34,6 @@ const NavigationComponent = ({ isDrawerOpen, setIsDrawerOpen, drawerParameter, s
         setDialogOpen(true);
         return;
       }
-      if ((event.metaKey || event.ctrlKey) && event.key === 'b') {
-        setIsDrawerOpen((prevIsDrawerOpen) => !prevIsDrawerOpen);
-        return;
-      }
     };    
     document.addEventListener('keydown', handleKeyDown);
     return () => {
@@ -76,11 +69,11 @@ const NavigationComponent = ({ isDrawerOpen, setIsDrawerOpen, drawerParameter, s
           showFileTabs={showFileTabs}
           setShowFileTabs={setShowFileTabs}
           />
-        <Button onClick={hideNavigation}>
+        <Button onClick={toggleNavigation}>
           <FontAwesomeIcon icon={faAngleLeft} />
         </Button>
       </nav>
-      <Button onClick={hideNavigation} className="showNavigation">
+      <Button onClick={toggleNavigation} className="showNavigation">
         <FontAwesomeIcon icon={faAngleRight} />
       </Button>
     </>

diff --git a/src/renderer/RecurrencePicker.scss b/src/renderer/RecurrencePicker.scss
@@ -1,5 +1,7 @@
 #recurrencePicker {
+
 	.MuiPaper-root {
+		padding: 1em;
 		.MuiFormControl-root {
 			margin-right: 1em;
 			vertical-align: middle;

diff --git a/src/renderer/Search.scss b/src/renderer/Search.scss
@@ -4,7 +4,7 @@
 	height: 2.5em;
 	min-height: 2.5em;
 	display: flex;
-	flex: 1;
+	padding-right: 2.5em;
 	.MuiTextField-root {
 		height: 100%;
 		flex-direction: row;