From 5b1540e12ba396bca31d9333b378381a373efcab Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Sat, 4 Jan 2025 00:50:11 +0200 Subject: [PATCH] feat(mobile): add back drop to sidebar --- src/public/app/layouts/mobile_layout.js | 16 ++++----- .../mobile_widgets/sidebar_container.js | 33 ++++++++++++------- src/public/stylesheets/style.css | 11 ++++--- 3 files changed, 35 insertions(+), 25 deletions(-) diff --git a/src/public/app/layouts/mobile_layout.js b/src/public/app/layouts/mobile_layout.js index bee6150cf..fedb0a8ac 100644 --- a/src/public/app/layouts/mobile_layout.js +++ b/src/public/app/layouts/mobile_layout.js @@ -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") diff --git a/src/public/app/widgets/mobile_widgets/sidebar_container.js b/src/public/app/widgets/mobile_widgets/sidebar_container.js index 630684684..66b9db072 100644 --- a/src/public/app/widgets/mobile_widgets/sidebar_container.js +++ b/src/public/app/widgets/mobile_widgets/sidebar_container.js @@ -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; diff --git a/src/public/stylesheets/style.css b/src/public/stylesheets/style.css index fc4bf2251..c503df90a 100644 --- a/src/public/stylesheets/style.css +++ b/src/public/stylesheets/style.css @@ -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 {