redesign experiments

src/public/app/layouts/desktop_layout.js

@@ -25,7 +25,6 @@ import PromotedAttributesWidget from "../widgets/type_property_widgets/promoted_
 import InheritedAttributesWidget from "../widgets/type_property_widgets/inherited_attribute_list.js";
 import NoteListWidget from "../widgets/note_list.js";
 import SearchDefinitionWidget from "../widgets/type_property_widgets/search_definition.js";
-import Container from "../widgets/containers/container.js";
 import SqlResultWidget from "../widgets/sql_result.js";
 import SqlTableSchemasWidget from "../widgets/sql_table_schemas.js";
 import FilePropertiesWidget from "../widgets/type_property_widgets/file_properties.js";
@@ -37,6 +36,8 @@ import SyncStatusWidget from "../widgets/sync_status.js";
 import ScrollingContainer from "../widgets/containers/scrolling_container.js";
 import RootContainer from "../widgets/containers/root_container.js";
 import NoteUpdateStatusWidget from "../widgets/note_update_status.js";
+import SpacerWidget from "../widgets/spacer.js";
+import QuickSearchWidget from "../widgets/quick_search.js";
 
 const RIGHT_PANE_CSS = `
 <style>
@@ -140,23 +141,27 @@ export default class DesktopLayout {
 
         return new RootContainer()
             .setParent(appContext)
-            .child(new FlexContainer('row').overflowing()
-                .css('height', '36px')
-                .child(new GlobalMenuWidget())
-                .child(new SyncStatusWidget())
-                .child(new TabRowWidget())
-                .child(new TitleBarButtonsWidget()))
-            .child(new StandardTopWidget()
-                .hideInZenMode())
-            .child(new FlexContainer('row')
-                .collapsible()
-                .filling()
             .child(new SidePaneContainer('left')
                 .hideInZenMode()
+                .css("width", "300px")
+                .child(new QuickSearchWidget())
                 .child(appContext.mainTreeWidget)
                 .child(...this.customWidgets.get('left-pane'))
             )
-                .child(new FlexContainer('column').id('center-pane')
+            .child(new FlexContainer('column')
+                .id('center-pane')
+                .css("flex-grow", "1")
+                .child(new FlexContainer('row').overflowing()
+                    .filling()
+                    .child(new GlobalMenuWidget())
+                    .child(new SyncStatusWidget())
+                    .child(new SpacerWidget())
+                    .child(new TitleBarButtonsWidget())
+                    .css('height', '36px')
+                )
+                .child(new FlexContainer('row').overflowing()
+                    .child(new TabRowWidget())
+                )
                 .child(new FlexContainer('row').class('title-row')
                     .css('align-items: center;')
                     .cssBlock('.title-row > * { margin: 5px; }')
@@ -190,19 +195,18 @@ export default class DesktopLayout {
                 )
                 .child(new TabCachingWidget(() => new SimilarNotesWidget()))
                 .child(...this.customWidgets.get('center-pane'))
-                )
+                // .child(new SidePaneContainer('right')
-                .child(new SidePaneContainer('right')
+                //     .cssBlock(RIGHT_PANE_CSS)
-                    .cssBlock(RIGHT_PANE_CSS)
+                //     .hideInZenMode()
-                    .hideInZenMode()
+                //     .child(new NoteInfoWidget())
-                    .child(new NoteInfoWidget())
+                //     .child(new TabCachingWidget(() => new CalendarWidget()))
-                    .child(new TabCachingWidget(() => new CalendarWidget()))
+                //     .child(new TabCachingWidget(() => new EditedNotesWidget()))
-                    .child(new TabCachingWidget(() => new EditedNotesWidget()))
+                //     .child(new TabCachingWidget(() => new LinkMapWidget()))
-                    .child(new TabCachingWidget(() => new LinkMapWidget()))
+                //     .child(new TabCachingWidget(() => new NoteRevisionsWidget()))
-                    .child(new TabCachingWidget(() => new NoteRevisionsWidget()))
+                //     .child(new TabCachingWidget(() => new WhatLinksHereWidget()))
-                    .child(new TabCachingWidget(() => new WhatLinksHereWidget()))
+                //     .child(...this.customWidgets.get('right-pane'))
-                    .child(...this.customWidgets.get('right-pane'))
+                // )
-                )
+                // .child(new SidePaneToggles().hideInZenMode())
-                .child(new SidePaneToggles().hideInZenMode())
             );
     }
 }

src/public/app/services/zoom.js

@@ -15,7 +15,9 @@ class ZoomService extends Component {
             });
 
             window.addEventListener("wheel", event => {
+                if (event.ctrlKey) {
                     this.setZoomFactorAndSave(this.getCurrentZoom() + event.deltaY * 0.001);
+                }
             });
         }
     }

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

@@ -4,7 +4,7 @@ import appContext from "../../services/app_context.js";
 
 export default class RootContainer extends FlexContainer {
     constructor() {
-        super('column');
+        super('row');
 
         this.id('root-widget');
         this.css('height', '100vh');

src/public/app/widgets/global_menu.js

@@ -7,7 +7,6 @@ const TPL = `
     .global-menu-wrapper {
         height: 35px;
         box-sizing: border-box;
-        border-bottom: 1px solid var(--main-border-color);
     }
     
     .global-menu {

src/public/app/widgets/quick_search.js

@@ -7,11 +7,9 @@ import utils from "../services/utils.js";
 import appContext from "../services/app_context.js";
 
 const TPL = `
-<div class="quick-search input-group input-group-sm" style="width: 250px;">
+<div class="quick-search input-group input-group-sm">
   <style>
     .quick-search {
-        margin-left: 5px;
-        margin-right: 5px;
     }
   
     .quick-search .dropdown-menu {

src/public/app/widgets/spacer.js

@@ -0,0 +1,17 @@
+import BasicWidget from "./basic_widget.js";
+
+const TPL = `
+<div class="spacer">
+    <style>
+    .spacer {
+        flex-grow: 1000;
+    }
+    </style>
+</div>
+`;
+
+export default class SpacerWidget extends BasicWidget {
+    doRender() {
+        this.$widget = $(TPL);
+    }
+}

src/public/app/widgets/sync_status.js

@@ -10,7 +10,6 @@ const TPL = `
     .sync-status-widget {
         height: 35px;
         box-sizing: border-box;
-        border-bottom: 1px solid var(--main-border-color);
     }
     
     .sync-status {

src/views/desktop.ejs

@@ -81,6 +81,7 @@
 <script src="libraries/split.min.js"></script>
 
 <link href="stylesheets/themes.css" rel="stylesheet">
+<link href="stylesheets/allure.css" rel="stylesheet">
 <link href="stylesheets/style.css" rel="stylesheet">
 
 <script>