From ced82a12a96642556c90bbba3fdf9b7016e0c880 Mon Sep 17 00:00:00 2001 From: ransome1 Date: Fri, 24 Jan 2025 19:53:02 +0100 Subject: [PATCH] Extended zoom level to 50% to 150%, refactored CSS in order to better accommodate new zoom levels --- .gitignore | 4 +- package.json | 2 +- src/renderer/App.scss | 26 +++--- src/renderer/App.tsx | 41 +++++++- src/renderer/Buttons.scss | 108 ++++++++++++++++++++++ src/renderer/Coloring.scss | 7 +- src/renderer/Dialog/AutoSuggest.tsx | 6 +- src/renderer/Dialog/DatePicker.scss | 6 +- src/renderer/Dialog/Dialog.scss | 44 +++++---- src/renderer/Dialog/Dialog.tsx | 3 +- src/renderer/Dialog/PomodoroPicker.scss | 8 +- src/renderer/Dialog/PomodoroPicker.tsx | 2 +- src/renderer/Dialog/PriorityPicker.scss | 4 +- src/renderer/Dialog/PriorityPicker.tsx | 2 +- src/renderer/Dialog/RecurrencePicker.scss | 5 +- src/renderer/Dialog/RecurrencePicker.tsx | 6 +- src/renderer/Drawer/Attributes.scss | 66 +------------ src/renderer/Drawer/Attributes.tsx | 4 +- src/renderer/Drawer/Drawer.scss | 41 ++++---- src/renderer/Drawer/Filters.scss | 3 +- src/renderer/Drawer/Sorting.scss | 9 +- src/renderer/Form.scss | 68 ++++++++++++++ src/renderer/Grid/Renderer.tsx | 3 +- src/renderer/Grid/Row.scss | 32 +------ src/renderer/Grid/Row.tsx | 6 +- src/renderer/Header/FileTabs.scss | 3 +- src/renderer/Header/Search/Input.scss | 24 ----- src/renderer/Header/Search/Input.tsx | 2 - src/renderer/Navigation.scss | 46 +++++---- src/renderer/Navigation.tsx | 36 ++++---- src/renderer/Settings/Settings.scss | 29 +----- src/renderer/Settings/Settings.tsx | 11 +-- src/renderer/Themes.tsx | 76 ++++----------- src/renderer/index.dev.html | 11 --- src/renderer/tomato-duo.svg | 1 - 35 files changed, 383 insertions(+), 362 deletions(-) create mode 100644 src/renderer/Buttons.scss create mode 100644 src/renderer/Form.scss delete mode 100644 src/renderer/Header/Search/Input.scss delete mode 100644 src/renderer/index.dev.html diff --git a/.gitignore b/.gitignore index 3ae5ff21..9f1e2375 100644 --- a/.gitignore +++ b/.gitignore @@ -99,4 +99,6 @@ dist/ mas/ entitlements.mas.inherit.plist -entitlements.mas.plist \ No newline at end of file +entitlements.mas.plist + +FilterLang.ts \ No newline at end of file diff --git a/package.json b/package.json index e8367ff6..2a7e2507 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "sleek", "productName": "sleek", - "version": "2.0.17-rc.1", + "version": "2.0.17-rc.2", "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/renderer/App.scss b/src/renderer/App.scss index 0dc4348b..d6412df4 100644 --- a/src/renderer/App.scss +++ b/src/renderer/App.scss @@ -7,13 +7,20 @@ body { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; - font-family: Helvetica, Arial, sans-serif; code { font-size: 0.9em; background-color: rgba(18, 18, 18, 0.15); border-radius: 0.25em; padding: 0.25em; } + label { + width: 100%; + a { + svg { + font-size: 1em!important; + } + } + } #root { .flexContainer { min-width: 25em; @@ -24,6 +31,9 @@ body { height: 2.5em; display: flex; } + .MuiButton-root { + min-width: auto; + } .flexItems { width: 100%; height: 100vh; @@ -40,12 +50,6 @@ body { &.hideNavigation.disableAnimations { transition: none; } - &.darkTheme { - button.showNavigation { - background: Variables.$darker-grey; - color: Variables.$light-grey; - } - } } .disableAnimations { .flexContainer { @@ -54,14 +58,6 @@ body { } } - h1, - h2, - h3, - h4, - h5 { - font-weight: bold; - } - *::-webkit-scrollbar { background-color: transparent; width: 0.8em; diff --git a/src/renderer/App.tsx b/src/renderer/App.tsx index 3f796993..7f898d13 100644 --- a/src/renderer/App.tsx +++ b/src/renderer/App.tsx @@ -1,5 +1,5 @@ import { useEffect, useState, useRef } from 'react' -import { ThemeProvider } from '@mui/material/styles' +import { ThemeProvider, createTheme } from '@mui/material/styles' import IpcComponent from './IpcRenderer' import MatomoComponent from './Matomo' import CssBaseline from '@mui/material/CssBaseline' @@ -21,6 +21,8 @@ import { i18n } from './Settings/LanguageSelector' import Settings from './Settings/Settings' import Prompt from './Prompt' import './App.scss' +import './Buttons.scss' +import './Form.scss' const { ipcRenderer, store } = window.api @@ -42,6 +44,14 @@ const App = (): JSX.Element => { const [textFieldValue, setTextFieldValue] = useState('') const [promptItem, setPromptItem] = useState(null) const [triggerArchiving, setTriggerArchiving] = useState(false) + const [theme, setTheme] = useState( + createTheme({ + ...(settings?.shouldUseDarkColors ? darkTheme : lightTheme), + typography: { + fontSize: Math.round(14 * (settings.zoom / 100)), + }, + }) + ); const searchFieldRef = useRef(null) useEffect(() => { @@ -69,6 +79,31 @@ const App = (): JSX.Element => { ipcRenderer.send('requestData') }, []) + useEffect(() => { + const adjustedFontSize = Math.round(14 * (settings.zoom / 100)); + const updatedTheme = createTheme({ + ...(settings?.shouldUseDarkColors ? darkTheme : lightTheme), + typography: { + fontFamily: 'Helvetica, Arial, sans-serif', + fontSize: adjustedFontSize, + }, + }); + + setTheme(updatedTheme); + + if (settings?.shouldUseDarkColors) { + document.body.classList.add('darkTheme'); + document.body.classList.remove('lightTheme'); + } else { + document.body.classList.add('lightTheme'); + document.body.classList.remove('darkTheme'); + } + + return () => { + document.body.classList.remove('darkTheme', 'lightTheme'); + }; + }, [settings.shouldUseDarkColors, settings.zoom]); + return ( <> { /> {settings.matomo && } - +
= ({ <> ( - + )} renderSuggestionsContainer={({ containerProps, children }) => (
diff --git a/src/renderer/Dialog/DatePicker.scss b/src/renderer/Dialog/DatePicker.scss index 2255324b..b99cd660 100644 --- a/src/renderer/Dialog/DatePicker.scss +++ b/src/renderer/Dialog/DatePicker.scss @@ -1,7 +1,7 @@ @use '../Variables.scss'; .datePicker { - width: 11.5em; + width: 13em; .Mui-focusVisible { color: Variables.$blue; } @@ -9,12 +9,10 @@ .MuiPickersLayout-root { button { - font-size: 1em; - border: none; border-radius: Variables.$radius; &.MuiPickersDay-today { border: inherit; background: Variables.$mid-grey; } } -} +} \ No newline at end of file diff --git a/src/renderer/Dialog/Dialog.scss b/src/renderer/Dialog/Dialog.scss index 6e602f06..0e3abdb4 100644 --- a/src/renderer/Dialog/Dialog.scss +++ b/src/renderer/Dialog/Dialog.scss @@ -2,34 +2,38 @@ #DialogComponent { .MuiDialog-paper { - max-width: 50em; - position: relative; - } - .MuiDialogContent-root { - display: flex; - gap: 0.625em; - flex-wrap: wrap; - .input { - width: 100%; - textarea { - font-size: 1.25em; + max-width: 60em; + .MuiDialogContent-root { + display: flex; + gap: 0.5em; + flex-wrap: wrap; + padding: 1.5em; + .MuiFormControl-root { + label[data-shrink=false] { + transform: translate(1em, 1em) scale(1); + } + label[data-shrink=true] { + transform: translate(0.5em, -0.5em) scale(0.75); + } + } + .react-autosuggest__container { width: 100%; + .MuiTextField-root { + width: 100%; + textarea { + font-size: 1.25em; + } + } } } - .react-autosuggest__container { - width: 100%; - flex-grow: 1; - } } } - .MuiDialogActions-root { + padding: 0!important; button { width: 100%; background: none; border-radius: 0; - margin: 0 !important; - padding: 0.5em 1em; color: Variables.$blue; border-top: 1px solid Variables.$light-grey; border-right: 1px solid Variables.$light-grey; @@ -38,3 +42,7 @@ } } } +.darkTheme #DialogComponent .MuiDialog-paper .MuiDialogActions-root button { + border-top: 1px solid Variables.$darker-grey; + border-right: 1px solid Variables.$darker-grey; +} \ No newline at end of file diff --git a/src/renderer/Dialog/Dialog.tsx b/src/renderer/Dialog/Dialog.tsx index 23f2952b..f471e1cb 100644 --- a/src/renderer/Dialog/Dialog.tsx +++ b/src/renderer/Dialog/Dialog.tsx @@ -156,7 +156,6 @@ const DialogComponent: React.FC = memo( id="DialogComponent" open={dialogOpen} onClose={handleClose} - className={settings.shouldUseDarkColors ? 'darkTheme' : 'lightTheme'} onKeyDown={handleKeyDown} > @@ -176,7 +175,7 @@ const DialogComponent: React.FC = memo( - + diff --git a/src/renderer/Dialog/PomodoroPicker.scss b/src/renderer/Dialog/PomodoroPicker.scss index 27baeb6a..655c56d5 100644 --- a/src/renderer/Dialog/PomodoroPicker.scss +++ b/src/renderer/Dialog/PomodoroPicker.scss @@ -1,9 +1,9 @@ #pomodoroPicker { input { - width: 4em; + width: 3em; } - svg { - width: 2em; - height: 2em; + label img { + width: 1.5em; + height: 1.5em; } } diff --git a/src/renderer/Dialog/PomodoroPicker.tsx b/src/renderer/Dialog/PomodoroPicker.tsx index 70686f14..24497930 100644 --- a/src/renderer/Dialog/PomodoroPicker.tsx +++ b/src/renderer/Dialog/PomodoroPicker.tsx @@ -21,7 +21,7 @@ const PomodoroPickerComponent: React.FC = ({ } + label={} type="number" onChange={handlePomodoroChange} value={pomodoro} diff --git a/src/renderer/Dialog/PriorityPicker.scss b/src/renderer/Dialog/PriorityPicker.scss index 39179daf..c911df71 100644 --- a/src/renderer/Dialog/PriorityPicker.scss +++ b/src/renderer/Dialog/PriorityPicker.scss @@ -1,3 +1,3 @@ #priorityPicker { - width: 5em; -} + width: 5.5em; +} \ No newline at end of file diff --git a/src/renderer/Dialog/PriorityPicker.tsx b/src/renderer/Dialog/PriorityPicker.tsx index 99fe59d5..f2f0e583 100644 --- a/src/renderer/Dialog/PriorityPicker.tsx +++ b/src/renderer/Dialog/PriorityPicker.tsx @@ -30,7 +30,7 @@ const PriorityPickerComponent: React.FC = ({ } return ( - + {t('todoDialog.priorityPicker.label')}