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: use a simpler HTML structure and refactor its internals

Browse Source
This commit is contained in:
Adorian Doran 2025-01-21 04:21:01 +02:00
parent 8f612f4683
commit 76b99a00f4
5 changed files with 81 additions and 98 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/public/app/widgets/bookmark_switch.js
View File

@ -15,11 +15,11 @@ export default class BookmarkSwitchWidget extends SwitchWidget {
doRender() { doRender() {
super.doRender(); super.doRender();
this.$switchOnName.text(t("bookmark_switch.bookmark")); this.switchOnName = t("bookmark_switch.bookmark");
this.$switchOnButton.attr("title", t("bookmark_switch.bookmark_this_note")); this.switchOnTooltip = t("bookmark_switch.bookmark_this_note");
this.$switchOffName.text(t("bookmark_switch.bookmark")); this.switchOffName = t("bookmark_switch.bookmark");
this.$switchOffButton.attr("title", t("bookmark_switch.remove_bookmark")); this.switchOffTooltip = t("bookmark_switch.remove_bookmark");
} }
async toggle(state) { async toggle(state) {
@ -33,8 +33,7 @@ export default class BookmarkSwitchWidget extends SwitchWidget {
async refreshWithNote(note) { async refreshWithNote(note) {
const isBookmarked = !!note.getParentBranches().find((b) => b.parentNoteId === "_lbBookmarks"); const isBookmarked = !!note.getParentBranches().find((b) => b.parentNoteId === "_lbBookmarks");
this.$switchOn.toggle(!isBookmarked); this.isToggled = isBookmarked;
this.$switchOff.toggle(isBookmarked);
} }
entitiesReloadedEvent({ loadResults }) { entitiesReloadedEvent({ loadResults }) {

11
src/public/app/widgets/protected_note_switch.js
View File

@ -6,11 +6,11 @@ export default class ProtectedNoteSwitchWidget extends SwitchWidget {
doRender() { doRender() {
super.doRender(); super.doRender();
this.$switchOnName.text(t("protect_note.toggle-on")); this.switchOnName = t("protect_note.toggle-on");
this.$switchOnButton.attr("title", t("protect_note.toggle-on-hint")); this.switchOnTooltip = t("protect_note.toggle-on-hint");
this.$switchOffName.text(t("protect_note.toggle-off")); this.switchOffName = t("protect_note.toggle-off");
this.$switchOffButton.attr("title", t("protect_note.toggle-off-hint")); this.switchOffTooltip = t("protect_note.toggle-off-hint");
} }
switchOn() { switchOn() {
@ -22,8 +22,7 @@ export default class ProtectedNoteSwitchWidget extends SwitchWidget {
} }
async refreshWithNote(note) { async refreshWithNote(note) {
this.$switchOn.toggle(!note.isProtected); this.isToggled = note.isProtected;
this.$switchOff.toggle(!!note.isProtected);
} }
entitiesReloadedEvent({ loadResults }) { entitiesReloadedEvent({ loadResults }) {

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

@ -14,11 +14,11 @@ export default class SharedSwitchWidget extends SwitchWidget {
doRender() { doRender() {
super.doRender(); super.doRender();
this.$switchOnName.text(t("shared_switch.shared")); this.switchOnName = t("shared_switch.shared");
this.$switchOnButton.attr("title", t("shared_switch.toggle-on-title")); this.switchOnTooltip = t("shared_switch.toggle-on-title");
this.$switchOffName.text(t("shared_switch.shared")); this.switchOffName = t("shared_switch.shared");
this.$switchOffButton.attr("title", t("shared_switch.toggle-off-title")); this.switchOffTooltip = t("shared_switch.toggle-off-title");
this.$helpButton.attr("data-help-page", "sharing.html").show(); this.$helpButton.attr("data-help-page", "sharing.html").show();
this.$helpButton.on("click", (e) => utils.openHelp($(e.target))); 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 canBeUnshared = isShared && note.getParentBranches().find((b) => b.parentNoteId === "_share");
const switchDisabled = isShared && !canBeUnshared; const switchDisabled = isShared && !canBeUnshared;
this.$switchOn.toggle(!isShared); this.isToggled = isShared;
this.$switchOff.toggle(!!isShared);
if (switchDisabled) { if (switchDisabled) {
this.$widget.attr("title", t("shared_switch.inherited")); //this.$widget.attr("title", t("shared_switch.inherited"));
this.$switchOff.addClass("switch-disabled"); //this.$switchOff.addClass("switch-disabled");
} else { } else {
this.$widget.removeAttr("title"); //this.$widget.removeAttr("title");
this.$switchOff.removeClass("switch-disabled"); //this.$switchOff.removeClass("switch-disabled");
} }
} }

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

@ -3,64 +3,34 @@ import NoteContextAwareWidget from "./note_context_aware_widget.js";
const TPL = ` const TPL = `
<div class="switch-widget"> <div class="switch-widget">
<style> <style>
.switch-widget { .switch-widget {
display: flex; display: flex;
align-items: center; align-items: center;
} }
/* The switch - the box around the slider */ .switch {
.switch-widget .switch {
position: relative;
display: block;
width: 50px;
height: 24px;
margin: 0;
}
.switch-on, .switch-off {
display: flex; display: flex;
position: relative;
} }
/* The slider */ .switch-widget .switch-button {
.switch-widget .slider { position: relative;
border-radius: 24px;
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: var(--more-accented-background-color);
transition: .4s;
} }
.switch-widget .slider:before {
border-radius: 50%;
position: absolute;
content: "";
height: 16px;
width: 16px;
left: 4px;
bottom: 4px;
background-color: var(--main-background-color);
-webkit-transition: .4s;
transition: .4s;
}
.switch-widget .slider.checked { .switch-widget .slider.checked {
background-color: var(--main-text-color); background-color: var(--main-text-color);
} }
.switch-widget .slider.checked:before { .switch-widget .slider.checked:before {
transform: translateX(26px); transform: translateX(26px);
} }
.switch-widget .switch-disabled { .switch-widget .switch-disabled {
opacity: 70%; opacity: 70%;
pointer-events: none; pointer-events: none;
} }
.switch-widget .switch-help-button { .switch-widget .switch-help-button {
font-weight: 900; font-weight: 900;
border: 0; border: 0;
@ -68,47 +38,43 @@ const TPL = `
cursor: pointer; cursor: pointer;
color: var(--main-text-color); color: var(--main-text-color);
} }
.switch-widget .switch-button {
background: red !important;
}
.switch-widget .switch-button.on {
background: green !important;
}
</style> </style>
<div class="switch-on"> <div class="switch">
<span class="switch-on-name"></span> <span class="switch-name"></span>
&nbsp; &nbsp;
<span class="switch-button">
<span class="switch-on-button"> [...]
<label class="switch">
<span class="slider"></span>
</span> </span>
</div> </div>
<div class="switch-off">
<span class="switch-off-name"></span>
&nbsp;
<span class="switch-off-button">
<label class="switch">
<span class="slider checked"></span>
</span>
</div>
<button class="switch-help-button" type="button" data-help-page="" title="${t("open-help-page")}" style="display: none;">?</button> <button class="switch-help-button" type="button" data-help-page="" title="${t("open-help-page")}" style="display: none;">?</button>
</div>`; </div>`;
export default class SwitchWidget extends NoteContextAwareWidget { export default class SwitchWidget extends NoteContextAwareWidget {
switchOnName;
switchOnTooltip;
switchOffName;
switchOffTooltip;
currentState = false;
doRender() { doRender() {
this.$widget = $(TPL); 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.$switchName = this.$widget.find(".switch-name");
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.$helpButton = this.$widget.find(".switch-help-button"); this.$helpButton = this.$widget.find(".switch-help-button");
} }
@ -123,4 +89,25 @@ export default class SwitchWidget extends NoteContextAwareWidget {
switchOff() {} switchOff() {}
switchOn() {} 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");
}
}
} }

11
src/public/app/widgets/template_switch.js
View File

@ -13,11 +13,11 @@ export default class TemplateSwitchWidget extends SwitchWidget {
doRender() { doRender() {
super.doRender(); super.doRender();
this.$switchOnName.text(t("template_switch.template")); this.switchOnName = t("template_switch.template");
this.$switchOnButton.attr("title", t("template_switch.toggle-on-hint")); this.switchOnTooltip = t("template_switch.toggle-on-hint");
this.$switchOffName.text("Template"); this.switchOffName = t("template_switch.template");
this.$switchOffButton.attr("title", t("template_switch.toggle-off-hint")); this.switchOffTooltip = t("template_switch.toggle-off-hint");
this.$helpButton.attr("data-help-page", "template.html").show(); this.$helpButton.attr("data-help-page", "template.html").show();
} }
@ -34,8 +34,7 @@ export default class TemplateSwitchWidget extends SwitchWidget {
async refreshWithNote(note) { async refreshWithNote(note) {
const isTemplate = note.hasLabel("template"); const isTemplate = note.hasLabel("template");
this.$switchOn.toggle(!isTemplate); this.isToggled = isTemplate;
this.$switchOff.toggle(!!isTemplate);
} }
entitiesReloadedEvent({ loadResults }) { entitiesReloadedEvent({ loadResults }) {