convert css grid design to flex based one

src/public/javascripts/services/entrypoints.js

@@ -112,10 +112,21 @@ function registerEntrypoints() {
         keyboardActionService.setGlobalActionHandler("ForwardInNoteHistory", window.history.forward);
     }
 
+    let zenModeActive = false;
+
     // hide (toggle) everything except for the note content for zen mode
     const toggleZenMode = () => {
-        $(".hide-in-zen-mode").toggle();
+        if (!zenModeActive) {
-        $("#container").toggleClass("zen-mode");
+            $(".hide-in-zen-mode").addClass("hidden-by-zen-mode");
+            $("#container").addClass("zen-mode");
+            zenModeActive = true;
+        }
+        else {
+            // not hiding / showing explicitly since element might be hidden also for other reasons
+            $(".hide-in-zen-mode").removeClass("hidden-by-zen-mode");
+            $("#container").removeClass("zen-mode");
+            zenModeActive = false;
+        }
     };
 
     $("#toggle-zen-mode-button").on('click', toggleZenMode);

src/public/javascripts/services/tab_context.js

@@ -11,9 +11,45 @@ import protectedSessionService from "./protected_session.js";
 import optionsService from "./options.js";
 import linkService from "./link.js";
 import Sidebar from "./sidebar.js";
+import libraryLoader from "./library_loader.js";
+import noteAutocompleteService from "./note_autocomplete.js";
 
 const $tabContentsContainer = $("#note-tab-container");
 
+const mentionSetup = {
+    feeds: [
+        {
+            marker: '@',
+            feed: queryText => {
+                return new Promise((res, rej) => {
+                    noteAutocompleteService.autocompleteSource(queryText, rows => {
+                        if (rows.length === 1 && rows[0].title === 'No results') {
+                            rows = [];
+                        }
+
+                        for (const row of rows) {
+                            row.text = row.name = row.noteTitle;
+                            row.id = '@' + row.text;
+                            row.link = '#' + row.path;
+                        }
+
+                        res(rows);
+                    });
+                });
+            },
+            itemRenderer: item => {
+                const itemElement = document.createElement('span');
+
+                itemElement.classList.add('mentions-item');
+                itemElement.innerHTML = `${item.highlightedTitle} `;
+
+                return itemElement;
+            },
+            minimumCharacters: 0
+        }
+    ]
+};
+
 const componentClasses = {
     'empty': "./note_detail_empty.js",
     'text': "./note_detail_text.js",
@@ -67,6 +103,7 @@ class TabContext {
         this.$noteDetailComponents = this.$tabContent.find(".note-detail-component");
         this.$scriptArea = this.$tabContent.find(".note-detail-script-area");
         this.$savedIndicator = this.$tabContent.find(".saved-indicator");
+        this.$attributesEditor = this.$tabContent.find(".note-title-attributes");
         this.noteChangeDisabled = false;
         this.isNoteChanged = false;
         this.attributes = new Attributes(this);
@@ -113,6 +150,16 @@ class TabContext {
         this.$unprotectButton.on('click', protectedSessionService.unprotectNoteAndSendToServer);
 
         await this.initComponent();
+
+        await libraryLoader.requireLibrary(libraryLoader.CKEDITOR);
+
+        await BalloonEditor.create(this.$attributesEditor[0], {
+            placeholder: "type attributes here, e.g. @rock @year=2019",
+            mention: mentionSetup,
+            removePlugins: ['Autoformat'],
+            blockToolbar: [],
+            toolbar: []
+        });
     }
 
     async initComponent(disableAutoBook = false) {

src/public/stylesheets/desktop.css

@@ -6,29 +6,19 @@ body {
     margin: 0 auto; /* center */
     height: 100vh;
 
-    display: grid;
+    display: flex;
-    grid-template-areas: "header header"
+    flex-direction: column;
-    "left-pane tabs"
-    "left-pane tab-container";
-    grid-template-rows: auto
-    auto
-    1fr;
-
-    justify-content: center;
-    grid-gap: 0;
 }
 
-#container.zen-mode {
+.hidden-by-zen-mode {
-    grid-template-areas:
+    display: none !important;
-    "tab-container" !important;
+}
-    grid-template-rows: auto
+
-    auto
+#center-pane {
-    !important;
+    display: flex;
-    grid-template-columns: 1fr !important;
 }
 
 #note-tab-container {
-    grid-area: tab-container;
     min-height: 0;
     padding-left: 10px;
 }
@@ -49,13 +39,11 @@ body {
 }
 
 #left-pane {
-    grid-area: left-pane;
     display: flex;
     flex-direction: column;
 }
 
 #header {
