From bc2d1f1ef9e0cb3bceb86e3d91cc3122e8a607fd Mon Sep 17 00:00:00 2001
From: zadam <zadam.apps@gmail.com>
Date: Wed, 1 May 2019 09:52:45 +0200
Subject: [PATCH] changes in grid for tabs

---
 src/public/stylesheets/desktop.css |  11 ++-
 src/public/stylesheets/style.css   |  19 +----
 src/views/desktop.ejs              | 117 +----------------------------
 src/views/details/detail.ejs       |  33 --------
 src/views/tabs.ejs                 |  68 +++++++++++++++++
 src/views/title.ejs                |  81 ++++++++++++++++++++
 6 files changed, 160 insertions(+), 169 deletions(-)
 delete mode 100644 src/views/details/detail.ejs
 create mode 100644 src/views/tabs.ejs
 create mode 100644 src/views/title.ejs

diff --git a/src/public/stylesheets/desktop.css b/src/public/stylesheets/desktop.css
index 67e49913a..d1c74b540 100644
--- a/src/public/stylesheets/desktop.css
+++ b/src/public/stylesheets/desktop.css
@@ -9,11 +9,9 @@ body {
     display: grid;
     grid-template-areas: "header header"
     "left-pane tabs"
-    "left-pane title"
-    "left-pane note-detail";
+    "left-pane tab-container";
     grid-template-rows: auto
     auto
-    auto
     1fr;
 
     justify-content: center;
@@ -30,6 +28,12 @@ body {
     grid-template-columns: 1fr !important;
 }
 
+#tabs-container {
+    grid-area: tab-container;
+    min-height: 0;
+    min-height: 0;
+}
+
 #search-box {
     display: none;
     padding: 10px;
@@ -131,6 +135,7 @@ li.dropdown-submenu:hover > ul.dropdown-menu {
 }
 
 #note-detail-wrapper {
+    font-family: var(--detail-font-family);
     font-size: var(--detail-font-size);
 }
 
diff --git a/src/public/stylesheets/style.css b/src/public/stylesheets/style.css
index c86e092e4..08d929e51 100644
--- a/src/public/stylesheets/style.css
+++ b/src/public/stylesheets/style.css
@@ -48,14 +48,6 @@ button.close {
     color: var(--main-text-color) !important;
 }
 
-#title-container {
-    grid-area: title;
-}
-
-#tabs-container {
-    grid-area: tabs;
-}
-
 #note-title {
     margin-left: 15px;
     margin-right: 10px;
@@ -112,14 +104,9 @@ ul.fancytree-container {
 }
 
 #note-detail-wrapper {
-    position: relative;
-    overflow: hidden;
-    grid-area: note-detail;
-    padding-left: 10px;
-    padding-top: 10px;
     display: flex;
     flex-direction: column;
-    font-family: var(--detail-font-family);
+    height: 100%;
 }
 
 #note-detail-component-wrapper {
@@ -150,6 +137,7 @@ ul.fancytree-container {
     box-shadow: none !important;
     /* This is because with empty content height of editor is 0 and it's impossible to click into it */
     min-height: 200px;
+    padding-top: 10px;
     overflow: auto;
     font-family: var(--detail-text-font-family);
 }
@@ -723,9 +711,6 @@ div[data-notify="container"] {
 }
 
 #saved-indicator {
-    position: absolute;
-    right: 10px;
-    top: -7px;
     font-size: 150%;
     color: var(--main-text-color);
     z-index: 100;
diff --git a/src/views/desktop.ejs b/src/views/desktop.ejs
index a111cea56..2fce2eadf 100644
--- a/src/views/desktop.ejs
+++ b/src/views/desktop.ejs
@@ -150,122 +150,7 @@
         <div class="dropdown-menu dropdown-menu-sm" id="context-menu-container"></div>
     </div>
 
