redesign experiments

This commit is contained in:
zadam 2021-05-17 21:46:18 +02:00
parent 04f249e800
commit 7a7c890946
9 changed files with 3197 additions and 66 deletions

View File

@ -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()
.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()
.child(appContext.mainTreeWidget)
.child(...this.customWidgets.get('left-pane'))
.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')
.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('column').id('center-pane')
.child(new FlexContainer('row').class('title-row')
.css('align-items: center;')
.cssBlock('.title-row > * { margin: 5px; }')
.overflowing()
.child(new NoteIconWidget())
.child(new NoteTitleWidget())
.child(new NotePathsWidget().hideInZenMode())
.child(new NoteTypeWidget().hideInZenMode())
.child(new NoteActionsWidget().hideInZenMode())
)
.child(
new TabCachingWidget(() => new CollapsibleSectionContainer()
.child(new SearchDefinitionWidget())
.child(new NotePropertiesWidget())
.child(new FilePropertiesWidget())
.child(new ImagePropertiesWidget())
.child(new PromotedAttributesWidget())
.child(new OwnedAttributeListWidget())
.child(new InheritedAttributesWidget())
)
.child(new FlexContainer('row').overflowing()
.child(new TabRowWidget())
)
.child(new FlexContainer('row').class('title-row')
.css('align-items: center;')
.cssBlock('.title-row > * { margin: 5px; }')
.overflowing()
.child(new NoteIconWidget())
.child(new NoteTitleWidget())
.child(new NotePathsWidget().hideInZenMode())
.child(new NoteTypeWidget().hideInZenMode())
.child(new NoteActionsWidget().hideInZenMode())
)
.child(
new TabCachingWidget(() => new CollapsibleSectionContainer()
.child(new SearchDefinitionWidget())
.child(new NotePropertiesWidget())
.child(new FilePropertiesWidget())
.child(new ImagePropertiesWidget())
.child(new PromotedAttributesWidget())
.child(new OwnedAttributeListWidget())
.child(new InheritedAttributesWidget())
)
)
.child(new NoteUpdateStatusWidget())
.child(
new TabCachingWidget(() => new ScrollingContainer()
.child(new SqlTableSchemasWidget())
.child(new NoteDetailWidget())
.child(new NoteListWidget())
.child(new SearchResultWidget())
.child(new SqlResultWidget())
)
.child(
new TabCachingWidget(() => new ScrollingContainer()
.child(new SqlTableSchemasWidget())
.child(new NoteDetailWidget())
.child(new NoteListWidget())
.child(new SearchResultWidget())
.child(new SqlResultWidget())
)
.child(new TabCachingWidget(() => new SimilarNotesWidget()))
.child(...this.customWidgets.get('center-pane'))
)
.child(new SidePaneContainer('right')
.cssBlock(RIGHT_PANE_CSS)
.hideInZenMode()
.child(new NoteInfoWidget())
.child(new TabCachingWidget(() => new CalendarWidget()))
.child(new TabCachingWidget(() => new EditedNotesWidget()))
.child(new TabCachingWidget(() => new LinkMapWidget()))
.child(new TabCachingWidget(() => new NoteRevisionsWidget()))
.child(new TabCachingWidget(() => new WhatLinksHereWidget()))
.child(...this.customWidgets.get('right-pane'))
)
.child(new SidePaneToggles().hideInZenMode())
.child(new TabCachingWidget(() => new SimilarNotesWidget()))
.child(...this.customWidgets.get('center-pane'))
// .child(new SidePaneContainer('right')
// .cssBlock(RIGHT_PANE_CSS)
// .hideInZenMode()
// .child(new NoteInfoWidget())
// .child(new TabCachingWidget(() => new CalendarWidget()))
// .child(new TabCachingWidget(() => new EditedNotesWidget()))
// .child(new TabCachingWidget(() => new LinkMapWidget()))
// .child(new TabCachingWidget(() => new NoteRevisionsWidget()))
// .child(new TabCachingWidget(() => new WhatLinksHereWidget()))
// .child(...this.customWidgets.get('right-pane'))
// )
// .child(new SidePaneToggles().hideInZenMode())
);
}
}

View File

@ -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);
}
});
}
}

View File

@ -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');

View File

@ -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 {

View File

@ -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 {

View File

@ -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);
}
}

View File

@ -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 {

File diff suppressed because it is too large Load Diff

View File

@ -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>