-    grid-area: header;
     background-color: var(--header-background-color);
     display: flex;
     align-items: center;
@@ -210,7 +198,6 @@ body {
     background: var(--main-background-color);
     border-radius: 5px 5px 0 0;
     overflow: hidden;
-    grid-area: tabs;
     margin-top: 5px;
 }
 .note-tab-row * {

src/views/desktop.ejs

@@ -125,52 +125,56 @@
         </div>
     </div>
 
-    <div id="left-pane" class="hide-in-zen-mode">
+    <div style="display: flex; height: 100%;">
-        <div id="global-buttons">
+        <div id="left-pane" class="hide-in-zen-mode">
-            <a id="create-top-level-note-button" title="Create new top level note" class="icon-action bx bx-folder-plus"></a>
+            <div id="global-buttons">
+                <a id="create-top-level-note-button" title="Create new top level note" class="icon-action bx bx-folder-plus"></a>
 
-            <a id="collapse-tree-button" title="Collapse note tree" data-kb-action="CollapseTree" class="icon-action bx bx-layer-minus"></a>
+                <a id="collapse-tree-button" title="Collapse note tree" data-kb-action="CollapseTree" class="icon-action bx bx-layer-minus"></a>
 
-            <a id="scroll-to-active-note-button" title="Scroll to active note" data-kb-action="ScrollToActiveNote" class="icon-action bx bx-crosshair"></a>
+                <a id="scroll-to-active-note-button" title="Scroll to active note" data-kb-action="ScrollToActiveNote" class="icon-action bx bx-crosshair"></a>
 
-            <a id="toggle-search-button" title="Search in notes" data-kb-action="SearchNotes" class="icon-action bx bx-search"></a>
+                <a id="toggle-search-button" title="Search in notes" data-kb-action="SearchNotes" class="icon-action bx bx-search"></a>
-        </div>
+            </div>
 
-        <div id="search-box">
+            <div id="search-box">
-            <div class="form-group">
+                <div class="form-group">
-                <div class="input-group">
+                    <div class="input-group">
-                    <input name="search-text" id="search-text" class="form-control"
+                        <input name="search-text" id="search-text" class="form-control"
-                           placeholder="Search text, labels" autocomplete="off">
+                               placeholder="Search text, labels" autocomplete="off">
 
-                    <div class="input-group-append">
+                        <div class="input-group-append">
-                        <button id="do-search-button" class="btn btn-sm icon-button bx bx-search" title="Search (enter)"></button>
+                            <button id="do-search-button" class="btn btn-sm icon-button bx bx-search" title="Search (enter)"></button>
+                        </div>
                     </div>
                 </div>
+
+
+                <div style="display: flex; align-items: center; justify-content: space-evenly; flex-wrap: wrap;">
+                    <button id="save-search-button" class="btn btn-sm"
+                        title="This will create new saved search note under active note.">
+                        <span class="bx bx-save"></span> Save search</button>
+
+                    <button id="close-search-button" class="btn btn-sm"><span class="bx bx-x"></span> Close search</button>
+                </div>
             </div>
 
+            <div id="search-results">
+                <strong>Search results:</strong>
 
-            <div style="display: flex; align-items: center; justify-content: space-evenly; flex-wrap: wrap;">
+                <ul id="search-results-inner"></ul>
-                <button id="save-search-button" class="btn btn-sm"
-                    title="This will create new saved search note under active note.">
-                    <span class="bx bx-save"></span> Save search</button>
-
-                <button id="close-search-button" class="btn btn-sm"><span class="bx bx-x"></span> Close search</button>
             </div>
+
+            <div id="tree"></div>
+
+            <div class="dropdown-menu dropdown-menu-sm" id="context-menu-container"></div>
         </div>
 
-        <div id="search-results">
+        <div id="center-pane">
-            <strong>Search results:</strong>
+            <% include tabs.ejs %>
-
-            <ul id="search-results-inner"></ul>
         </div>
-
-        <div id="tree"></div>
-
-        <div class="dropdown-menu dropdown-menu-sm" id="context-menu-container"></div>
     </div>
 
-    <% include tabs.ejs %>
-
     <% include dialogs/about.ejs %>
     <% include dialogs/add_link.ejs %>
     <% include dialogs/attributes.ejs %>

src/views/tabs.ejs

@@ -1,4 +1,4 @@
-<div class="note-tab-row hide-in-hide-in-zen-mode">
+<div class="note-tab-row hide-in-zen-mode">
     <div class="note-tab-row-content"></div>
 </div>
 

src/views/title.ejs

@@ -70,4 +70,6 @@
             </div>
         </div>
     </div>
+
+    <div class="note-title-attributes" tabindex="9999"></div>
 </div>