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

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

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

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 = `
 <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();
+        }
     }
 }

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);
+    }
     </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();
     }

src/public/app/widgets/protected_note_switch.js

@@ -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();
-        }
-    }
-}

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;