client: switch widget: handle the disabled state

This commit is contained in:
Adorian Doran 2025-01-22 01:24:09 +02:00
parent 356c0570f3
commit d4ef84e0b7
2 changed files with 27 additions and 8 deletions

View File

@ -56,11 +56,11 @@ export default class SharedSwitchWidget extends SwitchWidget {
this.isToggled = isShared; this.isToggled = isShared;
if (switchDisabled) { if (switchDisabled) {
//this.$widget.attr("title", t("shared_switch.inherited")); this.disabledTooltip = t("shared_switch.inherited");
//this.$switchOff.addClass("switch-disabled"); this.canToggle = false;
} else { } else {
//this.$widget.removeAttr("title"); this.disabledTooltip = "";
//this.$switchOff.removeClass("switch-disabled"); this.canToggle = true;
} }
} }

View File

@ -28,7 +28,6 @@ const TPL = `
border-radius: 24px; border-radius: 24px;
background-color: var(--switch-off-track-background); background-color: var(--switch-off-track-background);
transition: background 200ms ease-in; transition: background 200ms ease-in;
cursor: pointer;
} }
.switch-widget .switch-button.on { .switch-widget .switch-button.on {
@ -61,13 +60,17 @@ const TPL = `
background 100ms ease-in; background 100ms ease-in;
} }
.switch-widget .switch-button > input[type="checkbox"] { .switch-widget .switch-button input[type="checkbox"] {
position: absolute: position: absolute:
top: 0; top: 0;
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
opacity: 0; opacity: 0;
}
.switch-widget .switch-button:not(.disabled) input[type="checkbox"],
.switch-widget .switch-button:not(.disabled) {
cursor: pointer; cursor: pointer;
} }
@ -76,9 +79,8 @@ const TPL = `
outline-offset: 2px; outline-offset: 2px;
} }
.switch-widget .switch-disabled { .switch-widget .switch-button.disabled {
opacity: 70%; opacity: 70%;
pointer-events: none;
} }
.switch-widget .switch-help-button { .switch-widget .switch-help-button {
@ -117,6 +119,8 @@ export default class SwitchWidget extends NoteContextAwareWidget {
switchOffName; switchOffName;
switchOffTooltip; switchOffTooltip;
disabledTooltip;
currentState = false; currentState = false;
doRender() { doRender() {
@ -167,4 +171,19 @@ export default class SwitchWidget extends NoteContextAwareWidget {
this.$switchButton.attr("title", this.switchOnTooltip); 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);
}
}
} }