-    <div id="tabs-container">
-        <div class="chrome-tabs">
-            <div class="chrome-tabs-content">
-                <div class="chrome-tab">
-                    <div class="chrome-tab-content">
-                        <div class="chrome-tab-title">Google</div>
-                        <div class="chrome-tab-drag-handle"></div>
-                        <div class="chrome-tab-close"></div>
-                    </div>
-                </div>
-                <div class="chrome-tab" active>
-                    <div class="chrome-tab-content">
-                        <div class="chrome-tab-title">Facebook</div>
-                        <div class="chrome-tab-drag-handle"></div>
-                        <div class="chrome-tab-close"></div>
-                    </div>
-                </div>
-            </div>
-            <!-- Styles to prevent flash after JS initialization -->
-            <style>
-                .chrome-tabs .chrome-tab {
-                    width: 258px
-                }
-
-                .chrome-tabs .chrome-tab:nth-child(1) {
-                    transform: translate3d(0px, 0, 0)
-                }
-
-                .chrome-tabs .chrome-tab:nth-child(2) {
-                    transform: translate3d(239px, 0, 0)
-                }
-            </style>
-        </div>
-    </div>
-
-    <div id="title-container">
-        <div style="display: flex; align-items: center;">
-            <div class="dropdown hide-toggle">
-                <button id="note-path-list-button" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="btn btn-sm dropdown-toggle">
-                    <span id="note-path-count">1 path</span>
-
-                    <span class="caret"></span>
-                </button>
-                <ul id="note-path-list" class="dropdown-menu" aria-labelledby="note-path-list-button">
-                </ul>
-            </div>
-
-            <input autocomplete="off" value="" id="note-title" tabindex="1">
-
-            <div class="hide-toggle" style="display: flex; align-items: center;">
-                <button class="btn btn-sm icon-button jam jam-play"
-                        style="display: none; margin-right: 10px;"
-                        title="Render"
-                        id="render-button"></button>
-
-                <button class="btn btn-sm icon-button jam jam-play"
-                        style="display: none; margin-right: 10px;"
-                        title="Execute (Ctrl+Enter)"
-                        id="execute-script-button"></button>
-
-                <div class="btn-group btn-group-xs">
-                    <button type="button"
-                            class="btn btn-sm icon-button jam jam-shield-check"
-                            id="protect-button"
-                            title="Protected note can be viewed and edited only after entering password">
-                    </button>
-
-                    <button type="button"
-                            class="btn btn-sm icon-button jam jam-shield-close"
-                            id="unprotect-button"
-                            title="Not protected note can be viewed without entering password">
-                    </button>
-                </div>
-
-                &nbsp; &nbsp;
-
-                <div id="note-type-wrapper" style="display: flex;">
-                    <div class="dropdown" id="note-type">
-                        <button data-bind="disable: isDisabled()" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="btn btn-sm dropdown-toggle">
-                            Type: <span data-bind="text: typeString()"></span>
-                            <span class="caret"></span>
-                        </button>
-                        <div id="note-type-dropdown" class="dropdown-menu dropdown-menu-right">
-                            <a class="dropdown-item" data-bind="click: selectText, css: { selected: type() == 'text' }"><span class="check">&check;</span> <strong>Text</strong></a>
-                            <div class="dropdown-divider"></div>
-                            <a class="dropdown-item" data-bind="click: selectRelationMap, css: { selected: type() == 'relation-map' && mime() == '' }"><span class="check">&check;</span> <strong>Relation Map</strong></a>
-                            <div class="dropdown-divider"></div>
-                            <a class="dropdown-item" data-bind="click: selectRender, css: { selected: type() == 'render' && mime() == '' }"><span class="check">&check;</span> <strong>Render HTML note</strong></a>
-                            <div class="dropdown-divider"></div>
-                            <a class="dropdown-item" data-bind="click: selectCode, css: { selected: type() == 'code' && mime() == '' }"><span class="check">&check;</span> <strong>Code</strong></a>
-                            <!-- ko foreach: codeMimeTypes -->
-                            <a class="dropdown-item" data-bind="click: $parent.selectCodeMime, css: { selected: $parent.type() == 'code' && $parent.mime() == mime }"><span class="check">&check;</span> <span data-bind="text: title"></span></a>
-                            <!-- /ko -->
-                        </div>
-                    </div>
-
-                    <div class="dropdown" id="note-actions">
-                        <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="btn btn-sm dropdown-toggle">
-                            Note actions
-                            <span class="caret"></span>
-                        </button>
-                        <div class="dropdown-menu dropdown-menu-right">
-                            <a class="dropdown-item" id="show-note-revisions-button" data-bind="css: { disabled: type() == 'file' || type() == 'image' }">Revisions</a>
-                            <a class="dropdown-item show-attributes-button"><kbd>Alt+A</kbd> Attributes</a>
-                            <a class="dropdown-item" id="show-source-button" data-bind="css: { disabled: type() != 'text' && type() != 'code' && type() != 'relation-map' && type() != 'search' }">Note source</a>
-                            <a class="dropdown-item" id="import-files-button">Import files</a>
-                            <a class="dropdown-item" id="export-note-button" data-bind="css: { disabled: type() != 'text' }">Export note</a>
-                            <a class="dropdown-item" id="show-note-info-button">Note info</a>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-
-    <% include details/detail.ejs %>
+    <% include tabs.ejs %>
 
     <% include dialogs/about.ejs %>
     <% include dialogs/add_link.ejs %>
