From a37720fca7a941aadaebfd2a4d59e186e7cdb526 Mon Sep 17 00:00:00 2001 From: ransome1 Date: Wed, 12 Feb 2025 17:41:46 +0100 Subject: [PATCH] Added 1st draft of a compact view --- src/locales/cs.json | 1 + src/locales/de.json | 1 + src/locales/en.json | 1 + src/locales/es.json | 1 + src/locales/fr.json | 1 + src/locales/hi.json | 1 + src/locales/hu.json | 1 + src/locales/it.json | 1 + src/locales/jp.json | 1 + src/locales/ko.json | 1 + src/locales/pl.json | 1 + src/locales/pt-br.json | 1 + src/locales/pt.json | 1 + src/locales/ru.json | 1 + src/locales/tr.json | 1 + src/locales/zh.json | 1 + src/main/config.tsx | 4 + src/main/modules/Menu.tsx | 9 +- src/renderer/App.scss | 4 - src/renderer/App.tsx | 15 ++- src/renderer/Buttons.scss | 41 +++++--- src/renderer/Coloring.scss | 11 +++ src/renderer/Compact.scss | 137 +++++++++++++++++++++++++++ src/renderer/Dialog/AutoSuggest.scss | 1 - src/renderer/Dialog/Dialog.scss | 57 +++++------ src/renderer/Drawer/Attributes.scss | 22 ++--- src/renderer/Drawer/Drawer.scss | 6 -- src/renderer/Form.scss | 68 +++++++++---- src/renderer/Grid/Group.tsx | 1 - src/renderer/Grid/Row.scss | 9 +- src/renderer/Header/FileTabs.scss | 8 +- src/renderer/Header/Header.scss | 6 +- src/renderer/Header/Search/Input.tsx | 2 +- src/renderer/Navigation.scss | 71 +++++++------- src/renderer/Settings/Settings.tsx | 3 + src/renderer/SplashScreen.scss | 2 +- 36 files changed, 349 insertions(+), 144 deletions(-) create mode 100644 src/renderer/Compact.scss diff --git a/src/locales/cs.json b/src/locales/cs.json index aab0a6ec..42974b26 100644 --- a/src/locales/cs.json +++ b/src/locales/cs.json @@ -31,6 +31,7 @@ "settings.0": "Neděle", "settings.1": "Pondělí", "settings.menuBarVisibility": "Zobrazit menu v panelu", + "settings.compact": "Kompaktní zobrazení", "attributes": "Atributy", "filters": "Filtry", "sorting": "Řazení", diff --git a/src/locales/de.json b/src/locales/de.json index 7ffd2f10..aec37e28 100644 --- a/src/locales/de.json +++ b/src/locales/de.json @@ -31,6 +31,7 @@ "settings.0": "Sonntag", "settings.1": "Montag", "settings.menuBarVisibility": "Menüleiste anzeigen", + "settings.compact": "Kompakte Ansicht", "attributes": "Attribute", "filters": "Filter", "sorting": "Sortierung", diff --git a/src/locales/en.json b/src/locales/en.json index b6f505c4..5e521852 100644 --- a/src/locales/en.json +++ b/src/locales/en.json @@ -31,6 +31,7 @@ "settings.0": "Sunday", "settings.1": "Monday", "settings.menuBarVisibility": "Show menu bar", + "settings.compact": "Compact view", "attributes": "Attributes", "filters": "Filters", "sorting": "Sorting", diff --git a/src/locales/es.json b/src/locales/es.json index a6c52337..442f18b7 100644 --- a/src/locales/es.json +++ b/src/locales/es.json @@ -31,6 +31,7 @@ "settings.0": "Domingo", "settings.1": "Lunes", "settings.menuBarVisibility": "Mostrar barra de menú", + "settings.compact": "Vista compacta", "attributes": "Atributos", "filters": "Filtros", "sorting": "Ordenación", diff --git a/src/locales/fr.json b/src/locales/fr.json index 8ce3972a..d8db1f2a 100644 --- a/src/locales/fr.json +++ b/src/locales/fr.json @@ -31,6 +31,7 @@ "settings.0": "Dimanche", "settings.1": "Lundi", "settings.menuBarVisibility": "Afficher la barre de menus", + "settings.compact": "Vue compacte", "attributes": "Attributs", "filters": "Filtres", "sorting": "Tri", diff --git a/src/locales/hi.json b/src/locales/hi.json index 082204c1..3568e697 100644 --- a/src/locales/hi.json +++ b/src/locales/hi.json @@ -31,6 +31,7 @@ "settings.0": "रविवार", "settings.1": "सोमवार", "settings.menuBarVisibility": "मेनू बार दिखाएं", + "settings.compact": "संकुचित दृश्य", "attributes": "गुण", "filters": "फ़िल्टर", "sorting": "क्रमबद्ध करना", diff --git a/src/locales/hu.json b/src/locales/hu.json index 9a4af7f8..8ee7ecdc 100644 --- a/src/locales/hu.json +++ b/src/locales/hu.json @@ -31,6 +31,7 @@ "settings.0": "Vasárnap", "settings.1": "Hétfő", "settings.menuBarVisibility": "Menüsor megjelenítése", + "settings.compact": "Komplett nézet", "attributes": "Tulajdonságok", "filters": "Szűrők", "sorting": "Rendezés", diff --git a/src/locales/it.json b/src/locales/it.json index 1c769ff3..bba002c5 100644 --- a/src/locales/it.json +++ b/src/locales/it.json @@ -31,6 +31,7 @@ "settings.0": "Domenica", "settings.1": "Lunedì", "settings.menuBarVisibility": "Mostra la barra dei menu", + "settings.compact": "Vista compatta", "attributes": "Attributi", "filters": "Filtri", "sorting": "Ordinamento", diff --git a/src/locales/jp.json b/src/locales/jp.json index 4d6b78f8..91476acc 100644 --- a/src/locales/jp.json +++ b/src/locales/jp.json @@ -31,6 +31,7 @@ "settings.0": "日曜日", "settings.1": "月曜日", "settings.menuBarVisibility": "メニューバーを表示する", + "settings.compact": "コンパクトビュー", "attributes": "属性", "filters": "フィルター", "sorting": "ソート", diff --git a/src/locales/ko.json b/src/locales/ko.json index 02d7005a..6149650c 100644 --- a/src/locales/ko.json +++ b/src/locales/ko.json @@ -31,6 +31,7 @@ "settings.0": "일요일", "settings.1": "월요일", "settings.menuBarVisibility": "메뉴 바 표시", + "settings.compact": "컴팩트 보기", "attributes": "속성", "filters": "필터", "sorting": "정렬", diff --git a/src/locales/pl.json b/src/locales/pl.json index a1cc0503..01e478f2 100644 --- a/src/locales/pl.json +++ b/src/locales/pl.json @@ -31,6 +31,7 @@ "settings.0": "Niedziela", "settings.1": "Poniedziałek", "settings.menuBarVisibility": "Pokaż pasek menu", + "settings.compact": "Widok kompaktowy", "attributes": "Atrybuty", "filters": "Filtry", "sorting": "Sortowanie", diff --git a/src/locales/pt-br.json b/src/locales/pt-br.json index 778051a6..58aead0f 100644 --- a/src/locales/pt-br.json +++ b/src/locales/pt-br.json @@ -31,6 +31,7 @@ "settings.0": "Domingo", "settings.1": "Segunda-feira", "settings.menuBarVisibility": "Mostrar barra de menus", + "settings.compact": "Visão compacta", "attributes": "Atributos", "filters": "Filtros", "sorting": "Classificação", diff --git a/src/locales/pt.json b/src/locales/pt.json index cde99bec..1f6d0905 100644 --- a/src/locales/pt.json +++ b/src/locales/pt.json @@ -31,6 +31,7 @@ "settings.0": "Domingo", "settings.1": "Segunda-feira", "settings.menuBarVisibility": "Mostrar barra de menu", + "settings.compact": "Visão compacta", "attributes": "Atributos", "filters": "Filtros", "sorting": "Ordenação", diff --git a/src/locales/ru.json b/src/locales/ru.json index 1b4421fe..3a4f47b9 100644 --- a/src/locales/ru.json +++ b/src/locales/ru.json @@ -31,6 +31,7 @@ "settings.0": "Воскресенье", "settings.1": "Понедельник", "settings.menuBarVisibility": "Показать строку меню", + "settings.compact": "Компактный вид", "attributes": "Атрибуты", "filters": "Фильтры", "sorting": "Сортировка", diff --git a/src/locales/tr.json b/src/locales/tr.json index 83ec79ca..140f6394 100644 --- a/src/locales/tr.json +++ b/src/locales/tr.json @@ -31,6 +31,7 @@ "settings.0": "Pazar", "settings.1": "Pazartesi", "settings.menuBarVisibility": "Menü çubuğunu göster", + "settings.compact": "Kompakt görünüm", "attributes": "Özellikler", "filters": "Filtreler", "sorting": "Sıralama", diff --git a/src/locales/zh.json b/src/locales/zh.json index 9d0af798..e7dca8be 100644 --- a/src/locales/zh.json +++ b/src/locales/zh.json @@ -31,6 +31,7 @@ "settings.0": "星期日", "settings.1": "星期一", "settings.menuBarVisibility": "显示菜单栏", + "settings.compact": "精简视图", "attributes": "属性", "filters": "过滤器", "sorting": "排序", diff --git a/src/main/config.tsx b/src/main/config.tsx index 1ecca3bf..2efffc92 100644 --- a/src/main/config.tsx +++ b/src/main/config.tsx @@ -111,6 +111,10 @@ const config: Store = new Store({ '2.0.14': (store) => { console.log('Migrating from 2.0.13 → 2.0.14') store.set('menuBarVisibility', true) + }, + '2.0.17': (store) => { + console.log('Migrating from 2.0.14 → 2.0.17') + store.set('compact', false) } } }) diff --git a/src/main/modules/Menu.tsx b/src/main/modules/Menu.tsx index cdade64c..0e33840c 100644 --- a/src/main/modules/Menu.tsx +++ b/src/main/modules/Menu.tsx @@ -121,7 +121,14 @@ function createMenu(files: FileObject[]) { const shouldUseDarkColors = config.get('shouldUseDarkColors') config.set('colorTheme', shouldUseDarkColors ? 'light' : 'dark') } - } + }, + { + label: 'Toggle compact mode', + click: () => { + const compact = config.get('compact') + config.set('compact', !compact) + } + } ] }, ...(files?.length > 0 diff --git a/src/renderer/App.scss b/src/renderer/App.scss index ec6c21a4..f989ef4c 100644 --- a/src/renderer/App.scss +++ b/src/renderer/App.scss @@ -13,10 +13,6 @@ body { border-radius: 0.25em; padding: 0.25em; } - h2.MuiDialogTitle-root { - font-size: 1.1em; - font-weight: bold; - } a { color: Variables.$blue; text-decoration: underline; diff --git a/src/renderer/App.tsx b/src/renderer/App.tsx index 399aa378..c90dbd7a 100644 --- a/src/renderer/App.tsx +++ b/src/renderer/App.tsx @@ -23,6 +23,7 @@ import Prompt from './Prompt' import './App.scss' import './Buttons.scss' import './Form.scss' +import './Compact.scss' const { ipcRenderer, store } = window.api @@ -78,6 +79,18 @@ const App = (): JSX.Element => { ipcRenderer.send('requestData') }, []) + useEffect(() => { + if (settings?.compact) { + document.body.classList.add('compact'); + } else { + document.body.classList.remove('compact'); + } + + return () => { + document.body.classList.remove('compact'); + }; + }, [settings.compact]); + useEffect(() => { const adjustedFontSize = Math.round(14 * (settings.zoom / 100)); const updatedTheme = createTheme({ @@ -101,7 +114,7 @@ const App = (): JSX.Element => { return () => { document.body.classList.remove('darkTheme', 'lightTheme'); }; - }, [settings.shouldUseDarkColors, settings.zoom]); + }, [settings.shouldUseDarkColors, settings.zoom]); return ( <> diff --git a/src/renderer/Buttons.scss b/src/renderer/Buttons.scss index d6c3e37e..32f343bc 100644 --- a/src/renderer/Buttons.scss +++ b/src/renderer/Buttons.scss @@ -11,7 +11,30 @@ button { color: white; } -li { +.MuiDialog-root { + .MuiDialog-paper { + .MuiDialogActions-root { + button { + width: 100%; + background: none; + border-radius: 0; + color: Variables.$blue; + font-weight: bold; + border-top: 1px solid Variables.$light-grey; + border-right: 1px solid Variables.$light-grey; + margin: 0; + &:last-child { + border-right: none; + } + } + } + } +} + +.row { + button { + padding: 0.25em 0.5em; + } [data-todotxt-attribute='due'], [data-todotxt-attribute='t'], [data-todotxt-attribute='rec'] { @@ -29,13 +52,7 @@ li { height: 100%; padding: 0.25em 0; } - } -} - -.row { - button { - padding: 0.25em 0.5em; - } + } &.group { button { font-size: 1.25em; @@ -115,15 +132,11 @@ li { height: 0.6em; border-radius: 50%; } -.group [data-todotxt-attribute='priority'], -#Attributes [data-todotxt-attribute='priority'] { +div[data-todotxt-attribute='priority'] { button { - min-width: 2em; - height: 2em; - line-height: 2em; font-size: 1.25em; font-weight: bold; - padding: 0; + padding: 0.4em 0.6em; } } diff --git a/src/renderer/Coloring.scss b/src/renderer/Coloring.scss index 030ddc44..9ba1fdb4 100644 --- a/src/renderer/Coloring.scss +++ b/src/renderer/Coloring.scss @@ -1,6 +1,13 @@ @use 'sass:color'; @use 'Variables.scss'; +button:not(.MuiIconButton-root):not(.MuiTab-root):not(.MuiAccordionSummary-root), +button:hover:not(.MuiIconButton-root) { + &:focus-visible { + outline: 0.1em solid Variables.$dark-grey; + } +} + *[data-todotxt-attribute] { --color1: #5a5a5a; --color2: #ccc; @@ -134,6 +141,10 @@ } .darkTheme { + button:not(.MuiIconButton-root), + button:hover:not(.MuiIconButton-root) { + outline-color: Variables.$light-grey; + } *[data-todotxt-attribute]:not( [data-todotxt-attribute='priority'], [data-todotxt-attribute='projects'], diff --git a/src/renderer/Compact.scss b/src/renderer/Compact.scss new file mode 100644 index 00000000..52054521 --- /dev/null +++ b/src/renderer/Compact.scss @@ -0,0 +1,137 @@ +.compact { + .MuiPopover-paper { + ul { + padding: 0; + } + } + #DialogComponent { + .MuiDialog-paper { + max-width: 60em; + .MuiDialogContent-root { + padding: 1em; + } + } + } + .MuiAutocomplete-root, + .MuiDialogContent-root { + .MuiFormControl-root { + label[data-shrink=false] { + transform: translate(0.8em, 0.8em) scale(1); + } + .MuiInputBase-root { + padding: 0.8em; + &.MuiInputBase-multiline { + padding: 0.8em; + } + } + } + } + #recurrencePicker .MuiPaper-root { + padding: 0.5em; + } + .react-autosuggest__suggestions-container--open { + max-height: 20em; + min-height: 5em; + margin-top: 0.125em; + padding: 0.5em; + ul { + li { + float: left; + margin: 0.15em 0.3em 0.15em 0; + } + } + } + button { + padding: 0.4em; + } + div[data-todotxt-attribute='priority'] { + button { + font-size: 1.25em; + font-weight: bold; + padding: 0.3em 0.5em; + } + } + #root { + .flexContainer { + margin-left: 3em; + &.hideNavigation { + #navigation { + left: -3em; + } + } + #navigation { + width: 3em; + li { + svg { + font-size: 1.25em; + } + &.logo { + font-size: 0.8em; + } + } + } + #grid { + padding: 0 0.75em 0.75em 0.75em; + .row { + padding: 0.3em; + .MuiCheckbox-root { + padding: 0; + margin: 0 0.1em; + } + [data-todotxt-attribute='due'], + [data-todotxt-attribute='t'], + [data-todotxt-attribute='rec'] { + button { + padding: 0 0.5em 0 0; + } + div { + padding: 0.2em 0; + } + } + .filter:not([data-todotxt-attribute='priority']):not([data-todotxt-attribute='t']):not([data-todotxt-attribute='due']):not([data-todotxt-attribute='rec']) { + button { + padding: 0.2em 0.4em; + } + } + } + } + #search { + padding: 0.25em 0.75em; + } + #drawer { + #Attributes { + .filter:not([data-todotxt-attribute='priority']) button { + padding: 0.4em; + } + } + #Sorting { + .MuiListItem-root { + + } + } + } + #ToolBar { + width: 2.5em; + aspect-ratio: 1; + padding: 0 1em; + svg { + font-size: 1.85em; + } + } + #fileTabs { + .MuiTabs-scroller { + button[role='tab'] { + min-height: auto; + padding: 0.5em; + svg { + margin: 0; + } + } + } + } + } + } + .hideNavigation #navigation li.showNavigation { + width: 2em; + } +} \ No newline at end of file diff --git a/src/renderer/Dialog/AutoSuggest.scss b/src/renderer/Dialog/AutoSuggest.scss index 22ef600c..9a0f28a5 100644 --- a/src/renderer/Dialog/AutoSuggest.scss +++ b/src/renderer/Dialog/AutoSuggest.scss @@ -2,7 +2,6 @@ .react-autosuggest__suggestions-container--open { max-height: 20em; - min-height: 5em; overflow-y: auto; position: fixed; z-index: 10; diff --git a/src/renderer/Dialog/Dialog.scss b/src/renderer/Dialog/Dialog.scss index a4cf07ea..41ac88e0 100644 --- a/src/renderer/Dialog/Dialog.scss +++ b/src/renderer/Dialog/Dialog.scss @@ -4,50 +4,39 @@ .MuiDialog-paper { max-width: 60em; .MuiDialogContent-root { - padding: 1.5em; + gap: 0.5em; } } } -.MuiDialogContent-root { - display: flex; - gap: 0.5em; - flex-wrap: wrap; - .MuiFormControl-root { - label[data-shrink=false] { - transform: translate(1em, 1em) scale(1); + +.MuiDialog-root { + .MuiDialog-paper { + .MuiDialogTitle-root { + font-size: 1.2em; + font-weight: bold; + padding-bottom: 0; } - label[data-shrink=true] { - transform: translate(0.5em, -0.5em) scale(0.75); + .MuiDialogContent-root { + display: flex; + flex-wrap: wrap; + padding: 1.5em; + .react-autosuggest__container { + width: 100%; + .MuiTextField-root { + width: 100%; + } + } } - } - .react-autosuggest__container { - width: 100%; - .MuiTextField-root { - width: 100%; - textarea { - font-size: 1.25em; + .MuiDialogActions-root { + padding: 0; + button { + padding: 0.8em; } } } } -.MuiDialogActions-root { - padding: 0!important; - button { - width: 100%; - background: none; - border-radius: 0; - color: Variables.$blue; - font-weight: bold; - border-top: 1px solid Variables.$light-grey; - border-right: 1px solid Variables.$light-grey; - margin: 0!important; - &:last-child { - border-right: none; - } - } -} -.darkTheme #DialogComponent .MuiDialog-paper .MuiDialogActions-root button { +.darkTheme .MuiDialog-root .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/Drawer/Attributes.scss b/src/renderer/Drawer/Attributes.scss index 89c0d3ac..7c9db603 100644 --- a/src/renderer/Drawer/Attributes.scss +++ b/src/renderer/Drawer/Attributes.scss @@ -1,7 +1,7 @@ @use '../Variables.scss'; #Attributes { - padding: 0.75em 1em; + padding: 0 1em 0.75em 1em; overflow-y: scroll; .placeholder { padding: 2em 0; @@ -9,35 +9,31 @@ text-align: center; } .MuiAccordion-root { - .Mui-expanded { - margin: 1em 0; + margin: 0; + .MuiAccordion-heading { + button { + padding: 0; + } } .MuiAccordionDetails-root { - padding: 0.5em 0; + padding: 0; display: flex; flex-wrap: wrap; gap: 0.3em; } .MuiAccordionSummary-root { - height: 3em; - min-height: 3em; - padding: 0; + height: 2.5em; + min-height: 2.5em; margin: 0; font-size: 1.25em; font-weight: bold; .MuiBadge-badge { background: #ff3860; } - &.Mui-expanded { - min-height: auto; - } } &:before { display: none; } - &.Mui-expanded { - margin: 0; - } } &::-webkit-scrollbar-thumb:window-inactive, &::-webkit-scrollbar-thumb { diff --git a/src/renderer/Drawer/Drawer.scss b/src/renderer/Drawer/Drawer.scss index 69b57621..32c24751 100644 --- a/src/renderer/Drawer/Drawer.scss +++ b/src/renderer/Drawer/Drawer.scss @@ -2,7 +2,6 @@ #drawer { height: 100vh; - padding: 0; transition: margin-left 0.3s ease; .MuiPaper-root { position: relative; @@ -12,12 +11,7 @@ overflow: visible; .MuiTabs-flexContainer { button { - min-width: 6em; - min-height: 5em; - padding: 0; text-transform: none; - white-space: nowrap; - font-size: 0.8em; .reset { font-size: 1.25em; position: absolute; diff --git a/src/renderer/Form.scss b/src/renderer/Form.scss index b04d73ea..efaace5b 100644 --- a/src/renderer/Form.scss +++ b/src/renderer/Form.scss @@ -8,31 +8,63 @@ label { } } } - -.MuiInputBase-root { - padding: 1em; - .MuiInputAdornment-root { - max-height: 1.5em; - margin: 0; + +.MuiAutocomplete-root, +.MuiPaper-root, +.MuiDialogContent-root { + .MuiIconButton-root { + padding: 0.1em; } - .MuiInputBase-input { - margin: 0; - padding: 0; + button.addAsTodo { + margin-right: 0.5em; } - .MuiSelect-select { - margin: 0; - padding: 0; + .MuiButtonBase-root { + border: none; + svg.invert { + transform: rotate(180deg); + } + &.Mui-focusVisible { + svg { + color: Variables.$blue; + } + } + + &:hover { + border: none; + } } - &.MuiInputBase-multiline { - padding: 1em; + .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); + } + .MuiInputBase-root { + padding: 1em; + .MuiInputAdornment-root { + max-height: 1.5em; + margin: 0; + } + .MuiInputBase-input { + margin: 0; + padding: 0; + } + .MuiSelect-select { + margin: 0; + padding: 0; + } + &.MuiInputBase-multiline { + textarea { + font-size: 1.25em; + } + padding: 1em; + } + } } } .MuiAutocomplete-hasPopupIcon.css-10wd9eg-MuiAutocomplete-root .MuiOutlinedInput-root, .MuiAutocomplete-hasClearIcon.css-10wd9eg-MuiAutocomplete-root .MuiOutlinedInput-root, .MuiAutocomplete-hasPopupIcon.css-10wd9eg-MuiAutocomplete-root .MuiOutlinedInput-root, .MuiAutocomplete-hasClearIcon.css-10wd9eg-MuiAutocomplete-root .MuiOutlinedInput-root { padding-right: 0.5em!important; -} - -.MuiAutocomplete-root .MuiOutlinedInput-root .MuiAutocomplete-input { - padding: 0.25em!important; } \ No newline at end of file diff --git a/src/renderer/Grid/Group.tsx b/src/renderer/Grid/Group.tsx index e0a33946..4b6ea1a0 100644 --- a/src/renderer/Grid/Group.tsx +++ b/src/renderer/Grid/Group.tsx @@ -36,7 +36,6 @@ const Group: React.FC = memo(({ title, todotxtAttribute, filters, on data-todotxt-value={groupElement} > diff --git a/src/renderer/Navigation.scss b/src/renderer/Navigation.scss index e5917354..4ec55dee 100644 --- a/src/renderer/Navigation.scss +++ b/src/renderer/Navigation.scss @@ -3,7 +3,7 @@ .hideNavigation #navigation li.showNavigation { width: 2.5em; border-top-right-radius: Variables.$radius; - display: block; + display: flex; } .disableAnimations.hideNavigation #navigation, @@ -28,49 +28,20 @@ list-style: none; padding: 0; margin: 0; - li.logo, - li.logo:hover { - line-height: 5em; - font-weight: bold; - cursor: auto; - color: white; - background: linear-gradient(0.33turn, #1b5551, #813e93); - } - li.showNavigation { - position: fixed; - bottom: 0; - left: 0; - display: none; - background: Variables.$lighter-grey; - color: Variables.$dark-grey; - z-index: 10; - transition: width 0.3s ease; - border-top-left-radius: 0; - border-bottom-left-radius: 0; - border-bottom-right-radius: 0; - &:hover { - width: inherit; - } - } li { - width: 5em; - height: 5em; + width: 100%; + aspect-ratio: 1; + display: flex; + justify-content: center; + align-items: center; border-radius: 0; border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important; - //min-width: 5em; - // width: 5em; - // height: 5em; background: none; - padding: 0; - margin: 0; - line-height: 5.75em; - text-align: center; cursor: pointer; &.break { margin-top: auto; } svg { - // font-size: 1rem; color: Variables.$dark-grey; } &:active, @@ -82,15 +53,36 @@ background: Variables.$mid-grey; border-color: Variables.$mid-grey; } + &.logo, + &.logo:hover { + font-weight: bold; + cursor: auto; + color: white; + background: linear-gradient(0.33turn, #1b5551, #813e93); + } + &.showNavigation { + position: fixed; + bottom: 0; + left: 0; + display: none; + background: Variables.$lighter-grey; + color: Variables.$dark-grey; + z-index: 10; + transition: width 0.3s ease; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + &:hover { + width: inherit; + display: inherit; + } + } } } .darkTheme { #navigation { background: Variables.$darker-grey; - li.showNavigation { - background: Variables.$darker-grey; - } li { border-color: rgba(255, 255, 255, 0.05) !important; svg { @@ -102,6 +94,9 @@ &.active { background: #3b3b3b; } + &.showNavigation { + background: Variables.$darker-grey; + } } } } diff --git a/src/renderer/Settings/Settings.tsx b/src/renderer/Settings/Settings.tsx index 8e45d642..7404de2f 100644 --- a/src/renderer/Settings/Settings.tsx +++ b/src/renderer/Settings/Settings.tsx @@ -48,6 +48,9 @@ const visibleSettings: VisibleSettings = { style: 'toggle', help: 'https://github.com/ransome1/sleek/wiki/Human-friendly-dates' }, + compact: { + style: 'toggle' + }, notificationsAllowed: { style: 'toggle' }, diff --git a/src/renderer/SplashScreen.scss b/src/renderer/SplashScreen.scss index 3cb87747..e921ba82 100644 --- a/src/renderer/SplashScreen.scss +++ b/src/renderer/SplashScreen.scss @@ -23,7 +23,7 @@ .fileDropZone { padding: 1em 2em; border-radius: Variables.$radius; - border: 0.25em dashed #ccc; + border: 0.15em dashed #ccc; } }