gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-03-01 14:22:32 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

extracted widgets from note title

Browse Source
This commit is contained in:
zadam 2020-01-19 13:19:40 +01:00
parent 9f1e777e6d
commit 6de4914ea6
10 changed files with 115 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/public/javascripts/dialogs/attributes.js
View File

@ -8,6 +8,7 @@ import linkService from "../services/link.js";
import libraryLoader from "../services/library_loader.js";
import noteAutocompleteService from "../services/note_autocomplete.js";
import treeService from "../services/tree.js";
import appContext from "../services/app_context.js";
const $dialog = $("#attributes-dialog");
const $saveAttributesButton = $("#save-attributes-button");

30
src/public/javascripts/widgets/note_actions.js Normal file
View File

@ -0,0 +1,30 @@
import BasicWidget from "./basic_widget.js";
const TPL = `
<div class="dropdown note-actions">
<button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="btn btn-sm dropdown-toggle">
Note actions
<span class="caret"></span>
</button>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item show-note-revisions-button" data-bind="css: { disabled: type() == 'file' || type() == 'image' }">Revisions</a>
<a class="dropdown-item show-attributes-button"><kbd data-kb-action="ShowAttributes"></kbd> Attributes</a>
<a class="dropdown-item show-link-map-button"><kbd data-kb-action="ShowLinkMap"></kbd> Link map</a>
<a class="dropdown-item show-source-button" data-bind="css: { disabled: type() != 'text' && type() != 'code' && type() != 'relation-map' && type() != 'search' }">
<kbd data-kb-action="ShowNoteSource"></kbd>
Note source
</a>
<a class="dropdown-item import-files-button">Import files</a>
<a class="dropdown-item export-note-button" data-bind="css: { disabled: type() != 'text' }">Export note</a>
<a class="dropdown-item print-note-button"><kbd data-kb-action="PrintActiveNote"></kbd> Print note</a>
<a class="dropdown-item show-note-info-button"><kbd data-kb-action="ShowNoteInfo"></kbd> Note info</a>
</div>
</div>`;
export default class NoteActionsWidget extends BasicWidget {
doRender() {
this.$widget = $(TPL);
return this.$widget;
}
}

6
src/public/javascripts/widgets/note_detail.js
View File

