zadam/trilium
1
1
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2024-09-22 00:26:01 +08:00
Code Issues Packages Projects Releases Wiki Activity

moved protected note switch to "note actions", added shadow to protected note title

Browse source
This commit is contained in:
zadam 2020-04-29 00:01:07 +02:00
parent 989a003d2f
commit 4c308ad68f
6 changed files with 89 additions and 47 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/public/app/layouts/desktop_extra_window_layout.js
View file

@ -6,7 +6,6 @@ import NoteTreeWidget from "../widgets/note_tree.js";
import TabCachingWidget from "../widgets/tab_caching_widget.js";
import NoteTitleWidget from "../widgets/note_title.js";
import RunScriptButtonsWidget from "../widgets/run_script_buttons.js";
import ProtectedNoteSwitchWidget from "../widgets/protected_note_switch.js";
import NoteTypeWidget from "../widgets/note_type.js";
import NoteActionsWidget from "../widgets/note_actions.js";
import PromotedAttributesWidget from "../widgets/promoted_attributes.js";
@ -35,7 +34,6 @@ export default class DesktopExtraWindowLayout {
.cssBlock('.title-row > * { margin: 5px; }')
.child(new NoteTitleWidget())
.child(new RunScriptButtonsWidget().hideInZenMode())
.child(new ProtectedNoteSwitchWidget().hideInZenMode())
.child(new NoteTypeWidget().hideInZenMode())
.child(new NoteActionsWidget().hideInZenMode())
)

2
src/public/app/layouts/desktop_main_window_layout.js
View file

@ -12,7 +12,6 @@ import TabCachingWidget from "../widgets/tab_caching_widget.js";
import NotePathsWidget from "../widgets/note_paths.js";
import NoteTitleWidget from "../widgets/note_title.js";
import RunScriptButtonsWidget from "../widgets/run_script_buttons.js";
import ProtectedNoteSwitchWidget from "../widgets/protected_note_switch.js";
import NoteTypeWidget from "../widgets/note_type.js";
import NoteActionsWidget from "../widgets/note_actions.js";
import PromotedAttributesWidget from "../widgets/promoted_attributes.js";
@ -132,7 +131,6 @@ export default class DesktopMainWindowLayout {
.cssBlock('.title-row > * { margin: 5px; }')
.child(new NoteTitleWidget())
.child(new RunScriptButtonsWidget().hideInZenMode())
.child(new ProtectedNoteSwitchWidget().hideInZenMode())
.child(new NoteTypeWidget().hideInZenMode())
.child(new NoteActionsWidget().hideInZenMode())
)

75
src/public/app/widgets/note_actions.js
View file

