Skip to content
GitLab
Projects
Groups
Snippets
/
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Menu
Open sidebar
ransome
sleek
Commits
01ee0950
Commit
01ee0950
authored
Jul 05, 2021
by
ransome1
Browse files
PoC advanced search and minor GUI refresh
parent
d14b0ec0
Changes
35
Expand all
Hide whitespace changes
Inline
Side-by-side
package.json
View file @
01ee0950
...
...
@@ -102,7 +102,7 @@
"pack"
:
"yarn build:css && yarn build:pegjs && electron-builder --dir"
,
"lint"
:
"eslint --ext .js, src --ext .mjs, src"
,
"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"
,
"start"
:
"yarn sass & electron ."
},
...
...
src/css/style.css
View file @
01ee0950
@charset
"UTF-8"
;
body
.dark
{
background-color
:
#212224
;
color: #
CCCDCF
;
color
:
#
f0f0f0
;
}
body
.dark
code
,
body
.dark
pre
{
background-color
:
#212224
!important
;
}
body.dark a {
color: white;
}
body
.dark
a
:hover
,
body
.dark
a
:focus-visible
{
color
:
#3273dc
;
}
body
.dark
strong
{
color: #
CCCDCF !important
;
color
:
#
f0f0f0
;
}
body
.dark
input
,
body
.dark
select
{
...
...
@@ -32,9 +32,11 @@ body.dark select:focus {
}
body
.dark
.is-focused
.inputWrapper
label
,
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 i.fa-search {
color: #f5f5f5;
body
.dark
.inputWrapper.is-focused
i
.fa-search
,
body
.dark
.inputWrapper.is-focused
.todoTableSearchQuestionmark
i
{
color
:
#f0f0f0
!important
;
}
body
.dark
input
::placeholder
{
color
:
#5a5a5a
!important
;
...
...
@@ -48,31 +50,17 @@ body.dark input[type=range] {
background
:
#5a5a5a
!important
;
}
body
.dark
input
[
type
=
range
]
::-webkit-slider-thumb
{
background: #f5f5f5;
box-shadow: 0 0 1em #212224;
background
:
#f0f0f0
;
}
body
.dark
button
{
color: #f
5f5f5
;
background: #2
d2d2d
;
color
:
#f
0f0f0
;
background
:
#2
12224
;
}
body
.dark
button
i
{
color: #CCCDCF;
}
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;
color
:
#f0f0f0
;
}
body
.dark
::after
{
border-color: white !important;
}
body.dark svg {
color: white;
border-color
:
#f0f0f0
!important
;
}
body
.dark
table
{
width
:
100%
;
...
...
@@ -85,16 +73,21 @@ body.dark table tr td {
body
.dark
table
tr
th
{
color
:
white
!important
;
}
body.dark table.files tr td:last-child a {
color: white;
body
.dark
table
.files
tr
td
:last-child
a
,
body
.dark
table
.files
tr
td
:last-child
a
:hover
{
color
:
#f0f0f0
!important
;
}
body
.dark
table
.files
tr
td
:last-child
a
:focus-visible
{
color
:
#212224
!important
;
}
body
.dark
table
.files
button
{
color: #f
5f5f5
;
color
:
#f
0f0f0
;
background
:
#212224
;
}
body
.dark
table
.files
button
:focus-visible
{
color
:
#212224
!important
;
background
:
#f0f0f0
!important
;
}
body
.dark
table
.files
button
:disabled
{
opacity
:
0.5
;
}
...
...
@@ -105,20 +98,21 @@ body.dark nav svg {
color
:
#CCCDCF
;
}
body
.dark
nav
ul
li
.logo
{
color
:
#f0f0f0
!important
;
background
:
none
;
}
body
.dark
nav
ul
li
a
{
color: #
CCCDCF
;
color
:
#
f0f0f0
!important
;
border-bottom
:
1px
solid
#3B3B3B
;
}
body
.dark
nav
ul
li
a
:hover
,
body
.dark
nav
ul
li
a
:focus
{
color: #CCCDCF;
color
:
#CCCDCF
!important
;
border-bottom
:
none
;
background-color
:
#3B3B3B
;
}
body
.dark
nav
ul
li
a
.is-highlighted
{
color: #CCCDCF;
color
:
#CCCDCF
!important
;
border-bottom
:
none
;
background-color
:
#3B3B3B
;
}
...
...
@@ -132,23 +126,20 @@ body.dark #todoTableSearchContainer {
background-color
:
#212224
;
}
body
.dark
#todoTableSearchContainer
input
[
type
=
search
]
::-webkit-search-cancel-button
{
background-color: #f
5f5f5
;
background-color
:
#f
0f0f0
;
}
body
.dark
#todoTableSearchContainer
#todoTableSearchAddTodo
{
background: #CCCDCF;
color: #212224;
background
:
#CCCDCF
!important
;
color
:
#212224
!important
;
}
body
.dark
#todoTableSearchContainer
#todoTableSearchAddTodo
i
{
color
:
inherit
;
}
body
.dark
#todoTableSearchContainer
#todoTableSearchAddTodo
:hover
,
body
.dark
#todoTableSearchContainer
#todoTableSearchAddTodo
:focus
,
body
.dark
#todoTableSearchContainer
#todoTableSearchAddTodo
:focus-visible
{
color
:
#212224
!important
;
background: #f5f5f5;
}
body.dark #todoTableSearchContainer #todoTableSearch.is-valid-query {
color: #10cf10 !important;
}
body.dark #todoTableSearchContainer #todoTableSearch.is-previous-query {
color: #cfa010 !important;
background
:
white
!important
;
}
body
.dark
#todoTableSearchContainer
#btnToggleViewContainer
{
background
:
transparent
!important
;
...
...
@@ -164,7 +155,7 @@ body.dark #todoTable .todo#previousItem.is-highlighted {
}
body
.dark
#todoTable
.todo
:hover
.cell
button
,
body
.dark
#todoTable
.todo.due
button
{
color: #f
5f5f5
;
color
:
#f
0f0f0
;
}
body
.dark
#todoTable
.group.due
{
color
:
#ebebeb
;
...
...
@@ -176,7 +167,7 @@ body.dark #todoTable .todo {
border-color
:
#3B3B3B
;
}
body
.dark
#todoTable
.todo
.cell.checkbox
a
{
color: #
CCCDCF
;
color
:
#
3273dc
;
font-size
:
1.25em
;
}
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
{
color
:
white
!important
;
}
body.dark #todoTable .todo .cell.text {
color: #CCCDCF;
body
.dark
#todoTable
.todo
.cell.checkbox
a
:focus-visible
,
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
;
}
body
.dark
#todoTable
.todo
.cell.itemDueDate
{
...
...
@@ -227,9 +222,7 @@ body.dark #modalForm i {
color
:
#CCCDCF
!important
;
}
body
.dark
#modalForm
.field
input
,
body.dark #modalForm .field input::placeholder,
body.dark #modalForm .field select,
body.dark #modalForm .field select::placeholder {
body
.dark
#modalForm
.field
select
{
color
:
white
!important
;
}
body
.dark
#modalForm
.field
select
option
{
...
...
@@ -251,9 +244,6 @@ body.dark #recurrencePicker .radio {
background
:
none
!important
;
color
:
white
!important
;
}
body.dark #recurrencePicker #recurrencePickerInput::placeholder {
color: white !important;
}
body
.dark
#recurrencePicker
.radio
:hover
{
color
:
#CCCDCF
!important
;
}
...
...
@@ -292,27 +282,21 @@ body.dark #drawerContainer .drawer::-webkit-scrollbar-thumb {
body
.dark
#drawerContainer
#drawerClose
{
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
{
background
:
#3B3B3B
;
}
body
.dark
#filterContext
,
body
.dark
#todoContext
{
box-shadow: 0 0 1em #2
12224
!important;
box-shadow
:
0
0
1em
#2
d2d2d
!important
;
}
body
.dark
#filterContext
a
,
body
.dark
#todoContext
a
{
color: #f
5f5f5
;
color
:
#f
0f0f0
!important
;
}
body
.dark
#filterContext
a
:hover
,
body
.dark
#todoContext
a
:hover
{
color: #CCCDCF;
color
:
#CCCDCF
!important
;
background
:
#2d2d2d
!important
;
}
body
.dark
#filterContext
.card
,
...
...
@@ -349,8 +333,13 @@ body.dark .projects button:focus-visible {
background
:
#5c1f5c
!important
;
color
:
white
;
}
body.dark .priority button {
opacity: 0.9;
body
.dark
.priority
button
:not
(
.A
)
:not
(
.B
)
:not
(
.C
)
{
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
{
background-color
:
#5a5a5a
;
...
...
@@ -369,10 +358,10 @@ body.dark .card {
color
:
#CCCDCF
;
}
body
.dark
.card
.card-footer-item
:hover
{
color: #CCCDCF;
color
:
#CCCDCF
!important
;
}
body
.dark
.card
.card-footer-item
:focus-visible
{
color: #f
5f5f5
!important;
color
:
#f
0f0f0
!important
;
background
:
#2d2d2d
!important
;
}
body
.dark
.card
.card-footer
{
...
...
@@ -381,7 +370,7 @@ body.dark .card .card-footer {
body
.dark
.card
.card-footer-item
{
border-color
:
#2d2d2d
!important
;
background
:
transparent
;
color: #f
5f5f5
!important;
color
:
#f
0f0f0
!important
;
}
body
.dark
.modal.content
{
color
:
#CCCDCF
!important
;
...
...
@@ -413,6 +402,12 @@ body.dark .modal.content table {
background
:
#3B3B3B
;
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
table
th
{
color
:
white
;
...
...
@@ -426,15 +421,12 @@ body.dark .modal.content .tabs ul {
border-color
:
transparent
;
}
body
.dark
.modal.content
.tabs
li
a
{
color: white;
border-color: #5a5a5a;
}
body.dark .modal.content .tabs li a:hover {
border-color: #CCCDCF;
color
:
white
!important
;
border-color
:
#5a5a5a
!important
;
}
body
.dark
.modal.content
.tabs
li
.is-active
a
{
color:
white
;
border-color: #
CCCDCF
;
color
:
#3273dc
!important
;
border-color
:
#
3273dc
!important
;
}
body
.dark
.message.fixed
{
background
:
transparent
!important
;
...
...
@@ -528,6 +520,13 @@ body::-webkit-scrollbar {
display
:
none
;
}
a
,
a
:hover
,
a
:active
,
a
:focus
{
color
:
#3273dc
!important
;
}
.is-active
{
display
:
block
!important
;
}
...
...
@@ -560,8 +559,8 @@ body::-webkit-scrollbar {
border-bottom-right-radius
:
0.65em
;
}
.card-footer
.card-footer-item
:focus-visible
{
color: #
212224
!important;
background-color: #f
5f5f5
!important;
color
:
#
5a5a5a
!important
;
background-color
:
#f
0f0f0
!important
;
}
button
{
...
...
@@ -594,6 +593,7 @@ button:disabled,
button
.is-greyed-out
{
cursor
:
not-allowed
;
filter
:
grayscale
(
100%
);
opacity
:
0.6
;
}
input
,
...
...
@@ -612,7 +612,7 @@ input[type=text],
input
[
type
=
search
],
textarea
{
border-radius
:
1.5em
;
background-color: #f
5f5f5
!important;
background-color
:
#f
0f0f0
!important
;
}
.inputWrapper
{
...
...
@@ -637,15 +637,26 @@ textarea {
position
:
absolute
;
top
:
1.3em
;
left
:
2.5em
;
z-index: 70;
z-index
:
65
;
}
.inputWrapper
.todoTableSearchQuestionmark
{
display
:
none
;
}
.is-focused
.inputWrapper
label
,
.is-focused .inputWrapper i
.fa-search
,
.is-focused
.inputWrapper
i
,
.inputWrapper.is-focused
label
,
.inputWrapper.is-focused i
.fa-search
{
.inputWrapper.is-focused
i
{
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
]
{
text-align
:
center
;
...
...
@@ -672,7 +683,6 @@ input[type=range]::-webkit-slider-thumb {
-webkit-appearance
:
none
;
background
:
#5a5a5a
;
border-radius
:
0.65em
;
box-shadow: 0 0 1em white;
}
table
{
...
...
@@ -700,6 +710,7 @@ table.files tr td:first-child {
text-align
:
center
;
}
table
.files
tr
td
:last-child
a
{
font-size
:
1.2em
;
padding
:
0.5em
;
color
:
#3273dc
;
cursor
:
pointer
;
...
...
@@ -712,8 +723,8 @@ table.files button {
background
:
#3273dc
;
}
table
.files
button
:disabled
{
color: #
ccc
;
background: #f
5f5f5
;
color
:
#
5a5a5a
;
background
:
#f
0f0f0
;
}
:focus
,
...
...
@@ -724,11 +735,11 @@ table.files button:disabled {
input
:focus
,
select
:focus
{
background-color: #f
5f5f5
!important;
background-color
:
#f
0f0f0
!important
;
}
button
:focus-visible
{
color: #f
5f5f5
!important;
color
:
#f
0f0f0
!important
;
background
:
#5a5a5a
!important
;
}
...
...
@@ -857,7 +868,7 @@ code, pre {
nav
{
height
:
100%
;
position
:
relative
;
background: #f
5f5f5
;
background
:
#f
0f0f0
;
}
nav
ul
{
float
:
left
;
...
...
@@ -871,7 +882,7 @@ nav ul li.logo {
display
:
block
;
height
:
5em
;
line-height
:
5em
;
color: #5a5a5a;
color
:
#5a5a5a
!important
;
cursor
:
pointer
;
text-align
:
center
;
border-bottom
:
1px
solid
rgba
(
0
,
0
,
0
,
0.05
);
...
...
@@ -879,11 +890,12 @@ nav ul li.logo {
nav
ul
li
a
:focus
,
nav
ul
li
a
:hover
,
nav
ul
li
a
.is-highlighted
{
color
:
#5a5a5a
!important
;
background
:
#ebebeb
;
}
nav
ul
li
.logo
{
font-family
:
FreeSansBold
;
color: white;
color
:
white
!important
;
background
:
#5a5a5a
;
cursor
:
default
;
}
...
...
@@ -897,7 +909,6 @@ nav ul:nth-child(2) {
#todoTableSearchContainer
{
display
:
none
;
margin
:
0
1.5em
;
margin-top: 0.5em;
padding-bottom
:
0.5em
;
background
:
white
;
position
:
sticky
;
...
...
@@ -919,8 +930,8 @@ nav ul:nth-child(2) {
#todoTableSearchContainer
#todoTableSearchAddTodo
:hover
,
#todoTableSearchContainer
#todoTableSearchAddTodo
:focus
,
#todoTableSearchContainer
#todoTableSearchAddTodo
:focus-visible
{
color:
white
;
background:
#3273dc
;
color
:
#212224
!important
;
background
:
white
!important
;
}
#todoTableSearchContainer
input
[
type
=
search
]
{
padding-left
:
3.5em
;
...
...
@@ -936,21 +947,17 @@ nav ul:nth-child(2) {
cursor
:
pointer
;
margin-top
:
-0.7em
;
}
#todoTableSearchContainer #todoTableSearch.is-valid-query {
color: #09aa41;
}
#todoTableSearchContainer #todoTableSearch.is-previous-query {
color: #cfa010;
}
#todoTableSearchContainer
label
{
left
:
5.9em
;
}
#todoTableSearchContainer i.fa-search {
#todoTableSearchContainer
i
.fa-search
,
#todoTableSearchContainer
.todoTableSearchQuestionmark
{
font-size
:
1.3em
;
line-height
:
1
;
position
:
absolute
;
top
:
0.8em
;
left
:
1.4em
;
z-index:
6
0;
z-index
:
7
0
;
padding
:
0.75em
0.75em
0.75em
0
;
}
...
...
@@ -978,6 +985,10 @@ nav ul:nth-child(2) {
top
:
1.65em
;
}
.modal.content
.modal-card
{
padding
:
1em
;
}
table
tr
td
{
padding
:
0.25em
1.5em
0.25em
0
!important
;
}
...
...
@@ -989,12 +1000,16 @@ nav ul:nth-child(2) {
#todoTableSearchContainer
input
[
type
=
search
]
::-webkit-search-cancel-button
{
margin-top
:
0
;
}
#todoTableSearchContainer i.fa-search {
#todoTableSearchContainer
i
.fa-search
,
#todoTableSearchContainer
.todoTableSearchQuestionmark
{
top
:
0.65em
;
}
#todoTableSearchContainer
#todoTableSearchAddTodo
{
top
:
2.2em
;
}
#todoTableSearchContainer
#todoTableSearchAddTodo
i
{
display
:
none
;
}
#todoTable
{
padding
:
0
1.5em
1.5em
1.5em
;
...
...
@@ -1084,6 +1099,9 @@ body.compact #modalForm textarea {
body
.compact
#modalForm
#modalFormInputResize
{
top
:
1.65em
;
}
body
.compact
.modal.content
.modal-card
{
padding
:
1em
;
}
body
.compact
table
tr
td
{
padding
:
0.25em
1.5em
0.25em
0
!important
;
}
...
...
@@ -1093,12 +1111,16 @@ body.compact #sortByContainer li {
body
.compact
#todoTableSearchContainer
input
[
type
=
search
]
::-webkit-search-cancel-button
{
margin-top
:
0
;
}
body.compact #todoTableSearchContainer i.fa-search {
body
.compact
#todoTableSearchContainer
i
.fa-search
,
body
.compact
#todoTableSearchContainer
.todoTableSearchQuestionmark
{
top
:
0.65em
;
}
body
.compact
#todoTableSearchContainer
#todoTableSearchAddTodo
{
top
:
2.2em
;
}
body
.compact
#todoTableSearchContainer
#todoTableSearchAddTodo
i
{
display
:
none
;
}
body
.compact
#todoTable
{
padding
:
0
1.5em
1.5em
1.5em
;
}
...
...
@@ -1212,27 +1234,17 @@ body.compact #autoCompleteContainer h4 {
font-size
:
1.2em
;
font-family
:
FreeSansBold
;
background
:
#ccc
;
color:
#5a5a5a
;
color
:
white
;
padding
:
0.1em
0.5em
!important
;
}
.priority
button
span
.tag
{
color: inherit;
}
.priority button.is-dark span.tag {
background: #4d4d4d;
color
:
#5a5a5a
;
}
.priority
button
.is-dark
,
.priority
button
.is-dark
:hover
,
.priority
button
.is-dark.is-hovered
,
.priority
button
:focus-visible
{
background: #737373;
color: white;
}
.priority button.is-dark span.tag,
.priority button.is-dark:hover span.tag,
.priority button.is-dark.is-hovered span.tag,
.priority button:focus-visible span.tag {
color: #2d2d2d !important;
background
:
#999999
;
}
.priority
button
.A
{
background
:
#ff3860
;
...
...
@@ -1328,7 +1340,7 @@ body.compact #autoCompleteContainer h4 {
width
:
2.5em
;
height
:
2.5em
;
display
:
none
;
line-height:
2
.5em;
line-height
:
1
.5em
;
text-align
:
center
;
font-size
:
1.25em
;
position
:
absolute
;
...
...
@@ -1375,17 +1387,22 @@ body.compact #autoCompleteContainer h4 {
#drawerContainer
.drawer
#sortByContainer
li
.drag-sort-active
{
border-left
:
0.2em
solid
#3273dc
;
}
#drawerContainer
.drawer
.priority
button
{
font-size
:
1.4em
;
}
#drawerContainer
.drawer
button
{
position
:
relative
;
margin
:
0
0.5rem
0.5rem
0
;
padding
:
0.5em
0.75em
;
}
#drawerContainer
.drawer
button
span
.tag
{
height
:
1.6em
;
font-family
:
FreeSansBold
;
position
:
absolute
;
right
:
-0.75em
;
top
:
-0.75em
;
z-index
:
35
;
padding
:
0
0.5em
;
}
#drawerContainer
.drawer
button
.is-greyed-out
.tag
{
display
:
none
;
...
...
@@ -1563,11 +1580,18 @@ body.compact #autoCompleteContainer h4 {
.modal.content
.tabs
{
display
:
flex
;
flex-shrink
:
0
;
margin-bottom
:
0
;
}
.modal.content
.tabs
li
a
{
color
:
#5a5a5a
!important
;
border-color
:
#ccc
!important
;
border-width
:
2px
;
margin-bottom
:
0
;
}
.modal.content
.tabs
li
.is-active
a
{
color
:
#3273dc
!important
;
border-color
:
#3273dc
!important
;
}
#modalForm
[
open
]
:not
(
:focus-within
)
{
background-color
:
#fffffe
;
...
...
@@ -1616,7 +1640,7 @@ body.compact #autoCompleteContainer h4 {
border-radius
:
0
;
border-bottom-right-radius
:
0.65em
;
border-bottom-left-radius
:
0.65em
;
background: #f
5f5f5
;
background
:
#f
0f0f0
;
}
#modalForm
#autoCompleteContainer
section
{
max-height
:
25em
;
...
...
@@ -1758,7 +1782,7 @@ body.compact #autoCompleteContainer h4 {
transition
:
background-color
0.5s
ease-out
;
}
#todoTable
.todo
#previousItem
.is-highlighted
{
background-color: #f
5f5f5
;