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 NoteDetailWidget from "../widgets/note_detail.js";
import QuickSearchWidget from "../widgets/quick_search.js"; import QuickSearchWidget from "../widgets/quick_search.js";
import NoteTreeWidget from "../widgets/note_tree.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 MobileDetailMenuWidget from "../widgets/mobile_widgets/mobile_detail_menu.js";
import ScreenContainer from "../widgets/mobile_widgets/screen_container.js"; import ScreenContainer from "../widgets/mobile_widgets/screen_container.js";
import ScrollingContainer from "../widgets/containers/scrolling_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 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 SidebarContainer from "../widgets/mobile_widgets/sidebar_container.js"; import SidebarContainer from "../widgets/mobile_widgets/sidebar_container.js";
const MOBILE_CSS = ` const MOBILE_CSS = `
@ -142,14 +141,14 @@ export default class MobileLayout {
.child(new FlexContainer('row').contentSized() .child(new FlexContainer('row').contentSized()
.css('font-size', 'larger') .css('font-size', 'larger')
.css('align-items', 'center') .css('align-items', 'center')
.child(new ToggleSidebarButtonWidget().contentSized())
.child(new NoteTitleWidget() .child(new NoteTitleWidget()
.contentSized() .contentSized()
.css("position: relative;") .css("position: relative;")
.css("top: 5px;") .css("top: 5px;")
.css("padding-left", "0.5em") .css("padding-left", "0.5em"))
)
.child(new MobileDetailMenuWidget(true).contentSized()) .child(new MobileDetailMenuWidget(true).contentSized())
.child(new CloseDetailButtonWidget().contentSized())) )
.child(new SharedInfoWidget()) .child(new SharedInfoWidget())
.child(new FloatingButtons() .child(new FloatingButtons()
.child(new EditButton()) .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(); super.doRender();
this.$widget.on("click", () => { 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;