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,69 +141,72 @@ export default class DesktopLayout {
 
         return new RootContainer()
             .setParent(appContext)
-            .child(new FlexContainer('row').overflowing()
+            .child(new SidePaneContainer('left')
-                .css('height', '36px')
+                .hideInZenMode()
-                .child(new GlobalMenuWidget())
+                .css("width", "300px")
-                .child(new SyncStatusWidget())
+                .child(new QuickSearchWidget())
-                .child(new TabRowWidget())
+                .child(appContext.mainTreeWidget)
-                .child(new TitleBarButtonsWidget()))
+                .child(...this.customWidgets.get('left-pane'))
-            .child(new StandardTopWidget()
+            )
-                .hideInZenMode())
+            .child(new FlexContainer('column')
-            .child(new FlexContainer('row')
+                .id('center-pane')
-                .collapsible()
+                .css("flex-grow", "1")
-                .filling()
+                .child(new FlexContainer('row').overflowing()
-                .child(new SidePaneContainer('left')
+                    .filling()
-                    .hideInZenMode()
+                    .child(new GlobalMenuWidget())
-                    .child(appContext.mainTreeWidget)
+                    .child(new SyncStatusWidget())
-                    .child(...this.customWidgets.get('left-pane'))
+                    .child(new SpacerWidget())
+                    .child(new TitleBarButtonsWidget())
+                    .css('height', '36px')
                 )
-                .child(new FlexContainer('column').id('center-pane')
+                .child(new FlexContainer('row').overflowing()
-                    .child(new FlexContainer('row').class('title-row')
+                    .child(new TabRowWidget())
-                        .css('align-items: center;')
+                )
-                        .cssBlock('.title-row > * { margin: 5px; }')
+                .child(new FlexContainer('row').class('title-row')
-                        .overflowing()
+                    .css('align-items: center;')
-                        .child(new NoteIconWidget())
+                    .cssBlock('.title-row > * { margin: 5px; }')
-                        .child(new NoteTitleWidget())
+                    .overflowing()
-                        .child(new NotePathsWidget().hideInZenMode())
+                    .child(new NoteIconWidget())
-                        .child(new NoteTypeWidget().hideInZenMode())
+                    .child(new NoteTitleWidget())
-                        .child(new NoteActionsWidget().hideInZenMode())
+                    .child(new NotePathsWidget().hideInZenMode())
-                    )
+                    .child(new NoteTypeWidget().hideInZenMode())
-                    .child(
+                    .child(new NoteActionsWidget().hideInZenMode())
-                        new TabCachingWidget(() => new CollapsibleSectionContainer()
+                )
-                            .child(new SearchDefinitionWidget())
+                .child(
-                            .child(new NotePropertiesWidget())
+                    new TabCachingWidget(() => new CollapsibleSectionContainer()
-                            .child(new FilePropertiesWidget())
+                        .child(new SearchDefinitionWidget())
-                            .child(new ImagePropertiesWidget())
+                        .child(new NotePropertiesWidget())
-                            .child(new PromotedAttributesWidget())
+                        .child(new FilePropertiesWidget())
-                            .child(new OwnedAttributeListWidget())
+                        .child(new ImagePropertiesWidget())
-                            .child(new InheritedAttributesWidget())
+                        .child(new PromotedAttributesWidget())
-                        )
+                        .child(new OwnedAttributeListWidget())
+                        .child(new InheritedAttributesWidget())
                     )
+                )
                     .child(new NoteUpdateStatusWidget())
-                    .child(
+                .child(
-                        new TabCachingWidget(() => new ScrollingContainer()
+                    new TabCachingWidget(() => new ScrollingContainer()
-                            .child(new SqlTableSchemasWidget())
+                        .child(new SqlTableSchemasWidget())
-                            .child(new NoteDetailWidget())
+                        .child(new NoteDetailWidget())
-                            .child(new NoteListWidget())
+                        .child(new NoteListWidget())
-                            .child(new SearchResultWidget())
+                        .child(new SearchResultWidget())
-                            .child(new SqlResultWidget())
+                        .child(new SqlResultWidget())
-                        )
                     )
-                    .child(new TabCachingWidget(() => new SimilarNotesWidget()))
-                    .child(...this.customWidgets.get('center-pane'))
                 )
-                .child(new SidePaneContainer('right')
+                .child(new TabCachingWidget(() => new SimilarNotesWidget()))
-                    .cssBlock(RIGHT_PANE_CSS)
+                .child(...this.customWidgets.get('center-pane'))
-                    .hideInZenMode()
+                // .child(new SidePaneContainer('right')
-                    .child(new NoteInfoWidget())
+                //     .cssBlock(RIGHT_PANE_CSS)
-                    .child(new TabCachingWidget(() => new CalendarWidget()))
+                //     .hideInZenMode()
-                    .child(new TabCachingWidget(() => new EditedNotesWidget()))
+                //     .child(new NoteInfoWidget())
-                    .child(new TabCachingWidget(() => new LinkMapWidget()))
+                //     .child(new TabCachingWidget(() => new CalendarWidget()))
-                    .child(new TabCachingWidget(() => new NoteRevisionsWidget()))
+                //     .child(new TabCachingWidget(() => new EditedNotesWidget()))
-                    .child(new TabCachingWidget(() => new WhatLinksHereWidget()))
+                //     .child(new TabCachingWidget(() => new LinkMapWidget()))
-                    .child(...this.customWidgets.get('right-pane'))
+                //     .child(new TabCachingWidget(() => new NoteRevisionsWidget()))
-                )
+                //     .child(new TabCachingWidget(() => new WhatLinksHereWidget()))
-                .child(new SidePaneToggles().hideInZenMode())
+                //     .child(...this.customWidgets.get('right-pane'))
+                // )
+                // .child(new SidePaneToggles().hideInZenMode())
             );
     }
 }

src/public/app/services/zoom.js

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