mirror of
https://github.com/zadam/trilium.git
synced 2025-06-06 18:08:33 +02:00
Show highlighted text in the left pane
This commit is contained in:
SiriusXT
parent
86861f6ec3
commit
d2d286a4ff
@ -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'))
|
||||
)
|
||||
)
|
||||
|
||||
@ -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 = `<div class="hlt-widget">
|
||||
const TPL = `<div class="highlighted-text-widget">
|
||||
<style>
|
||||
.hlt-widget {
|
||||
.highlighted-text-widget {
|
||||
padding: 10px;
|
||||
contain: none;
|
||||
overflow: auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.hlt > ol {
|
||||
.highlighted-text > ol {
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
.hlt li {
|
||||
.highlighted-text li {
|
||||
cursor: pointer;
|
||||
margin-bottom: 3px;
|
||||
text-align: justify;
|
||||
text-justify: distribute;
|
||||
}
|
||||
|
||||
.hlt li:hover {
|
||||
.highlighted-text li:hover {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.close-hlt {
|
||||
.close-highlighted-text {
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
right: 2px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<span class="hlt"></span>
|
||||
<span class="highlighted-text"></span>
|
||||
</div>`;
|
||||
|
||||
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");
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,67 +1,64 @@
|
||||
import OptionsWidget from "../options_widget.js";
|
||||
|
||||
const TPL = `
|
||||
<div class="options-section">
|
||||
<div class="options-section" style='max-width: 46em;'>
|
||||
<style>
|
||||
.hlt-checkbox-label {
|
||||
.highlighted-text-checkbox-label {
|
||||
display: inline-block;
|
||||
min-width: 8em;
|
||||
}
|
||||
.options-section{
|
||||
max-width: 46em;
|
||||
}
|
||||
</style>
|
||||
<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>
|
||||
<label class='hlt-checkbox-label'><input type="checkbox" class="hlt-color" value="#000000"> Dark </label>
|
||||
<label class='hlt-checkbox-label'><input type="checkbox" class="hlt-color" value="#4d4d4d"> Dim grey </label>
|
||||
<label class='hlt-checkbox-label'><input type="checkbox" class="hlt-color" value="#999999"> Grey </label>
|
||||
<label class='hlt-checkbox-label'><input type="checkbox" class="hlt-color" value="#e6e6e6"> Light grey </label>
|
||||
<label class='hlt-checkbox-label'><input type="checkbox" class="hlt-color" value="#ffffff"> White </label>
|
||||
<label class='hlt-checkbox-label'><input type="checkbox" class="hlt-color" value="#e64c4c"> Red </label>
|
||||
<label class='hlt-checkbox-label'><input type="checkbox" class="hlt-color" value="#e6994c"> Orange </label>
|
||||
<label class='hlt-checkbox-label'><input type="checkbox" class="hlt-color" value="#e6e64c"> Yellow </label>
|
||||
<label class='hlt-checkbox-label'><input type="checkbox" class="hlt-color" value="#99e64c"> Light green </label>
|
||||
<label class='hlt-checkbox-label'><input type="checkbox" class="hlt-color" value="#4ce64c"> Green </label>
|
||||
<label class='hlt-checkbox-label'><input type="checkbox" class="hlt-color" value="#4ce699"> Aquamarine </label>
|
||||
<label class='hlt-checkbox-label'><input type="checkbox" class="hlt-color" value="#4ce6e6"> Turquoise </label>
|
||||
<label class='hlt-checkbox-label'><input type="checkbox" class="hlt-color" value="#4c99e6"> Light blue </label>
|
||||
<label class='hlt-checkbox-label'><input type="checkbox" class="hlt-color" value="#4c4ce6"> Blue </label>
|
||||
<label class='hlt-checkbox-label'><input type="checkbox" class="hlt-color" value="#994ce6"> Purple </label>
|
||||
<label class='highlighted-text-checkbox-label'><input type="checkbox" class="highlighted-text-color" value="#000000"> Dark </label>
|
||||
<label class='highlighted-text-checkbox-label'><input type="checkbox" class="highlighted-text-color" value="#4d4d4d"> Dim grey </label>
|
||||
<label class='highlighted-text-checkbox-label'><input type="checkbox" class="highlighted-text-color" value="#999999"> Grey </label>
|
||||
<label class='highlighted-text-checkbox-label'><input type="checkbox" class="highlighted-text-color" value="#e6e6e6"> Light grey </label>
|
||||
<label class='highlighted-text-checkbox-label'><input type="checkbox" class="highlighted-text-color" value="#ffffff"> White </label>
|
||||
<label class='highlighted-text-checkbox-label'><input type="checkbox" class="highlighted-text-color" value="#e64c4c"> Red </label>
|
||||
<label class='highlighted-text-checkbox-label'><input type="checkbox" class="highlighted-text-color" value="#e6994c"> Orange </label>
|
||||
<label class='highlighted-text-checkbox-label'><input type="checkbox" class="highlighted-text-color" value="#e6e64c"> Yellow </label>
|
||||
<label class='highlighted-text-checkbox-label'><input type="checkbox" class="highlighted-text-color" value="#99e64c"> Light green </label>
|
||||
<label class='highlighted-text-checkbox-label'><input type="checkbox" class="highlighted-text-color" value="#4ce64c"> Green </label>
|
||||
<label class='highlighted-text-checkbox-label'><input type="checkbox" class="highlighted-text-color" value="#4ce699"> Aquamarine </label>
|
||||
<label class='highlighted-text-checkbox-label'><input type="checkbox" class="highlighted-text-color" value="#4ce6e6"> Turquoise </label>
|
||||
<label class='highlighted-text-checkbox-label'><input type="checkbox" class="highlighted-text-color" value="#4c99e6"> Light blue </label>
|
||||
<label class='highlighted-text-checkbox-label'><input type="checkbox" class="highlighted-text-color" value="#4c4ce6"> Blue </label>
|
||||
<label class='highlighted-text-checkbox-label'><input type="checkbox" class="highlighted-text-color" value="#994ce6"> Purple </label>
|
||||
<br><strong>Background color:</strong><br>
|
||||
<label class='hlt-checkbox-label'><input type="checkbox" class="hlt-background-color" value="#000000"> Dark </label>
|
||||
<label class='hlt-checkbox-label'><input type="checkbox" class="hlt-background-color" value="#4d4d4d"> Dim grey </label>
|
||||
<label class='hlt-checkbox-label'><input type="checkbox" class="hlt-background-color" value="#999999"> Grey </label>
|
||||
<label class='hlt-checkbox-label'><input type="checkbox" class="hlt-background-color" value="#e6e6e6"> Light grey </label>
|
||||
<label class='hlt-checkbox-label'><input type="checkbox" class="hlt-background-color" value="#ffffff"> White </label>
|
||||
<label class='hlt-checkbox-label'><input type="checkbox" class="hlt-background-color" value="#e64c4c"> Red </label>
|
||||
<label class='hlt-checkbox-label'><input type="checkbox" class="hlt-background-color" value="#e6994c"> Orange </label>
|
||||
<label class='hlt-checkbox-label'><input type="checkbox" class="hlt-background-color" value="#e6e64c"> Yellow </label>
|
||||
<label class='hlt-checkbox-label'><input type="checkbox" class="hlt-background-color" value="#99e64c"> Light green </label>
|
||||
<label class='hlt-checkbox-label'><input type="checkbox" class="hlt-background-color" value="#4ce64c"> Green </label>
|
||||
<label class='hlt-checkbox-label'><input type="checkbox" class="hlt-background-color" value="#4ce699"> Aquamarine </label>
|
||||
<label class='hlt-checkbox-label'><input type="checkbox" class="hlt-background-color" value="#4ce6e6"> Turquoise </label>
|
||||
<label class='hlt-checkbox-label'><input type="checkbox" class="hlt-background-color" value="#4c99e6"> Light blue </label>
|
||||
<label class='hlt-checkbox-label'><input type="checkbox" class="hlt-background-color" value="#4c4ce6"> Blue </label>
|
||||
<label class='hlt-checkbox-label'><input type="checkbox" class="hlt-background-color" value="#994ce6"> Purple </label>
|
||||
<label class='highlighted-text-checkbox-label'><input type="checkbox" class="highlighted-text-background-color" value="#000000"> Dark </label>
|
||||
<label class='highlighted-text-checkbox-label'><input type="checkbox" class="highlighted-text-background-color" value="#4d4d4d"> Dim grey </label>
|
||||
<label class='highlighted-text-checkbox-label'><input type="checkbox" class="highlighted-text-background-color" value="#999999"> Grey </label>
|
||||
<label class='highlighted-text-checkbox-label'><input type="checkbox" class="highlighted-text-background-color" value="#e6e6e6"> Light grey </label>
|
||||
<label class='highlighted-text-checkbox-label'><input type="checkbox" class="highlighted-text-background-color" value="#ffffff"> White </label>
|
||||
<label class='highlighted-text-checkbox-label'><input type="checkbox" class="highlighted-text-background-color" value="#e64c4c"> Red </label>
|
||||
<label class='highlighted-text-checkbox-label'><input type="checkbox" class="highlighted-text-background-color" value="#e6994c"> Orange </label>
|
||||
<label class='highlighted-text-checkbox-label'><input type="checkbox" class="highlighted-text-background-color" value="#e6e64c"> Yellow </label>
|
||||
<label class='highlighted-text-checkbox-label'><input type="checkbox" class="highlighted-text-background-color" value="#99e64c"> Light green </label>
|
||||
<label class='highlighted-text-checkbox-label'><input type="checkbox" class="highlighted-text-background-color" value="#4ce64c"> Green </label>
|
||||
<label class='highlighted-text-checkbox-label'><input type="checkbox" class="highlighted-text-background-color" value="#4ce699"> Aquamarine </label>
|
||||
<label class='highlighted-text-checkbox-label'><input type="checkbox" class="highlighted-text-background-color" value="#4ce6e6"> Turquoise </label>
|
||||
<label class='highlighted-text-checkbox-label'><input type="checkbox" class="highlighted-text-background-color" value="#4c99e6"> Light blue </label>
|
||||
<label class='highlighted-text-checkbox-label'><input type="checkbox" class="highlighted-text-background-color" value="#4c4ce6"> Blue </label>
|
||||
<label class='highlighted-text-checkbox-label'><input type="checkbox" class="highlighted-text-background-color" value="#994ce6"> Purple </label>
|
||||
</div>`;
|
||||
|
||||
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 {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user