Tools/Notes
1
0
Fork 0
mirror of https://github.com/TriliumNext/Notes.git synced 2025-08-10 02:02:29 +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() {
super.doRender();
this.$switchOnName.text(t("bookmark_switch.bookmark"));
this.$switchOnButton.attr("title", t("bookmark_switch.bookmark_this_note"));
this.switchOnName = t("bookmark_switch.bookmark");
this.switchOnTooltip = t("bookmark_switch.bookmark_this_note");
this.$switchOffName.text(t("bookmark_switch.bookmark"));
this.$switchOffButton.attr("title", t("bookmark_switch.remove_bookmark"));
this.switchOffName = t("bookmark_switch.bookmark");
this.switchOffTooltip = t("bookmark_switch.remove_bookmark");
}
async toggle(state) {
@ -33,8 +33,7 @@ export default class BookmarkSwitchWidget extends SwitchWidget {
async refreshWithNote(note) {
const isBookmarked = !!note.getParentBranches().find((b) => b.parentNoteId === "_lbBookmarks");
this.$switchOn.toggle(!isBookmarked);
this.$switchOff.toggle(isBookmarked);
this.isToggled = isBookmarked;
}
entitiesReloadedEvent({ loadResults }) {

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

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

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

@ -14,11 +14,11 @@ export default class SharedSwitchWidget extends SwitchWidget {
doRender() {
super.doRender();
this.$switchOnName.text(t("shared_switch.shared"));
this.$switchOnButton.attr("title", t("shared_switch.toggle-on-title"));
this.switchOnName = t("shared_switch.shared");
this.switchOnTooltip = t("shared_switch.toggle-on-title");
this.$switchOffName.text(t("shared_switch.shared"));
this.$switchOffButton.attr("title", t("shared_switch.toggle-off-title"));
this.switchOffName = t("shared_switch.shared");
this.switchOffTooltip = t("shared_switch.toggle-off-title");
this.$helpButton.attr("data-help-page", "sharing.html").show();
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 switchDisabled = isShared && !canBeUnshared;
this.$switchOn.toggle(!isShared);
this.$switchOff.toggle(!!isShared);
this.isToggled = isShared;
if (switchDisabled) {
this.$widget.attr("title", t("shared_switch.inherited"));
this.$switchOff.addClass("switch-disabled");
//this.$widget.attr("title", t("shared_switch.inherited"));
//this.$switchOff.addClass("switch-disabled");
} else {
this.$widget.removeAttr("title");
this.$switchOff.removeClass("switch-disabled");
//this.$widget.removeAttr("title");
//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 = `
<div class="switch-widget">
<style>
<style>
.switch-widget {
display: flex;
align-items: center;
}
/* The switch - the box around the slider */
.switch-widget .switch {
position: relative;
display: block;
width: 50px;
height: 24px;
margin: 0;
}
.switch-on, .switch-off {
.switch {
display: flex;
position: relative;
}
/* The slider */
.switch-widget .slider {
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 .switch-button {
position: relative;
}
.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 {
background-color: var(--main-text-color);
}
.switch-widget .slider.checked:before {
transform: translateX(26px);
}
.switch-widget .switch-disabled {
opacity: 70%;
pointer-events: none;
}
.switch-widget .switch-help-button {
font-weight: 900;
border: 0;
@ -68,47 +38,43 @@ const TPL = `
cursor: pointer;
color: var(--main-text-color);
}
.switch-widget .switch-button {
background: red !important;
}
.switch-widget .switch-button.on {
background: green !important;
}
</style>
<div class="switch-on">
<span class="switch-on-name"></span>
<div class="switch">
<span class="switch-name"></span>
&nbsp;
<span class="switch-on-button">
<label class="switch">
<span class="slider"></span>
<span class="switch-button">
[...]
</span>
</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>
</div>`;
export default class SwitchWidget extends NoteContextAwareWidget {
switchOnName;
switchOnTooltip;
switchOffName;
switchOffTooltip;
currentState = false;
doRender() {
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.$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.$switchName = this.$widget.find(".switch-name");
this.$helpButton = this.$widget.find(".switch-help-button");
}
@ -123,4 +89,25 @@ export default class SwitchWidget extends NoteContextAwareWidget {
switchOff() {}
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() {
super.doRender();
this.$switchOnName.text(t("template_switch.template"));
this.$switchOnButton.attr("title", t("template_switch.toggle-on-hint"));
this.switchOnName = t("template_switch.template");
this.switchOnTooltip = t("template_switch.toggle-on-hint");
this.$switchOffName.text("Template");
this.$switchOffButton.attr("title", t("template_switch.toggle-off-hint"));
this.switchOffName = t("template_switch.template");
this.switchOffTooltip = t("template_switch.toggle-off-hint");
this.$helpButton.attr("data-help-page", "template.html").show();
}
@ -34,8 +34,7 @@ export default class TemplateSwitchWidget extends SwitchWidget {
async refreshWithNote(note) {
const isTemplate = note.hasLabel("template");
this.$switchOn.toggle(!isTemplate);
this.$switchOff.toggle(!!isTemplate);
this.isToggled = isTemplate;
}
entitiesReloadedEvent({ loadResults }) {