Tools/Notes
1
0
Fork 0
mirror of https://github.com/TriliumNext/Notes.git synced 2025-08-18 00:02:28 +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) .setParent(appContext)
.class("horizontal-layout") .class("horizontal-layout")
.cssBlock(MOBILE_CSS) .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") .child(new FlexContainer("row")
.filling() .filling()
.child(new SidebarContainer("tree", 'column') .child(new SidebarContainer("tree", 'column')
@ -125,14 +132,7 @@ export default class MobileLayout {
.css("max-height", "100%") .css("max-height", "100%")
.css('padding-left', "0") .css('padding-left', "0")
.css('padding-right', "0") .css('padding-right', "0")
.css('contain', 'content') .css('contain', 'content'))
.child(new FlexContainer("column")
.filling()
.id("mobile-sidebar-wrapper")
.child(new QuickSearchWidget())
.child(new NoteTreeWidget()
.cssBlock(FANCYTREE_CSS))
))
.child(new ScreenContainer("detail", "column") .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") .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") .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) { #onDragStart(e) {
if (!this.sidebarContainer) { if (!this.backdropEl) {
this.sidebarContainer = document.getElementById("mobile-sidebar-container"); this.backdropEl = document.getElementById("mobile-sidebar-container");
this.sidebarWrapper = document.getElementById("mobile-sidebar-wrapper"); this.sidebarEl = document.getElementById("mobile-sidebar-wrapper");
} }
const x = e.touches ? e.touches[0].clientX : e.clientX; const x = e.touches ? e.touches[0].clientX : e.clientX;
@ -42,6 +42,7 @@ export default class SidebarContainer extends FlexContainer {
this.startX = x; this.startX = x;
this.dragState = DRAG_STATE_INITIAL_DRAG; this.dragState = DRAG_STATE_INITIAL_DRAG;
this.translatePercentage = 0;
} }
#onDragMove(e) { #onDragMove(e) {
@ -53,16 +54,23 @@ export default class SidebarContainer extends FlexContainer {
const deltaX = x - this.startX; const deltaX = x - this.startX;
if (this.dragState === DRAG_STATE_INITIAL_DRAG) { if (this.dragState === DRAG_STATE_INITIAL_DRAG) {
if (Math.abs(deltaX) > 5) { if (Math.abs(deltaX) > 5) {
this.sidebarContainer.style.zIndex = 1000; /* Disable the transitions since they affect performance, they are going to reenabled once drag ends. */
this.originalTransition = this.sidebarWrapper.style.transition; this.originalSidebarTransition = this.sidebarEl.style.transition;
this.sidebarWrapper.style.transition = "none"; 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; this.dragState = DRAG_STATE_DRAGGING;
} }
} else if (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)); const translatePercentage = Math.min(0, Math.max(this.currentTranslate + (deltaX / width) * 100, -100));
this.translatePercentage = translatePercentage; 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(); e.preventDefault();
@ -74,13 +82,14 @@ export default class SidebarContainer extends FlexContainer {
} }
const isOpen = this.translatePercentage > -50; const isOpen = this.translatePercentage > -50;
this.sidebarWrapper.classList.toggle("show", isOpen); this.sidebarEl.classList.toggle("show", isOpen);
this.sidebarWrapper.style.transform = isOpen ? 'translateX(0)' : 'translateX(-100%)'; this.sidebarEl.style.transform = isOpen ? 'translateX(0)' : 'translateX(-100%)';
this.sidebarWrapper.style.transition = this.originalTransition; this.sidebarEl.style.transition = this.originalSidebarTransition;
this.backdropEl.style.transition = this.originalBackdropTransition;
this.currentTranslate = isOpen ? 0 : -100; this.currentTranslate = isOpen ? 0 : -100;
if (!isOpen) { if (!isOpen) {
this.sidebarContainer.style.zIndex = -1000; this.backdropEl.classList.remove("show");
} }
this.dragState = DRAG_STATE_NONE; 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; left: 0;
right: 0; right: 0;
bottom: 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 { #mobile-sidebar-container.show {
padding-top: env(safe-area-inset-top); visibility: visible;
z-index: 1000;
background-color: rgba(0, 0, 0, 0.3);
transition: background-color 250ms ease-in-out;
} }
#mobile-sidebar-wrapper { #mobile-sidebar-wrapper {
@ -1201,6 +1201,7 @@ body:not(.mobile) #launcher-pane.horizontal .dropdown-submenu > .dropdown-menu {
transform: translateX(-100%); transform: translateX(-100%);
transition: transform 250ms ease-in-out; transition: transform 250ms ease-in-out;
background: var(--main-background-color); background: var(--main-background-color);
z-index: 2000;
} }
#mobile-sidebar-container.show #mobile-sidebar-wrapper { #mobile-sidebar-container.show #mobile-sidebar-wrapper {