Tools/Notes
1
0
Fork 0
mirror of https://github.com/TriliumNext/Notes.git synced 2025-07-29 19:12:27 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(mobile): implement dismiss region of sidebar

Browse Source
This commit is contained in:
Elian Doran 2024-12-28 13:56:20 +02:00
parent 61ccee27f2
commit b00ca234f5
No known key found for this signature in database
4 changed files with 24 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/public/app/layouts/mobile_layout.js
View File

@ -127,9 +127,13 @@ export default class MobileLayout {
.css('padding-left', "0")
.css('padding-right', "0")
.css('contain', 'content')
.child(new QuickSearchWidget())
.child(new NoteTreeWidget()
.cssBlock(FANCYTREE_CSS)))
.child(new FlexContainer("column")
.filling()
.id("mobile-sidebar-wrapper")
.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-9")
.css("padding-left", "0")

7
src/public/app/widgets/mobile_widgets/screen_container.js
View File

@ -8,11 +8,6 @@ export default class ScreenContainer extends FlexContainer {
}
activeScreenChangedEvent({activeScreen}) {
if (activeScreen === this.screenName) {
this.$widget.removeClass('d-none');
}
else {
this.$widget.addClass('d-none');
}
}
}

8
src/public/app/widgets/mobile_widgets/sidebar_container.js
View File

@ -8,6 +8,14 @@ export default class SidebarContainer extends FlexContainer {
this.screenName = screenName;
}
doRender() {
super.doRender();
this.$widget.on("click", () => {
this.triggerEvent('activeScreenChanged', "detail");
});
}
activeScreenChangedEvent({activeScreen}) {
if (activeScreen === this.screenName) {
this.$widget.addClass('show');

12
src/public/stylesheets/style.css
View File

@ -1176,14 +1176,18 @@ body:not(.mobile) #launcher-pane.horizontal .dropdown-submenu > .dropdown-menu {
#mobile-sidebar-container {
position: absolute;
top: 0;
left: 0;
right: 0;
left: 0;
bottom: var(--launcher-pane-size);
padding-top: env(safe-area-inset-top);
z-index: 100;
background: var(--main-background-color);
z-index: 100;
transform: translateX(-100%);
transition: transform 250ms ease-in-out;
backdrop-filter: blur(20px);
}
#mobile-sidebar-wrapper {
width: 85vw;
background: var(--main-background-color);
}
#mobile-sidebar-container.show {