From 0115ea80887e6c4ae401c7d2f2e3f7a3e91fe6a0 Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Thu, 9 Jan 2025 01:23:17 +0200 Subject: [PATCH 01/91] style(next): create a CSS file for form-related styles --- src/public/stylesheets/theme-next/base.css | 1 + src/public/stylesheets/theme-next/forms.css | 0 2 files changed, 1 insertion(+) create mode 100644 src/public/stylesheets/theme-next/forms.css diff --git a/src/public/stylesheets/theme-next/base.css b/src/public/stylesheets/theme-next/base.css index b9aa3c619..6418c7163 100644 --- a/src/public/stylesheets/theme-next/base.css +++ b/src/public/stylesheets/theme-next/base.css @@ -1,3 +1,4 @@ +@import url(./forms.css); @import url(./shell.css); @import url(./settings.css); @import url(./notes/text.css); diff --git a/src/public/stylesheets/theme-next/forms.css b/src/public/stylesheets/theme-next/forms.css new file mode 100644 index 000000000..e69de29bb From 93e740cf36909def04ea3e43bad759fb9277210c Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Mon, 13 Jan 2025 14:51:23 +0200 Subject: [PATCH 02/91] style(next): restyle text boxes --- src/public/stylesheets/theme-next-dark.css | 12 ++++- src/public/stylesheets/theme-next-light.css | 10 ++++- src/public/stylesheets/theme-next/forms.css | 49 +++++++++++++++++++++ 3 files changed, 68 insertions(+), 3 deletions(-) diff --git a/src/public/stylesheets/theme-next-dark.css b/src/public/stylesheets/theme-next-dark.css index dd7f1ee77..8456d5a18 100644 --- a/src/public/stylesheets/theme-next-dark.css +++ b/src/public/stylesheets/theme-next-dark.css @@ -32,8 +32,16 @@ --muted-text-color: #bbb; - --input-text-color: #ccc; - --input-background-color: #333; + --input-background-color: #ffffff12; + --input-text-color: #ffffff52; + --input-placeholder-color: #b7b7b782; + --input-selection-background: gray; + --input-selection-text-color: white; + --input-hover-background: #ffffff1f; + --input-hover-color: var(--input-text-color); + --input-focus-outline-color: #80808095; + --input-focus-background: #ffffff1f; + --input-focus-color: white; --hover-item-text-color: #efefef; --hover-item-background-color: #ffffff24; diff --git a/src/public/stylesheets/theme-next-light.css b/src/public/stylesheets/theme-next-light.css index 0bed73460..c034322a4 100644 --- a/src/public/stylesheets/theme-next-light.css +++ b/src/public/stylesheets/theme-next-light.css @@ -32,8 +32,16 @@ --muted-text-color: #666; + --input-background-color: #00000012; --input-text-color: black; - --input-background-color: transparent; + --input-placeholder-color: #06060682; + --input-selection-background: gray; + --input-selection-text-color: white; + --input-hover-background: #00000020; + --input-hover-color: black; + --input-focus-outline-color: #00000063; + --input-focus-background: #ffffff80; + --input-focus-color: #000; --hover-item-text-color: black; --hover-item-background-color: #0000001a; diff --git a/src/public/stylesheets/theme-next/forms.css b/src/public/stylesheets/theme-next/forms.css index e69de29bb..5f966bcce 100644 --- a/src/public/stylesheets/theme-next/forms.css +++ b/src/public/stylesheets/theme-next/forms.css @@ -0,0 +1,49 @@ +/* + * Input boxes + */ + +input:disabled { + opacity: .33; +} + +/* Text boxes */ + +input:not([type]), +input[type="text"], +input[type="number"], +input[type="password"] { + outline: 3px solid transparent; + border: unset; + outline-offset: 6px; +} + +input:not([type]):hover, +input[type="text"]:hover, +input[type="number"]:hover, +input[type="password"]:hover { + --input-background-color: var(--input-hover-background); + --input-text-color: var(--input-hover-color); +} + +input:not([type]):focus, +input[type="text"]:focus, +input[type="number"]:focus, +input[type="password"]:focus { + --input-background-color: var(--input-focus-background); + --input-text-color: var(--input-focus-color); + + outline: 3px solid var(--input-focus-outline-color); + outline-offset: 0; + box-shadow: unset; + transition: outline-color 50ms linear, + outline-offset 200ms ease-out; +} + +input::placeholder { + --muted-text-color: var(--input-placeholder-color); +} + +input::selection { + background: var(--input-selection-background); + color: var(--input-selection-text-color); +} \ No newline at end of file From 56fb70ab5e86201edda60244babea1c34f7f0381 Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Mon, 13 Jan 2025 21:12:27 +0200 Subject: [PATCH 03/91] style(next): refactor CSS --- src/public/stylesheets/theme-next/forms.css | 15 ++++++++------- 1 file changed, 8 insertions(+), 7 deletions(-) diff --git a/src/public/stylesheets/theme-next/forms.css b/src/public/stylesheets/theme-next/forms.css index 5f966bcce..9b5a54128 100644 --- a/src/public/stylesheets/theme-next/forms.css +++ b/src/public/stylesheets/theme-next/forms.css @@ -13,28 +13,29 @@ input[type="text"], input[type="number"], input[type="password"] { outline: 3px solid transparent; - border: unset; outline-offset: 6px; + border: unset; + background: var(--input-background-color); + color: var(--input-text-color); } input:not([type]):hover, input[type="text"]:hover, input[type="number"]:hover, input[type="password"]:hover { - --input-background-color: var(--input-hover-background); - --input-text-color: var(--input-hover-color); + background: var(--input-hover-background); + color: var(--input-hover-color); } input:not([type]):focus, input[type="text"]:focus, input[type="number"]:focus, input[type="password"]:focus { - --input-background-color: var(--input-focus-background); - --input-text-color: var(--input-focus-color); - + box-shadow: unset; outline: 3px solid var(--input-focus-outline-color); outline-offset: 0; - box-shadow: unset; + background: var(--input-focus-background); + color: var(--input-focus-color); transition: outline-color 50ms linear, outline-offset 200ms ease-out; } From 9ea7b35e6a3491e9b9c432cfd1494c81890e174c Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Mon, 13 Jan 2025 21:23:12 +0200 Subject: [PATCH 04/91] style(next): use the text box appearance for text areas as well --- src/public/stylesheets/theme-next/forms.css | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) diff --git a/src/public/stylesheets/theme-next/forms.css b/src/public/stylesheets/theme-next/forms.css index 9b5a54128..2e3fec155 100644 --- a/src/public/stylesheets/theme-next/forms.css +++ b/src/public/stylesheets/theme-next/forms.css @@ -11,7 +11,8 @@ input:disabled { input:not([type]), input[type="text"], input[type="number"], -input[type="password"] { +input[type="password"], +.form-control { outline: 3px solid transparent; outline-offset: 6px; border: unset; @@ -22,7 +23,8 @@ input[type="password"] { input:not([type]):hover, input[type="text"]:hover, input[type="number"]:hover, -input[type="password"]:hover { +input[type="password"]:hover, +.form-control:hover { background: var(--input-hover-background); color: var(--input-hover-color); } @@ -30,7 +32,8 @@ input[type="password"]:hover { input:not([type]):focus, input[type="text"]:focus, input[type="number"]:focus, -input[type="password"]:focus { +input[type="password"]:focus, +.form-control:focus { box-shadow: unset; outline: 3px solid var(--input-focus-outline-color); outline-offset: 0; @@ -40,11 +43,13 @@ input[type="password"]:focus { outline-offset 200ms ease-out; } -input::placeholder { +input::placeholder, +.form-control::placeholder { --muted-text-color: var(--input-placeholder-color); } -input::selection { +input::selection, +.form-control::selection { background: var(--input-selection-background); color: var(--input-selection-text-color); } \ No newline at end of file From 5dd7b2c049d63bc5db969a6425ca1b832e999df9 Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Mon, 13 Jan 2025 21:45:56 +0200 Subject: [PATCH 05/91] style(next): tweak the inputs wrapped inside input groups --- src/public/stylesheets/theme-next/forms.css | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/public/stylesheets/theme-next/forms.css b/src/public/stylesheets/theme-next/forms.css index 2e3fec155..2e2676f75 100644 --- a/src/public/stylesheets/theme-next/forms.css +++ b/src/public/stylesheets/theme-next/forms.css @@ -52,4 +52,12 @@ input::selection, .form-control::selection { background: var(--input-selection-background); color: var(--input-selection-text-color); +} + +.input-group input +.input-group input:focus, +.input-group .form-control, +.input-group .form-control:focus { + /* Ignore the focus outline for the inputs that are children of an input group */ + outline: unset; } \ No newline at end of file From f462e7f93be83f213b73e0857ad6dee57262ac01 Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Tue, 14 Jan 2025 01:30:31 +0200 Subject: [PATCH 06/91] style(next): add the initial style for input groups --- src/public/stylesheets/theme-next/forms.css | 46 +++++++++++++++++++++ src/public/stylesheets/theme-next/shell.css | 20 --------- 2 files changed, 46 insertions(+), 20 deletions(-) diff --git a/src/public/stylesheets/theme-next/forms.css b/src/public/stylesheets/theme-next/forms.css index 2e2676f75..a47ac7409 100644 --- a/src/public/stylesheets/theme-next/forms.css +++ b/src/public/stylesheets/theme-next/forms.css @@ -54,10 +54,56 @@ input::selection, color: var(--input-selection-text-color); } +/* Input groups */ + +.input-group { + outline: 3px solid transparent; + outline-offset: 6px; + background: var(--input-background-color); + border-radius: 6px; + padding-right: 8px; + color: var(--quick-search-color); +} + +.input-group:hover { + background: var(--input-hover-background); +} + +.input-group:focus-within { + outline: 3px solid var(--input-focus-outline-color); + outline-offset: 0; + background: var(--input-focus-background); + transition: outline-color 50ms linear, + outline-offset 200ms ease-out; +} + .input-group input +.input-group input:hover, .input-group input:focus, .input-group .form-control, +.input-group .form-control:hover, .input-group .form-control:focus { /* Ignore the focus outline for the inputs that are children of an input group */ outline: unset; + + background: transparent; +} + +.input-group button, +.input-group a { + display: flex; + --bs-border-width: 0; + --accented-background-color: transparent; + background: transparent; + padding: 0 4px; + + --muted-text-color: var(--input-text-color); +} + +.input-group a.disabled { + opacity: .5; +} + +.input-group .input-clearer-button { + background: transparent !important; } \ No newline at end of file diff --git a/src/public/stylesheets/theme-next/shell.css b/src/public/stylesheets/theme-next/shell.css index 78eeac63c..0b8fefbca 100644 --- a/src/public/stylesheets/theme-next/shell.css +++ b/src/public/stylesheets/theme-next/shell.css @@ -1209,10 +1209,6 @@ body .calendar-dropdown-widget .calendar-body a:hover { /* Search box wrapper */ .jump-to-note-dialog .input-group { margin-right: 16px; - background: var(--quick-search-background); - border: 2px solid transparent; - border-radius: 6px; - color: var(--quick-search-color); } .jump-to-note-dialog .input-group:hover { @@ -1226,22 +1222,6 @@ body .calendar-dropdown-widget .calendar-body a:hover { color: var(--quick-search-focus-color); } -/* Search box input */ -.jump-to-note-dialog .input-group input { - --bs-border-width: 0; - - box-shadow: unset; - background: transparent; - color: currentColor; -} - -/* Search box buttons */ -.jump-to-note-dialog .input-group button { - --bs-border-width: 0; - --accented-background-color: transparent; - padding: 0 4px; -} - .jump-to-note-dialog .input-group button:last-child { padding-right: 0.75em; } From 26e3c135756f3735b55b97eba7ca26d2cdb48f45 Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Tue, 14 Jan 2025 01:46:28 +0200 Subject: [PATCH 07/91] style(next): add states for input action buttons, tweak card background color on dark theme --- src/public/stylesheets/theme-next-dark.css | 5 ++++- src/public/stylesheets/theme-next-light.css | 3 +++ src/public/stylesheets/theme-next/forms.css | 7 ++++++- 3 files changed, 13 insertions(+), 2 deletions(-) diff --git a/src/public/stylesheets/theme-next-dark.css b/src/public/stylesheets/theme-next-dark.css index 8456d5a18..6bac8f85d 100644 --- a/src/public/stylesheets/theme-next-dark.css +++ b/src/public/stylesheets/theme-next-dark.css @@ -43,6 +43,9 @@ --input-focus-background: #ffffff1f; --input-focus-color: white; + --input-action-button-color: #c6c6c6; + --input-action-button-hover: white; + --hover-item-text-color: #efefef; --hover-item-background-color: #ffffff24; --hover-item-border-color: transparent; @@ -128,7 +131,7 @@ --code-block-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6); - --card-background-color: #363636; + --card-background-color: #424242; --card-background-hover-color: #3c3c3c; --card-background-press-color: #464646; --card-border-color: #222222; diff --git a/src/public/stylesheets/theme-next-light.css b/src/public/stylesheets/theme-next-light.css index c034322a4..9d9ce3895 100644 --- a/src/public/stylesheets/theme-next-light.css +++ b/src/public/stylesheets/theme-next-light.css @@ -43,6 +43,9 @@ --input-focus-background: #ffffff80; --input-focus-color: #000; + --input-action-button-color: #575757; + --input-action-button-hover: black; + --hover-item-text-color: black; --hover-item-background-color: #0000001a; --hover-item-border-color: transparent; diff --git a/src/public/stylesheets/theme-next/forms.css b/src/public/stylesheets/theme-next/forms.css index a47ac7409..e2e09f4fa 100644 --- a/src/public/stylesheets/theme-next/forms.css +++ b/src/public/stylesheets/theme-next/forms.css @@ -97,7 +97,12 @@ input::selection, background: transparent; padding: 0 4px; - --muted-text-color: var(--input-text-color); + --muted-text-color: var(--input-action-button-color); +} + +.input-group button:hover, +.input-group a:hover { + --muted-text-color: var(--input-action-button-hover); } .input-group a.disabled { From 707d406ee9b4849c3997d10c41715b0a01d4be15 Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Tue, 14 Jan 2025 01:51:18 +0200 Subject: [PATCH 08/91] style(next): fix the background of disabled input action buttons --- src/public/stylesheets/theme-next/forms.css | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/public/stylesheets/theme-next/forms.css b/src/public/stylesheets/theme-next/forms.css index e2e09f4fa..7ac9d0e1a 100644 --- a/src/public/stylesheets/theme-next/forms.css +++ b/src/public/stylesheets/theme-next/forms.css @@ -97,6 +97,7 @@ input::selection, background: transparent; padding: 0 4px; + /* Workaround to set the "color" property. */ --muted-text-color: var(--input-action-button-color); } @@ -107,6 +108,8 @@ input::selection, .input-group a.disabled { opacity: .5; + /* Workaround to set the "background" property. */ + --button-disabled-background-color: transparent; } .input-group .input-clearer-button { From 9724b19cd2b61dc960be853e931e5368883fb3e6 Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Tue, 14 Jan 2025 02:12:26 +0200 Subject: [PATCH 09/91] style(next): add visual cues for the input action buttons when focused via keyboard --- src/public/stylesheets/theme-next/forms.css | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/public/stylesheets/theme-next/forms.css b/src/public/stylesheets/theme-next/forms.css index 7ac9d0e1a..163b934fe 100644 --- a/src/public/stylesheets/theme-next/forms.css +++ b/src/public/stylesheets/theme-next/forms.css @@ -106,6 +106,13 @@ input::selection, --muted-text-color: var(--input-action-button-hover); } +.input-group button:focus-visible, +.input-group a:focus-visible { + outline: transparent; + border: transparent; + text-shadow: 0 0 3px var(--input-action-button-hover); +} + .input-group a.disabled { opacity: .5; /* Workaround to set the "background" property. */ From 99a6e65d1523891eb79641ce94ce8cd618b717d3 Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Tue, 14 Jan 2025 21:40:05 +0200 Subject: [PATCH 10/91] style(next): update the colors of combo boxes --- src/public/stylesheets/theme-next-dark.css | 4 +++ src/public/stylesheets/theme-next-light.css | 4 +++ src/public/stylesheets/theme-next/forms.css | 29 +++++++++++++++++++++ 3 files changed, 37 insertions(+) diff --git a/src/public/stylesheets/theme-next-dark.css b/src/public/stylesheets/theme-next-dark.css index 6bac8f85d..59937d1bb 100644 --- a/src/public/stylesheets/theme-next-dark.css +++ b/src/public/stylesheets/theme-next-dark.css @@ -46,6 +46,10 @@ --input-action-button-color: #c6c6c6; --input-action-button-hover: white; + --select-focus-background: #333; + --select-focus-text-color: var(--input-text-color); + --select-dropdown-text-color: var(--input-text-color); + --hover-item-text-color: #efefef; --hover-item-background-color: #ffffff24; --hover-item-border-color: transparent; diff --git a/src/public/stylesheets/theme-next-light.css b/src/public/stylesheets/theme-next-light.css index 9d9ce3895..64a0101ef 100644 --- a/src/public/stylesheets/theme-next-light.css +++ b/src/public/stylesheets/theme-next-light.css @@ -46,6 +46,10 @@ --input-action-button-color: #575757; --input-action-button-hover: black; + --select-focus-background: white; + --select-focus-text-color: var(--input-text-color); + --select-dropdown-text-color: var(--input-text-color); + --hover-item-text-color: black; --hover-item-background-color: #0000001a; --hover-item-border-color: transparent; diff --git a/src/public/stylesheets/theme-next/forms.css b/src/public/stylesheets/theme-next/forms.css index 163b934fe..fd7561439 100644 --- a/src/public/stylesheets/theme-next/forms.css +++ b/src/public/stylesheets/theme-next/forms.css @@ -121,4 +121,33 @@ input::selection, .input-group .input-clearer-button { background: transparent !important; +} + +/* Combo boxes */ + +select, select.form-select { + outline: 3px solid transparent; + outline-offset: 6px; + background-color: var(--input-background-color); + color: var(--input-text-color); + border: unset; +} + +select:hover, select.form-select:hover { + background-color: var(--input-hover-background); + color: var(--input-hover-color); +} + +select:focus, select.form-select:focus { + box-shadow: unset; + outline: 3px solid var(--input-focus-outline-color); + outline-offset: 0; + background-color: var(--select-focus-background); + color: var(--select-focus-text-color); + transition: outline-color 50ms linear, + outline-offset 200ms ease-out; +} + +option { + color: var(--select-dropdown-text-color); } \ No newline at end of file From 40b95325ddf5d89e4631596e8a1d31cd2b8dc71d Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Tue, 14 Jan 2025 22:10:06 +0200 Subject: [PATCH 11/91] style(next): tweak the combo box arrow --- src/public/stylesheets/theme-next-dark.css | 1 + src/public/stylesheets/theme-next-light.css | 1 + src/public/stylesheets/theme-next/forms.css | 4 +++- 3 files changed, 5 insertions(+), 1 deletion(-) diff --git a/src/public/stylesheets/theme-next-dark.css b/src/public/stylesheets/theme-next-dark.css index 59937d1bb..60da7cdce 100644 --- a/src/public/stylesheets/theme-next-dark.css +++ b/src/public/stylesheets/theme-next-dark.css @@ -49,6 +49,7 @@ --select-focus-background: #333; --select-focus-text-color: var(--input-text-color); --select-dropdown-text-color: var(--input-text-color); + --select-arrow-svg: url("data:image/svg+xml,"); --hover-item-text-color: #efefef; --hover-item-background-color: #ffffff24; diff --git a/src/public/stylesheets/theme-next-light.css b/src/public/stylesheets/theme-next-light.css index 64a0101ef..20b0a461b 100644 --- a/src/public/stylesheets/theme-next-light.css +++ b/src/public/stylesheets/theme-next-light.css @@ -49,6 +49,7 @@ --select-focus-background: white; --select-focus-text-color: var(--input-text-color); --select-dropdown-text-color: var(--input-text-color); + --select-arrow-svg: url("data:image/svg+xml,"); --hover-item-text-color: black; --hover-item-background-color: #0000001a; diff --git a/src/public/stylesheets/theme-next/forms.css b/src/public/stylesheets/theme-next/forms.css index fd7561439..010f685e4 100644 --- a/src/public/stylesheets/theme-next/forms.css +++ b/src/public/stylesheets/theme-next/forms.css @@ -128,7 +128,9 @@ input::selection, select, select.form-select { outline: 3px solid transparent; outline-offset: 6px; - background-color: var(--input-background-color); + background: unset; + background: var(--input-background-color) + var(--select-arrow-svg) right 0.75rem center/15px 20px no-repeat; color: var(--input-text-color); border: unset; } From cb65591004ed51505741c98c9b753ad43cccdc27 Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Tue, 14 Jan 2025 22:39:30 +0200 Subject: [PATCH 12/91] style(next): tweak the group header for combo box items --- src/public/stylesheets/theme-next-dark.css | 1 + src/public/stylesheets/theme-next-light.css | 1 + src/public/stylesheets/theme-next/forms.css | 8 ++++++++ 3 files changed, 10 insertions(+) diff --git a/src/public/stylesheets/theme-next-dark.css b/src/public/stylesheets/theme-next-dark.css index 60da7cdce..e2813cd12 100644 --- a/src/public/stylesheets/theme-next-dark.css +++ b/src/public/stylesheets/theme-next-dark.css @@ -50,6 +50,7 @@ --select-focus-text-color: var(--input-text-color); --select-dropdown-text-color: var(--input-text-color); --select-arrow-svg: url("data:image/svg+xml,"); + --select-group-heading-text-color: gray; --hover-item-text-color: #efefef; --hover-item-background-color: #ffffff24; diff --git a/src/public/stylesheets/theme-next-light.css b/src/public/stylesheets/theme-next-light.css index 20b0a461b..424be79ae 100644 --- a/src/public/stylesheets/theme-next-light.css +++ b/src/public/stylesheets/theme-next-light.css @@ -50,6 +50,7 @@ --select-focus-text-color: var(--input-text-color); --select-dropdown-text-color: var(--input-text-color); --select-arrow-svg: url("data:image/svg+xml,"); + --select-group-heading-text-color: gray; --hover-item-text-color: black; --hover-item-background-color: #0000001a; diff --git a/src/public/stylesheets/theme-next/forms.css b/src/public/stylesheets/theme-next/forms.css index 010f685e4..9102d54de 100644 --- a/src/public/stylesheets/theme-next/forms.css +++ b/src/public/stylesheets/theme-next/forms.css @@ -152,4 +152,12 @@ select:focus, select.form-select:focus { option { color: var(--select-dropdown-text-color); +} + +optgroup { + color: var(--select-group-heading-text-color); + font-size: .75em; + font-weight: normal; + font-style: normal; + line-height: 40px; } \ No newline at end of file From f7efc033e1c52447204543924893c0a08829aac3 Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Wed, 15 Jan 2025 01:28:18 +0200 Subject: [PATCH 13/91] style(next): fix broken states on textareas --- src/public/stylesheets/theme-next/forms.css | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/src/public/stylesheets/theme-next/forms.css b/src/public/stylesheets/theme-next/forms.css index 9102d54de..bf3cfe7b6 100644 --- a/src/public/stylesheets/theme-next/forms.css +++ b/src/public/stylesheets/theme-next/forms.css @@ -12,7 +12,8 @@ input:not([type]), input[type="text"], input[type="number"], input[type="password"], -.form-control { +textarea.form-control, +textarea { outline: 3px solid transparent; outline-offset: 6px; border: unset; @@ -24,7 +25,8 @@ input:not([type]):hover, input[type="text"]:hover, input[type="number"]:hover, input[type="password"]:hover, -.form-control:hover { +textarea.form-control:hover, +textarea:hover { background: var(--input-hover-background); color: var(--input-hover-color); } @@ -33,7 +35,8 @@ input:not([type]):focus, input[type="text"]:focus, input[type="number"]:focus, input[type="password"]:focus, -.form-control:focus { +textarea.form-control:focus, +textarea:focus { box-shadow: unset; outline: 3px solid var(--input-focus-outline-color); outline-offset: 0; From 0339d83434b19c5722d2ed02e8c75030d7a6e2e7 Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Wed, 15 Jan 2025 02:11:17 +0200 Subject: [PATCH 14/91] style(next): create a style for dropdown buttons to mimic combo boxes --- src/public/stylesheets/theme-next/forms.css | 27 +++++++++++++++++---- 1 file changed, 22 insertions(+), 5 deletions(-) diff --git a/src/public/stylesheets/theme-next/forms.css b/src/public/stylesheets/theme-next/forms.css index bf3cfe7b6..f64187c4d 100644 --- a/src/public/stylesheets/theme-next/forms.css +++ b/src/public/stylesheets/theme-next/forms.css @@ -126,24 +126,41 @@ input::selection, background: transparent !important; } -/* Combo boxes */ +/* Combo box-like dropdown buttons */ -select, select.form-select { +.select-button.dropdown-toggle { + padding-right: 40px; +} + +.select-button.dropdown-toggle::after { + /* Remove the original arrow */ + content: unset; +} + +/* Combo boxes and combo box-like dropdown buttons */ + +select, +select.form-select, +.select-button.dropdown-toggle, +.select-button.dropdown-toggle.btn { outline: 3px solid transparent; outline-offset: 6px; - background: unset; background: var(--input-background-color) var(--select-arrow-svg) right 0.75rem center/15px 20px no-repeat; color: var(--input-text-color); border: unset; } -select:hover, select.form-select:hover { +select:hover, +select.form-select:hover, +.select-button.dropdown-toggle:hover { background-color: var(--input-hover-background); color: var(--input-hover-color); } -select:focus, select.form-select:focus { +select:focus, +select.form-select:focus, +.select-button.dropdown-toggle:focus { box-shadow: unset; outline: 3px solid var(--input-focus-outline-color); outline-offset: 0; From a184d5bb2630224fa058bbe037a5c13f958c38de Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Wed, 15 Jan 2025 02:14:56 +0200 Subject: [PATCH 15/91] client: use combo box-like dropdown buttons in the "Basic Properties" widget --- src/public/app/widgets/editability_select.js | 6 +++--- src/public/app/widgets/note_type.js | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/public/app/widgets/editability_select.js b/src/public/app/widgets/editability_select.js index 937fdf007..43551413f 100644 --- a/src/public/app/widgets/editability_select.js +++ b/src/public/app/widgets/editability_select.js @@ -8,14 +8,14 @@ const TPL = ` .editability-dropdown { width: 300px; } - + .editability-dropdown .dropdown-item div { font-size: small; color: var(--muted-text-color); white-space: normal; } - @@ -23,7 +23,7 @@ const TPL = ` ✓ ${t("editability_select.auto")} -
${t("editability_select.note_is_editable")}
+
${t("editability_select.note_is_editable")}
 ✓ diff --git a/src/public/app/widgets/note_type.js b/src/public/app/widgets/note_type.js index 6ae1e2e22..dbf0008d5 100644 --- a/src/public/app/widgets/note_type.js +++ b/src/public/app/widgets/note_type.js @@ -35,7 +35,7 @@ const TPL = ` overflow-x: hidden; } - From 896d7a383b031e6fa8f296da761152a3db64c20e Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Wed, 15 Jan 2025 02:31:49 +0200 Subject: [PATCH 16/91] style(next): tweak combo boxes --- src/public/stylesheets/theme-next/forms.css | 1 + 1 file changed, 1 insertion(+) diff --git a/src/public/stylesheets/theme-next/forms.css b/src/public/stylesheets/theme-next/forms.css index f64187c4d..24c75d7bf 100644 --- a/src/public/stylesheets/theme-next/forms.css +++ b/src/public/stylesheets/theme-next/forms.css @@ -149,6 +149,7 @@ select.form-select, var(--select-arrow-svg) right 0.75rem center/15px 20px no-repeat; color: var(--input-text-color); border: unset; + border-radius: 0.375rem; } select:hover, From c2dbf0a463d55ec89fd6a0db1526c301b1ea35af Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Wed, 15 Jan 2025 02:44:28 +0200 Subject: [PATCH 17/91] style(next): fix the note title text box --- src/public/stylesheets/theme-next/shell.css | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/src/public/stylesheets/theme-next/shell.css b/src/public/stylesheets/theme-next/shell.css index 0b8fefbca..10207d3a8 100644 --- a/src/public/stylesheets/theme-next/shell.css +++ b/src/public/stylesheets/theme-next/shell.css @@ -1627,3 +1627,20 @@ body .calendar-dropdown-widget .calendar-body a:hover { padding: 0 8px; color: var(--help-code-color); } + +/* Note area */ + +.title-row > *:first-child { + margin-right: 0; +} + +.title-row > *:nth-child(2) { + margin-left: 0; +} + +.note-title-widget input { + --input-background-color: transparent; + + border-radius: 8px; + padding-left: 12px; +} \ No newline at end of file From edd39ad0db1aa4856466c4575a752f2814eacd7a Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Wed, 15 Jan 2025 02:59:55 +0200 Subject: [PATCH 18/91] style(next): fix the quick search box --- src/public/stylesheets/theme-next/shell.css | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/public/stylesheets/theme-next/shell.css b/src/public/stylesheets/theme-next/shell.css index 10207d3a8..8194a869b 100644 --- a/src/public/stylesheets/theme-next/shell.css +++ b/src/public/stylesheets/theme-next/shell.css @@ -260,6 +260,12 @@ div.quick-search { padding: var(--padding-top) var(--padding-right) var(--padding-bottom) var(--padding-left); } +div.quick-search, div.quick-search:hover, div.quick-search:focus-within { + /* Prevent changes to background and outline when the state of the input group changes */ + background: transparent; + outline: none; +} + div.quick-search::before { /* The background rectangle of the search box */ position: absolute; From 15dbaf441dd50ea28900b319cb09f2c6b23dc919 Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Thu, 16 Jan 2025 18:51:35 +0200 Subject: [PATCH 19/91] style(next): restyle radio buttons --- src/public/stylesheets/theme-next/forms.css | 59 +++++++++++++++++++++ 1 file changed, 59 insertions(+) diff --git a/src/public/stylesheets/theme-next/forms.css b/src/public/stylesheets/theme-next/forms.css index 24c75d7bf..b37e470b5 100644 --- a/src/public/stylesheets/theme-next/forms.css +++ b/src/public/stylesheets/theme-next/forms.css @@ -181,4 +181,63 @@ optgroup { font-weight: normal; font-style: normal; line-height: 40px; +} + +/* Radio buttons */ + +/* The parent label */ +label:has(input[type="radio"]) { + position: relative; +} + +label:has(input[type="radio"]) { + padding-left: 1.5em; +} + +/* The original radio input */ +input[type="radio"] { + position: absolute; + top: 0; + left: 0; + width: 1em; + height: 100%; + opacity: 0; +} + +label:has(input[type="radio"])::before, +label:has(input[type="radio"])::after { + content: ""; + position: absolute; + top: 50%; + left: 0; + translate: 0 -50%; + width: 1em; + height: 1em; + border-radius: 50%; +} + +/* The outer circle */ +label:has(input[type="radio"])::before { + background: lightgray; +} + +label:has(input[type="radio"]:hover)::before { + background: lightgray; +} + +label:has(input[type="radio"]:focus-visible)::before { + outline: 2px solid blue; +} + +/* The inner circle */ +label:has(input[type="radio"])::after { + background: transparent; + transform: scale(0); + transition: transform 300ms ease-out; +} + +label:has(input[type="radio"]:checked)::after { + background: black; + transform: scale(.5); + transition: transform 150ms ease-in; } \ No newline at end of file From fe539b164799b9d9fa8260c4aed5530514ff915f Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Thu, 16 Jan 2025 23:39:18 +0200 Subject: [PATCH 20/91] style(next): tweak the colors of the radio buttons --- src/public/stylesheets/theme-next-dark.css | 4 ++++ src/public/stylesheets/theme-next-light.css | 4 ++++ src/public/stylesheets/theme-next/forms.css | 8 ++++---- 3 files changed, 12 insertions(+), 4 deletions(-) diff --git a/src/public/stylesheets/theme-next-dark.css b/src/public/stylesheets/theme-next-dark.css index e2813cd12..364dd9cb7 100644 --- a/src/public/stylesheets/theme-next-dark.css +++ b/src/public/stylesheets/theme-next-dark.css @@ -46,6 +46,10 @@ --input-action-button-color: #c6c6c6; --input-action-button-hover: white; + --radio-background: #ffffff30; + --radio-hover-background: #ffffff61; + --radio-indicator-color: white; + --select-focus-background: #333; --select-focus-text-color: var(--input-text-color); --select-dropdown-text-color: var(--input-text-color); diff --git a/src/public/stylesheets/theme-next-light.css b/src/public/stylesheets/theme-next-light.css index 424be79ae..8bf38c3f1 100644 --- a/src/public/stylesheets/theme-next-light.css +++ b/src/public/stylesheets/theme-next-light.css @@ -46,6 +46,10 @@ --input-action-button-color: #575757; --input-action-button-hover: black; + --radio-background: #0000002e; + --radio-hover-background: #0000004f; + --radio-indicator-color: black; + --select-focus-background: white; --select-focus-text-color: var(--input-text-color); --select-dropdown-text-color: var(--input-text-color); diff --git a/src/public/stylesheets/theme-next/forms.css b/src/public/stylesheets/theme-next/forms.css index b37e470b5..6002edd97 100644 --- a/src/public/stylesheets/theme-next/forms.css +++ b/src/public/stylesheets/theme-next/forms.css @@ -218,15 +218,15 @@ label:has(input[type="radio"])::after { /* The outer circle */ label:has(input[type="radio"])::before { - background: lightgray; + background: var(--radio-background); } label:has(input[type="radio"]:hover)::before { - background: lightgray; + background: var(--radio-hover-background); } label:has(input[type="radio"]:focus-visible)::before { - outline: 2px solid blue; + outline: 2px solid var(--input-focus-outline-color); } /* The inner circle */ @@ -237,7 +237,7 @@ label:has(input[type="radio"])::after { } label:has(input[type="radio"]:checked)::after { - background: black; + background: var(--radio-indicator-color); transform: scale(.5); transition: transform 150ms ease-in; } \ No newline at end of file From 398591fb1fd446394495cc0f047d9d68f169cbcf Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Fri, 17 Jan 2025 00:51:26 +0200 Subject: [PATCH 21/91] style(next): restyle check boxes --- src/public/stylesheets/theme-next/forms.css | 71 ++++++++++++++++++--- 1 file changed, 61 insertions(+), 10 deletions(-) diff --git a/src/public/stylesheets/theme-next/forms.css b/src/public/stylesheets/theme-next/forms.css index 6002edd97..0915c4cbc 100644 --- a/src/public/stylesheets/theme-next/forms.css +++ b/src/public/stylesheets/theme-next/forms.css @@ -183,19 +183,22 @@ optgroup { line-height: 40px; } -/* Radio buttons */ +/* Check box & radio button commons */ /* The parent label */ -label:has(input[type="radio"]) { +label:has(input[type="radio"]), +label:has(input[type="checkbox"]) { position: relative; } -label:has(input[type="radio"]) { +label:has(input[type="radio"]), +label:has(input[type="checkbox"]) { padding-left: 1.5em; } -/* The original radio input */ -input[type="radio"] { +/* The original input */ +label > input[type="radio"], +label > input[type="checkbox"] { position: absolute; top: 0; left: 0; @@ -205,7 +208,9 @@ input[type="radio"] { } label:has(input[type="radio"])::before, -label:has(input[type="radio"])::after { +label:has(input[type="radio"])::after, +label:has(input[type="checkbox"])::before, +label:has(input[type="checkbox"])::after { content: ""; position: absolute; top: 50%; @@ -213,6 +218,56 @@ label:has(input[type="radio"])::after { translate: 0 -50%; width: 1em; height: 1em; +} + +label:has(input[type="radio"]:focus-visible)::before, +label:has(input[type="checkbox"]:focus-visible)::before { + outline: 2px solid var(--input-focus-outline-color); +} + +/* Check boxes */ + +/* The check box background */ +label:has(input[type="checkbox"])::before { + border-radius: 3px; + background: var(--radio-background); +} + +label:has(input[type="checkbox"]):hover:before { + background: var(--radio-hover-background); +} + +@keyframes checkbox-checked { + from { + transform: scale(2); + } to { + transform: scale(1); + } +} + +/* The tick mark */ +label:has(input[type="checkbox"])::after { + mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e%3ctitle%3echeck-bold%3c/title%3e%3cpath d='M9%2c20.42L2.79%2c14.21L5.62%2c11.38L9%2c14.77L18.88%2c4.88L21.71%2c7.71L9%2c20.42Z' /%3e%3c/svg%3e"); + mask-position: center center; + mask-size: .95em; + background-color: var(--radio-indicator-color); + transform: scale(0); + opacity: 0; + transition: transform 300ms ease-out, + opacity 300ms linear; +} + +label:has(input[type="checkbox"]:checked)::after { + opacity: 1; + transform: scale(1); + transition: opacity 100ms ease-in-out; + animation: checkbox-checked 150ms ease-out; +} + +/* Radio buttons */ + +label:has(input[type="radio"])::before, +label:has(input[type="radio"])::after { border-radius: 50%; } @@ -225,10 +280,6 @@ label:has(input[type="radio"]:hover)::before { background: var(--radio-hover-background); } -label:has(input[type="radio"]:focus-visible)::before { - outline: 2px solid var(--input-focus-outline-color); -} - /* The inner circle */ label:has(input[type="radio"])::after { background: transparent; From a2a9bee7ebe45043da52ff66139e8a57f8d27a9f Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Fri, 17 Jan 2025 00:58:11 +0200 Subject: [PATCH 22/91] style(next): rename some variables --- src/public/stylesheets/theme-next-dark.css | 6 +++--- src/public/stylesheets/theme-next-light.css | 6 +++--- src/public/stylesheets/theme-next/forms.css | 12 ++++++------ 3 files changed, 12 insertions(+), 12 deletions(-) diff --git a/src/public/stylesheets/theme-next-dark.css b/src/public/stylesheets/theme-next-dark.css index 364dd9cb7..c38be9e51 100644 --- a/src/public/stylesheets/theme-next-dark.css +++ b/src/public/stylesheets/theme-next-dark.css @@ -46,9 +46,9 @@ --input-action-button-color: #c6c6c6; --input-action-button-hover: white; - --radio-background: #ffffff30; - --radio-hover-background: #ffffff61; - --radio-indicator-color: white; + --radio-checkbox-background: #ffffff30; + --radio-checkbox-hover-background: #ffffff61; + --radio-checkbox-indicator-color: white; --select-focus-background: #333; --select-focus-text-color: var(--input-text-color); diff --git a/src/public/stylesheets/theme-next-light.css b/src/public/stylesheets/theme-next-light.css index 8bf38c3f1..2c08b6fa1 100644 --- a/src/public/stylesheets/theme-next-light.css +++ b/src/public/stylesheets/theme-next-light.css @@ -46,9 +46,9 @@ --input-action-button-color: #575757; --input-action-button-hover: black; - --radio-background: #0000002e; - --radio-hover-background: #0000004f; - --radio-indicator-color: black; + --radio-checkbox-background: #0000002e; + --radio-checkbox-hover-background: #0000004f; + --radio-checkbox-indicator-color: black; --select-focus-background: white; --select-focus-text-color: var(--input-text-color); diff --git a/src/public/stylesheets/theme-next/forms.css b/src/public/stylesheets/theme-next/forms.css index 0915c4cbc..da92b2611 100644 --- a/src/public/stylesheets/theme-next/forms.css +++ b/src/public/stylesheets/theme-next/forms.css @@ -230,11 +230,11 @@ label:has(input[type="checkbox"]:focus-visible)::before { /* The check box background */ label:has(input[type="checkbox"])::before { border-radius: 3px; - background: var(--radio-background); + background: var(--radio-checkbox-background); } label:has(input[type="checkbox"]):hover:before { - background: var(--radio-hover-background); + background: var(--radio-checkbox-hover-background); } @keyframes checkbox-checked { @@ -250,7 +250,7 @@ label:has(input[type="checkbox"])::after { mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e%3ctitle%3echeck-bold%3c/title%3e%3cpath d='M9%2c20.42L2.79%2c14.21L5.62%2c11.38L9%2c14.77L18.88%2c4.88L21.71%2c7.71L9%2c20.42Z' /%3e%3c/svg%3e"); mask-position: center center; mask-size: .95em; - background-color: var(--radio-indicator-color); + background-color: var(--radio-checkbox-indicator-color); transform: scale(0); opacity: 0; transition: transform 300ms ease-out, @@ -273,11 +273,11 @@ label:has(input[type="radio"])::after { /* The outer circle */ label:has(input[type="radio"])::before { - background: var(--radio-background); + background: var(--radio-checkbox-background); } label:has(input[type="radio"]:hover)::before { - background: var(--radio-hover-background); + background: var(--radio-checkbox-hover-background); } /* The inner circle */ @@ -288,7 +288,7 @@ label:has(input[type="radio"])::after { } label:has(input[type="radio"]:checked)::after { - background: var(--radio-indicator-color); + background: var(--radio-checkbox-indicator-color); transform: scale(.5); transition: transform 150ms ease-in; } \ No newline at end of file From 2773d560b9f86d60512ef668030323cc8b871e27 Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Fri, 17 Jan 2025 01:00:19 +0200 Subject: [PATCH 23/91] style(next): enforce left padding for radios and check boxes --- src/public/stylesheets/theme-next/forms.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/public/stylesheets/theme-next/forms.css b/src/public/stylesheets/theme-next/forms.css index da92b2611..65bdca44e 100644 --- a/src/public/stylesheets/theme-next/forms.css +++ b/src/public/stylesheets/theme-next/forms.css @@ -193,7 +193,7 @@ label:has(input[type="checkbox"]) { label:has(input[type="radio"]), label:has(input[type="checkbox"]) { - padding-left: 1.5em; + padding-left: 1.5em !important; } /* The original input */ From 4c84bc724d50d50cce5618b861d02ada013873e9 Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Fri, 17 Jan 2025 01:06:25 +0200 Subject: [PATCH 24/91] style(next): refactor --- src/public/stylesheets/theme-next/forms.css | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/src/public/stylesheets/theme-next/forms.css b/src/public/stylesheets/theme-next/forms.css index 65bdca44e..d3864ee8d 100644 --- a/src/public/stylesheets/theme-next/forms.css +++ b/src/public/stylesheets/theme-next/forms.css @@ -188,12 +188,15 @@ optgroup { /* The parent label */ label:has(input[type="radio"]), label:has(input[type="checkbox"]) { + --box-size: 1em; + --box-label-gap: .5em; + position: relative; } label:has(input[type="radio"]), label:has(input[type="checkbox"]) { - padding-left: 1.5em !important; + padding-left: calc(var(--box-size) + var(--box-label-gap)) !important; } /* The original input */ @@ -202,7 +205,7 @@ label > input[type="checkbox"] { position: absolute; top: 0; left: 0; - width: 1em; + width: var(--box-size); height: 100%; opacity: 0; } @@ -216,8 +219,8 @@ label:has(input[type="checkbox"])::after { top: 50%; left: 0; translate: 0 -50%; - width: 1em; - height: 1em; + width: var(--box-size); + height: var(--box-size); } label:has(input[type="radio"]:focus-visible)::before, From 07dd8995b6bb215bd5bbb6e3feaa5f3b8da678a4 Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Fri, 17 Jan 2025 01:22:09 +0200 Subject: [PATCH 25/91] style(next): overhaul the check / uncheck animation for radio buttons --- src/public/stylesheets/theme-next/forms.css | 19 +++++++++++++++---- 1 file changed, 15 insertions(+), 4 deletions(-) diff --git a/src/public/stylesheets/theme-next/forms.css b/src/public/stylesheets/theme-next/forms.css index d3864ee8d..f93703ca4 100644 --- a/src/public/stylesheets/theme-next/forms.css +++ b/src/public/stylesheets/theme-next/forms.css @@ -283,15 +283,26 @@ label:has(input[type="radio"]:hover)::before { background: var(--radio-checkbox-hover-background); } +@keyframes radio-checked { + from { + transform: scale(1.5); + } to { + transform: scale(.5); + } +} + /* The inner circle */ label:has(input[type="radio"])::after { - background: transparent; + background: var(--radio-checkbox-indicator-color); transform: scale(0); - transition: transform 300ms ease-out; + opacity: 0; + transition: opacity 300ms linear, + transform 300ms ease-in; } label:has(input[type="radio"]:checked)::after { - background: var(--radio-checkbox-indicator-color); transform: scale(.5); - transition: transform 150ms ease-in; + opacity: 1; + transition: opacity 150ms linear; + animation: radio-checked 200ms ease-out; } \ No newline at end of file From e8f6f68987577d8795d596de4d984d685c77f8b8 Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Fri, 17 Jan 2025 01:24:34 +0200 Subject: [PATCH 26/91] style(next): disable text selection for check boxes and radio buttons --- src/public/stylesheets/theme-next/forms.css | 1 + 1 file changed, 1 insertion(+) diff --git a/src/public/stylesheets/theme-next/forms.css b/src/public/stylesheets/theme-next/forms.css index f93703ca4..3fe692efc 100644 --- a/src/public/stylesheets/theme-next/forms.css +++ b/src/public/stylesheets/theme-next/forms.css @@ -192,6 +192,7 @@ label:has(input[type="checkbox"]) { --box-label-gap: .5em; position: relative; + user-select: none; } label:has(input[type="radio"]), From faa4a5fcd8c78e0051ca36058ea9271d742a16ce Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Fri, 17 Jan 2025 01:36:54 +0200 Subject: [PATCH 27/91] client: update the markup for the "Available MIME types" check boxes --- .../type_widgets/options/code_notes/code_mime_types.ts | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/src/public/app/widgets/type_widgets/options/code_notes/code_mime_types.ts b/src/public/app/widgets/type_widgets/options/code_notes/code_mime_types.ts index af55aba65..ff9d1857e 100644 --- a/src/public/app/widgets/type_widgets/options/code_notes/code_mime_types.ts +++ b/src/public/app/widgets/type_widgets/options/code_notes/code_mime_types.ts @@ -92,10 +92,13 @@ export default class CodeMimeTypesOptions extends OptionsWidget { #buildSelectionForMimeType(mimeType: MimeType) { const id = "code-mime-type-" + idCtr++; - return $("
  • ") + + const checkbox = $("
  • ") + .append(checkbox); } } From 8f612f4683dac3f18c0fc33853e583a8282f2cca Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Mon, 20 Jan 2025 17:09:01 +0200 Subject: [PATCH 28/91] style(next): properly handle disabled check boxes and radio buttons --- src/public/stylesheets/theme-next/forms.css | 17 +++++++++++++---- 1 file changed, 13 insertions(+), 4 deletions(-) diff --git a/src/public/stylesheets/theme-next/forms.css b/src/public/stylesheets/theme-next/forms.css index 3fe692efc..7210aeccb 100644 --- a/src/public/stylesheets/theme-next/forms.css +++ b/src/public/stylesheets/theme-next/forms.css @@ -208,7 +208,7 @@ label > input[type="checkbox"] { left: 0; width: var(--box-size); height: 100%; - opacity: 0; + opacity: 0 !important; } label:has(input[type="radio"])::before, @@ -237,7 +237,7 @@ label:has(input[type="checkbox"])::before { background: var(--radio-checkbox-background); } -label:has(input[type="checkbox"]):hover:before { +label:has(input[type="checkbox"]:not(:disabled)):hover:before { background: var(--radio-checkbox-hover-background); } @@ -280,7 +280,7 @@ label:has(input[type="radio"])::before { background: var(--radio-checkbox-background); } -label:has(input[type="radio"]:hover)::before { +label:has(input[type="radio"]:not(:disabled)):hover::before { background: var(--radio-checkbox-hover-background); } @@ -306,4 +306,13 @@ label:has(input[type="radio"]:checked)::after { opacity: 1; transition: opacity 150ms linear; animation: radio-checked 200ms ease-out; -} \ No newline at end of file +} + +/* Disabled check boxes and radio buttons */ + +label:has(input[type="radio"]:disabled)::before, +label:has(input[type="radio"]:disabled)::after, +label:has(input[type="checkbox"]:disabled)::before, +label:has(input[type="checkbox"]:disabled)::after { + opacity: .5; +} From 76b99a00f45fbdc1e67e8ba22f878aa67ec9ad42 Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Tue, 21 Jan 2025 04:21:01 +0200 Subject: [PATCH 29/91] client: switch widget: use a simpler HTML structure and refactor its internals --- src/public/app/widgets/bookmark_switch.js | 11 +- .../app/widgets/protected_note_switch.js | 11 +- src/public/app/widgets/shared_switch.js | 19 ++- src/public/app/widgets/switch.js | 127 ++++++++---------- src/public/app/widgets/template_switch.js | 11 +- 5 files changed, 81 insertions(+), 98 deletions(-) diff --git a/src/public/app/widgets/bookmark_switch.js b/src/public/app/widgets/bookmark_switch.js index acf940c7a..1bd28ccd2 100644 --- a/src/public/app/widgets/bookmark_switch.js +++ b/src/public/app/widgets/bookmark_switch.js @@ -15,11 +15,11 @@ export default class BookmarkSwitchWidget extends SwitchWidget { doRender() { super.doRender(); - this.$switchOnName.text(t("bookmark_switch.bookmark")); - this.$switchOnButton.attr("title", t("bookmark_switch.bookmark_this_note")); + this.switchOnName = t("bookmark_switch.bookmark"); + this.switchOnTooltip = t("bookmark_switch.bookmark_this_note"); - this.$switchOffName.text(t("bookmark_switch.bookmark")); - this.$switchOffButton.attr("title", t("bookmark_switch.remove_bookmark")); + this.switchOffName = t("bookmark_switch.bookmark"); + this.switchOffTooltip = t("bookmark_switch.remove_bookmark"); } async toggle(state) { @@ -33,8 +33,7 @@ export default class BookmarkSwitchWidget extends SwitchWidget { async refreshWithNote(note) { const isBookmarked = !!note.getParentBranches().find((b) => b.parentNoteId === "_lbBookmarks"); - this.$switchOn.toggle(!isBookmarked); - this.$switchOff.toggle(isBookmarked); + this.isToggled = isBookmarked; } entitiesReloadedEvent({ loadResults }) { diff --git a/src/public/app/widgets/protected_note_switch.js b/src/public/app/widgets/protected_note_switch.js index 5833e0dda..134a3633a 100644 --- a/src/public/app/widgets/protected_note_switch.js +++ b/src/public/app/widgets/protected_note_switch.js @@ -6,11 +6,11 @@ export default class ProtectedNoteSwitchWidget extends SwitchWidget { doRender() { super.doRender(); - this.$switchOnName.text(t("protect_note.toggle-on")); - this.$switchOnButton.attr("title", t("protect_note.toggle-on-hint")); + this.switchOnName = t("protect_note.toggle-on"); + this.switchOnTooltip = t("protect_note.toggle-on-hint"); - this.$switchOffName.text(t("protect_note.toggle-off")); - this.$switchOffButton.attr("title", t("protect_note.toggle-off-hint")); + this.switchOffName = t("protect_note.toggle-off"); + this.switchOffTooltip = t("protect_note.toggle-off-hint"); } switchOn() { @@ -22,8 +22,7 @@ export default class ProtectedNoteSwitchWidget extends SwitchWidget { } async refreshWithNote(note) { - this.$switchOn.toggle(!note.isProtected); - this.$switchOff.toggle(!!note.isProtected); + this.isToggled = note.isProtected; } entitiesReloadedEvent({ loadResults }) { diff --git a/src/public/app/widgets/shared_switch.js b/src/public/app/widgets/shared_switch.js index 7e8766ec4..e739ecf32 100644 --- a/src/public/app/widgets/shared_switch.js +++ b/src/public/app/widgets/shared_switch.js @@ -14,11 +14,11 @@ export default class SharedSwitchWidget extends SwitchWidget { doRender() { super.doRender(); - this.$switchOnName.text(t("shared_switch.shared")); - this.$switchOnButton.attr("title", t("shared_switch.toggle-on-title")); + this.switchOnName = t("shared_switch.shared"); + this.switchOnTooltip = t("shared_switch.toggle-on-title"); - this.$switchOffName.text(t("shared_switch.shared")); - this.$switchOffButton.attr("title", t("shared_switch.toggle-off-title")); + this.switchOffName = t("shared_switch.shared"); + this.switchOffTooltip = t("shared_switch.toggle-off-title"); this.$helpButton.attr("data-help-page", "sharing.html").show(); this.$helpButton.on("click", (e) => utils.openHelp($(e.target))); @@ -53,15 +53,14 @@ export default class SharedSwitchWidget extends SwitchWidget { const canBeUnshared = isShared && note.getParentBranches().find((b) => b.parentNoteId === "_share"); const switchDisabled = isShared && !canBeUnshared; - this.$switchOn.toggle(!isShared); - this.$switchOff.toggle(!!isShared); + this.isToggled = isShared; if (switchDisabled) { - this.$widget.attr("title", t("shared_switch.inherited")); - this.$switchOff.addClass("switch-disabled"); + //this.$widget.attr("title", t("shared_switch.inherited")); + //this.$switchOff.addClass("switch-disabled"); } else { - this.$widget.removeAttr("title"); - this.$switchOff.removeClass("switch-disabled"); + //this.$widget.removeAttr("title"); + //this.$switchOff.removeClass("switch-disabled"); } } diff --git a/src/public/app/widgets/switch.js b/src/public/app/widgets/switch.js index 3e76cc632..6d99543b5 100644 --- a/src/public/app/widgets/switch.js +++ b/src/public/app/widgets/switch.js @@ -3,64 +3,34 @@ import NoteContextAwareWidget from "./note_context_aware_widget.js"; const TPL = `
    - -
    - - +
    +   - - -
    -
    - - -   - - - -
    - +
    `; export default class SwitchWidget extends NoteContextAwareWidget { + + switchOnName; + switchOnTooltip; + + switchOffName; + switchOffTooltip; + + currentState = false; + doRender() { this.$widget = $(TPL); + this.$switchButton = this.$widget.find(".switch-button"); + this.$switchButton.on("click", () => this.toggle(!this.currentState)); - this.$switchOn = this.$widget.find(".switch-on"); - this.$switchOnName = this.$widget.find(".switch-on-name"); - this.$switchOnButton = this.$widget.find(".switch-on-button"); - - this.$switchOnButton.on("click", () => this.toggle(true)); - - this.$switchOff = this.$widget.find(".switch-off"); - this.$switchOffName = this.$widget.find(".switch-off-name"); - this.$switchOffButton = this.$widget.find(".switch-off-button"); - - this.$switchOffButton.on("click", () => this.toggle(false)); + this.$switchName = this.$widget.find(".switch-name"); this.$helpButton = this.$widget.find(".switch-help-button"); } @@ -123,4 +89,25 @@ export default class SwitchWidget extends NoteContextAwareWidget { switchOff() {} switchOn() {} + + /** Gets or sets whether the switch is toggled. */ + get isToggled() { + return this.currentState; + } + + set isToggled(state) { + this.currentState = !!state; + + if (this.currentState) { + this.$switchName.text(this.switchOffName); + + this.$switchButton.attr("title", this.switchOffTooltip); + this.$switchButton.addClass("on"); + } else { + this.$switchName.text(this.switchOnName); + + this.$switchButton.attr("title", this.switchOnTooltip); + this.$switchButton.removeClass("on"); + } + } } diff --git a/src/public/app/widgets/template_switch.js b/src/public/app/widgets/template_switch.js index e36494c23..6205b95c6 100644 --- a/src/public/app/widgets/template_switch.js +++ b/src/public/app/widgets/template_switch.js @@ -13,11 +13,11 @@ export default class TemplateSwitchWidget extends SwitchWidget { doRender() { super.doRender(); - this.$switchOnName.text(t("template_switch.template")); - this.$switchOnButton.attr("title", t("template_switch.toggle-on-hint")); + this.switchOnName = t("template_switch.template"); + this.switchOnTooltip = t("template_switch.toggle-on-hint"); - this.$switchOffName.text("Template"); - this.$switchOffButton.attr("title", t("template_switch.toggle-off-hint")); + this.switchOffName = t("template_switch.template"); + this.switchOffTooltip = t("template_switch.toggle-off-hint"); this.$helpButton.attr("data-help-page", "template.html").show(); } @@ -34,8 +34,7 @@ export default class TemplateSwitchWidget extends SwitchWidget { async refreshWithNote(note) { const isTemplate = note.hasLabel("template"); - this.$switchOn.toggle(!isTemplate); - this.$switchOff.toggle(!!isTemplate); + this.isToggled = isTemplate; } entitiesReloadedEvent({ loadResults }) { From 039112f1068855a0d02619cc213eb46dd2c2193a Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Tue, 21 Jan 2025 04:49:07 +0200 Subject: [PATCH 30/91] client: switch widget: refactor --- src/public/app/widgets/switch.js | 20 +++++++++++--------- 1 file changed, 11 insertions(+), 9 deletions(-) diff --git a/src/public/app/widgets/switch.js b/src/public/app/widgets/switch.js index 6d99543b5..00489b3d4 100644 --- a/src/public/app/widgets/switch.js +++ b/src/public/app/widgets/switch.js @@ -9,7 +9,7 @@ const TPL = ` align-items: center; } - .switch { + .switch-widget { display: flex; position: relative; } @@ -48,12 +48,13 @@ const TPL = ` } -
    +
      - + + +
    @@ -72,7 +73,9 @@ export default class SwitchWidget extends NoteContextAwareWidget { doRender() { this.$widget = $(TPL); this.$switchButton = this.$widget.find(".switch-button"); - this.$switchButton.on("click", () => this.toggle(!this.currentState)); + + this.$switchToggle = this.$widget.find(".switch-toggle"); + this.$switchToggle.on("click", () => this.toggle(!this.currentState)); this.$switchName = this.$widget.find(".switch-name"); @@ -98,16 +101,15 @@ export default class SwitchWidget extends NoteContextAwareWidget { set isToggled(state) { this.currentState = !!state; + this.$switchButton.toggleClass("on", this.currentState); + this.$switchToggle.prop("checked", this.currentState); + if (this.currentState) { this.$switchName.text(this.switchOffName); - this.$switchButton.attr("title", this.switchOffTooltip); - this.$switchButton.addClass("on"); } else { this.$switchName.text(this.switchOnName); - this.$switchButton.attr("title", this.switchOnTooltip); - this.$switchButton.removeClass("on"); } } } From 8bdc5c9fead3a0690a345468c611c89f27d4724a Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Tue, 21 Jan 2025 05:11:34 +0200 Subject: [PATCH 31/91] client: switch widget: prevent the check box to become out of sync with the switch toggle status --- src/public/app/widgets/switch.js | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/src/public/app/widgets/switch.js b/src/public/app/widgets/switch.js index 00489b3d4..7f422b79c 100644 --- a/src/public/app/widgets/switch.js +++ b/src/public/app/widgets/switch.js @@ -46,6 +46,10 @@ const TPL = ` .switch-widget .switch-button.on { background: green !important; } + + .switch-widget input[type="checkbox"] { + pointer-events: none; + }
    @@ -75,7 +79,13 @@ export default class SwitchWidget extends NoteContextAwareWidget { this.$switchButton = this.$widget.find(".switch-button"); this.$switchToggle = this.$widget.find(".switch-toggle"); - this.$switchToggle.on("click", () => this.toggle(!this.currentState)); + this.$switchToggle.on("click", (e) => { + this.toggle(!this.currentState); + + // Prevent the check box from being toggled by the click, the value of the check box + // should be set exclusively by the 'isToggled' property setter. + e.preventDefault(); + }); this.$switchName = this.$widget.find(".switch-name"); @@ -103,6 +113,7 @@ export default class SwitchWidget extends NoteContextAwareWidget { this.$switchButton.toggleClass("on", this.currentState); this.$switchToggle.prop("checked", this.currentState); + console.log(this.currentState); if (this.currentState) { this.$switchName.text(this.switchOffName); From ec0d7c0835c46ceac1e2861ed3b4e67c861cfde0 Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Tue, 21 Jan 2025 21:59:08 +0200 Subject: [PATCH 32/91] client: switch widget: redo the switch style --- src/public/app/widgets/switch.js | 81 +++++++++++++++++++++++--------- 1 file changed, 58 insertions(+), 23 deletions(-) diff --git a/src/public/app/widgets/switch.js b/src/public/app/widgets/switch.js index 7f422b79c..9a74b67bc 100644 --- a/src/public/app/widgets/switch.js +++ b/src/public/app/widgets/switch.js @@ -5,25 +5,74 @@ const TPL = `
     
    @@ -113,7 +149,6 @@ export default class SwitchWidget extends NoteContextAwareWidget { this.$switchButton.toggleClass("on", this.currentState); this.$switchToggle.prop("checked", this.currentState); - console.log(this.currentState); if (this.currentState) { this.$switchName.text(this.switchOffName); From 7f785042239593729167a61f228740d52e110396 Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Tue, 21 Jan 2025 23:46:27 +0200 Subject: [PATCH 33/91] style(next): improve the matching of check boxes and radio buttons that have to be restyled --- src/public/stylesheets/theme-next/forms.css | 48 ++++++++++----------- 1 file changed, 24 insertions(+), 24 deletions(-) diff --git a/src/public/stylesheets/theme-next/forms.css b/src/public/stylesheets/theme-next/forms.css index 7210aeccb..a0057632d 100644 --- a/src/public/stylesheets/theme-next/forms.css +++ b/src/public/stylesheets/theme-next/forms.css @@ -186,8 +186,8 @@ optgroup { /* Check box & radio button commons */ /* The parent label */ -label:has(input[type="radio"]), -label:has(input[type="checkbox"]) { +label:has(>input[type="radio"]), +label:has(>input[type="checkbox"]) { --box-size: 1em; --box-label-gap: .5em; @@ -195,8 +195,8 @@ label:has(input[type="checkbox"]) { user-select: none; } -label:has(input[type="radio"]), -label:has(input[type="checkbox"]) { +label:has(>input[type="radio"]), +label:has(>input[type="checkbox"]) { padding-left: calc(var(--box-size) + var(--box-label-gap)) !important; } @@ -211,10 +211,10 @@ label > input[type="checkbox"] { opacity: 0 !important; } -label:has(input[type="radio"])::before, -label:has(input[type="radio"])::after, -label:has(input[type="checkbox"])::before, -label:has(input[type="checkbox"])::after { +label:has(>input[type="radio"])::before, +label:has(>input[type="radio"])::after, +label:has(>input[type="checkbox"])::before, +label:has(>input[type="checkbox"])::after { content: ""; position: absolute; top: 50%; @@ -224,20 +224,20 @@ label:has(input[type="checkbox"])::after { height: var(--box-size); } -label:has(input[type="radio"]:focus-visible)::before, -label:has(input[type="checkbox"]:focus-visible)::before { +label:has(>input[type="radio"]:focus-visible)::before, +label:has(>input[type="checkbox"]:focus-visible)::before { outline: 2px solid var(--input-focus-outline-color); } /* Check boxes */ /* The check box background */ -label:has(input[type="checkbox"])::before { +label:has(>input[type="checkbox"])::before { border-radius: 3px; background: var(--radio-checkbox-background); } -label:has(input[type="checkbox"]:not(:disabled)):hover:before { +label:has(>input[type="checkbox"]:not(:disabled)):hover:before { background: var(--radio-checkbox-hover-background); } @@ -250,7 +250,7 @@ label:has(input[type="checkbox"]:not(:disabled)):hover:before { } /* The tick mark */ -label:has(input[type="checkbox"])::after { +label:has(>input[type="checkbox"])::after { mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e%3ctitle%3echeck-bold%3c/title%3e%3cpath d='M9%2c20.42L2.79%2c14.21L5.62%2c11.38L9%2c14.77L18.88%2c4.88L21.71%2c7.71L9%2c20.42Z' /%3e%3c/svg%3e"); mask-position: center center; mask-size: .95em; @@ -261,7 +261,7 @@ label:has(input[type="checkbox"])::after { opacity 300ms linear; } -label:has(input[type="checkbox"]:checked)::after { +label:has(>input[type="checkbox"]:checked)::after { opacity: 1; transform: scale(1); transition: opacity 100ms ease-in-out; @@ -270,17 +270,17 @@ label:has(input[type="checkbox"]:checked)::after { /* Radio buttons */ -label:has(input[type="radio"])::before, -label:has(input[type="radio"])::after { +label:has(>input[type="radio"])::before, +label:has(>input[type="radio"])::after { border-radius: 50%; } /* The outer circle */ -label:has(input[type="radio"])::before { +label:has(>input[type="radio"])::before { background: var(--radio-checkbox-background); } -label:has(input[type="radio"]:not(:disabled)):hover::before { +label:has(>input[type="radio"]:not(:disabled)):hover::before { background: var(--radio-checkbox-hover-background); } @@ -293,7 +293,7 @@ label:has(input[type="radio"]:not(:disabled)):hover::before { } /* The inner circle */ -label:has(input[type="radio"])::after { +label:has(>input[type="radio"])::after { background: var(--radio-checkbox-indicator-color); transform: scale(0); opacity: 0; @@ -301,7 +301,7 @@ label:has(input[type="radio"])::after { transform 300ms ease-in; } -label:has(input[type="radio"]:checked)::after { +label:has(>input[type="radio"]:checked)::after { transform: scale(.5); opacity: 1; transition: opacity 150ms linear; @@ -310,9 +310,9 @@ label:has(input[type="radio"]:checked)::after { /* Disabled check boxes and radio buttons */ -label:has(input[type="radio"]:disabled)::before, -label:has(input[type="radio"]:disabled)::after, -label:has(input[type="checkbox"]:disabled)::before, -label:has(input[type="checkbox"]:disabled)::after { +label:has(> input[type="radio"]:disabled)::before, +label:has(> input[type="radio"]:disabled)::after, +label:has(> input[type="checkbox"]:disabled)::before, +label:has(> input[type="checkbox"]:disabled)::after { opacity: .5; } From 356c0570f3fc21d0aaacab0479b185c128d483a0 Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Wed, 22 Jan 2025 00:48:25 +0200 Subject: [PATCH 34/91] client: switch widget: improve appearance --- src/public/app/widgets/switch.js | 23 ++++++++++++++++------- 1 file changed, 16 insertions(+), 7 deletions(-) diff --git a/src/public/app/widgets/switch.js b/src/public/app/widgets/switch.js index 9a74b67bc..e9983d5e3 100644 --- a/src/public/app/widgets/switch.js +++ b/src/public/app/widgets/switch.js @@ -22,6 +22,7 @@ const TPL = ` .switch-widget .switch-button { display: block; position: relative; + margin-left: 8px; width: var(--switch-track-width); height: var(--switch-track-height); border-radius: 24px; @@ -60,7 +61,7 @@ const TPL = ` background 100ms ease-in; } - .switch-widget > .switch-button > input[type="checkbox"] { + .switch-widget .switch-button > input[type="checkbox"] { position: absolute: top: 0; left: 0; @@ -70,7 +71,7 @@ const TPL = ` cursor: pointer; } - .switch-widget > .switch-button:has(input[type="checkbox"]:focus-visible) { + .switch-widget .switch-button:has(input[type="checkbox"]:focus-visible) { outline: 2px solid var(--button-border-color); outline-offset: 2px; } @@ -81,23 +82,31 @@ const TPL = ` } .switch-widget .switch-help-button { - font-weight: 900; border: 0; + margin-left: 4px; background: none; cursor: pointer; + font-size: 1.1em; + color: var(--muted-text-color); + } + + .switch-widget .switch-help-button:hover { color: var(--main-text-color); }
    -   -
    -
    `; export default class SwitchWidget extends NoteContextAwareWidget { From d4ef84e0b72f4e8b7f96bc989305af81596d0ae0 Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Wed, 22 Jan 2025 01:24:09 +0200 Subject: [PATCH 35/91] client: switch widget: handle the disabled state --- src/public/app/widgets/shared_switch.js | 8 ++++---- src/public/app/widgets/switch.js | 27 +++++++++++++++++++++---- 2 files changed, 27 insertions(+), 8 deletions(-) diff --git a/src/public/app/widgets/shared_switch.js b/src/public/app/widgets/shared_switch.js index e739ecf32..90d2e7e9e 100644 --- a/src/public/app/widgets/shared_switch.js +++ b/src/public/app/widgets/shared_switch.js @@ -56,11 +56,11 @@ export default class SharedSwitchWidget extends SwitchWidget { this.isToggled = isShared; if (switchDisabled) { - //this.$widget.attr("title", t("shared_switch.inherited")); - //this.$switchOff.addClass("switch-disabled"); + this.disabledTooltip = t("shared_switch.inherited"); + this.canToggle = false; } else { - //this.$widget.removeAttr("title"); - //this.$switchOff.removeClass("switch-disabled"); + this.disabledTooltip = ""; + this.canToggle = true; } } diff --git a/src/public/app/widgets/switch.js b/src/public/app/widgets/switch.js index e9983d5e3..45a0a0307 100644 --- a/src/public/app/widgets/switch.js +++ b/src/public/app/widgets/switch.js @@ -28,7 +28,6 @@ const TPL = ` border-radius: 24px; background-color: var(--switch-off-track-background); transition: background 200ms ease-in; - cursor: pointer; } .switch-widget .switch-button.on { @@ -61,13 +60,17 @@ const TPL = ` background 100ms ease-in; } - .switch-widget .switch-button > input[type="checkbox"] { + .switch-widget .switch-button input[type="checkbox"] { position: absolute: top: 0; left: 0; width: 100%; height: 100%; opacity: 0; + } + + .switch-widget .switch-button:not(.disabled) input[type="checkbox"], + .switch-widget .switch-button:not(.disabled) { cursor: pointer; } @@ -76,9 +79,8 @@ const TPL = ` outline-offset: 2px; } - .switch-widget .switch-disabled { + .switch-widget .switch-button.disabled { opacity: 70%; - pointer-events: none; } .switch-widget .switch-help-button { @@ -117,6 +119,8 @@ export default class SwitchWidget extends NoteContextAwareWidget { switchOffName; switchOffTooltip; + disabledTooltip; + currentState = false; doRender() { @@ -167,4 +171,19 @@ export default class SwitchWidget extends NoteContextAwareWidget { this.$switchButton.attr("title", this.switchOnTooltip); } } + + get canToggle() { + return (!this.$switchButton.hasClass("disabled")); + } + + set canToggle(isEnabled) { + this.$switchButton.toggleClass("disabled", !isEnabled); + this.$switchToggle.attr("disabled", !isEnabled); + + if (isEnabled) { + this.isToggled = this.currentState; // Reapply the correct tooltip + } else { + this.$switchButton.attr("title", this.disabledTooltip); + } + } } From 455bb38865b9ab33a38af4d65e0d3bd26480186a Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Wed, 22 Jan 2025 01:30:10 +0200 Subject: [PATCH 36/91] client: switch widget: refactor --- src/public/app/widgets/switch.js | 19 +++++++++++++------ 1 file changed, 13 insertions(+), 6 deletions(-) diff --git a/src/public/app/widgets/switch.js b/src/public/app/widgets/switch.js index 45a0a0307..7d8b61b80 100644 --- a/src/public/app/widgets/switch.js +++ b/src/public/app/widgets/switch.js @@ -19,6 +19,8 @@ const TPL = ` align-items: center; } + /* The track of the toggle switch */ + .switch-widget .switch-button { display: block; position: relative; @@ -35,6 +37,8 @@ const TPL = ` transition: background 100ms ease-out; } + /* The thumb of the toggle switch */ + .switch-widget .switch-button:after { --y: calc((var(--switch-track-height) - var(--switch-thumb-height)) / 2); --x: var(--y); @@ -60,7 +64,9 @@ const TPL = ` background 100ms ease-in; } + .switch-widget .switch-button input[type="checkbox"] { + /* A hidden check box for accesibility purposes */ position: absolute: top: 0; left: 0; @@ -69,6 +75,7 @@ const TPL = ` opacity: 0; } + /* Disabled state */ .switch-widget .switch-button:not(.disabled) input[type="checkbox"], .switch-widget .switch-button:not(.disabled) { cursor: pointer; @@ -113,13 +120,13 @@ const TPL = ` export default class SwitchWidget extends NoteContextAwareWidget { - switchOnName; - switchOnTooltip; + switchOnName = ""; + switchOnTooltip = ""; - switchOffName; - switchOffTooltip; + switchOffName = ""; + switchOffTooltip = ""; - disabledTooltip; + disabledTooltip = ""; currentState = false; @@ -137,7 +144,6 @@ export default class SwitchWidget extends NoteContextAwareWidget { }); this.$switchName = this.$widget.find(".switch-name"); - this.$helpButton = this.$widget.find(".switch-help-button"); } @@ -172,6 +178,7 @@ export default class SwitchWidget extends NoteContextAwareWidget { } } + /** Gets or sets whether the switch is enabled. */ get canToggle() { return (!this.$switchButton.hasClass("disabled")); } From 027649213aaf12338e1c691c0264f6354fd4a970 Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Thu, 23 Jan 2025 00:47:14 +0200 Subject: [PATCH 37/91] style(next): create a new style for links --- src/public/stylesheets/theme-next/forms.css | 71 +++++++++++++++++++++ 1 file changed, 71 insertions(+) diff --git a/src/public/stylesheets/theme-next/forms.css b/src/public/stylesheets/theme-next/forms.css index a0057632d..6dc465842 100644 --- a/src/public/stylesheets/theme-next/forms.css +++ b/src/public/stylesheets/theme-next/forms.css @@ -316,3 +316,74 @@ label:has(> input[type="checkbox"]:disabled)::before, label:has(> input[type="checkbox"]:disabled)::after { opacity: .5; } + +/* Links */ + +:root { + --link-hover-background: #ffffff26; + --link-hover-color: white; +} + +body a.tn-link, +body a.tn-link:visited, +.use-tn-links a, +.use-tn-links a:visited { + --background: transparent; + + border-radius: 4px; + background: var(--background); + outline: 0 solid var(--background); + color: currentColor; + font-weight: normal; + text-decoration: underline; + + transition: background-color 200ms ease-out, + outline 200ms ease-out, + color 300ms ease-out; +} + +body a.tn-link:focus-visible, +.use-tn-links a:focus-visible { + outline: 2px solid var(--input-focus-outline-color); + outline-offset: 2px; +} + +body a.tn-link:hover, +.use-tn-links a:hover { + --background: var(--link-hover-background); + + outline-width: 4px; + outline-offset: 0; + color: var(--link-hover-color); + + transition: background-color 100ms ease-in, + outline 100ms ease-in, + color 150ms ease-in; +} + +a.tn-link.external:not(.no-arrow)::after, +a.tn-link[href^="http://"]:not(.no-arrow)::after, +a.tn-link[href^="https://"]:not(.no-arrow)::after, +.use-tn-links a.external:not(.no-arrow)::after, +.use-tn-links a[href^="http://"]:not(.no-arrow)::after, +.use-tn-links a[href^="https://"]:not(.no-arrow)::after { + display: inline-block; + opacity: .5; +} + +@keyframes link-arrow-blink { + from { + opacity: 1; + } to { + opacity: .5; + } +} + +a.tn-link:hover.external:not(.no-arrow)::after, +a.tn-link:hover[href^="http://"]:not(.no-arrow)::after, +a.tn-link:hover[href^="https://"]:not(.no-arrow)::after, +.use-tn-links a:hover.external:not(.no-arrow)::after, +.use-tn-links a:hover[href^="http://"]:not(.no-arrow)::after, +.use-tn-links a:hover[href^="https://"]:not(.no-arrow)::after { + animation: link-arrow-blink 500ms linear alternate infinite; +} \ No newline at end of file From f4d2c5a2d2c301ed6dfa2856bb73fcc3a6e97d55 Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Thu, 23 Jan 2025 01:12:05 +0200 Subject: [PATCH 38/91] client: mark the links that should use the new style --- src/public/app/services/note_list_renderer.ts | 2 +- src/public/app/widgets/dialogs/about.js | 5 +++-- src/public/app/widgets/dialogs/help.ts | 2 +- src/public/app/widgets/shared_info.js | 4 ++-- src/public/app/widgets/type_widgets/editable_text.js | 2 +- src/public/app/widgets/type_widgets/options/etapi.ts | 2 +- src/public/app/widgets/type_widgets/options/password.ts | 4 ++-- src/public/app/widgets/type_widgets/options/shortcuts.ts | 2 +- src/public/app/widgets/type_widgets/read_only_text.js | 2 +- 9 files changed, 13 insertions(+), 12 deletions(-) diff --git a/src/public/app/services/note_list_renderer.ts b/src/public/app/services/note_list_renderer.ts index 2e6652b0f..06d2c1a48 100644 --- a/src/public/app/services/note_list_renderer.ts +++ b/src/public/app/services/note_list_renderer.ts @@ -151,7 +151,7 @@ const TPL = `
    -
    +
    diff --git a/src/public/app/widgets/dialogs/about.js b/src/public/app/widgets/dialogs/about.js index db3fe4c5e..918e725af 100644 --- a/src/public/app/widgets/dialogs/about.js +++ b/src/public/app/widgets/dialogs/about.js @@ -17,7 +17,7 @@ const TPL = ` - + @@ -38,7 +38,7 @@ const TPL = ` - + @@ -82,6 +82,7 @@ export default class AboutDialog extends BasicWidget { this.$dataDirectory.html( $("", { href: "#", + class: "tn-link", text: appInfo.dataDirectory }) ); diff --git a/src/public/app/widgets/dialogs/help.ts b/src/public/app/widgets/dialogs/help.ts index 4d926eeb0..860ccc4d9 100644 --- a/src/public/app/widgets/dialogs/help.ts +++ b/src/public/app/widgets/dialogs/help.ts @@ -3,7 +3,7 @@ import BasicWidget from "../basic_widget.js"; import { t } from "../../services/i18n.js"; const TPL = ` -
    ${t("about.homepage")}https://github.com/TriliumNext/Noteshttps://github.com/TriliumNext/Notes
    ${t("about.app_version")}
    ${t("about.build_revision")}