Tools/Notes
1
0
Fork 0
mirror of https://github.com/TriliumNext/Notes.git synced 2025-08-10 18:39:22 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(mobile): add back drop to sidebar

Browse Source
This commit is contained in:
Elian Doran 2025-01-04 00:50:11 +02:00
parent 17b60b21a9
commit 5b1540e12b
No known key found for this signature in database
3 changed files with 35 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -117,6 +117,13 @@ export default class MobileLayout {
.setParent(appContext)
.class("horizontal-layout")
.cssBlock(MOBILE_CSS)
.child(new FlexContainer("column")
.filling()
.id("mobile-sidebar-wrapper")
.child(new QuickSearchWidget())
.child(new NoteTreeWidget()
.cssBlock(FANCYTREE_CSS))
)
.child(new FlexContainer("row")
.filling()
.child(new SidebarContainer("tree", 'column')
@ -125,14 +132,7 @@ export default class MobileLayout {
.css("max-height", "100%")
.css('padding-left', "0")
.css('padding-right', "0")
.css('contain', 'content')
.child(new FlexContainer("column")
.filling()
.id("mobile-sidebar-wrapper")
.child(new QuickSearchWidget())
.child(new NoteTreeWidget()
.cssBlock(FANCYTREE_CSS))
))
.css('contain', 'content'))
.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")

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

@ -29,9 +29,9 @@ export default class SidebarContainer extends FlexContainer {
}
#onDragStart(e) {
if (!this.sidebarContainer) {
this.sidebarContainer = document.getElementById("mobile-sidebar-container");
this.sidebarWrapper = document.getElementById("mobile-sidebar-wrapper");
if (!this.backdropEl) {
this.backdropEl = document.getElementById("mobile-sidebar-container");
this.sidebarEl = document.getElementById("mobile-sidebar-wrapper");
}
const x = e.touches ? e.touches[0].clientX : e.clientX;
@ -42,6 +42,7 @@ export default class SidebarContainer extends FlexContainer {
this.startX = x;
this.dragState = DRAG_STATE_INITIAL_DRAG;
this.translatePercentage = 0;
}
#onDragMove(e) {
@ -53,16 +54,23 @@ export default class SidebarContainer extends FlexContainer {
const deltaX = x - this.startX;
if (this.dragState === DRAG_STATE_INITIAL_DRAG) {
if (Math.abs(deltaX) > 5) {
this.sidebarContainer.style.zIndex = 1000;
this.originalTransition = this.sidebarWrapper.style.transition;
this.sidebarWrapper.style.transition = "none";
/* Disable the transitions since they affect performance, they are going to reenabled once drag ends. */
this.originalSidebarTransition = this.sidebarEl.style.transition;
this.originalBackdropTransition = this.backdropEl.style.transition;
this.sidebarEl.style.transition = "none";
this.backdropEl.style.transition = "none";
this.backdropEl.style.opacity = Math.max(0, 1 + (this.translatePercentage / 100));
this.backdropEl.classList.add("show");
this.dragState = DRAG_STATE_DRAGGING;
}
} else if (this.dragState === DRAG_STATE_DRAGGING) {
const width = this.sidebarWrapper.offsetWidth;
const width = this.sidebarEl.offsetWidth;
const translatePercentage = Math.min(0, Math.max(this.currentTranslate + (deltaX / width) * 100, -100));
this.translatePercentage = translatePercentage;
this.sidebarWrapper.style.transform = `translateX(${translatePercentage}%)`;
this.sidebarEl.style.transform = `translateX(${translatePercentage}%)`;
this.backdropEl.style.opacity = Math.max(0, 1 + (translatePercentage / 100));
}
e.preventDefault();
@ -74,13 +82,14 @@ export default class SidebarContainer extends FlexContainer {
}
const isOpen = this.translatePercentage > -50;
this.sidebarWrapper.classList.toggle("show", isOpen);
this.sidebarWrapper.style.transform = isOpen ? 'translateX(0)' : 'translateX(-100%)';
this.sidebarWrapper.style.transition = this.originalTransition;
this.sidebarEl.classList.toggle("show", isOpen);
this.sidebarEl.style.transform = isOpen ? 'translateX(0)' : 'translateX(-100%)';
this.sidebarEl.style.transition = this.originalSidebarTransition;
this.backdropEl.style.transition = this.originalBackdropTransition;
this.currentTranslate = isOpen ? 0 : -100;
if (!isOpen) {
this.sidebarContainer.style.zIndex = -1000;
this.backdropEl.classList.remove("show");
}
this.dragState = DRAG_STATE_NONE;

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

@ -1181,14 +1181,14 @@ body:not(.mobile) #launcher-pane.horizontal .dropdown-submenu > .dropdown-menu {
left: 0;
right: 0;
bottom: 0;
z-index: -1000;
z-index: 1000;
transition: background-color 250ms ease-in-out;
visibility: hidden;
background: rgba(0, 0, 0, 0.4);
}
#mobile-sidebar-container.show {
padding-top: env(safe-area-inset-top);
z-index: 1000;
background-color: rgba(0, 0, 0, 0.3);
transition: background-color 250ms ease-in-out;
visibility: visible;
}
#mobile-sidebar-wrapper {
@ -1201,6 +1201,7 @@ body:not(.mobile) #launcher-pane.horizontal .dropdown-submenu > .dropdown-menu {
transform: translateX(-100%);
transition: transform 250ms ease-in-out;
background: var(--main-background-color);
z-index: 2000;
}
#mobile-sidebar-container.show #mobile-sidebar-wrapper {