From d2d286a4ff708bfe9e6bf2c04935379b9fd0db68 Mon Sep 17 00:00:00 2001 From: SiriusXT <1160925501@qq.com> Date: Wed, 31 May 2023 21:47:43 +0800 Subject: [PATCH] Show highlighted text in the left pane --- src/public/app/layouts/desktop_layout.js | 4 +- src/public/app/widgets/highlighted_text.js | 36 ++++----- .../options/text_notes/highlighted_text.js | 81 +++++++++---------- 3 files changed, 59 insertions(+), 62 deletions(-) diff --git a/src/public/app/layouts/desktop_layout.js b/src/public/app/layouts/desktop_layout.js index 3a9ec2930..0125e4ed1 100644 --- a/src/public/app/layouts/desktop_layout.js +++ b/src/public/app/layouts/desktop_layout.js @@ -44,7 +44,7 @@ import BacklinksWidget from "../widgets/floating_buttons/zpetne_odkazy.js"; import SharedInfoWidget from "../widgets/shared_info.js"; import FindWidget from "../widgets/find.js"; import TocWidget from "../widgets/toc.js"; -import HltWidget from "../widgets/highlighted_text.js"; +import HighlightTextWidget from "../widgets/highlighted_text.js"; import BulkActionsDialog from "../widgets/dialogs/bulk_actions.js"; import AboutDialog from "../widgets/dialogs/about.js"; import HelpDialog from "../widgets/dialogs/help.js"; @@ -182,7 +182,7 @@ export default class DesktopLayout { ) .child(new RightPaneContainer() .child(new TocWidget()) - .child(new HltWidget()) + .child(new HighlightTextWidget()) .child(...this.customWidgets.get('right-pane')) ) ) diff --git a/src/public/app/widgets/highlighted_text.js b/src/public/app/widgets/highlighted_text.js index 3dbfc9b5c..43bc377ce 100644 --- a/src/public/app/widgets/highlighted_text.js +++ b/src/public/app/widgets/highlighted_text.js @@ -10,41 +10,41 @@ import RightPanelWidget from "./right_panel_widget.js"; import options from "../services/options.js"; import OnClickButtonWidget from "./buttons/onclick_button.js"; -const TPL = `
+const TPL = `
- +
`; -export default class HltWidget extends RightPanelWidget { +export default class HighlightTextWidget extends RightPanelWidget { constructor() { super(); @@ -59,20 +59,20 @@ export default class HltWidget extends RightPanelWidget { isEnabled() { return super.isEnabled() && this.note.type === 'text' - && !this.noteContext.viewScope.hltTemporarilyHidden + && !this.noteContext.viewScope.highlightedTextTemporarilyHidden && this.noteContext.viewScope.viewMode === 'default'; } async doRenderBody() { this.$body.empty().append($(TPL)); - this.$hlt = this.$body.find('.hlt'); - this.$body.find('.hlt-widget').append(this.closeHltButton.render()); + this.$hlt = this.$body.find('.highlighted-text'); + this.$body.find('.highlighted-text-widget').append(this.closeHltButton.render()); } async refreshWithNote(note) { - const hltLabel = note.getLabel('hlt'); + const hltLabel = note.getLabel('hideHighlightWidget'); - if (hltLabel?.value === 'hide') { + if (hltLabel?.value=="" || hltLabel?.value=== "true") { this.toggleInt(false); this.triggerCommand("reEvaluateRightPaneVisibility"); return; @@ -90,7 +90,7 @@ export default class HltWidget extends RightPanelWidget { } this.$hlt.html($hlt); this.toggleInt( - ["", "show"].includes(hltLabel?.value) + [undefined, "false"].includes(hltLabel?.value) || hltColors!="" || hltBgColors!="" ); @@ -200,7 +200,7 @@ export default class HltWidget extends RightPanelWidget { $li.css("display","none"); } //The font color and background color may be nested or adjacent to each other. At this time, connect the front and back li to avoid interruption - if(hltIndex!=0 && hltBCs[hltIndex-1].nextSibling ===hltBCs[hltIndex] && $hlt.children().last().css("display")!="none"){ + if(hltIndex!=0 && hltBCs[hltIndex-1].nextSibling === hltBCs[hltIndex] && $hlt.children().last().css("display")!="none"){ $hlt.children().last().append($li.html()); }else{ $li.on("click", () => this.jumpToHlt(hltIndex)); @@ -233,7 +233,7 @@ export default class HltWidget extends RightPanelWidget { } async closeHltCommand() { - this.noteContext.viewScope.hltTemporarilyHidden = true; + this.noteContext.viewScope.highlightedTextTemporarilyHidden = true; await this.refresh(); this.triggerCommand('reEvaluateRightPaneVisibility'); } @@ -255,13 +255,13 @@ class CloseHltButton extends OnClickButtonWidget { super(); this.icon("bx-x") - .title("Close HLT") + .title("Close HighlightTextWidget") .titlePlacement("bottom") .onClick((widget, e) => { e.stopPropagation(); widget.triggerCommand("closeHlt"); }) - .class("icon-action close-hlt"); + .class("icon-action close-highlighted-text"); } } diff --git a/src/public/app/widgets/type_widgets/options/text_notes/highlighted_text.js b/src/public/app/widgets/type_widgets/options/text_notes/highlighted_text.js index 7fc2ce825..ec884959a 100644 --- a/src/public/app/widgets/type_widgets/options/text_notes/highlighted_text.js +++ b/src/public/app/widgets/type_widgets/options/text_notes/highlighted_text.js @@ -1,67 +1,64 @@ import OptionsWidget from "../options_widget.js"; const TPL = ` -
+

