gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-06-06 18:08:33 +02:00
Code Issues Actions Packages Projects Releases Wiki Activity

Show highlighted text in the left pane

Browse Source
This commit is contained in:
SiriusXT 2023-05-31 21:47:43 +08:00
parent 86861f6ec3
commit d2d286a4ff
3 changed files with 59 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/public/app/layouts/desktop_layout.js
View File

@ -44,7 +44,7 @@ import BacklinksWidget from "../widgets/floating_buttons/zpetne_odkazy.js";
import SharedInfoWidget from "../widgets/shared_info.js"; import SharedInfoWidget from "../widgets/shared_info.js";
import FindWidget from "../widgets/find.js"; import FindWidget from "../widgets/find.js";
import TocWidget from "../widgets/toc.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 BulkActionsDialog from "../widgets/dialogs/bulk_actions.js";
import AboutDialog from "../widgets/dialogs/about.js"; import AboutDialog from "../widgets/dialogs/about.js";
import HelpDialog from "../widgets/dialogs/help.js"; import HelpDialog from "../widgets/dialogs/help.js";
@ -182,7 +182,7 @@ export default class DesktopLayout {
) )
.child(new RightPaneContainer() .child(new RightPaneContainer()
.child(new TocWidget()) .child(new TocWidget())
.child(new HltWidget()) .child(new HighlightTextWidget())
.child(...this.customWidgets.get('right-pane')) .child(...this.customWidgets.get('right-pane'))
) )
) )

36
src/public/app/widgets/highlighted_text.js
View File

