Tools/Notes
1
0
Fork 0
mirror of https://github.com/TriliumNext/Notes.git synced 2025-07-30 03:32:26 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(mobile): implement simple slide effect for tree

Browse Source
This commit is contained in:
Elian Doran 2024-12-28 13:46:08 +02:00
parent 748eedbbd2
commit 61ccee27f2
No known key found for this signature in database
3 changed files with 39 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -25,6 +25,7 @@ import SharedInfoWidget from "../widgets/shared_info.js";
import PromotedAttributesWidget from "../widgets/ribbon_widgets/promoted_attributes.js"; import PromotedAttributesWidget from "../widgets/ribbon_widgets/promoted_attributes.js";
import ClassicEditorToolbar from "../widgets/ribbon_widgets/classic_editor_toolbar.js"; import ClassicEditorToolbar from "../widgets/ribbon_widgets/classic_editor_toolbar.js";
import options from "../services/options.js"; import options from "../services/options.js";
import SidebarContainer from "../widgets/mobile_widgets/sidebar_container.js";
const MOBILE_CSS = ` const MOBILE_CSS = `
<style> <style>
@ -119,8 +120,9 @@ export default class MobileLayout {
.cssBlock(MOBILE_CSS) .cssBlock(MOBILE_CSS)
.child(new FlexContainer("row") .child(new FlexContainer("row")
.filling() .filling()
.child(new ScreenContainer("tree", 'column') .child(new SidebarContainer("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-3 col-xl-3") .class("d-sm-flex d-md-flex d-lg-flex d-xl-flex col-12 col-sm-5 col-md-4 col-lg-3 col-xl-3")
.id("mobile-sidebar-container")
.css("max-height", "100%") .css("max-height", "100%")
.css('padding-left', "0") .css('padding-left', "0")
.css('padding-right', "0") .css('padding-right', "0")

19
src/public/app/widgets/mobile_widgets/sidebar_container.js Normal file
View File

@ -0,0 +1,19 @@
import FlexContainer from "../containers/flex_container.js";
export default class SidebarContainer extends FlexContainer {
constructor(screenName, direction) {
super(direction);
this.screenName = screenName;
}
activeScreenChangedEvent({activeScreen}) {
if (activeScreen === this.screenName) {
this.$widget.addClass('show');
} else {
this.$widget.removeClass('show');
}
}
}

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

@ -1173,6 +1173,23 @@ body:not(.mobile) #launcher-pane.horizontal .dropdown-submenu > .dropdown-menu {
background-color: var(--left-pane-background-color); background-color: var(--left-pane-background-color);
} }
#mobile-sidebar-container {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: var(--launcher-pane-size);
padding-top: env(safe-area-inset-top);
z-index: 100;
background: var(--main-background-color);
transform: translateX(-100%);
transition: transform 250ms ease-in-out;
}
#mobile-sidebar-container.show {
transform: translateX(0);
}
#launcher-pane { #launcher-pane {
color: var(--launcher-pane-text-color); color: var(--launcher-pane-text-color);
background-color: var(--launcher-pane-background-color); background-color: var(--launcher-pane-background-color);