Tools/Notes
1
0
Fork 0
mirror of https://github.com/TriliumNext/Notes.git synced 2025-08-11 11:02:27 +08:00
Code Issues Packages Projects Releases Wiki Activity

client: switch widget: refactor

Browse Source
This commit is contained in:
Adorian Doran 2025-01-22 01:30:10 +02:00
parent d4ef84e0b7
commit 455bb38865
1 changed files with 13 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/public/app/widgets/switch.js
View File

@ -19,6 +19,8 @@ const TPL = `
align-items: center; align-items: center;
} }
/* The track of the toggle switch */
.switch-widget .switch-button { .switch-widget .switch-button {
display: block; display: block;
position: relative; position: relative;
@ -35,6 +37,8 @@ const TPL = `
transition: background 100ms ease-out; transition: background 100ms ease-out;
} }
/* The thumb of the toggle switch */
.switch-widget .switch-button:after { .switch-widget .switch-button:after {
--y: calc((var(--switch-track-height) - var(--switch-thumb-height)) / 2); --y: calc((var(--switch-track-height) - var(--switch-thumb-height)) / 2);
--x: var(--y); --x: var(--y);
@ -60,7 +64,9 @@ const TPL = `
background 100ms ease-in; background 100ms ease-in;
} }
.switch-widget .switch-button input[type="checkbox"] { .switch-widget .switch-button input[type="checkbox"] {
/* A hidden check box for accesibility purposes */
position: absolute: position: absolute:
top: 0; top: 0;
left: 0; left: 0;
@ -69,6 +75,7 @@ const TPL = `
opacity: 0; opacity: 0;
} }
/* Disabled state */
.switch-widget .switch-button:not(.disabled) input[type="checkbox"], .switch-widget .switch-button:not(.disabled) input[type="checkbox"],
.switch-widget .switch-button:not(.disabled) { .switch-widget .switch-button:not(.disabled) {
cursor: pointer; cursor: pointer;
@ -113,13 +120,13 @@ const TPL = `
export default class SwitchWidget extends NoteContextAwareWidget { export default class SwitchWidget extends NoteContextAwareWidget {
switchOnName; switchOnName = "";
switchOnTooltip; switchOnTooltip = "";
switchOffName; switchOffName = "";
switchOffTooltip; switchOffTooltip = "";
disabledTooltip; disabledTooltip = "";
currentState = false; currentState = false;
@ -137,7 +144,6 @@ export default class SwitchWidget extends NoteContextAwareWidget {
}); });
this.$switchName = this.$widget.find(".switch-name"); this.$switchName = this.$widget.find(".switch-name");
this.$helpButton = this.$widget.find(".switch-help-button"); 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() { get canToggle() {
return (!this.$switchButton.hasClass("disabled")); return (!this.$switchButton.hasClass("disabled"));
} }