@ -10,41 +10,41 @@ import RightPanelWidget from "./right_panel_widget.js";
import options from "../services/options.js"; import options from "../services/options.js";
import OnClickButtonWidget from "./buttons/onclick_button.js"; import OnClickButtonWidget from "./buttons/onclick_button.js";
const TPL = `<div class="hlt-widget"> const TPL = `<div class="highlighted-text-widget">
<style> <style>
.hlt-widget { .highlighted-text-widget {
padding: 10px; padding: 10px;
contain: none; contain: none;
overflow: auto; overflow: auto;
position: relative; position: relative;
} }
.hlt > ol { .highlighted-text > ol {
padding-left: 20px; padding-left: 20px;
} }
.hlt li { .highlighted-text li {
cursor: pointer; cursor: pointer;
margin-bottom: 3px; margin-bottom: 3px;
text-align: justify; text-align: justify;
text-justify: distribute; text-justify: distribute;
} }
.hlt li:hover { .highlighted-text li:hover {
font-weight: bold; font-weight: bold;
} }
.close-hlt { .close-highlighted-text {
position: absolute; position: absolute;
top: 2px; top: 2px;
right: 2px; right: 2px;
} }
</style> </style>
<span class="hlt"></span> <span class="highlighted-text"></span>
</div>`; </div>`;
export default class HltWidget extends RightPanelWidget { export default class HighlightTextWidget extends RightPanelWidget {
constructor() { constructor() {
super(); super();
@ -59,20 +59,20 @@ export default class HltWidget extends RightPanelWidget {
isEnabled() { isEnabled() {
return super.isEnabled() return super.isEnabled()
&& this.note.type === 'text' && this.note.type === 'text'
&& !this.noteContext.viewScope.hltTemporarilyHidden && !this.noteContext.viewScope.highlightedTextTemporarilyHidden
&& this.noteContext.viewScope.viewMode === 'default'; && this.noteContext.viewScope.viewMode === 'default';
} }
async doRenderBody() { async doRenderBody() {
this.$body.empty().append($(TPL)); this.$body.empty().append($(TPL));
this.$hlt = this.$body.find('.hlt'); this.$hlt = this.$body.find('.highlighted-text');
this.$body.find('.hlt-widget').append(this.closeHltButton.render()); this.$body.find('.highlighted-text-widget').append(this.closeHltButton.render());
} }
async refreshWithNote(note) { 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.toggleInt(false);
this.triggerCommand("reEvaluateRightPaneVisibility"); this.triggerCommand("reEvaluateRightPaneVisibility");
return; return;
@ -90,7 +90,7 @@ export default class HltWidget extends RightPanelWidget {
} }
this.$hlt.html($hlt); this.$hlt.html($hlt);
this.toggleInt( this.toggleInt(
["", "show"].includes(hltLabel?.value) [undefined, "false"].includes(hltLabel?.value)
|| hltColors!="" || hltColors!=""
|| hltBgColors!="" || hltBgColors!=""
); );
@ -200,7 +200,7 @@ export default class HltWidget extends RightPanelWidget {
$li.css("display","none"); $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 //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()); $hlt.children().last().append($li.html());
}else{ }else{
$li.on("click", () => this.jumpToHlt(hltIndex)); $li.on("click", () => this.jumpToHlt(hltIndex));
@ -233,7 +233,7 @@ export default class HltWidget extends RightPanelWidget {
} }
async closeHltCommand() { async closeHltCommand() {
this.noteContext.viewScope.hltTemporarilyHidden = true; this.noteContext.viewScope.highlightedTextTemporarilyHidden = true;
await this.refresh(); await this.refresh();
this.triggerCommand('reEvaluateRightPaneVisibility'); this.triggerCommand('reEvaluateRightPaneVisibility');
} }
@ -255,13 +255,13 @@ class CloseHltButton extends OnClickButtonWidget {
super(); super();
this.icon("bx-x") this.icon("bx-x")
.title("Close HLT") .title("Close HighlightTextWidget")
.titlePlacement("bottom") .titlePlacement("bottom")
.onClick((widget, e) => { .onClick((widget, e) => {
e.stopPropagation(); e.stopPropagation();
widget.triggerCommand("closeHlt"); widget.triggerCommand("closeHlt");
}) })
.class("icon-action close-hlt"); .class("icon-action close-highlighted-text");
} }
} }

81
src/public/app/widgets/type_widgets/options/text_notes/highlighted_text.js
View File

@ -1,67 +1,64 @@
import OptionsWidget from "../options_widget.js"; import OptionsWidget from "../options_widget.js";
const TPL = ` const TPL = `
<div class="options-section"> <div class="options-section" style='max-width: 46em;'>
<style> <style>
.hlt-checkbox-label { .highlighted-text-checkbox-label {
display: inline-block; display: inline-block;
min-width: 8em; min-width: 8em;
} }
.options-section{
max-width: 46em;
}
</style> </style>
<h4>Highlighted Text</h4> <h4>Highlighted Text</h4>
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:
<br><strong>Text color:</strong><br> <br><strong>Text color:</strong><br>
<label class='hlt-checkbox-label'><input type="checkbox" class="hlt-color" value="#000000"> Dark &nbsp;</label> <label class='highlighted-text-checkbox-label'><input type="checkbox" class="highlighted-text-color" value="#000000"> Dark &nbsp;</label>
<label class='hlt-checkbox-label'><input type="checkbox" class="hlt-color" value="#4d4d4d"> Dim grey &nbsp;</label> <label class='highlighted-text-checkbox-label'><input type="checkbox" class="highlighted-text-color" value="#4d4d4d"> Dim grey &nbsp;</label>
<label class='hlt-checkbox-label'><input type="checkbox" class="hlt-color" value="#999999"> Grey &nbsp;</label> <label class='highlighted-text-checkbox-label'><input type="checkbox" class="highlighted-text-color" value="#999999"> Grey &nbsp;</label>
<label class='hlt-checkbox-label'><input type="checkbox" class="hlt-color" value="#e6e6e6"> Light grey &nbsp;</label> <label class='highlighted-text-checkbox-label'><input type="checkbox" class="highlighted-text-color" value="#e6e6e6"> Light grey &nbsp;</label>
<label class='hlt-checkbox-label'><input type="checkbox" class="hlt-color" value="#ffffff"> White &nbsp;</label> <label class='highlighted-text-checkbox-label'><input type="checkbox" class="highlighted-text-color" value="#ffffff"> White &nbsp;</label>
<label class='hlt-checkbox-label'><input type="checkbox" class="hlt-color" value="#e64c4c"> Red &nbsp;</label> <label class='highlighted-text-checkbox-label'><input type="checkbox" class="highlighted-text-color" value="#e64c4c"> Red &nbsp;</label>
<label class='hlt-checkbox-label'><input type="checkbox" class="hlt-color" value="#e6994c"> Orange &nbsp;</label> <label class='highlighted-text-checkbox-label'><input type="checkbox" class="highlighted-text-color" value="#e6994c"> Orange &nbsp;</label>
<label class='hlt-checkbox-label'><input type="checkbox" class="hlt-color" value="#e6e64c"> Yellow &nbsp;</label> <label class='highlighted-text-checkbox-label'><input type="checkbox" class="highlighted-text-color" value="#e6e64c"> Yellow &nbsp;</label>
<label class='hlt-checkbox-label'><input type="checkbox" class="hlt-color" value="#99e64c"> Light green &nbsp;</label> <label class='highlighted-text-checkbox-label'><input type="checkbox" class="highlighted-text-color" value="#99e64c"> Light green &nbsp;</label>
<label class='hlt-checkbox-label'><input type="checkbox" class="hlt-color" value="#4ce64c"> Green &nbsp;</label> <label class='highlighted-text-checkbox-label'><input type="checkbox" class="highlighted-text-color" value="#4ce64c"> Green &nbsp;</label>
<label class='hlt-checkbox-label'><input type="checkbox" class="hlt-color" value="#4ce699"> Aquamarine &nbsp;</label> <label class='highlighted-text-checkbox-label'><input type="checkbox" class="highlighted-text-color" value="#4ce699"> Aquamarine &nbsp;</label>
<label class='hlt-checkbox-label'><input type="checkbox" class="hlt-color" value="#4ce6e6"> Turquoise &nbsp;</label> <label class='highlighted-text-checkbox-label'><input type="checkbox" class="highlighted-text-color" value="#4ce6e6"> Turquoise &nbsp;</label>
<label class='hlt-checkbox-label'><input type="checkbox" class="hlt-color" value="#4c99e6"> Light blue &nbsp;</label> <label class='highlighted-text-checkbox-label'><input type="checkbox" class="highlighted-text-color" value="#4c99e6"> Light blue &nbsp;</label>
<label class='hlt-checkbox-label'><input type="checkbox" class="hlt-color" value="#4c4ce6"> Blue &nbsp;</label> <label class='highlighted-text-checkbox-label'><input type="checkbox" class="highlighted-text-color" value="#4c4ce6"> Blue &nbsp;</label>
<label class='hlt-checkbox-label'><input type="checkbox" class="hlt-color" value="#994ce6"> Purple &nbsp;</label> <label class='highlighted-text-checkbox-label'><input type="checkbox" class="highlighted-text-color" value="#994ce6"> Purple &nbsp;</label>
<br><strong>Background color:</strong><br> <br><strong>Background color:</strong><br>
<label class='hlt-checkbox-label'><input type="checkbox" class="hlt-background-color" value="#000000"> Dark&nbsp;</label> <label class='highlighted-text-checkbox-label'><input type="checkbox" class="highlighted-text-background-color" value="#000000"> Dark&nbsp;</label>
<label class='hlt-checkbox-label'><input type="checkbox" class="hlt-background-color" value="#4d4d4d"> Dim grey&nbsp;</label> <label class='highlighted-text-checkbox-label'><input type="checkbox" class="highlighted-text-background-color" value="#4d4d4d"> Dim grey&nbsp;</label>
<label class='hlt-checkbox-label'><input type="checkbox" class="hlt-background-color" value="#999999"> Grey&nbsp;</label> <label class='highlighted-text-checkbox-label'><input type="checkbox" class="highlighted-text-background-color" value="#999999"> Grey&nbsp;</label>
<label class='hlt-checkbox-label'><input type="checkbox" class="hlt-background-color" value="#e6e6e6"> Light grey&nbsp;</label> <label class='highlighted-text-checkbox-label'><input type="checkbox" class="highlighted-text-background-color" value="#e6e6e6"> Light grey&nbsp;</label>
<label class='hlt-checkbox-label'><input type="checkbox" class="hlt-background-color" value="#ffffff"> White&nbsp;</label> <label class='highlighted-text-checkbox-label'><input type="checkbox" class="highlighted-text-background-color" value="#ffffff"> White&nbsp;</label>
<label class='hlt-checkbox-label'><input type="checkbox" class="hlt-background-color" value="#e64c4c"> Red &nbsp;</label> <label class='highlighted-text-checkbox-label'><input type="checkbox" class="highlighted-text-background-color" value="#e64c4c"> Red &nbsp;</label>
<label class='hlt-checkbox-label'><input type="checkbox" class="hlt-background-color" value="#e6994c"> Orange&nbsp;</label> <label class='highlighted-text-checkbox-label'><input type="checkbox" class="highlighted-text-background-color" value="#e6994c"> Orange&nbsp;</label>
<label class='hlt-checkbox-label'><input type="checkbox" class="hlt-background-color" value="#e6e64c"> Yellow&nbsp;</label> <label class='highlighted-text-checkbox-label'><input type="checkbox" class="highlighted-text-background-color" value="#e6e64c"> Yellow&nbsp;</label>
<label class='hlt-checkbox-label'><input type="checkbox" class="hlt-background-color" value="#99e64c"> Light green&nbsp;</label> <label class='highlighted-text-checkbox-label'><input type="checkbox" class="highlighted-text-background-color" value="#99e64c"> Light green&nbsp;</label>
<label class='hlt-checkbox-label'><input type="checkbox" class="hlt-background-color" value="#4ce64c"> Green&nbsp;</label> <label class='highlighted-text-checkbox-label'><input type="checkbox" class="highlighted-text-background-color" value="#4ce64c"> Green&nbsp;</label>
<label class='hlt-checkbox-label'><input type="checkbox" class="hlt-background-color" value="#4ce699"> Aquamarine&nbsp;</label> <label class='highlighted-text-checkbox-label'><input type="checkbox" class="highlighted-text-background-color" value="#4ce699"> Aquamarine&nbsp;</label>
<label class='hlt-checkbox-label'><input type="checkbox" class="hlt-background-color" value="#4ce6e6"> Turquoise&nbsp;</label> <label class='highlighted-text-checkbox-label'><input type="checkbox" class="highlighted-text-background-color" value="#4ce6e6"> Turquoise&nbsp;</label>
<label class='hlt-checkbox-label'><input type="checkbox" class="hlt-background-color" value="#4c99e6"> Light blue&nbsp;</label> <label class='highlighted-text-checkbox-label'><input type="checkbox" class="highlighted-text-background-color" value="#4c99e6"> Light blue&nbsp;</label>
<label class='hlt-checkbox-label'><input type="checkbox" class="hlt-background-color" value="#4c4ce6"> Blue&nbsp;</label> <label class='highlighted-text-checkbox-label'><input type="checkbox" class="highlighted-text-background-color" value="#4c4ce6"> Blue&nbsp;</label>
<label class='hlt-checkbox-label'><input type="checkbox" class="hlt-background-color" value="#994ce6"> Purple&nbsp;</label> <label class='highlighted-text-checkbox-label'><input type="checkbox" class="highlighted-text-background-color" value="#994ce6"> Purple&nbsp;</label>
</div>`; </div>`;
export default class HighlightedTextOptions extends OptionsWidget { export default class HighlightedTextOptions extends OptionsWidget {
doRender() { doRender() {
this.$widget = $(TPL); this.$widget = $(TPL);
this.$hltColors = this.$widget.find(".hlt-color"); this.$hltColors = this.$widget.find(".highlighted-text-color");
this.$hltColors.on('change', () => { 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; return this.value;
}).get(); }).get();
this.updateOption('highlightedTextColors', JSON.stringify(hltColorVals)); 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', () =>{ 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; return this.value;
}).get(); }).get();
this.updateOption('highlightedTextBgColors', JSON.stringify(hltBgColorVals)); this.updateOption('highlightedTextBgColors', JSON.stringify(hltBgColorVals));
@ -72,14 +69,14 @@ export default class HighlightedTextOptions extends OptionsWidget {
async optionsLoaded(options) { async optionsLoaded(options) {
const hltColorVals=JSON.parse(options.highlightedTextColors); const hltColorVals=JSON.parse(options.highlightedTextColors);
const hltBgColorVals=JSON.parse(options.highlightedTextBgColors); 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) { if ($.inArray($(this).val(), hltColorVals) !== -1) {
$(this).prop("checked", true); $(this).prop("checked", true);
} else { } else {
$(this).prop("checked", false); $(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) { if ($.inArray($(this).val(), hltBgColorVals) !== -1) {
$(this).prop("checked", true); $(this).prop("checked", true);
} else { } else {