mirror of
https://github.com/TriliumNext/Notes.git
synced 2025-08-11 11:02:27 +08:00
client: switch widget: handle the disabled state
This commit is contained in:
parent
356c0570f3
commit
d4ef84e0b7
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -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);
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user