mirror of
https://github.com/TriliumNext/Notes.git
synced 2025-07-29 19:12:27 +08:00
feat(mobile): add button to toggle sidebar
This commit is contained in:
parent
b00ca234f5
commit
857f33db08
@ -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())
|
||||||
|
@ -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">×</span>
|
|
||||||
</button>`;
|
|
||||||
|
|
||||||
class CloseDetailButtonWidget extends BasicWidget {
|
|
||||||
doRender() {
|
|
||||||
this.$widget = $(TPL);
|
|
||||||
|
|
||||||
this.$widget.on('click', () => this.triggerCommand('setActiveScreen', {screen:'tree'}));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default CloseDetailButtonWidget;
|
|
@ -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"
|
||||||
|
});
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -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;
|
Loading…
x
Reference in New Issue
Block a user