added basic properties

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "trilium",
-  "version": "0.47.2",
+  "version": "0.47.3",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -2625,9 +2625,9 @@
       }
     },
     "dayjs": {
-      "version": "1.10.4",
+      "version": "1.10.5",
-      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.10.4.tgz",
+      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.10.5.tgz",
-      "integrity": "sha512-RI/Hh4kqRc1UKLOAf/T5zdMMX5DQIlDxwUe3wSyMMnEbGunnpENCdbUgM+dW7kXidZqCttBrmw7BhN4TMddkCw=="
+      "integrity": "sha512-BUFis41ikLz+65iH6LHQCDm4YPMj5r1YFLdupPIyM4SGcXMmtiLQ7U37i+hGS8urIuqe7I/ou3IS1jVc4nbN4g=="
     },
     "debug": {
       "version": "4.1.1",
@@ -2958,9 +2958,9 @@
       }
     },
     "electron": {
-      "version": "13.0.0-beta.28",
+      "version": "13.0.1",
-      "resolved": "https://registry.npmjs.org/electron/-/electron-13.0.0-beta.28.tgz",
+      "resolved": "https://registry.npmjs.org/electron/-/electron-13.0.1.tgz",
-      "integrity": "sha512-fWNlnyRU4XtMpzsHTm20nnwMHSI580+LBOWj/75HDC012oU019O83QtzLuNsFSw0yoHFOQ8jg/dc4r6z/Xo/sA==",
+      "integrity": "sha512-ds1cf0m46nStil0jbM2r9W/p+Kprdq22+2MikIUqEu69eGl1c86IinQVrpmJ9bR4RshDSF4j3uD32a0bsHDMnQ==",
       "dev": true,
       "requires": {
         "@electron/get": "^1.0.1",
@@ -2969,9 +2969,9 @@
       },
       "dependencies": {
         "@types/node": {
-          "version": "14.17.0",
+          "version": "14.17.1",
-          "resolved": "https://registry.npmjs.org/@types/node/-/node-14.17.0.tgz",
+          "resolved": "https://registry.npmjs.org/@types/node/-/node-14.17.1.tgz",
-          "integrity": "sha512-w8VZUN/f7SSbvVReb9SWp6cJFevxb4/nkG65yLAya//98WgocKm5PLDAtSs5CtJJJM+kHmJjO/6mmYW4MHShZA==",
+          "integrity": "sha512-/tpUyFD7meeooTRwl3sYlihx2BrJE7q9XF71EguPFIySj9B7qgnRtHsHTho+0AUm4m1SvWGm6uSncrR94q6Vtw==",
           "dev": true
         }
       }
@@ -5965,9 +5965,9 @@
       "dev": true
     },
     "node-abi": {
-      "version": "2.26.0",
+      "version": "2.30.0",
-      "resolved": "https://registry.npmjs.org/node-abi/-/node-abi-2.26.0.tgz",
+      "resolved": "https://registry.npmjs.org/node-abi/-/node-abi-2.30.0.tgz",
-      "integrity": "sha512-ag/Vos/mXXpWLLAYWsAoQdgS+gW7IwvgMLOgqopm/DbzAjazLltzgzpVMsFlgmo9TzG5hGXeaBZx2AI731RIsQ==",
+      "integrity": "sha512-g6bZh3YCKQRdwuO/tSZZYJAw622SjsRfJ2X0Iy4sSOHZ34/sPPdVBn8fev2tj7njzLwuqPw9uMtGsGkO5kIQvg==",
       "requires": {
         "semver": "^5.4.1"
       },
@@ -6262,9 +6262,9 @@
       }
     },
     "open": {
-      "version": "8.1.0",
+      "version": "8.2.0",
-      "resolved": "https://registry.npmjs.org/open/-/open-8.1.0.tgz",
+      "resolved": "https://registry.npmjs.org/open/-/open-8.2.0.tgz",
-      "integrity": "sha512-jB5hAtsDOhCy/FNQJwQJOrGlxLUat482Yr14rbA5l2Zb1eOeoS+ccQPO036C1+z9VDBTmOZqzh1tBbI4myzIYw==",
+      "integrity": "sha512-O8uInONB4asyY3qUcEytpgwxQG3O0fJ/hlssoUHsBboOIRVZzT6Wq+Rwj5nffbeUhOdMjpXeISpDDzHCMRDuOQ==",
       "requires": {
         "define-lazy-prop": "^2.0.0",
         "is-docker": "^2.1.1",
@@ -8539,9 +8539,9 @@
       }
     },
     "ws": {
-      "version": "7.4.5",
+      "version": "7.4.6",
-      "resolved": "https://registry.npmjs.org/ws/-/ws-7.4.5.tgz",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-7.4.6.tgz",
-      "integrity": "sha512-xzyu3hFvomRfXKH8vOFMU3OguG6oOvhXMo3xsGy3xWExqaM2dxBbVxuD99O7m3ZUFMvvscsZDqxfgMaRr/Nr1g=="
+      "integrity": "sha512-YmhHDO4MzaDLB+M9ym/mDA5z0naX8j7SIlT8f8z+I0VtzsRbekxEutHSme7NPS2qE8StCYQNUnfWdXta/Yu85A=="
     },
     "xdg-basedir": {
       "version": "4.0.0",

package.json

@@ -34,7 +34,7 @@
     "commonmark": "0.29.3",
     "cookie-parser": "1.4.5",
     "csurf": "1.11.0",
-    "dayjs": "1.10.4",
+    "dayjs": "1.10.5",
     "ejs": "3.1.6",
     "electron-debug": "3.2.0",
     "electron-dl": "3.2.1",
@@ -58,8 +58,8 @@
     "jsdom": "16.6.0",
     "mime-types": "2.1.30",
     "multer": "1.4.2",
-    "node-abi": "2.26.0",
+    "node-abi": "2.30.0",
-    "open": "8.1.0",
+    "open": "8.2.0",
     "portscanner": "2.2.0",
     "rand-token": "1.0.1",
     "request": "^2.88.2",
@@ -75,7 +75,7 @@
     "tmp": "^0.2.1",
     "turndown": "7.0.0",
     "unescape": "1.0.1",
-    "ws": "7.4.5",
+    "ws": "7.4.6",
     "yauzl": "2.10.0"
   },
   "devDependencies": {

src/public/app/layouts/desktop_layout.js

@@ -32,6 +32,7 @@ import PaneContainer from "../widgets/containers/pane_container.js";
 import SidebarToggleWidget from "../widgets/buttons/sidebar_toggle.js";
 import CreatePaneButton from "../widgets/buttons/create_pane_button.js";
 import ClosePaneButton from "../widgets/buttons/close_pane_button.js";
+import BasicPropertiesWidget from "../widgets/type_property_widgets/basic_properties.js";
 
 export default class DesktopLayout {
     constructor(customWidgets) {
@@ -99,6 +100,7 @@ export default class DesktopLayout {
                         .child(
                             new CollapsibleSectionContainer()
                                 .section(new SearchDefinitionWidget())
+                                .section(new BasicPropertiesWidget())
                                 .section(new NotePropertiesWidget())
                                 .section(new FilePropertiesWidget())
                                 .section(new ImagePropertiesWidget())

src/public/app/widgets/buttons/note_actions.js

@@ -1,5 +1,4 @@
 import NoteContextAwareWidget from "../note_context_aware_widget.js";
-import protectedSessionService from "../../services/protected_session.js";
 import utils from "../../services/utils.js";
 
 const TPL = `
@@ -14,7 +13,7 @@ const TPL = `
     }
     
     .note-actions .dropdown-menu {
-        width: 20em;
+        width: 15em;
     }
     
     .note-actions .dropdown-item[disabled], .note-actions .dropdown-item[disabled]:hover {
@@ -22,72 +21,13 @@ 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="note-actions-button btn btn-sm dropdown-toggle bx bx-cog"></button>
+        aria-expanded="false" class="note-actions-button btn btn-sm dropdown-toggle bx bx-dots-vertical-rounded"></button>
 
     <div class="dropdown-menu dropdown-menu-right">
         <a data-trigger-command="renderActiveNote" class="dropdown-item render-note-button"><kbd data-command="renderActiveNote"></kbd> Re-render note</a>
-        <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="findInText" class="dropdown-item">Search in note <kbd data-command="findInText"></a>
         <a data-trigger-command="showNoteRevisions" class="dropdown-item show-note-revisions-button">Revisions</a>
         <a data-trigger-command="showLinkMap" class="dropdown-item show-link-map-button"><kbd data-command="showLinkMap"></kbd> Link map</a>
@@ -120,12 +60,6 @@ export default class NoteActionsWidget extends NoteContextAwareWidget {
         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));
-
         this.$widget.on('click', '.dropdown-item',
             () => this.$widget.find('.dropdown-toggle').dropdown('toggle'));
 
@@ -137,9 +71,6 @@ export default class NoteActionsWidget extends NoteContextAwareWidget {
 
         this.$renderNoteButton.toggle(note.type === 'render');
 
-        this.$protectButton.toggle(!note.isProtected);
-        this.$unprotectButton.toggle(!!note.isProtected);
-
         this.$openNoteExternallyButton.toggle(utils.isElectron());
     }
 

src/public/app/widgets/containers/collapsible_section_container.js

@@ -59,11 +59,6 @@ const TPL = `
         margin-right: 10px;
     }
     
-    .section-button-container .bx {
-        position: relative;
-        top: 3px;
-    }
-    
     .section-body {
         display: none;
         border-bottom: 1px solid var(--main-border-color);

src/public/app/widgets/protected_note_switch.js

@@ -0,0 +1,95 @@
+import NoteContextAwareWidget from "./note_context_aware_widget.js";
+import protectedSessionService from "../services/protected_session.js";
+
+const TPL = `
+<div class="protected-note-switch">
+    <style>    
+    /* 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>
+
+    <div class="protect-button">
+        Protect the note
+    
+        &nbsp;
+    
+        <span title="Note is not protected, click to make it protected">
+            <label class="switch">
+            <span class="slider"></span>
+        </span>
+    </div>
+    <div class="unprotect-button">
+        Unprotect the note
+        
+        &nbsp;
+    
+        <span title="Note is protected, click to make it unprotected">
+            <label class="switch">
+            <span class="slider checked"></span>
+        </span>
+    </div>
+</div>`;
+
+export default class ProtectedNoteSwitchWidget extends NoteContextAwareWidget {
+    doRender() {
+        this.$widget = $(TPL);
+        this.overflowing();
+
+        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));
+    }
+
+    refreshWithNote(note) {
+        this.$protectButton.toggle(!note.isProtected);
+        this.$unprotectButton.toggle(!!note.isProtected);
+    }
+
+    entitiesReloadedEvent({loadResults}) {
+        if (loadResults.isNoteReloaded(this.noteId)) {
+            this.refresh();
+        }
+    }
+}

src/public/app/widgets/type_property_widgets/basic_properties.js

@@ -0,0 +1,63 @@
+import NoteContextAwareWidget from "../note_context_aware_widget.js";
+import NoteTypeWidget from "../note_type.js";
+import ProtectedNoteSwitchWidget from "../protected_note_switch.js";
+
+const TPL = `
+<div class="basic-properties-widget">
+    <style>
+        .basic-properties-widget {
+            padding: 12px;
+            display: flex;
+            align-items: baseline;
+        }
+        
+        .note-type-container {
+            display: flex;
+            align-items: center;
+        }
+        
+        .basic-properties-widget > * {
+            margin-right: 30px;
+        }
+    </style>
+    
+    <div class="note-type-container" style="display: flex">
+        <span>Note type:</span> &nbsp;
+    </div>
+    
+    <div class="protected-note-switch-container"></div>
+</div>`;
+
+export default class BasicPropertiesWidget extends NoteContextAwareWidget {
+    constructor() {
+        super();
+
+        this.noteTypeWidget = new NoteTypeWidget();
+        this.protectedNoteSwitchWidget = new ProtectedNoteSwitchWidget();
+
+        this.child(this.noteTypeWidget, this.protectedNoteSwitchWidget);
+    }
+
+    static getType() { return "basic-properties"; }
+
+    isEnabled() {
+        return this.note;
+    }
+
+    getTitle() {
+        return {
+            show: this.isEnabled(),
+            activate: true,
+            title: 'Basic Properties',
+            icon: 'bx bx-slider'
+        };
+    }
+
+    doRender() {
+        this.$widget = $(TPL);
+        this.overflowing();
+
+        this.$widget.find(".note-type-container").append(this.noteTypeWidget.render());
+        this.$widget.find(".protected-note-switch-container").append(this.protectedNoteSwitchWidget.render());
+    }
+}

src/public/stylesheets/style.css

@@ -20,6 +20,10 @@ body {
     width: 100%;
 }
 
+code, kbd, pre, samp {
+    font-family: var(--font-family-monospace);
+}
+
 button.btn, button.btn-sm {
     font-size: inherit;
 }