Dockery/Trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-11-15 09:45:52 +01:00
Code Issues Packages Projects Releases Activity

refactored layouts for extra window

Browse Source
This commit is contained in:
zadam
2020-04-25 23:52:13 +02:00
parent 87a1e98fa2
commit 75c58cbf79
16 changed files with 193 additions and 318 deletions
Download Patch File Download Diff File Expand all files Collapse all files

158
src/public/app/widgets/desktop_layout.js
View File

@@ -1,158 +0,0 @@
import FlexContainer from "./flex_container.js";
import GlobalMenuWidget from "./global_menu.js";
import TabRowWidget from "./tab_row.js";
import TitleBarButtonsWidget from "./title_bar_buttons.js";
import StandardTopWidget from "./standard_top_widget.js";
import SidePaneContainer from "./side_pane_container.js";
import GlobalButtonsWidget from "./global_buttons.js";
import SearchBoxWidget from "./search_box.js";
import SearchResultsWidget from "./search_results.js";
import NoteTreeWidget from "./note_tree.js";
import TabCachingWidget from "./tab_caching_widget.js";
import NotePathsWidget from "./note_paths.js";
import NoteTitleWidget from "./note_title.js";
import RunScriptButtonsWidget from "./run_script_buttons.js";
import ProtectedNoteSwitchWidget from "./protected_note_switch.js";
import NoteTypeWidget from "./note_type.js";
import NoteActionsWidget from "./note_actions.js";
import PromotedAttributesWidget from "./promoted_attributes.js";
import NoteDetailWidget from "./note_detail.js";
import NoteInfoWidget from "./note_info.js";
import CalendarWidget from "./calendar.js";
import AttributesWidget from "./attributes.js";
import LinkMapWidget from "./link_map.js";
import NoteRevisionsWidget from "./note_revisions.js";
import SimilarNotesWidget from "./similar_notes.js";
import WhatLinksHereWidget from "./what_links_here.js";
import SidePaneToggles from "./side_pane_toggles.js";
import appContext from "../services/app_context.js";
const RIGHT_PANE_CSS = `
<style>
#right-pane {
overflow: auto;
}
#right-pane .card {
border: 0;
display: flex;
flex-shrink: 0;
flex-direction: column;
}
#right-pane .card-header {
background: inherit;
padding: 3px 10px 3px 10px;
width: 99%; /* to give minimal right margin */
background-color: var(--button-background-color);
border-color: var(--button-border-color);
border-width: 1px;
border-radius: 4px;
border-style: solid;
display: flex;
justify-content: space-between;
}
#right-pane .widget-title {
border-radius: 0;
padding: 0;
border: 0;
background: inherit;
font-weight: bold;
text-transform: uppercase;
color: var(--muted-text-color) !important;
}
#right-pane .widget-header-action {
color: var(--link-color) !important;
cursor: pointer;
}
#right-pane .widget-help {
color: var(--muted-text-color);
position: relative;
top: 2px;
}
#right-pane .widget-help.no-link:hover {
cursor: default;
text-decoration: none;
}
#right-pane .body-wrapper {
overflow: auto;
}
#right-pane .card-body {
width: 100%;
padding: 8px;
border: 0;
height: 100%;
overflow: auto;
max-height: 300px;
}
#right-pane .card-body ul {
padding-left: 25px;
margin-bottom: 5px;
}
</style>`;
export default class DesktopLayout {
constructor(customWidgets) {
this.customWidgets = customWidgets;
}
getRootWidget(appContext) {
appContext.mainTreeWidget = new NoteTreeWidget();
return new FlexContainer('column')
.setParent(appContext)
.id('root-widget')
.css('height', '100vh')
.child(new FlexContainer('row')
.child(new GlobalMenuWidget())
.child(new TabRowWidget())
.child(new TitleBarButtonsWidget()))
.child(new StandardTopWidget()
.hideInZenMode())
.child(new FlexContainer('row')
.collapsible()
.child(new SidePaneContainer('left')
.hideInZenMode()
.child(new GlobalButtonsWidget())
.child(new SearchBoxWidget())
.child(new SearchResultsWidget())
.child(new TabCachingWidget(() => new NotePathsWidget()))
.child(appContext.mainTreeWidget)
.child(...this.customWidgets.get('left-pane'))
)
.child(new FlexContainer('column').id('center-pane')
.child(new FlexContainer('row').class('title-row')
.cssBlock('.title-row > * { margin: 5px; }')
.child(new NoteTitleWidget())
.child(new RunScriptButtonsWidget().hideInZenMode())
.child(new ProtectedNoteSwitchWidget().hideInZenMode())
.child(new NoteTypeWidget().hideInZenMode())
.child(new NoteActionsWidget().hideInZenMode())
)
.child(new TabCachingWidget(() => new PromotedAttributesWidget()))
.child(new TabCachingWidget(() => new NoteDetailWidget()))
.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 AttributesWidget()))
.child(new TabCachingWidget(() => new LinkMapWidget()))
.child(new TabCachingWidget(() => new NoteRevisionsWidget()))
.child(new TabCachingWidget(() => new SimilarNotesWidget()))
.child(new TabCachingWidget(() => new WhatLinksHereWidget()))
.child(...this.customWidgets.get('right-pane'))
)
.child(new SidePaneToggles().hideInZenMode())
);
}
}

