Added a proper icon and coloring for pomodoro attribute, enhanced don…

…e file locator in context menu, slight visual enhancements on auto-suggest container, improved window size and positioning

.github/workflows/build-release.yml → .github/workflows/prepare-release.yml

@@ -1,11 +1,11 @@
-name: Build & release
+name: Prepare release
 on:
   push:
     tags:
       - '*'
 jobs:
   macos:
-    name: MacOS (Build & Release)
+    name: MacOS (Prepare release)
     runs-on: ${{ matrix.os }}
     strategy:
       matrix:
@@ -35,7 +35,7 @@ jobs:
           github_token: ${{ secrets.github_token }}
           release: ${{ startsWith(github.ref, 'refs/tags/') }}
   windows:
-    name: Windows (Build & Release)
+    name: Windows (Prepare release)
     runs-on: ${{ matrix.os }}
     strategy:
       matrix:
@@ -60,7 +60,7 @@ jobs:
           github_token: ${{ secrets.github_token }}
           release: ${{ startsWith(github.ref, 'refs/tags/') }}
   linux:
-    name: Linux (Build & Release)
+    name: Linux (Prepare release)
     runs-on: ${{ matrix.os }}
     strategy:
       matrix:

package.json

@@ -9,6 +9,7 @@
     "lint": "cross-env NODE_ENV=development eslint . --ext .js,.jsx,.ts,.tsx",
     "package": "ts-node ./.erb/scripts/clean.js dist && npm run build && electron-builder build --publish never",
     "mas": "ts-node ./.erb/scripts/clean.js dist && npm run build && electron-builder build -m mas --universal --publish never",
+    "appimage": "ts-node ./.erb/scripts/clean.js dist && npm run build && electron-builder build -l appimage --universal --publish never",
     "peggy": "peggy --format es --output ./src/main/modules/FilterLang/FilterLang.js ./src/main/modules/FilterLang/FilterLang.pegjs",
     "rebuild": "electron-rebuild --parallel --types prod,dev,optional --module-dir release/app",
     "start": "ts-node ./.erb/scripts/check-port-in-use.js && npm run start:renderer",
@@ -175,7 +176,7 @@
           "x64"
         ]
       },
-      "icon": "assets/icons/icon.icns",
+      "icon": "assets/icons/512x512.png",
       "type": "distribution",
       "hardenedRuntime": true,
       "entitlements": "assets/mas/entitlements.mac.plist",

src/main/main.ts

