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,6 +125,7 @@
         </div>
     </div>
 
+    <div style="display: flex; height: 100%;">
         <div id="left-pane" class="hide-in-zen-mode">
             <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>
@@ -169,7 +170,10 @@
             <div class="dropdown-menu dropdown-menu-sm" id="context-menu-container"></div>
         </div>
 
+        <div id="center-pane">
             <% include tabs.ejs %>
+        </div>
+    </div>
 
     <% include dialogs/about.ejs %>
     <% include dialogs/add_link.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>