mirror of
https://github.com/zadam/trilium.git
synced 2025-03-01 14:22:32 +01:00
118 lines
3.3 KiB
JavaScript
118 lines
3.3 KiB
JavaScript
import FlexContainer from "../widgets/containers/flex_container.js";
|
|
import NoteTitleWidget from "../widgets/note_title.js";
|
|
import NoteDetailWidget from "../widgets/note_detail.js";
|
|
import NoteTreeWidget from "../widgets/note_tree.js";
|
|
import MobileGlobalButtonsWidget from "../widgets/mobile_widgets/mobile_global_buttons.js";
|
|
import CloseDetailButtonWidget from "../widgets/mobile_widgets/close_detail_button.js";
|
|
import MobileDetailMenuWidget from "../widgets/mobile_widgets/mobile_detail_menu.js";
|
|
import ScreenContainer from "../widgets/mobile_widgets/screen_container.js";
|
|
import ScrollingContainer from "../widgets/containers/scrolling_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;
|
|
color: var(--main-text-color);
|
|
}
|
|
</style>`;
|
|
|
|
const FANCYTREE_CSS = `
|
|
<style>
|
|
.tree-wrapper {
|
|
max-height: 100%;
|
|
margin-top: 55px;
|
|
overflow-y: auto;
|
|
contain: content;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.tree-wrapper .collapse-tree-button,
|
|
.tree-wrapper .scroll-to-active-note-button,
|
|
.tree-wrapper .tree-settings-button {
|
|
position: fixed;
|
|
margin-right: 16px;
|
|
display: none;
|
|
}
|
|
</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")
|
|
.css("max-height", "100%")
|
|
.css('padding-left', 0)
|
|
.css('contain', 'content')
|
|
.child(new MobileGlobalButtonsWidget())
|
|
.child(new NoteTreeWidget("main")
|
|
.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")
|
|
.css('max-height', '100%')
|
|
.child(new FlexContainer('row').overflowing().filling()
|
|
.css('font-size', 'larger')
|
|
.css('align-items', 'center')
|
|
.child(new MobileDetailMenuWidget())
|
|
.child(new NoteTitleWidget())
|
|
.child(new CloseDetailButtonWidget()))
|
|
.child(
|
|
new ScrollingContainer()
|
|
.child(
|
|
new NoteDetailWidget()
|
|
.css('padding', '5px 20px 10px 0')
|
|
.css('contain', 'content')
|
|
)
|
|
)
|
|
);
|
|
}
|
|
}
|