@ -1,4 +1,5 @@
import TabAwareWidget from "./tab_aware_widget.js";
import protectedSessionService from "../services/protected_session.js";
const TPL = `
<div class="dropdown note-actions">
@ -12,6 +13,49 @@ const TPL = `
background-color: transparent !important;
pointer-events: none; /* makes it unclickable */
}
/* The switch - the box around the slider */
.switch {
position: relative;
display: inline-block;
width: 50px;
height: 24px;
float: right;
}
/* The slider */
.slider {
border-radius: 24px;
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: var(--more-accented-background-color);
transition: .4s;
}
.slider:before {
border-radius: 50%;
position: absolute;
content: "";
height: 16px;
width: 16px;
left: 4px;
bottom: 4px;
background-color: var(--main-background-color);
-webkit-transition: .4s;
transition: .4s;
}
.slider.checked {
background-color: var(--main-text-color);
}
.slider.checked:before {
transform: translateX(26px);
}
</style>
<button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="btn btn-sm dropdown-toggle">
@ -19,6 +63,22 @@ const TPL = `
<span class="caret"></span>
</button>
<div class="dropdown-menu dropdown-menu-right">
<div class="dropdown-item protect-button">
Protect the note
<span title="Note is not protected, click to make it protected">
<label class="switch">
<span class="slider"></span>
</span>
</div>
<div class="dropdown-item unprotect-button">
Unprotect the note
<span title="Note is protected, click to make it unprotected">
<label class="switch">
<span class="slider checked"></span>
</span>
</div>
<a data-trigger-command="showNoteRevisions" class="dropdown-item show-note-revisions-button">Revisions</a>
<a data-trigger-command="showAttributes" class="dropdown-item show-attributes-button"><kbd data-command="showAttributes"></kbd> Attributes</a>
<a data-trigger-command="showLinkMap" class="dropdown-item show-link-map-button"><kbd data-command="showLinkMap"></kbd> Link map</a>
@ -48,6 +108,12 @@ export default class NoteActionsWidget extends TabAwareWidget {
this.$importNoteButton = this.$widget.find('.import-files-button');
this.$importNoteButton.on("click", () => import('../dialogs/import.js').then(d => d.showDialog(this.noteId)));
this.$protectButton = this.$widget.find(".protect-button");
this.$protectButton.on('click', () => protectedSessionService.protectNote(this.noteId, true, false));
this.$unprotectButton = this.$widget.find(".unprotect-button");
this.$unprotectButton.on('click', () => protectedSessionService.protectNote(this.noteId, false, false));
return this.$widget;
}
@ -64,5 +130,14 @@ export default class NoteActionsWidget extends TabAwareWidget {
else {
this.$exportNoteButton.attr('disabled', 'disabled');
}
this.$protectButton.toggle(!note.isProtected);
this.$unprotectButton.toggle(!!note.isProtected);
}
entitiesReloadedEvent({loadResults}) {
if (loadResults.isNoteReloaded(this.noteId)) {
this.refresh();
}
}
}

12
src/public/app/widgets/note_title.js
View file

@ -17,6 +17,10 @@ const TPL = `
min-width: 5em;
width: 100%;
}
.note-title-container input.note-title.protected {
text-shadow: 4px 4px 4px var(--muted-text-color);
}
</style>
<input autocomplete="off" value="" class="note-title" tabindex="1">
@ -52,6 +56,8 @@ export default class NoteTitleWidget extends TabAwareWidget {
this.$noteTitle.val(note.title);
this.$noteTitle.prop("readonly", note.isProtected && !protectedSessionHolder.isProtectedSessionAvailable());
console.trace("Refreshing - isProtected: ", !!note.isProtected);
this.$noteTitle.toggleClass("protected", !!note.isProtected);
}
async beforeNoteSwitchEvent({tabContext}) {
@ -80,6 +86,12 @@ export default class NoteTitleWidget extends TabAwareWidget {
}
}
entitiesReloadedEvent({loadResults}) {
if (loadResults.isNoteReloaded(this.noteId)) {
this.refresh();
}
}
beforeUnloadEvent() {
this.spacedUpdate.updateNowIfNecessary();
}

42
src/public/app/widgets/protected_note_switch.js
View file

@ -1,42 +0,0 @@
import protectedSessionService from "../services/protected_session.js";
import TabAwareWidget from "./tab_aware_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="Set this note as protected which means it will possible to view and edit this note only after entering password">
</button>
<button type="button"
class="btn btn-sm icon-button bx bx-shield-x unprotect-button"
title="Set this note as unprotected which will make it viewable and editable without entering password">
</button>
</div>`;``;
export default class ProtectedNoteSwitchWidget extends TabAwareWidget {
doRender() {
this.$widget = $(TPL);
this.$protectButton = this.$widget.find(".protect-button");
this.$protectButton.on('click', () => protectedSessionService.protectNote(this.noteId, true, false));
this.$unprotectButton = this.$widget.find(".unprotect-button");
this.$unprotectButton.on('click', () => protectedSessionService.protectNote(this.noteId, false, false));
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);
}
async entitiesReloadedEvent({loadResults}) {
if (loadResults.isNoteReloaded(this.noteId)) {
this.refresh();
}
}
}

3
src/public/app/widgets/title_bar_buttons.js
View file

@ -11,7 +11,8 @@ const TPL = `
}
.title-bar-buttons button {
border: none;
border: none !important;
background: none !important;
font-size: 150%;
padding-left: 10px;
padding-right: 10px;