From 4c308ad68f03449c05fed3b02aa0e2fb04d17d86 Mon Sep 17 00:00:00 2001 From: zadam Date: Wed, 29 Apr 2020 00:01:07 +0200 Subject: [PATCH] moved protected note switch to "note actions", added shadow to protected note title --- .../layouts/desktop_extra_window_layout.js | 2 - .../app/layouts/desktop_main_window_layout.js | 2 - src/public/app/widgets/note_actions.js | 75 +++++++++++++++++++ src/public/app/widgets/note_title.js | 12 +++ .../app/widgets/protected_note_switch.js | 42 ----------- src/public/app/widgets/title_bar_buttons.js | 3 +- 6 files changed, 89 insertions(+), 47 deletions(-) delete mode 100644 src/public/app/widgets/protected_note_switch.js diff --git a/src/public/app/layouts/desktop_extra_window_layout.js b/src/public/app/layouts/desktop_extra_window_layout.js index dc4466502..929a8fcb1 100644 --- a/src/public/app/layouts/desktop_extra_window_layout.js +++ b/src/public/app/layouts/desktop_extra_window_layout.js @@ -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()) ) diff --git a/src/public/app/layouts/desktop_main_window_layout.js b/src/public/app/layouts/desktop_main_window_layout.js index 11755dae0..9330c2792 100644 --- a/src/public/app/layouts/desktop_main_window_layout.js +++ b/src/public/app/layouts/desktop_main_window_layout.js @@ -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()) ) diff --git a/src/public/app/widgets/note_actions.js b/src/public/app/widgets/note_actions.js index 37216a720..0bf2a9cdb 100644 --- a/src/public/app/widgets/note_actions.js +++ b/src/public/app/widgets/note_actions.js @@ -1,4 +1,5 @@ import TabAwareWidget from "./tab_aware_widget.js"; +import protectedSessionService from "../services/protected_session.js"; const TPL = `
@@ -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); + }
+
+ Protect the note + + + +
+
+ Unprotect the note + + + +
Revisions Attributes Link map @@ -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(); + } } } \ No newline at end of file diff --git a/src/public/app/widgets/note_title.js b/src/public/app/widgets/note_title.js index 93eb840c3..ee5059fd5 100644 --- a/src/public/app/widgets/note_title.js +++ b/src/public/app/widgets/note_title.js @@ -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); + } @@ -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(); } diff --git a/src/public/app/widgets/protected_note_switch.js b/src/public/app/widgets/protected_note_switch.js deleted file mode 100644 index 1a8c031f7..000000000 --- a/src/public/app/widgets/protected_note_switch.js +++ /dev/null @@ -1,42 +0,0 @@ -import protectedSessionService from "../services/protected_session.js"; -import TabAwareWidget from "./tab_aware_widget.js"; - -const TPL = ` -
- - - -
`;``; - -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(); - } - } -} \ No newline at end of file diff --git a/src/public/app/widgets/title_bar_buttons.js b/src/public/app/widgets/title_bar_buttons.js index fdfbe72db..7c3084353 100644 --- a/src/public/app/widgets/title_bar_buttons.js +++ b/src/public/app/widgets/title_bar_buttons.js @@ -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;