@ -5,12 +5,8 @@ import protectedSessionHolder from "../services/protected_session_holder.js";
const TPL = `
<div class="note-detail">
<style>
.note-detail-content {
display: flex;
flex-direction: column;
flex-grow: 100;
.note-detail {
height: 100%;
width: 100%;
}
</style>
</div>

79
src/public/javascripts/widgets/note_title.js
View File

@ -7,16 +7,15 @@ import linkService from "../services/link.js";
import protectedSessionHolder from "../services/protected_session_holder.js";
import NoteTypeWidget from "./note_type.js";
import NotePathsWidget from "./note_paths.js";
import NoteActionsWidget from "./note_actions.js";
import ProtectedNoteSwitchWidget from "./protected_note_switch.js";
import RunScriptButtonsWidget from "./run_script_buttons.js";
const TPL = `
<div class="note-title-row">
<style>
.note-title-row {
flex-grow: 0;
flex-shrink: 0;
padding-top: 2px;
display: flex;
align-items: center;
display: flex;
}
.note-title {
@ -30,54 +29,6 @@ const TPL = `
</style>
<input autocomplete="off" value="" class="note-title" tabindex="1">
<span class="saved-indicator hide-in-zen-mode bx bx-check" title="All changes have been saved"></span>
<div class="hide-in-zen-mode" style="display: flex; align-items: center;">
<button class="btn btn-sm icon-button bx bx-play-circle render-button"
style="display: none; margin-right: 10px;"
title="Render"></button>
<button class="btn btn-sm icon-button bx bx-play-circle execute-script-button"
style="display: none; margin-right: 10px;"
title="Execute (Ctrl+Enter)"></button>
<div class="btn-group btn-group-xs">
<button type="button"
class="btn btn-sm icon-button bx bx-check-shield protect-button"
title="Protected note can be viewed and edited only after entering password">
</button>
<button type="button"
class="btn btn-sm icon-button bx bx-shield unprotect-button"
title="Not protected note can be viewed without entering password">
</button>
</div>
&nbsp; &nbsp;
<div class="note-type-actions" style="display: flex;">
<div class="dropdown note-actions">
<button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="btn btn-sm dropdown-toggle">
Note actions
<span class="caret"></span>
</button>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item show-note-revisions-button" data-bind="css: { disabled: type() == 'file' || type() == 'image' }">Revisions</a>
<a class="dropdown-item show-attributes-button"><kbd data-kb-action="ShowAttributes"></kbd> Attributes</a>
<a class="dropdown-item show-link-map-button"><kbd data-kb-action="ShowLinkMap"></kbd> Link map</a>
<a class="dropdown-item show-source-button" data-bind="css: { disabled: type() != 'text' && type() != 'code' && type() != 'relation-map' && type() != 'search' }">
<kbd data-kb-action="ShowNoteSource"></kbd>
Note source
</a>
<a class="dropdown-item import-files-button">Import files</a>
<a class="dropdown-item export-note-button" data-bind="css: { disabled: type() != 'text' }">Export note</a>
<a class="dropdown-item print-note-button"><kbd data-kb-action="PrintActiveNote"></kbd> Print note</a>
<a class="dropdown-item show-note-info-button"><kbd data-kb-action="ShowNoteInfo"></kbd> Note info</a>
</div>
</div>
</div>
</div>
</div>`;
export default class NoteTitleWidget extends TabAwareWidget {
@ -86,16 +37,19 @@ export default class NoteTitleWidget extends TabAwareWidget {
this.$noteTitle = this.$widget.find(".note-title");
this.$protectButton = this.$widget.find(".protect-button");
this.$protectButton.on('click', protectedSessionService.protectNoteAndSendToServer);
this.$unprotectButton = this.$widget.find(".unprotect-button");
this.$unprotectButton.on('click', protectedSessionService.unprotectNoteAndSendToServer);
this.$savedIndicator = this.$widget.find(".saved-indicator");
this.runScriptButtons = new RunScriptButtonsWidget(this.appContext);
this.$widget.append(this.runScriptButtons.render());
this.protectedNoteSwitch = new ProtectedNoteSwitchWidget(this.appContext);
this.$widget.append(this.protectedNoteSwitch.render());
this.noteType = new NoteTypeWidget(this.appContext);
this.$widget.find('.note-type-actions').prepend(this.noteType.render());
this.$widget.append(this.noteType.render());
this.noteActions = new NoteActionsWidget(this.appContext);
this.$widget.append(this.noteActions.render());
this.notePaths = new NotePathsWidget(this.appContext);
this.$widget.prepend(this.notePaths.render());
@ -138,11 +92,6 @@ export default class NoteTitleWidget extends TabAwareWidget {
if (note.isProtected && !protectedSessionHolder.isProtectedSessionAvailable()) {
this.$noteTitle.prop("readonly", true);
}
this.$protectButton.toggleClass("active", note.isProtected);
this.$protectButton.prop("disabled", note.isProtected);
this.$unprotectButton.toggleClass("active", !note.isProtected);
this.$unprotectButton.prop("disabled", !note.isProtected || !protectedSessionHolder.isProtectedSessionAvailable());
}
noteSavedListener() {

22
src/public/javascripts/widgets/protected_note_switch.js Normal file
View File

@ -0,0 +1,22 @@
import BasicWidget from "./basic_widget.js";
const TPL = `
<div class="btn-group btn-group-xs">
<button type="button"
class="btn btn-sm icon-button bx bx-check-shield protect-button"
title="Protected note can be viewed and edited only after entering password">
</button>
<button type="button"
class="btn btn-sm icon-button bx bx-shield unprotect-button"
title="Not protected note can be viewed without entering password">
</button>
</div>`;
export default class ProtectedNoteSwitchWidget extends BasicWidget {
doRender() {
this.$widget = $(TPL);
return this.$widget;
}
}

33
src/public/javascripts/widgets/run_script_buttons.js Normal file
View File

@ -0,0 +1,33 @@
import TabAwareWidget from "./tab_aware_widget.js";
import protectedSessionService from "../services/protected_session.js";
import protectedSessionHolder from "../services/protected_session_holder.js";
const TPL = `
<button class="btn btn-sm icon-button bx bx-play-circle render-button"
style="display: none; margin-right: 10px;"
title="Render"></button>
<button class="btn btn-sm icon-button bx bx-play-circle execute-script-button"
style="display: none; margin-right: 10px;"
title="Execute (Ctrl+Enter)"></button>`;
export default class RunScriptButtonsWidget extends TabAwareWidget {
doRender() {
this.$widget = $(TPL);
this.$protectButton = this.$widget.find(".protect-button");
this.$protectButton.on('click', protectedSessionService.protectNoteAndSendToServer);
this.$unprotectButton = this.$widget.find(".unprotect-button");
this.$unprotectButton.on('click', protectedSessionService.unprotectNoteAndSendToServer);
return this.$widget;
}
refreshWithNote(note) {
this.$protectButton.toggleClass("active", note.isProtected);
this.$protectButton.prop("disabled", note.isProtected);
this.$unprotectButton.toggleClass("active", !note.isProtected);
this.$unprotectButton.prop("disabled", !note.isProtected || !protectedSessionHolder.isProtectedSessionAvailable());
}
}

4
src/public/javascripts/widgets/tab_aware_widget.js
View File

@ -25,14 +25,14 @@ export default class TabAwareWidget extends BasicWidget {
refresh() {
if (this.tabContext && this.tabContext.note) {
this.toggle(true);
this.refreshWithNote();
this.refreshWithNote(this.tabContext.note);
}
else {
this.toggle(false);
}
}
refreshWithNote() {}
refreshWithNote(note) {}
activeTabChangedListener() {
this.tabContext = this.appContext.getActiveTabContext();

11
src/public/javascripts/widgets/type_widgets/code.js
View File

@ -8,6 +8,17 @@ import TypeWidget from "./type_widget.js";
const TPL = `
<div class="note-detail-code note-detail-printable">
<style>
.note-detail-code {
overflow: auto;
height: 100%;
}
.note-detail-code-editor {
min-height: 500px;
}
</style>
<div class="note-detail-code-editor"></div>
</div>`;

1
src/public/javascripts/widgets/type_widgets/text.js
View File

@ -53,6 +53,7 @@ const TPL = `
.note-detail-text {
overflow: auto;
height: 100%;
font-family: var(--detail-text-font-family);
}

6
src/public/stylesheets/style.css
View File

@ -303,13 +303,7 @@ div.ui-tooltip {
background-color: var(--active-item-background-color) !important;
}
.note-detail-code {
overflow: auto;
}
.note-detail-code-editor {
min-height: 500px;
}
.note-detail-render {
min-height: 500px;