added basic properties

2025-11-01 19:05:59 +01:00 · 2021-05-26 22:41:55 +02:00
parent f176191efb
commit c4987c4fd1
8 changed files with 189 additions and 99 deletions
--- a/src/public/app/layouts/desktop_layout.js
+++ b/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())
--- a/src/public/app/widgets/buttons/note_actions.js
+++ b/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());
    }

--- a/src/public/app/widgets/containers/collapsible_section_container.js
+++ b/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);
--- a/src/public/app/widgets/protected_note_switch.js
+++ b/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();
+        }
+    }
+}
--- a/src/public/app/widgets/type_property_widgets/basic_properties.js
+++ b/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());
+    }
+}
--- a/src/public/stylesheets/style.css
+++ b/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;
 }