Tools/Notes
1
0
Fork 0
mirror of https://github.com/TriliumNext/Notes.git synced 2025-11-04 15:11:31 +08:00
Code Issues Packages Projects Releases Wiki Activity

Show highlighted text in the right panel

Browse Source
This commit is contained in:
SiriusXT 2023-05-31 22:34:24 +08:00
parent d2d286a4ff
commit 92d5aeae41
3 changed files with 40 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -82,11 +82,14 @@ export default class HighlightTextWidget extends RightPanelWidget {
let optionsHltColors = JSON.parse(options.get('highlightedTextColors')); let optionsHltColors = JSON.parse(options.get('highlightedTextColors'));
let optionsHltBgColors = JSON.parse(options.get('highlightedTextBgColors')); let optionsHltBgColors = JSON.parse(options.get('highlightedTextBgColors'));
const colorToValDic={"Dark": "#000000", "Dim grey": "#4d4d4d", "Grey": "#999999", "Light grey": "#e6e6e6", "White": "#ffffff", "Red": "#e64c4c", "Orange": "#e6994c", "Yellow": "#e6e64c", "Light green": "#99e64c", "Green": "#4ce64c", "Aquamarine": "#4ce699", "Turquoise": "#4ce6e6", "Light blue": "#4c99e6", "Blue": "#4c4ce6", "Purple": "#994ce6"}
const optionsHltColorsVal = optionsHltColors.map(color => colorToValDic[color]);
const optionsHltBgColorsVal = optionsHltBgColors.map(color => colorToValDic[color]);
// Check for type text unconditionally in case alwaysShowWidget is set // Check for type text unconditionally in case alwaysShowWidget is set
if (this.note.type === 'text') { if (this.note.type === 'text') {
const { content } = await note.getNoteComplement(); const { content } = await note.getNoteComplement();
//hltColors/hltBgColors are the colors/background-color that appear in notes and in options //hltColors/hltBgColors are the colors/background-color that appear in notes and in options
({ $hlt, hltColors, hltBgColors } = await this.getHlt(content, optionsHltColors, optionsHltBgColors)); ({ $hlt, hltColors, hltBgColors } = await this.getHlt(content, optionsHltColorsVal, optionsHltBgColorsVal));
} }
this.$hlt.html($hlt); this.$hlt.html($hlt);
this.toggleInt( this.toggleInt(
@ -167,7 +170,7 @@ export default class HighlightTextWidget extends RightPanelWidget {
/** /**
* Builds a jquery table of helight text. * Builds a jquery table of helight text.
*/ */
getHlt(html, optionsHltColors, optionsHltBgColors) { getHlt(html, optionsHltColorsVal, optionsHltBgColorsVal) {
const hltBCs = $(html).find(`span[style*="background-color"],span[style*="color"]`) const hltBCs = $(html).find(`span[style*="background-color"],span[style*="color"]`)
const $hlt = $("<ol>"); const $hlt = $("<ol>");
let hltColors = []; let hltColors = [];
@ -181,7 +184,7 @@ export default class HighlightTextWidget extends RightPanelWidget {
if (color != "") { if (color != "") {
var hexColor = this.colorToHex(color); var hexColor = this.colorToHex(color);
if (this.hexIsInOptionHexs(hexColor,optionsHltColors)) { if (this.hexIsInOptionHexs(hexColor,optionsHltColorsVal)) {
$li.html(hltText) $li.html(hltText)
hltColors.push(hexColor); hltColors.push(hexColor);
liDisplay=true; liDisplay=true;
@ -189,7 +192,7 @@ export default class HighlightTextWidget extends RightPanelWidget {
} }
if (bgColor != "") { if (bgColor != "") {
var hexBgColor = this.colorToHex(bgColor); var hexBgColor = this.colorToHex(bgColor);
if (this.hexIsInOptionHexs(hexBgColor,optionsHltBgColors)) { if (this.hexIsInOptionHexs(hexBgColor,optionsHltBgColorsVal)) {
//When you need to add a background color, in order to make the display more comfortable, change the background color to transparent //When you need to add a background color, in order to make the display more comfortable, change the background color to transparent
$li.html(hltText.css("background-color", hexBgColor+"80")) $li.html(hltText.css("background-color", hexBgColor+"80"))
hltBgColors.push(hexBgColor); hltBgColors.push(hexBgColor);

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

@ -3,7 +3,7 @@ import OptionsWidget from "../options_widget.js";
const TPL = ` const TPL = `
<div class="options-section" style='max-width: 46em;'> <div class="options-section" style='max-width: 46em;'>
<style> <style>
.highlighted-text-checkbox-label { .highlighted-text-label {
display: inline-block; display: inline-block;
min-width: 8em; min-width: 8em;
} }
@ -12,37 +12,37 @@ const TPL = `
Displays highlighted text in the right panel. You can customize the highlighted text displayed in the right panel: 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='highlighted-text-checkbox-label'><input type="checkbox" class="highlighted-text-color" value="#000000"> Dark &nbsp;</label> <label class='highlighted-text-label'><input type="checkbox" class="highlighted-text-color" value="Dark"> Dark &nbsp;</label>
<label class='highlighted-text-checkbox-label'><input type="checkbox" class="highlighted-text-color" value="#4d4d4d"> Dim grey &nbsp;</label> <label class='highlighted-text-label'><input type="checkbox" class="highlighted-text-color" value="Dim grey"> Dim grey &nbsp;</label>
<label class='highlighted-text-checkbox-label'><input type="checkbox" class="highlighted-text-color" value="#999999"> Grey &nbsp;</label> <label class='highlighted-text-label'><input type="checkbox" class="highlighted-text-color" value="Grey"> Grey &nbsp;</label>
<label class='highlighted-text-checkbox-label'><input type="checkbox" class="highlighted-text-color" value="#e6e6e6"> Light grey &nbsp;</label> <label class='highlighted-text-label'><input type="checkbox" class="highlighted-text-color" value="Light grey"> Light grey &nbsp;</label>
<label class='highlighted-text-checkbox-label'><input type="checkbox" class="highlighted-text-color" value="#ffffff"> White &nbsp;</label> <label class='highlighted-text-label'><input type="checkbox" class="highlighted-text-color" value="White"> White &nbsp;</label>
<label class='highlighted-text-checkbox-label'><input type="checkbox" class="highlighted-text-color" value="#e64c4c"> Red &nbsp;</label> <label class='highlighted-text-label'><input type="checkbox" class="highlighted-text-color" value="Red"> Red &nbsp;</label>
<label class='highlighted-text-checkbox-label'><input type="checkbox" class="highlighted-text-color" value="#e6994c"> Orange &nbsp;</label> <label class='highlighted-text-label'><input type="checkbox" class="highlighted-text-color" value="Orange"> Orange &nbsp;</label>
<label class='highlighted-text-checkbox-label'><input type="checkbox" class="highlighted-text-color" value="#e6e64c"> Yellow &nbsp;</label> <label class='highlighted-text-label'><input type="checkbox" class="highlighted-text-color" value="Yellow"> Yellow &nbsp;</label>
<label class='highlighted-text-checkbox-label'><input type="checkbox" class="highlighted-text-color" value="#99e64c"> Light green &nbsp;</label> <label class='highlighted-text-label'><input type="checkbox" class="highlighted-text-color" value="Light green"> Light green &nbsp;</label>
<label class='highlighted-text-checkbox-label'><input type="checkbox" class="highlighted-text-color" value="#4ce64c"> Green &nbsp;</label> <label class='highlighted-text-label'><input type="checkbox" class="highlighted-text-color" value="Green"> Green &nbsp;</label>
<label class='highlighted-text-checkbox-label'><input type="checkbox" class="highlighted-text-color" value="#4ce699"> Aquamarine &nbsp;</label> <label class='highlighted-text-label'><input type="checkbox" class="highlighted-text-color" value="Aquamarine"> Aquamarine &nbsp;</label>
<label class='highlighted-text-checkbox-label'><input type="checkbox" class="highlighted-text-color" value="#4ce6e6"> Turquoise &nbsp;</label> <label class='highlighted-text-label'><input type="checkbox" class="highlighted-text-color" value="Turquoise"> Turquoise &nbsp;</label>
<label class='highlighted-text-checkbox-label'><input type="checkbox" class="highlighted-text-color" value="#4c99e6"> Light blue &nbsp;</label> <label class='highlighted-text-label'><input type="checkbox" class="highlighted-text-color" value="Light blue"> Light blue &nbsp;</label>
<label class='highlighted-text-checkbox-label'><input type="checkbox" class="highlighted-text-color" value="#4c4ce6"> Blue &nbsp;</label> <label class='highlighted-text-label'><input type="checkbox" class="highlighted-text-color" value="Blue"> Blue &nbsp;</label>
<label class='highlighted-text-checkbox-label'><input type="checkbox" class="highlighted-text-color" value="#994ce6"> Purple &nbsp;</label> <label class='highlighted-text-label'><input type="checkbox" class="highlighted-text-color" value="Purple"> Purple &nbsp;</label>
<br><strong>Background color:</strong><br> <br><strong>Background color:</strong><br>
<label class='highlighted-text-checkbox-label'><input type="checkbox" class="highlighted-text-background-color" value="#000000"> Dark&nbsp;</label> <label class='highlighted-text-label'><input type="checkbox" class="highlighted-text-background-color" value="Dark"> Dark &nbsp;</label>
<label class='highlighted-text-checkbox-label'><input type="checkbox" class="highlighted-text-background-color" value="#4d4d4d"> Dim grey&nbsp;</label> <label class='highlighted-text-label'><input type="checkbox" class="highlighted-text-background-color" value="Dim grey"> Dim grey &nbsp;</label>
<label class='highlighted-text-checkbox-label'><input type="checkbox" class="highlighted-text-background-color" value="#999999"> Grey&nbsp;</label> <label class='highlighted-text-label'><input type="checkbox" class="highlighted-text-background-color" value="Grey"> 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='highlighted-text-label'><input type="checkbox" class="highlighted-text-background-color" value="Light grey"> Light grey &nbsp;</label>
<label class='highlighted-text-checkbox-label'><input type="checkbox" class="highlighted-text-background-color" value="#ffffff"> White&nbsp;</label> <label class='highlighted-text-label'><input type="checkbox" class="highlighted-text-background-color" value="White"> White &nbsp;</label>
<label class='highlighted-text-checkbox-label'><input type="checkbox" class="highlighted-text-background-color" value="#e64c4c"> Red &nbsp;</label> <label class='highlighted-text-label'><input type="checkbox" class="highlighted-text-background-color" value="Red"> Red &nbsp;</label>
<label class='highlighted-text-checkbox-label'><input type="checkbox" class="highlighted-text-background-color" value="#e6994c"> Orange&nbsp;</label> <label class='highlighted-text-label'><input type="checkbox" class="highlighted-text-background-color" value="Orange"> Orange &nbsp;</label>
<label class='highlighted-text-checkbox-label'><input type="checkbox" class="highlighted-text-background-color" value="#e6e64c"> Yellow&nbsp;</label> <label class='highlighted-text-label'><input type="checkbox" class="highlighted-text-background-color" value="Yellow"> Yellow &nbsp;</label>
<label class='highlighted-text-checkbox-label'><input type="checkbox" class="highlighted-text-background-color" value="#99e64c"> Light green&nbsp;</label> <label class='highlighted-text-label'><input type="checkbox" class="highlighted-text-background-color" value="Light green"> Light green &nbsp;</label>
<label class='highlighted-text-checkbox-label'><input type="checkbox" class="highlighted-text-background-color" value="#4ce64c"> Green&nbsp;</label> <label class='highlighted-text-label'><input type="checkbox" class="highlighted-text-background-color" value="Green"> Green &nbsp;</label>
<label class='highlighted-text-checkbox-label'><input type="checkbox" class="highlighted-text-background-color" value="#4ce699"> Aquamarine&nbsp;</label> <label class='highlighted-text-label'><input type="checkbox" class="highlighted-text-background-color" value="Aquamarine"> Aquamarine &nbsp;</label>
<label class='highlighted-text-checkbox-label'><input type="checkbox" class="highlighted-text-background-color" value="#4ce6e6"> Turquoise&nbsp;</label> <label class='highlighted-text-label'><input type="checkbox" class="highlighted-text-background-color" value="Turquoise"> Turquoise &nbsp;</label>
<label class='highlighted-text-checkbox-label'><input type="checkbox" class="highlighted-text-background-color" value="#4c99e6"> Light blue&nbsp;</label> <label class='highlighted-text-label'><input type="checkbox" class="highlighted-text-background-color" value="Light blue"> Light blue &nbsp;</label>
<label class='highlighted-text-checkbox-label'><input type="checkbox" class="highlighted-text-background-color" value="#4c4ce6"> Blue&nbsp;</label> <label class='highlighted-text-label'><input type="checkbox" class="highlighted-text-background-color" value="Blue"> Blue &nbsp;</label>
<label class='highlighted-text-checkbox-label'><input type="checkbox" class="highlighted-text-background-color" value="#994ce6"> Purple&nbsp;</label> <label class='highlighted-text-label'><input type="checkbox" class="highlighted-text-background-color" value="Purple"> Purple &nbsp;</label>
</div>`; </div>`;
export default class HighlightedTextOptions extends OptionsWidget { export default class HighlightedTextOptions extends OptionsWidget {

4
src/services/options_init.js
View File

@ -87,8 +87,8 @@ const defaultOptions = [
{ name: 'compressImages', value: 'true', isSynced: true }, { name: 'compressImages', value: 'true', isSynced: true },
{ name: 'downloadImagesAutomatically', value: 'true', isSynced: true }, { name: 'downloadImagesAutomatically', value: 'true', isSynced: true },
{ name: 'minTocHeadings', value: '5', isSynced: true }, { name: 'minTocHeadings', value: '5', isSynced: true },
{ name: 'highlightedTextColors', value: '["#e64c4c","#e6994c","#e6e64c","#99e64c","#4ce64c","#4ce699","#4ce6e6","#4c99e6","#4c4ce6","#994ce6"]', isSynced: true }, { name: 'highlightedTextColors', value: '["Red","Orange","Yellow","Light green","Green","Aquamarine","Turquoise","Light blue","Blue","Purple"]', isSynced: true },
{ name: 'highlightedTextBgColors', value: '["#e64c4c","#e6994c","#e6e64c","#99e64c","#4ce64c","#4ce699","#4ce6e6","#4c99e6","#4c4ce6","#994ce6"]', isSynced: true }, { name: 'highlightedTextBgColors', value: '["Red","Orange","Yellow","Light green","Green","Aquamarine","Turquoise","Light blue","Blue","Purple"]', isSynced: true },
{ name: 'checkForUpdates', value: 'true', isSynced: true }, { name: 'checkForUpdates', value: 'true', isSynced: true },
{ name: 'disableTray', value: 'false', isSynced: false }, { name: 'disableTray', value: 'false', isSynced: false },
{ name: 'customSearchEngineName', value: 'Duckduckgo', isSynced: false }, { name: 'customSearchEngineName', value: 'Duckduckgo', isSynced: false },