feat(mobile): add button to toggle sidebar

This commit is contained in:
Elian Doran 2024-12-28 14:09:50 +02:00
parent b00ca234f5
commit 857f33db08
No known key found for this signature in database
4 changed files with 23 additions and 22 deletions

View File

@ -3,7 +3,7 @@ import NoteTitleWidget from "../widgets/note_title.js";
import NoteDetailWidget from "../widgets/note_detail.js";
import QuickSearchWidget from "../widgets/quick_search.js";
import NoteTreeWidget from "../widgets/note_tree.js";
import CloseDetailButtonWidget from "../widgets/mobile_widgets/close_detail_button.js";
import ToggleSidebarButtonWidget from "../widgets/mobile_widgets/toggle_sidebar_button.js";
import MobileDetailMenuWidget from "../widgets/mobile_widgets/mobile_detail_menu.js";
import ScreenContainer from "../widgets/mobile_widgets/screen_container.js";
import ScrollingContainer from "../widgets/containers/scrolling_container.js";
@ -24,7 +24,6 @@ import RootContainer from "../widgets/containers/root_container.js";
import SharedInfoWidget from "../widgets/shared_info.js";
import PromotedAttributesWidget from "../widgets/ribbon_widgets/promoted_attributes.js";
import ClassicEditorToolbar from "../widgets/ribbon_widgets/classic_editor_toolbar.js";
import options from "../services/options.js";
import SidebarContainer from "../widgets/mobile_widgets/sidebar_container.js";
const MOBILE_CSS = `
@ -142,14 +141,14 @@ export default class MobileLayout {
.child(new FlexContainer('row').contentSized()
.css('font-size', 'larger')
.css('align-items', 'center')
.child(new ToggleSidebarButtonWidget().contentSized())
.child(new NoteTitleWidget()
.contentSized()
.css("position: relative;")
.css("top: 5px;")
.css("padding-left", "0.5em")
)
.css("padding-left", "0.5em"))
.child(new MobileDetailMenuWidget(true).contentSized())
.child(new CloseDetailButtonWidget().contentSized()))
)
.child(new SharedInfoWidget())
.child(new FloatingButtons()
.child(new EditButton())

View File

@ -1,16 +0,0 @@
import BasicWidget from "../basic_widget.js";
const TPL = `
<button type="button" class="action-button d-sm-none d-md-none d-lg-none d-xl-none" aria-label="Close" style="padding-top: 10px;">
<span aria-hidden="true">&times;</span>
</button>`;
class CloseDetailButtonWidget extends BasicWidget {
doRender() {
this.$widget = $(TPL);
this.$widget.on('click', () => this.triggerCommand('setActiveScreen', {screen:'tree'}));
}
}
export default CloseDetailButtonWidget;

View File

@ -12,7 +12,9 @@ export default class SidebarContainer extends FlexContainer {
super.doRender();
this.$widget.on("click", () => {
this.triggerEvent('activeScreenChanged', "detail");
this.triggerCommand('setActiveScreen', {
screen: "detail"
});
});
}

View File

@ -0,0 +1,16 @@
import BasicWidget from "../basic_widget.js";
const TPL = `
<button type="button" class="action-button bx bx-sidebar" style="padding-top: 10px;"></button>`;
class ToggleSidebarButtonWidget extends BasicWidget {
doRender() {
this.$widget = $(TPL);
this.$widget.on('click', () => this.triggerCommand('setActiveScreen', {
screen: 'tree'
}));
}
}
export default ToggleSidebarButtonWidget;