@@ -39,21 +39,22 @@ const handleClosed = () => {
 }
 
 const handleResize = () => {
-  if (!windowMaximized && mainWindow) {
+  if (mainWindow) {
     const { width, height } = mainWindow.getBounds();
     configStorage.set('windowDimensions', { width, height });
   }  
 }
 
 const handleMove = () => {
-  if (!windowMaximized && mainWindow) {
+  if (mainWindow) {
     const { x, y } = mainWindow.getBounds();
     configStorage.set('windowPosition', { x, y });
   }  
 }
 
 const handleUnmaximize = () => {
-  configStorage.set('windowMaximized', false)
+  configStorage.set('windowMaximized', false);
+  handleWindowSizeAndPosition();
 }
 
 const handleMaximize = () => {
@@ -66,6 +67,29 @@ const handleShow = () => {
   }
 }
 
+const handleWindowSizeAndPosition = () => {
+  const isMaximized = configStorage.get('windowMaximized');
+  if(isMaximized) {
+    mainWindow.maximize();
+    return false;
+  }
+
+  const windowDimensions: { width: number; height: number } | null = configStorage.get('windowDimensions') as { width: number; height: number } | null;
+
+  console.log(windowDimensions)
+
+  if (windowDimensions) {
+    const { width, height } = windowDimensions;
+    mainWindow.setSize(width, height);
+
+    const windowPosition: { x: number; y: number } | null = configStorage.get('windowPosition') as { x: number; y: number } | null;
+    if (windowPosition) {
+      const { x, y } = windowPosition;
+      mainWindow.setPosition(x, y);
+    }
+  }
+};
+
 const createWindow = async() => {
   mainWindow = new BrowserWindow({
     width: 1280,
@@ -92,22 +116,7 @@ const createWindow = async() => {
     });
   }
 
-  if(windowMaximized) {
-    mainWindow.maximize();
-  } else {
-    const windowDimensions: { width: number; height: number } | null = configStorage.get('windowDimensions') as { width: number; height: number } | null;
-
-    if (windowDimensions) {
-      const { width, height } = windowDimensions;
-      mainWindow.setSize(width, height);
-
-      const windowPosition: { x: number; y: number } | null = configStorage.get('windowPosition') as { x: number; y: number } | null;
-      if (windowPosition) {
-        const { x, y } = windowPosition;
-        mainWindow.setPosition(x, y);
-      }
-    }
-  }
+  handleWindowSizeAndPosition();
 
   mainWindow.loadURL(resolveHtmlPath('index.html'));
   mainWindow

src/main/tray.ts

@@ -50,6 +50,7 @@ function createTray() {
   try {
     const isDark = nativeTheme.shouldUseDarkColors;
     const isMac = process.platform === 'darwin';
+    const isWindows = process.platform === 'win32';
     const isTray = configStorage.get('tray');
 
     tray?.destroy();
@@ -64,7 +65,7 @@ function createTray() {
     const files = configStorage.get('files') as File[] || [];
     const menu = Menu.buildFromTemplate(getMenuTemplate(files));
 
-    tray = new Tray((isDark || isMac) ? getAssetPath('icons/tray/darkTheme/tray.png') : getAssetPath('icons/tray/lightTheme/tray.png'));
+    tray = new Tray((isWindows) ? getAssetPath('icons/tray/lightTheme/tray.png') : getAssetPath('icons/tray/darkTheme/tray.png'));
     tray.setContextMenu(menu);
 
     return Promise.resolve('Tray created');

src/renderer/AutoSuggest.js

@@ -19,7 +19,6 @@ const AutoSuggest = ({
   const [matchPosition, setMatchPosition] = useState({ start: -1, end: -1 });
 
   const handleSuggestionsFetchRequested = ({ value }) => {
-
     const inputValue = value;
     if (!inputValue) return;
 
@@ -94,6 +93,7 @@ const AutoSuggest = ({
 
   const handleKeyDown = (event) => {
     if (suggestions.length > 0) {
+
       if (event.key === 'Enter') {   
         if (suggestions.length > 0 && selectedSuggestionIndex !== -1) {
           event.stopPropagation();

src/renderer/AutoSuggest.scss

@@ -6,25 +6,27 @@
 	overflow-y: auto;
 	position: fixed;
 	z-index: 10;
-	margin-top: -0.4em;
-	padding: 0.75em 1em;
-	border-bottom-right-radius: $radius;
-	border-bottom-left-radius: $radius;
-	background: $lighter-grey;
+	margin-top: 2px;
+	padding: 1em;
+	display: block;
+	border-radius: $radius;
+	background-color: rgba(240, 240, 240, 0.5);
+	backdrop-filter: blur(5px);
 	ul {
 		padding: 0;
 		margin: 0;
 		list-style: none;
 		li {
 			float: left;
-			margin: 0 0.35em 0.35em 0;
+			margin: 0.15em 0.3em 0.15em 0;
 		}
 	}
 }
 
 .darkTheme {
 	.react-autosuggest__suggestions-container--open {
-		background: $darker-grey;
+		background-color: rgba(45, 45, 45, 0.5);
+		backdrop-filter: blur(5px);
 	}
 }
 .react-autosuggest__container {

src/renderer/Coloring.scss

@@ -91,7 +91,7 @@
 
 *[data-todotxt-attribute^="pm"] {
   --color1: white;
-  --color2: #FF3860;
+  --color2: #c00027;
   button {
     &.Mui-disabled {
       color: white;
@@ -104,7 +104,7 @@
   } 
   &.selected {
     button {
-      background: darken(#FF3860, 25%);
+      background: darken(#c00027, 10%);
     }
   } 
 }
@@ -121,7 +121,7 @@
 
 .darkTheme {
 
-  *[data-todotxt-attribute]:not([data-todotxt-attribute="priority"], [data-todotxt-attribute="projects"], [data-todotxt-attribute="contexts"], [data-todotxt-attribute="pm"]) {
+  *[data-todotxt-attribute]:not([data-todotxt-attribute="priority"], [data-todotxt-attribute="projects"], [data-todotxt-attribute="contexts"], [data-todotxt-attribute^="pm"]) {
     --color1: #f0f0f0;
     --color2: #5a5a5a;
     &.selected {
@@ -130,6 +130,7 @@
       }
     }
   }
+
   *[data-todotxt-attribute="contexts"] {
     --color1: #c5ede3;
     --color2: #1e6251;

src/renderer/ContextMenu.js

@@ -75,7 +75,7 @@ const ContextMenu = ({
         {contextMenuItems.map((item) => (
           <MenuItem key={item.id} onClick={() => handleContextMenuClick(item)}>
             {item.id === 'changeDoneFilePath' ? (
-              <Tooltip title={item.doneFilePath}>
+              <Tooltip placement='right' arrow title={item.doneFilePath}>
                 <Button onClick={() => handleChangeDoneFilePath(item.index)} startIcon={<FileOpenIcon />}>
                   {item.label}
                 </Button>

src/renderer/DataGridRow.js

@@ -3,9 +3,9 @@ import { Checkbox, ListItem, Button, Divider, Chip, Box } from '@mui/material';
 import CircleChecked from '@mui/icons-material/CheckCircle';
 import CircleUnchecked from '@mui/icons-material/RadioButtonUnchecked';
 import VisibilityOffIcon from '@mui/icons-material/VisibilityOff';
-import LocalPizzaIcon from '@mui/icons-material/LocalPizza';
 import { handleFilterSelect } from './Shared';
 import DatePickerInline from './DatePickerInline';
+import { ReactComponent as TomatoIconDuo } from '../../assets/icons/tomato-duo.svg'
 import './DataGridRow.scss';
 
 const DataGridRow = React.memo(({
@@ -95,8 +95,8 @@ const DataGridRow = React.memo(({
         </Button>
       ),
       pm: (value, type) => (
-        <Button onClick={() => handleButtonClick(type, value)}>
-          <LocalPizzaIcon />
+        <Button className='pomodoro' onClick={() => handleButtonClick(type, value)}>
+          <TomatoIconDuo />
           <Box>{value}</Box>
         </Button>
       ),

src/renderer/DataGridRow.scss

@@ -35,7 +35,13 @@
         margin: 0;
 
       }      
-    }  
+    }
+    &.pomodoro {
+      padding: 0;
+      svg {
+        font-size: 1.5em;
+      }
+    }
   }
   .MuiCheckbox-root {
     padding: 0.35em 0.5em 0.35em 0.25em;
@@ -71,10 +77,10 @@
     button {
       .MuiChip-root {
         background: darken($dark-grey, 10%);
-      }
+      }  
     }
     &.group {
       border: none;
-    }    
+    }  
   }
 }

src/renderer/PomodoroPicker.js

@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import { FormControl, InputLabel, TextField } from '@mui/material';
 import { Item } from 'jstodotxt';
+import { ReactComponent as TomatoIconDuo } from '../../assets/icons/tomato-duo.svg'
 import './PomodoroPicker.scss';
 
 const PomodoraPicker = ({ 
@@ -27,7 +28,7 @@ const PomodoraPicker = ({
       <FormControl id="pomodoroPicker">
         <TextField
           id="pomodoroPicker"
-          label="Pomodoro"
+          label=<TomatoIconDuo />
           type="number"
           onChange={handleChange}
           value={pomodoro}

src/renderer/PomodoroPicker.scss

@@ -2,4 +2,8 @@
 	input {
 		width: 4em;
 	}
+	svg {
+		width: 2em;
+		height: 2em;
+	}
 }

src/renderer/Shared.ts

@@ -41,7 +41,7 @@ export const attributeMapping = {
   contexts: 'Contexts',
   priority: 'Priority',
   rec: 'Recurrence',
-  pm: 'Pomodoro timer',
+  pm: 'Pomodoro intervals',
   created: 'Creation date',
   completed: 'Completion date',
 };

src/renderer/TodoDialog.js

@@ -32,7 +32,7 @@ const TodoDialog = ({
       }
       ipcRenderer.send('writeTodoToFile', todoObject?.id, textFieldRef.current.value);
     } catch (error) {
-      console.error(error);
+      console.error(error.message);
     }
   };