Highlighted Text

- Displays highlighted text in the left pane. You can customize the highlighted text displayed in the left pane: + Displays highlighted text in the right panel. You can customize the highlighted text displayed in the right panel:
Text color:
- - - - - - - - - - - - - - - + + + + + + + + + + + + + + +
Background color:
- - - - - - - - - - - - - - - + + + + + + + + + + + + + + +
`; export default class HighlightedTextOptions extends OptionsWidget { doRender() { this.$widget = $(TPL); - this.$hltColors = this.$widget.find(".hlt-color"); + this.$hltColors = this.$widget.find(".highlighted-text-color"); this.$hltColors.on('change', () => { - const hltColorVals=this.$widget.find('input.hlt-color[type="checkbox"]:checked').map(function() { + const hltColorVals=this.$widget.find('input.highlighted-text-color[type="checkbox"]:checked').map(function() { return this.value; }).get(); this.updateOption('highlightedTextColors', JSON.stringify(hltColorVals)); }); - this.$hltBgColors = this.$widget.find(".hlt-background-color"); + this.$hltBgColors = this.$widget.find(".highlighted-text-background-color"); this.$hltBgColors.on('change', () =>{ - const hltBgColorVals=this.$widget.find('input.hlt-background-color[type="checkbox"]:checked').map(function() { + const hltBgColorVals=this.$widget.find('input.highlighted-text-background-color[type="checkbox"]:checked').map(function() { return this.value; }).get(); this.updateOption('highlightedTextBgColors', JSON.stringify(hltBgColorVals)); @@ -72,14 +69,14 @@ export default class HighlightedTextOptions extends OptionsWidget { async optionsLoaded(options) { const hltColorVals=JSON.parse(options.highlightedTextColors); const hltBgColorVals=JSON.parse(options.highlightedTextBgColors); - this.$widget.find('input.hlt-color[type="checkbox"]').each(function () { + this.$widget.find('input.highlighted-text-color[type="checkbox"]').each(function () { if ($.inArray($(this).val(), hltColorVals) !== -1) { $(this).prop("checked", true); } else { $(this).prop("checked", false); } }); - this.$widget.find('input.hlt-background-color[type="checkbox"]').each(function () { + this.$widget.find('input.highlighted-text-background-color[type="checkbox"]').each(function () { if ($.inArray($(this).val(), hltBgColorVals) !== -1) { $(this).prop("checked", true); } else {