Commit 5942097e authored by ransome1's avatar ransome1
Browse files

PoC advanced search and minor GUI refresh

parent d14b0ec0
...@@ -102,7 +102,7 @@ ...@@ -102,7 +102,7 @@
"pack": "yarn build:css && yarn build:pegjs && electron-builder --dir", "pack": "yarn build:css && yarn build:pegjs && electron-builder --dir",
"lint": "eslint --ext .js, src --ext .mjs, src", "lint": "eslint --ext .js, src --ext .mjs, src",
"test": "mocha --timeout 10000", "test": "mocha --timeout 10000",
"test1": "mocha ./test/onboarding.js --timeout 10000", "test1": "mocha ./test/createTodos.js --timeout 10000",
"sass": "sass -w src/scss/style.scss:src/css/style.css", "sass": "sass -w src/scss/style.scss:src/css/style.css",
"start": "yarn sass & electron ." "start": "yarn sass & electron ."
}, },
......
name: sleek name: sleek
base: core18 base: core18
version: '1.0.7' version: '1.0.8'
summary: Todo app based on the todo.txt format for Linux, free and open-source summary: Todo app based on the todo.txt format for Linux, free and open-source
description: | description: |
sleek is an open-source todo app that makes use of the todo.txt format. sleeks GUI is modern and simple but still offers a decent set of functions which help users getting things done. sleek is available as a client for Windows, MacOS and Linux. sleek is an open-source todo app that makes use of the todo.txt format. sleeks GUI is modern and simple but still offers a decent set of functions which help users getting things done. sleek is available as a client for Windows, MacOS and Linux.
......
@charset "UTF-8"; @charset "UTF-8";
body.dark { body.dark {
background-color: #212224; background-color: #212224;
color: #CCCDCF; color: #f0f0f0;
} }
body.dark code, body.dark pre { body.dark code, body.dark pre {
background-color: #212224 !important; background-color: #212224 !important;
} }
body.dark a {
color: white;
}
body.dark a:hover, body.dark a:hover,
body.dark a:focus-visible {
color: #3273dc;
}
body.dark strong { body.dark strong {
color: #CCCDCF !important; color: #f0f0f0;
} }
body.dark input, body.dark input,
body.dark select { body.dark select {
...@@ -32,9 +32,11 @@ body.dark select:focus { ...@@ -32,9 +32,11 @@ body.dark select:focus {
} }
body.dark .is-focused .inputWrapper label, body.dark .is-focused .inputWrapper label,
body.dark .is-focused .inputWrapper i.fa-search, body.dark .is-focused .inputWrapper i.fa-search,
body.dark .is-focused .inputWrapper .todoTableSearchQuestionmark i,
body.dark .inputWrapper.is-focused label, body.dark .inputWrapper.is-focused label,
body.dark .inputWrapper.is-focused i.fa-search { body.dark .inputWrapper.is-focused i.fa-search,
color: #f5f5f5; body.dark .inputWrapper.is-focused .todoTableSearchQuestionmark i {
color: #f0f0f0 !important;
} }
body.dark input::placeholder { body.dark input::placeholder {
color: #5a5a5a !important; color: #5a5a5a !important;
...@@ -48,31 +50,17 @@ body.dark input[type=range] { ...@@ -48,31 +50,17 @@ body.dark input[type=range] {
background: #5a5a5a !important; background: #5a5a5a !important;
} }
body.dark input[type=range]::-webkit-slider-thumb { body.dark input[type=range]::-webkit-slider-thumb {
background: #f5f5f5; background: #f0f0f0;
box-shadow: 0 0 1em #212224;
} }
body.dark button { body.dark button {
color: #f5f5f5; color: #f0f0f0;
background: #2d2d2d; background: #212224;
} }
body.dark button i { body.dark button i {
color: #CCCDCF; color: #f0f0f0;
}
body.dark button:focus-visible {
color: white;
background: #5a5a5a;
}
body.dark button:disabled {
opacity: 0.5;
}
body.dark button.is-outlined:hover {
background: #3B3B3B !important;
} }
body.dark ::after { body.dark ::after {
border-color: white !important; border-color: #f0f0f0 !important;
}
body.dark svg {
color: white;
} }
body.dark table { body.dark table {
width: 100%; width: 100%;
...@@ -85,16 +73,21 @@ body.dark table tr td { ...@@ -85,16 +73,21 @@ body.dark table tr td {
body.dark table tr th { body.dark table tr th {
color: white !important; color: white !important;
} }
body.dark table.files tr td:last-child a { body.dark table.files tr td:last-child a,
color: white; body.dark table.files tr td:last-child a:hover {
color: #f0f0f0 !important;
} }
body.dark table.files tr td:last-child a:focus-visible { body.dark table.files tr td:last-child a:focus-visible {
color: #212224 !important; color: #212224 !important;
} }
body.dark table.files button { body.dark table.files button {
color: #f5f5f5; color: #f0f0f0;
background: #212224; background: #212224;
} }
body.dark table.files button:focus-visible {
color: #212224 !important;
background: #f0f0f0 !important;
}
body.dark table.files button:disabled { body.dark table.files button:disabled {
opacity: 0.5; opacity: 0.5;
} }
...@@ -105,20 +98,21 @@ body.dark nav svg { ...@@ -105,20 +98,21 @@ body.dark nav svg {
color: #CCCDCF; color: #CCCDCF;
} }
body.dark nav ul li.logo { body.dark nav ul li.logo {
color: #f0f0f0 !important;
background: none; background: none;
} }
body.dark nav ul li a { body.dark nav ul li a {
color: #CCCDCF; color: #f0f0f0 !important;
border-bottom: 1px solid #3B3B3B; border-bottom: 1px solid #3B3B3B;
} }
body.dark nav ul li a:hover, body.dark nav ul li a:hover,
body.dark nav ul li a:focus { body.dark nav ul li a:focus {
color: #CCCDCF; color: #CCCDCF !important;
border-bottom: none; border-bottom: none;
background-color: #3B3B3B; background-color: #3B3B3B;
} }
body.dark nav ul li a.is-highlighted { body.dark nav ul li a.is-highlighted {
color: #CCCDCF; color: #CCCDCF !important;
border-bottom: none; border-bottom: none;
background-color: #3B3B3B; background-color: #3B3B3B;
} }
...@@ -132,23 +126,20 @@ body.dark #todoTableSearchContainer { ...@@ -132,23 +126,20 @@ body.dark #todoTableSearchContainer {
background-color: #212224; background-color: #212224;
} }
body.dark #todoTableSearchContainer input[type=search]::-webkit-search-cancel-button { body.dark #todoTableSearchContainer input[type=search]::-webkit-search-cancel-button {
background-color: #f5f5f5; background-color: #f0f0f0;
} }
body.dark #todoTableSearchContainer #todoTableSearchAddTodo { body.dark #todoTableSearchContainer #todoTableSearchAddTodo {
background: #CCCDCF; background: #CCCDCF !important;
color: #212224; color: #212224 !important;
}
body.dark #todoTableSearchContainer #todoTableSearchAddTodo i {
color: inherit;
} }
body.dark #todoTableSearchContainer #todoTableSearchAddTodo:hover, body.dark #todoTableSearchContainer #todoTableSearchAddTodo:hover,
body.dark #todoTableSearchContainer #todoTableSearchAddTodo:focus, body.dark #todoTableSearchContainer #todoTableSearchAddTodo:focus,
body.dark #todoTableSearchContainer #todoTableSearchAddTodo:focus-visible { body.dark #todoTableSearchContainer #todoTableSearchAddTodo:focus-visible {
color: #212224 !important; color: #212224 !important;
background: #f5f5f5; background: white !important;
}
body.dark #todoTableSearchContainer #todoTableSearch.is-valid-query {
color: #10cf10 !important;
}
body.dark #todoTableSearchContainer #todoTableSearch.is-previous-query {
color: #cfa010 !important;
} }
body.dark #todoTableSearchContainer #btnToggleViewContainer { body.dark #todoTableSearchContainer #btnToggleViewContainer {
background: transparent !important; background: transparent !important;
...@@ -164,7 +155,7 @@ body.dark #todoTable .todo#previousItem.is-highlighted { ...@@ -164,7 +155,7 @@ body.dark #todoTable .todo#previousItem.is-highlighted {
} }
body.dark #todoTable .todo:hover .cell button, body.dark #todoTable .todo:hover .cell button,
body.dark #todoTable .todo.due button { body.dark #todoTable .todo.due button {
color: #f5f5f5; color: #f0f0f0;
} }
body.dark #todoTable .group.due { body.dark #todoTable .group.due {
color: #ebebeb; color: #ebebeb;
...@@ -176,7 +167,7 @@ body.dark #todoTable .todo { ...@@ -176,7 +167,7 @@ body.dark #todoTable .todo {
border-color: #3B3B3B; border-color: #3B3B3B;
} }
body.dark #todoTable .todo .cell.checkbox a { body.dark #todoTable .todo .cell.checkbox a {
color: #CCCDCF; color: #3273dc;
font-size: 1.25em; font-size: 1.25em;
} }
body.dark #todoTable .todo .cell.checkbox a:focus-visible { body.dark #todoTable .todo .cell.checkbox a:focus-visible {
...@@ -185,10 +176,14 @@ body.dark #todoTable .todo .cell.checkbox a:focus-visible { ...@@ -185,10 +176,14 @@ body.dark #todoTable .todo .cell.checkbox a:focus-visible {
body.dark #todoTable .todo .cell.checkbox a:hover { body.dark #todoTable .todo .cell.checkbox a:hover {
color: white !important; color: white !important;
} }
body.dark #todoTable .todo .cell.text { body.dark #todoTable .todo .cell.checkbox a:focus-visible,
color: #CCCDCF; body.dark #todoTable .todo .cell.archive a:focus-visible {
color: #CCCDCF !important;
}
body.dark #todoTable .todo a.cell.text {
color: #f0f0f0 !important;
} }
body.dark #todoTable .todo .cell.text:focus-visible { body.dark #todoTable .todo a.cell.text:focus-visible {
background: #2d2d2d !important; background: #2d2d2d !important;
} }
body.dark #todoTable .todo .cell.itemDueDate { body.dark #todoTable .todo .cell.itemDueDate {
...@@ -227,9 +222,7 @@ body.dark #modalForm i { ...@@ -227,9 +222,7 @@ body.dark #modalForm i {
color: #CCCDCF !important; color: #CCCDCF !important;
} }
body.dark #modalForm .field input, body.dark #modalForm .field input,
body.dark #modalForm .field input::placeholder, body.dark #modalForm .field select {
body.dark #modalForm .field select,
body.dark #modalForm .field select::placeholder {
color: white !important; color: white !important;
} }
body.dark #modalForm .field select option { body.dark #modalForm .field select option {
...@@ -251,9 +244,6 @@ body.dark #recurrencePicker .radio { ...@@ -251,9 +244,6 @@ body.dark #recurrencePicker .radio {
background: none !important; background: none !important;
color: white !important; color: white !important;
} }
body.dark #recurrencePicker #recurrencePickerInput::placeholder {
color: white !important;
}
body.dark #recurrencePicker .radio:hover { body.dark #recurrencePicker .radio:hover {
color: #CCCDCF !important; color: #CCCDCF !important;
} }
...@@ -292,27 +282,21 @@ body.dark #drawerContainer .drawer::-webkit-scrollbar-thumb { ...@@ -292,27 +282,21 @@ body.dark #drawerContainer .drawer::-webkit-scrollbar-thumb {
body.dark #drawerContainer #drawerClose { body.dark #drawerContainer #drawerClose {
background: #3B3B3B !important; background: #3B3B3B !important;
} }
body.dark #drawerContainer svg {
color: #f5f5f5 !important;
}
body.dark #drawerContainer #btnFiltersResetFilters {
background: #212224 !important;
}
body.dark #todoTableWrapper::-webkit-scrollbar-thumb:window-inactive, body.dark #todoTableWrapper::-webkit-scrollbar-thumb:window-inactive,
body.dark #todoTableWrapper::-webkit-scrollbar-thumb { body.dark #todoTableWrapper::-webkit-scrollbar-thumb {
background: #3B3B3B; background: #3B3B3B;
} }
body.dark #filterContext, body.dark #filterContext,
body.dark #todoContext { body.dark #todoContext {
box-shadow: 0 0 1em #212224 !important; box-shadow: 0 0 1em #2d2d2d !important;
} }
body.dark #filterContext a, body.dark #filterContext a,
body.dark #todoContext a { body.dark #todoContext a {
color: #f5f5f5; color: #f0f0f0 !important;
} }
body.dark #filterContext a:hover, body.dark #filterContext a:hover,
body.dark #todoContext a:hover { body.dark #todoContext a:hover {
color: #CCCDCF; color: #CCCDCF !important;
background: #2d2d2d !important; background: #2d2d2d !important;
} }
body.dark #filterContext .card, body.dark #filterContext .card,
...@@ -349,8 +333,13 @@ body.dark .projects button:focus-visible { ...@@ -349,8 +333,13 @@ body.dark .projects button:focus-visible {
background: #5c1f5c !important; background: #5c1f5c !important;
color: white; color: white;
} }
body.dark .priority button { body.dark .priority button:not(.A):not(.B):not(.C) {
opacity: 0.9; color: white;
background: #ccc;
}
body.dark .priority button.is-dark:not(.A):not(.B):not(.C) {
color: white;
background: #b3b3b3 !important;
} }
body.dark .toggle .switch .slider { body.dark .toggle .switch .slider {
background-color: #5a5a5a; background-color: #5a5a5a;
...@@ -369,10 +358,10 @@ body.dark .card { ...@@ -369,10 +358,10 @@ body.dark .card {
color: #CCCDCF; color: #CCCDCF;
} }
body.dark .card .card-footer-item:hover { body.dark .card .card-footer-item:hover {
color: #CCCDCF; color: #CCCDCF !important;
} }
body.dark .card .card-footer-item:focus-visible { body.dark .card .card-footer-item:focus-visible {
color: #f5f5f5 !important; color: #f0f0f0 !important;
background: #2d2d2d !important; background: #2d2d2d !important;
} }
body.dark .card .card-footer { body.dark .card .card-footer {
...@@ -381,7 +370,7 @@ body.dark .card .card-footer { ...@@ -381,7 +370,7 @@ body.dark .card .card-footer {
body.dark .card .card-footer-item { body.dark .card .card-footer-item {
border-color: #2d2d2d !important; border-color: #2d2d2d !important;
background: transparent; background: transparent;
color: #f5f5f5 !important; color: #f0f0f0 !important;
} }
body.dark .modal.content { body.dark .modal.content {
color: #CCCDCF !important; color: #CCCDCF !important;
...@@ -413,6 +402,12 @@ body.dark .modal.content table { ...@@ -413,6 +402,12 @@ body.dark .modal.content table {
background: #3B3B3B; background: #3B3B3B;
color: #CCCDCF !important; color: #CCCDCF !important;
} }
body.dark .modal.content .modal-card .modal-card-body::-webkit-scrollbar-thumb:window-inactive,
body.dark .modal.content .modal-card .modal-card-body::-webkit-scrollbar-thumb,
body.dark .modal.content table .modal-card-body::-webkit-scrollbar-thumb:window-inactive,
body.dark .modal.content table .modal-card-body::-webkit-scrollbar-thumb {
background: #2d2d2d;
}
body.dark .modal.content .title, body.dark .modal.content .title,
body.dark .modal.content table th { body.dark .modal.content table th {
color: white; color: white;
...@@ -426,15 +421,12 @@ body.dark .modal.content .tabs ul { ...@@ -426,15 +421,12 @@ body.dark .modal.content .tabs ul {
border-color: transparent; border-color: transparent;
} }
body.dark .modal.content .tabs li a { body.dark .modal.content .tabs li a {
color: white; color: white !important;
border-color: #5a5a5a; border-color: #5a5a5a !important;
}
body.dark .modal.content .tabs li a:hover {
border-color: #CCCDCF;
} }
body.dark .modal.content .tabs li.is-active a { body.dark .modal.content .tabs li.is-active a {
color: white; color: #3273dc !important;
border-color: #CCCDCF; border-color: #3273dc !important;
} }
body.dark .message.fixed { body.dark .message.fixed {
background: transparent !important; background: transparent !important;
...@@ -528,6 +520,13 @@ body::-webkit-scrollbar { ...@@ -528,6 +520,13 @@ body::-webkit-scrollbar {
display: none; display: none;
} }
a,
a:hover,
a:active,
a:focus {
color: #3273dc !important;
}
.is-active { .is-active {
display: block !important; display: block !important;
} }
...@@ -560,8 +559,8 @@ body::-webkit-scrollbar { ...@@ -560,8 +559,8 @@ body::-webkit-scrollbar {
border-bottom-right-radius: 0.65em; border-bottom-right-radius: 0.65em;
} }
.card-footer .card-footer-item:focus-visible { .card-footer .card-footer-item:focus-visible {
color: #212224 !important; color: #5a5a5a !important;
background-color: #f5f5f5 !important; background-color: #f0f0f0 !important;
} }
button { button {
...@@ -594,6 +593,7 @@ button:disabled, ...@@ -594,6 +593,7 @@ button:disabled,
button.is-greyed-out { button.is-greyed-out {
cursor: not-allowed; cursor: not-allowed;
filter: grayscale(100%); filter: grayscale(100%);
opacity: 0.6;
} }
input, input,
...@@ -612,7 +612,7 @@ input[type=text], ...@@ -612,7 +612,7 @@ input[type=text],
input[type=search], input[type=search],
textarea { textarea {
border-radius: 1.5em; border-radius: 1.5em;
background-color: #f5f5f5 !important; background-color: #f0f0f0 !important;
} }
.inputWrapper { .inputWrapper {
...@@ -637,15 +637,26 @@ textarea { ...@@ -637,15 +637,26 @@ textarea {
position: absolute; position: absolute;
top: 1.3em; top: 1.3em;
left: 2.5em; left: 2.5em;
z-index: 70; z-index: 65;
}
.inputWrapper .todoTableSearchQuestionmark {
display: none;
} }
.is-focused .inputWrapper label, .is-focused .inputWrapper label,
.is-focused .inputWrapper i.fa-search, .is-focused .inputWrapper i,
.inputWrapper.is-focused label, .inputWrapper.is-focused label,
.inputWrapper.is-focused i.fa-search { .inputWrapper.is-focused i {
color: #3273dc; color: #3273dc;
} }
.is-focused .inputWrapper .fa-search,
.inputWrapper.is-focused .fa-search {
display: none;
}
.is-focused .inputWrapper .todoTableSearchQuestionmark,
.inputWrapper.is-focused .todoTableSearchQuestionmark {
display: block;
}
input[type=number] { input[type=number] {
text-align: center; text-align: center;
...@@ -672,7 +683,6 @@ input[type=range]::-webkit-slider-thumb { ...@@ -672,7 +683,6 @@ input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none; -webkit-appearance: none;
background: #5a5a5a; background: #5a5a5a;
border-radius: 0.65em; border-radius: 0.65em;
box-shadow: 0 0 1em white;
} }
table { table {
...@@ -700,6 +710,7 @@ table.files tr td:first-child { ...@@ -700,6 +710,7 @@ table.files tr td:first-child {
text-align: center; text-align: center;
} }
table.files tr td:last-child a { table.files tr td:last-child a {
font-size: 1.2em;
padding: 0.5em; padding: 0.5em;
color: #3273dc; color: #3273dc;
cursor: pointer; cursor: pointer;
...@@ -712,8 +723,8 @@ table.files button { ...@@ -712,8 +723,8 @@ table.files button {
background: #3273dc; background: #3273dc;
} }
table.files button:disabled { table.files button:disabled {
color: #ccc; color: #5a5a5a;
background: #f5f5f5; background: #f0f0f0;
} }
:focus, :focus,
...@@ -724,11 +735,11 @@ table.files button:disabled { ...@@ -724,11 +735,11 @@ table.files button:disabled {
input:focus, input:focus,
select:focus { select:focus {
background-color: #f5f5f5 !important; background-color: #f0f0f0 !important;
} }
button:focus-visible { button:focus-visible {
color: #f5f5f5 !important; color: #f0f0f0 !important;
background: #5a5a5a !important; background: #5a5a5a !important;
} }
...@@ -857,7 +868,7 @@ code, pre { ...@@ -857,7 +868,7 @@ code, pre {
nav { nav {
height: 100%; height: 100%;
position: relative; position: relative;
background: #f5f5f5; background: #f0f0f0;
} }
nav ul { nav ul {
float: left; float: left;
...@@ -871,7 +882,7 @@ nav ul li.logo { ...@@ -871,7 +882,7 @@ nav ul li.logo {
display: block; display: block;
height: 5em; height: 5em;
line-height: 5em; line-height: 5em;
color: #5a5a5a; color: #5a5a5a !important;
cursor: pointer; cursor: pointer;