extracted widgets from note title

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

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() {