48
src/public/app/widgets/extra_layout.js
View File

@@ -1,48 +0,0 @@
import FlexContainer from "./flex_container.js";
import GlobalMenuWidget from "./global_menu.js";
import TabRowWidget from "./tab_row.js";
import TitleBarButtonsWidget from "./title_bar_buttons.js";
import NoteTreeWidget from "./note_tree.js";
import TabCachingWidget from "./tab_caching_widget.js";
import NoteTitleWidget from "./note_title.js";
import RunScriptButtonsWidget from "./run_script_buttons.js";
import ProtectedNoteSwitchWidget from "./protected_note_switch.js";
import NoteTypeWidget from "./note_type.js";
import NoteActionsWidget from "./note_actions.js";
import PromotedAttributesWidget from "./promoted_attributes.js";
import NoteDetailWidget from "./note_detail.js";
export default class ExtraLayout {
constructor(customWidgets) {
this.customWidgets = customWidgets;
}
getRootWidget(appContext) {
appContext.mainTreeWidget = new NoteTreeWidget();
return new FlexContainer('column')
.setParent(appContext)
.id('root-widget')
.css('height', '100vh')
.child(new FlexContainer('row')
.child(new GlobalMenuWidget())
.child(new TabRowWidget())
.child(new TitleBarButtonsWidget()))
.child(new FlexContainer('row')
.collapsible()
.child(new FlexContainer('column').id('center-pane')
.child(new FlexContainer('row').class('title-row')
.cssBlock('.title-row > * { margin: 5px; }')
.child(new NoteTitleWidget())
.child(new RunScriptButtonsWidget().hideInZenMode())
.child(new ProtectedNoteSwitchWidget().hideInZenMode())
.child(new NoteTypeWidget().hideInZenMode())
.child(new NoteActionsWidget().hideInZenMode())
)
.child(new TabCachingWidget(() => new PromotedAttributesWidget()))
.child(new TabCachingWidget(() => new NoteDetailWidget()))
.child(...this.customWidgets.get('center-pane'))
)
);
}
}

88
src/public/app/widgets/mobile_layout.js
View File

@@ -1,88 +0,0 @@
import FlexContainer from "./flex_container.js";
import NoteTitleWidget from "./note_title.js";
import NoteDetailWidget from "./note_detail.js";
import NoteTreeWidget from "./note_tree.js";
import MobileGlobalButtonsWidget from "./mobile_global_buttons.js";
import CloseDetailButtonWidget from "./close_detail_button.js";
import MobileDetailMenuWidget from "./mobile_detail_menu.js";
import ScreenContainer from "./screen_container.js";
const MOBILE_CSS = `
<style>
kbd {
display: none;
}
.dropdown-menu {
font-size: larger;
}
.action-button {
background: none;
border: none;
cursor: pointer;
font-size: 1.5em;
padding-left: 0.5em;
padding-right: 0.5em;
}
</style>`;
const FANCYTREE_CSS = `
<style>
.fancytree-custom-icon {
font-size: 2em;
}
.fancytree-title {
font-size: 1.5em;
margin-left: 0.6em !important;
}
.fancytree-node {
padding: 5px;
}
.fancytree-node .fancytree-expander:before {
font-size: 2em !important;
}
span.fancytree-expander {
width: 24px !important;
}
.fancytree-loading span.fancytree-expander {
width: 24px;
height: 32px;
}
.fancytree-loading span.fancytree-expander:after {
width: 20px;
height: 20px;
margin-top: 4px;
border-width: 2px;
border-style: solid;
}
</style>`;
export default class MobileLayout {
getRootWidget(appContext) {
return new FlexContainer('row').cssBlock(MOBILE_CSS)
.setParent(appContext)
.id('root-widget')
.css('height', '100vh')
.child(new ScreenContainer("tree", 'column')
.class("d-sm-flex d-md-flex d-lg-flex d-xl-flex col-12 col-sm-5 col-md-4 col-lg-4 col-xl-4")
.child(new MobileGlobalButtonsWidget())
.child(new NoteTreeWidget().cssBlock(FANCYTREE_CSS)))
.child(new ScreenContainer("detail", "column")
.class("d-sm-flex d-md-flex d-lg-flex d-xl-flex col-12 col-sm-7 col-md-8 col-lg-8")
.child(new FlexContainer('row')
.child(new MobileDetailMenuWidget())
.child(new NoteTitleWidget()
.css('padding', '10px')
.css('font-size', 'larger'))
.child(new CloseDetailButtonWidget()))
.child(new NoteDetailWidget()
.css('padding', '5px 20px 10px 0')));
}
}