mobile layout now has launchbar

This commit is contained in:
zadam
2022-12-11 22:26:18 +01:00
parent c1d4d3fc8a
commit 23322455a3
6 changed files with 64 additions and 147 deletions

View File

@@ -3,7 +3,6 @@ import NoteTitleWidget from "../widgets/note_title.js";
import NoteDetailWidget from "../widgets/note_detail.js";
import QuickSearchWidget from "../widgets/quick_search.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";
@@ -19,6 +18,9 @@ import BacklinksWidget from "../widgets/floating_buttons/zpetne_odkazy.js";
import HideFloatingButtonsButton from "../widgets/floating_buttons/hide_floating_buttons_button.js";
import MermaidWidget from "../widgets/mermaid.js";
import NoteListWidget from "../widgets/note_list.js";
import GlobalMenuWidget from "../widgets/buttons/global_menu.js";
import LauncherContainer from "../widgets/containers/launcher_container.js";
import RootContainer from "../widgets/containers/root_container.js";
const MOBILE_CSS = `
<style>
@@ -40,7 +42,7 @@ kbd {
color: var(--main-text-color);
}
.quick-search {
margin: 55px 0px 0px 0px;
margin: 0;
}
.quick-search .dropdown-menu {
max-width: 350px;
@@ -103,53 +105,60 @@ span.fancytree-expander {
export default class MobileLayout {
getRootWidget(appContext) {
return new FlexContainer('row').cssBlock(MOBILE_CSS)
return new RootContainer()
.setParent(appContext)
.id('root-widget')
.css('height', '100%')
.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 QuickSearchWidget())
.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")
.css('max-height', '100%')
.child(new FlexContainer('row').contentSized()
.css('font-size', 'larger')
.css('align-items', 'center')
.child(new MobileDetailMenuWidget().contentSized())
.child(new NoteTitleWidget()
.contentSized()
.css("position: relative;")
.css("top: 5px;")
)
.child(new CloseDetailButtonWidget().contentSized()))
.child(new FloatingButtons()
.child(new EditButton())
.child(new RelationMapButtons())
.child(new MermaidExportButton())
.child(new BacklinksWidget())
.child(new HideFloatingButtonsButton())
)
.child(new MermaidWidget())
.child(
new ScrollingContainer()
.filling()
.contentSized()
.child(
new NoteDetailWidget()
.css('padding', '5px 20px 10px 0')
)
.child(new NoteListWidget())
.child(new FilePropertiesWidget().css('font-size','smaller'))
)
.cssBlock(MOBILE_CSS)
.child(new FlexContainer("column")
.id("launcher-pane")
.css("width", "53px")
.child(new GlobalMenuWidget())
.child(new LauncherContainer())
)
.child(new ProtectedSessionPasswordDialog())
.child(new ConfirmDialog());
.child(new FlexContainer("row")
.filling()
.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 QuickSearchWidget())
.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")
.css('max-height', '100%')
.child(new FlexContainer('row').contentSized()
.css('font-size', 'larger')
.css('align-items', 'center')
.child(new MobileDetailMenuWidget().contentSized())
.child(new NoteTitleWidget()
.contentSized()
.css("position: relative;")
.css("top: 5px;")
)
.child(new CloseDetailButtonWidget().contentSized()))
.child(new FloatingButtons()
.child(new EditButton())
.child(new RelationMapButtons())
.child(new MermaidExportButton())
.child(new BacklinksWidget())
.child(new HideFloatingButtonsButton())
)
.child(new MermaidWidget())
.child(
new ScrollingContainer()
.filling()
.contentSized()
.child(
new NoteDetailWidget()
.css('padding', '5px 20px 10px 0')
)
.child(new NoteListWidget())
.child(new FilePropertiesWidget().css('font-size','smaller'))
)
)
.child(new ProtectedSessionPasswordDialog())
.child(new ConfirmDialog())
);
}
}