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;
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;
}
}

View File

@ -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);
}
}
}