Commit fe080b66 authored by ransome1's avatar ransome1
Browse files

GUI refresh

parent abf8c0c4
......@@ -12,14 +12,12 @@ snap/local/
*.db:encryptable
*.db
System Volume Information/
build/
Thumbs.db
flatpak/generated-sources.json
flatpak/com.github.ransome1.sleek.yml
assets/icons/bak
squashfs-root/
.eslintrc.json
build/
package-lock.json
.vs/
.vscode/
......
{
"name": "sleek",
"productName": "sleek",
"version": "1.0.7",
"version": "1.0.8",
"description": "Todo app based on todo.txt for Linux, Windows and MacOS, free and open-source",
"synopsis": "Todo app based on todo.txt for Linux, Windows and MacOS, free and open-source",
"category": "ProjectManagement",
......@@ -92,17 +92,16 @@
"artifactName": "${productName}-${version}-${arch}.${ext}"
},
"scripts": {
"pack": "yarn build:css && electron-builder --dir",
"build:windows": "yarn build:css && electron-builder -w --publish never",
"build:macos": "yarn build:css && electron-builder -m --publish never",
"build:linux": "yarn build:css && electron-builder -l --publish never",
"build:appx": "electron-builder -w appx --publish never",
"build:pacman": "electron-builder -l pacman --publish never",
"build:appx": "yarn build:css && electron-builder -w appx --publish never",
"build:appimage": "yarn build:css && yarn build:pegjs && electron-builder -l AppImage --publish never",
"pack": "electron-builder --dir",
"build:css": "sass src/scss/style.scss:src/css/style.css",
"lint": "eslint --ext .js, src --ext .mjs, src",
"test": "mocha --timeout 10000",
"test1": "mocha ./test/onboarding.js --timeout 10000",
"build:css": "sass src/scss/style.scss:src/css/style.css",
"sass": "sass -w src/scss/style.scss:src/css/style.css",
"start": "yarn sass & electron ."
},
......
export function createModalJail(modal) {
// add all the elements inside modal which you want to make focusable
const focusableElements = 'a.button, [tabindex]:not([tabindex="-1"])';
const focusableElements = '[tabindex]:not([tabindex="-1"])';
const firstFocusableElement = modal.querySelectorAll(focusableElements)[0]; // get first element to be focused inside modal
const focusableContent = modal.querySelectorAll(focusableElements);
const lastFocusableElement = focusableContent[focusableContent.length - 1]; // get last element to be focused inside modal
......
......@@ -9,14 +9,10 @@ body.dark code, body.dark pre {
body.dark a {
color: white;
}
body.dark button:focus-visible,
body.dark a:focus-visible {
outline: 2px solid #CCCDCF !important;
}
body.dark a:hover,
body.dark button:hover,
body.dark strong {
color: #CCCDCF;
color: #CCCDCF !important;
}
body.dark input,
body.dark select {
......@@ -25,23 +21,18 @@ body.dark select {
color: white !important;
}
body.dark input[type=text],
body.dark input[type=search],
body.dark textarea {
background: #2d2d2d !important;
border: none;
color: white;
}
body.dark input:active,
body.dark input:focus,
body.dark input.is-focused,
body.dark select:focus,
body.dark textarea:active,
body.dark textarea:focus,
body.dark input[type=search]:focus {
outline: none !important;
box-shadow: 0 0 0 2px #CCCDCF !important;
body.dark select:focus {
background-color: #2d2d2d !important;
}
body.dark input::placeholder {
color: #4a4a4a !important;
color: #5a5a5a !important;
}
body.dark input[type=checkbox]:focus,
body.dark input[type=checkbox]:active {
......@@ -49,7 +40,7 @@ body.dark input[type=checkbox]:active {
box-shadow: none !important;
}
body.dark input[type=range] {
background: #4a4a4a !important;
background: #5a5a5a !important;
}
body.dark button {
color: white !important;
......@@ -102,17 +93,17 @@ body.dark nav svg {
body.dark nav ul li.logo {
background: none;
}
body.dark nav ul li {
body.dark nav ul li a {
color: #CCCDCF;
border-bottom: 1px solid #3B3B3B;
}
body.dark nav ul li:hover,
body.dark nav ul li:focus {
body.dark nav ul li a:hover,
body.dark nav ul li a:focus {
color: #CCCDCF;
border-bottom: none;
background-color: #3B3B3B;
}
body.dark nav ul li.is-highlighted {
body.dark nav ul li a.is-highlighted {
color: #CCCDCF;
border-bottom: none;
background-color: #3B3B3B;
......@@ -126,9 +117,19 @@ body.dark #drawerContainer .zoom #zoomStatus {
body.dark #todoTableSearchContainer {
background-color: #212224;
}
body.dark #todoTableSearchContainer .icon.is-left i,
body.dark #todoTableSearchContainer .icon.is-right i {
color: #4a4a4a;
body.dark #todoTableSearchContainer input[type=search]::-webkit-search-cancel-button {
background-color: #f5f5f5;
}
body.dark #todoTableSearchContainer #todoTableSearchAddTodo {
background: #f5f5f5;
color: #212224;
}
body.dark #todoTableSearchContainer #todoTableSearchAddTodo:focus,
body.dark #todoTableSearchContainer #todoTableSearchAddTodo:focus-visible {
background: white;
}
body.dark #todoTableSearchContainer i.fa-search {
color: #f5f5f5;
}
body.dark #todoTableSearchContainer #btnToggleViewContainer {
background: transparent !important;
......@@ -169,7 +170,7 @@ body.dark #todoTable .todo .cell.itemDueDate i {
color: inherit;
}
body.dark #todoTable .todo .cell.itemDueDate i.fa-sort-down {
color: #4a4a4a;
color: #5a5a5a;
}
body.dark #todoTable .todo .cell.itemDueDate.isToday,
body.dark #todoTable .todo .cell.itemDueDate.isPast {
......@@ -198,14 +199,10 @@ body.dark #modalForm i {
color: #CCCDCF !important;
}
body.dark #modalForm button {
color: white;
border-color: #3B3B3B !important;
border-right: 1px solid #212224 !important;
background: transparent !important;
}
body.dark #modalForm button:hover {
color: #CCCDCF !important;
}
body.dark #modalForm .field input,
body.dark #modalForm .field input::placeholder,
body.dark #modalForm .field select,
......@@ -215,6 +212,16 @@ body.dark #modalForm .field select::placeholder {
body.dark #modalForm .field select option {
background: #3B3B3B;
}
body.dark #modalForm #autoCompleteContainer {
background: #2d2d2d;
}
body.dark #modalForm #autoCompleteContainer h4 {
color: white;
}
body.dark #modalForm #autoCompleteContainer section::-webkit-scrollbar-thumb:window-inactive,
body.dark #modalForm #autoCompleteContainer section::-webkit-scrollbar-thumb {
background: #5a5a5a;
}
body.dark #recurrencePicker #recurrencePickerInput,
body.dark #recurrencePicker .radio {
cursor: pointer;
......@@ -233,12 +240,6 @@ body.dark #recurrencePicker #recurrencePickerContainer {
body.dark #recurrencePicker #recurrencePickerContainer .card-footer {
border-color: #212224;
}
body.dark #autoCompleteContainer {
background: #3B3B3B;
}
body.dark #autoCompleteContainer h4 {
color: #CCCDCF;
}
body.dark #drawerContainer .drawer {
background: #3B3B3B !important;
}
......@@ -248,9 +249,19 @@ body.dark #drawerContainer .drawer h4.is-4 {
body.dark #drawerContainer .drawer h4.is-4 i {
color: #CCCDCF !important;
}
body.dark #drawerContainer .drawer #sortByContainer li {
background: #2d2d2d;
color: white;
}
body.dark #drawerContainer .drawer #sortByContainer li i {
color: #ebebeb;
}
body.dark #drawerContainer .drawer #sortByContainer li.drag-sort-active {
border-left: 0.2em solid white;
}
body.dark #drawerContainer .drawer::-webkit-scrollbar-thumb:window-inactive,
body.dark #drawerContainer .drawer::-webkit-scrollbar-thumb {
background: #4a4a4a;
background: #5a5a5a;
}
body.dark #drawerContainer #drawerClose {
background: #3B3B3B !important;
......@@ -293,6 +304,9 @@ body.dark .contexts .button span.tag {
color: #184e41;
background: #c9eee5;
}
body.dark .contexts .button:focus-visible {
background: #309c81;
}
body.dark .contexts .button.is-dark {
background: #184e41;
color: white;
......@@ -305,6 +319,9 @@ body.dark .projects .button span.tag {
color: #5c1f5c;
background: #f2daf2;
}
body.dark .projects .button:focus-visible {
background: #a839a8;
}
body.dark .projects .button.is-dark {
background: #5c1f5c;
color: white;
......@@ -313,7 +330,7 @@ body.dark .priority .button {
opacity: 0.9;
}
body.dark .toggle .switch .slider {
background-color: #4a4a4a;
background-color: #5a5a5a;
}
body.dark .toggle .switch input:checked + .slider {
background-color: #2d2d2d !important;
......@@ -335,10 +352,15 @@ body.dark .modal .modal-content .card .card-footer,
body.dark .modal .modal-content .card .card-footer-item {
border-color: #2d2d2d;
}
body.dark .modal .modal-content .card .card-footer-item:hover {
color: #CCCDCF;
}
body.dark .modal.content {
color: #CCCDCF !important;
}
body.dark .modal.content .button {
body.dark .modal.content .button,
body.dark .modal.content button,
body.dark .modal.content select {
background: #2d2d2d !important;
}
body.dark .modal.content .select:not(.is-multiple):not(.is-loading)::after {
......@@ -377,7 +399,7 @@ body.dark .modal.content .tabs ul {
}
body.dark .modal.content .tabs li a {
color: white;
border-color: #4a4a4a;
border-color: #5a5a5a;
}
body.dark .modal.content .tabs li a:hover {
border-color: #CCCDCF;
......@@ -386,16 +408,6 @@ body.dark .modal.content .tabs li.is-active a {
color: white;
border-color: #CCCDCF;
}
body.dark #sortByContainer li {
background: #2d2d2d;
color: white;
}
body.dark #sortByContainer li i {
color: #ebebeb;
}
body.dark #sortByContainer li.drag-sort-active {
border-left: 0.2em solid white;
}
body.dark .message.fixed {
background: transparent !important;
}
......@@ -411,8 +423,6 @@ body.dark .message.fixed .message-body .button {
}
body.dark .dueDate #datePickerInput,
body.dark .dueDate #datePickerInput::placeholder {
color: white !important;
background: transparent !important;
cursor: pointer;
}
body.dark .datepicker {
......@@ -487,40 +497,106 @@ body::-webkit-scrollbar {
display: none;
}
button, button:focus, button:active, button:active, button:after, button::before, button:active:after, .button, .button-is-white {
.is-active {
display: block !important;
}
.is-hidden {
display: none;
}
.is-greyed-out {
filter: opacity(75%) grayscale(100%);
}
button,
.button,
.button:focus,
.button:active,
.button:active,
.button:after,
.button::before,
.button:active:after {
color: #3273dc;
border: none !important;
box-shadow: none !important;
}
.button:hover,
button:hover {
color: #2d2d2d;
}
.button i {
color: #3273dc;
}
.is-hidden {
display: none !important;
.button.is-greyed-out {
cursor: not-allowed;
}
.button.is-outlined {
background: transparent;
border: 1px solid #ccc !important;
color: #4a4a4a;
.button.is-link:hover {
color: #f5f5f5;
}
.button.is-outlined:hover {
border: 1px solid #ccc !important;
color: #4a4a4a;
input,
select,
textarea {
border: none !important;
box-shadow: none !important;
outline: none !important;
}
.button.is-link i {
color: white;
input::placeholder {
color: #5a5a5a;
}
.button.is-greyed-out {
cursor: not-allowed;
input[type=text],
input[type=search],
textarea {
border-radius: 1.5em;
background-color: #f5f5f5 !important;
}
.is-greyed-out {
filter: opacity(75%) grayscale(100%);
.inputWrapper {
position: relative;
padding-top: 0.5em;
}
.inputWrapper input[type=search],
.inputWrapper input[type=text],
.inputWrapper textarea {
padding: 2.2em 1em 1.3em 1.5em;
}
.inputWrapper input::placeholder,
.inputWrapper textarea::placeholder {
color: #ccc;
}
.inputWrapper label {
cursor: pointer;
font-size: 0.75em;
position: absolute;
top: 1.3em;
left: 2.5em;
z-index: 70;
}
input[type=number] {
text-align: center;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
}
input[type=range] {
padding: 0;
-webkit-appearance: none;
height: 0.25em;
background: #5a5a5a !important;
border-radius: 10px;
outline: none;
border-bottom: none !important;
}
table {
......@@ -555,56 +631,26 @@ table.files tr td:last-child i {
:focus,
:focus-visible {
outline: none;
box-shadow: none;
outline: none;
}
button:focus-visible,
a:focus-visible,
li:focus-visible,
select:focus,
input:focus,
textarea:focus,
input[type=text]:focus {
box-shadow: 0 0 0 2px #3273dc inset !important;
outline: none !important;
border: none !important;
}
input,
select {
border: none !important;
color: #3273dc !important;
select:focus {
background-color: #f5f5f5 !important;
}
input[type=text] {
border: 1px solid #ccc !important;
.card-footer-item:focus-visible {
color: #2d2d2d !important;
background: #f5f5f5 !important;
}
input[type=text]::placeholder {
color: #ccc !important;
}
input::placeholder {
color: #3273dc !important;
}
input[type=number] {
text-align: center;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
.cell.checkbox a:focus-visible i {
color: #212224;
}
input[type=range] {
-webkit-appearance: none;
height: 0.25em;
background: #4a4a4a;
border-radius: 10px;
outline: none;
a.cell.text:focus-visible {
background: #f5f5f5;
}
.title,
......@@ -632,38 +678,34 @@ nav ul {
margin: 0;
padding: 0;
}
nav ul li {
nav ul li a,
nav ul li.logo {
width: 5em;
height: 5em;
display: block;
color: #4a4a4a;
color: #5a5a5a;
cursor: pointer;
line-height: 5em;
text-align: center;
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
nav ul li:focus {
nav ul li a:focus {
background: #ebebeb;
outline-style: none;
}
nav ul li:hover,
nav ul li.is-highlighted {
nav ul li a:hover,
nav ul li a.is-highlighted {
background: #ebebeb;
}
nav ul li#navBtnFilter.is-hidden {
nav ul li a#navBtnFilter.is-hidden {
display: none;
}
nav ul li.logo {
background: #4a4a4a;
background: #5a5a5a;
color: white;
font-family: FreeSansBold;
cursor: default;
}
nav ul li span.alert {
position: absolute;
top: 13%;
right: 35%;
}
nav ul:nth-child(2) {
height: auto;
position: absolute;
......@@ -671,59 +713,19 @@ nav ul:nth-child(2) {
left: 0;
}
.contentContainer {
#noResultContainer {
height: 80%;
}
.contentContainer p {
padding: 0 10%;
}
#recurrencePicker {
position: relative;
}
#recurrencePicker #recurrencePickerInput {
cursor: pointer;
}
#recurrencePicker .card {
width: auto;
display: none;
position: fixed;
}
#recurrencePicker .card .content {
margin: 0;
padding: 1em;
display: flex;
align-items: center;
}
#recurrencePicker .card .content div {
width: auto;
float: left;
text-align: center;
padding: 0 0.5em;
}
#recurrencePicker .card .content div.options {
text-align: left;
}
#recurrencePicker .card .content #recurrencePickerDecrease,
#recurrencePicker .card .content #recurrencePickerIncrease,
#recurrencePicker .card .content #recurrencePickerSpinner {
font-size: 1.25em;
padding: 0.5em;
}
#recurrencePicker .card .content #recurrencePickerSpinner {
width: 2em;
}
#recurrencePicker .card label {
display: block;
padding: 0;
margin: 0.25em 0;
.contentContainer {
height: 100%;
}
#recurrencePicker .card.is-active {
display: block;
.contentContainer p {
padding: 0 10%;
}
#recurrencePicker.is-active {
display: block;
.contentContainer.is-active {
display: flex !important;
}
#errorContainer {
......@@ -739,574 +741,348 @@ nav ul:nth-child(2) {
color: white;
}
#errorContainer.is-active {
display: block;
#datePickerInput {
cursor: pointer;
}
#drawerContainer {
width: var(--resizeable-width);
min-width: var(--min-width);
max-width: var(--max-width);
--resizeable-width: 34em;
height: 100%;
float: left;
.contentContainer {
width: 100%;
text-align: center;
display: none;