diff --git a/src/views/details/detail.ejs b/src/views/details/detail.ejs
deleted file mode 100644
index f6157d97f..000000000
--- a/src/views/details/detail.ejs
+++ /dev/null
@@ -1,33 +0,0 @@
-<div id="note-detail-wrapper">
-    <span id="saved-indicator" title="All changes have been saved" class="jam jam-check"></span>
-
-    <div id="note-detail-script-area"></div>
-
-    <table id="note-detail-promoted-attributes"></table>
-
-    <div id="note-detail-component-wrapper">
-        <div id="note-detail-text" class="note-detail-component" tabindex="10000"></div>
-
-        <div id="note-detail-code" class="note-detail-component"></div>
-
-        <% include search.ejs %>
-
-        <% include render.ejs %>
-
-        <% include file.ejs %>
-
-        <% include image.ejs %>
-
-        <% include relation_map.ejs %>
-
-        <% include protected_session_password.ejs %>
-
-        <div id="children-overview"></div>
-    </div>
-
-    <div id="attribute-list">
-        <button class="btn btn-sm show-attributes-button">Attributes:</button>
-
-        <span id="attribute-list-inner"></span>
-    </div>
-</div>
\ No newline at end of file
diff --git a/src/views/tabs.ejs b/src/views/tabs.ejs
new file mode 100644
index 000000000..763fd0a49
--- /dev/null
+++ b/src/views/tabs.ejs
@@ -0,0 +1,68 @@
+<div class="chrome-tabs">
+    <div class="chrome-tabs-content">
+        <div class="chrome-tab">
+            <div class="chrome-tab-content">
+                <div class="chrome-tab-title">Google</div>
+                <div class="chrome-tab-drag-handle"></div>
+                <div class="chrome-tab-close"></div>
+            </div>
+        </div>
+        <div class="chrome-tab" active>
+            <div class="chrome-tab-content">
+                <div class="chrome-tab-title">Facebook</div>
+                <div class="chrome-tab-drag-handle"></div>
+                <div class="chrome-tab-close"></div>
+            </div>
+        </div>
+    </div>
+    <!-- Styles to prevent flash after JS initialization -->
+    <style>
+        .chrome-tabs .chrome-tab {
+            width: 258px
+        }
+
+        .chrome-tabs .chrome-tab:nth-child(1) {
+            transform: translate3d(0px, 0, 0)
+        }
+
+        .chrome-tabs .chrome-tab:nth-child(2) {
+            transform: translate3d(239px, 0, 0)
+        }
+    </style>
+</div>
+
+<div id="tabs-container">
+    <div id="note-detail-wrapper">
+        <% include title.ejs %>
+
+        <div id="note-detail-script-area"></div>
+
+        <table id="note-detail-promoted-attributes"></table>
+
+        <div id="note-detail-component-wrapper">
+            <div id="note-detail-text" class="note-detail-component" tabindex="10000"></div>
+
+            <div id="note-detail-code" class="note-detail-component"></div>
+
+            <% include details/search.ejs %>
+
+            <% include details/render.ejs %>
+
+            <% include details/file.ejs %>
+
+            <% include details/image.ejs %>
+
+            <% include details/relation_map.ejs %>
+
+            <% include details/protected_session_password.ejs %>
+
+            <div id="children-overview"></div>
+        </div>
+
+        <div id="attribute-list">
+            <button class="btn btn-sm show-attributes-button">Attributes:</button>
+
+            <span id="attribute-list-inner"></span>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/src/views/title.ejs b/src/views/title.ejs
new file mode 100644
index 000000000..ae594a408
--- /dev/null
+++ b/src/views/title.ejs
@@ -0,0 +1,81 @@
+<div id="title-container" style="flex-grow: 0; flex-shrink: 0;">
+    <div style="display: flex; align-items: center;">
+        <div class="dropdown hide-toggle">
+            <button id="note-path-list-button" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="btn btn-sm dropdown-toggle">
+                <span id="note-path-count">1 path</span>
+
+                <span class="caret"></span>
+            </button>
+            <ul id="note-path-list" class="dropdown-menu" aria-labelledby="note-path-list-button">
+            </ul>
+        </div>
+
+        <input autocomplete="off" value="" id="note-title" tabindex="1">
+
+        <span id="saved-indicator" title="All changes have been saved" class="jam jam-check"></span>
+
+        <div class="hide-toggle" style="display: flex; align-items: center;">
+            <button class="btn btn-sm icon-button jam jam-play"
+                    style="display: none; margin-right: 10px;"
+                    title="Render"
+                    id="render-button"></button>
+
+            <button class="btn btn-sm icon-button jam jam-play"
+                    style="display: none; margin-right: 10px;"
+                    title="Execute (Ctrl+Enter)"
+                    id="execute-script-button"></button>
+
+            <div class="btn-group btn-group-xs">
+                <button type="button"
+                        class="btn btn-sm icon-button jam jam-shield-check"
+                        id="protect-button"
+                        title="Protected note can be viewed and edited only after entering password">
+                </button>
+
+                <button type="button"
+                        class="btn btn-sm icon-button jam jam-shield-close"
+                        id="unprotect-button"
+                        title="Not protected note can be viewed without entering password">
+                </button>
+            </div>
+
+            &nbsp; &nbsp;
+
+            <div id="note-type-wrapper" style="display: flex;">
+                <div class="dropdown" id="note-type">
+                    <button data-bind="disable: isDisabled()" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="btn btn-sm dropdown-toggle">
+                        Type: <span data-bind="text: typeString()"></span>
+                        <span class="caret"></span>
+                    </button>
+                    <div id="note-type-dropdown" class="dropdown-menu dropdown-menu-right">
+                        <a class="dropdown-item" data-bind="click: selectText, css: { selected: type() == 'text' }"><span class="check">&check;</span> <strong>Text</strong></a>
+                        <div class="dropdown-divider"></div>
+                        <a class="dropdown-item" data-bind="click: selectRelationMap, css: { selected: type() == 'relation-map' && mime() == '' }"><span class="check">&check;</span> <strong>Relation Map</strong></a>
+                        <div class="dropdown-divider"></div>
+                        <a class="dropdown-item" data-bind="click: selectRender, css: { selected: type() == 'render' && mime() == '' }"><span class="check">&check;</span> <strong>Render HTML note</strong></a>
+                        <div class="dropdown-divider"></div>
+                        <a class="dropdown-item" data-bind="click: selectCode, css: { selected: type() == 'code' && mime() == '' }"><span class="check">&check;</span> <strong>Code</strong></a>
+                        <!-- ko foreach: codeMimeTypes -->
+                        <a class="dropdown-item" data-bind="click: $parent.selectCodeMime, css: { selected: $parent.type() == 'code' && $parent.mime() == mime }"><span class="check">&check;</span> <span data-bind="text: title"></span></a>
+                        <!-- /ko -->
+                    </div>
+                </div>
+
+                <div class="dropdown" id="note-actions">
+                    <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="btn btn-sm dropdown-toggle">
+                        Note actions
+                        <span class="caret"></span>
+                    </button>
+                    <div class="dropdown-menu dropdown-menu-right">
+                        <a class="dropdown-item" id="show-note-revisions-button" data-bind="css: { disabled: type() == 'file' || type() == 'image' }">Revisions</a>
+                        <a class="dropdown-item show-attributes-button"><kbd>Alt+A</kbd> Attributes</a>
+                        <a class="dropdown-item" id="show-source-button" data-bind="css: { disabled: type() != 'text' && type() != 'code' && type() != 'relation-map' && type() != 'search' }">Note source</a>
+                        <a class="dropdown-item" id="import-files-button">Import files</a>
+                        <a class="dropdown-item" id="export-note-button" data-bind="css: { disabled: type() != 'text' }">Export note</a>
+                        <a class="dropdown-item" id="show-note-info-button">Note info</a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
\ No newline at end of file