gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-10-21 07:38:53 +02:00
Code Issues Actions 17 Packages Projects Releases Wiki Activity

feat(react/widgets): port toggle sidebar

Browse Source
This commit is contained in:
Elian Doran 2025-08-29 19:39:46 +03:00
parent ab48a28635
commit ec646809dd
No known key found for this signature in database
4 changed files with 22 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
apps/client/src/layouts/mobile_layout.tsx
View File

@ -3,7 +3,6 @@ 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 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";
@ -23,6 +22,7 @@ import FilePropertiesTab from "../widgets/ribbon/FilePropertiesTab.jsx";
import { useNoteContext } from "../widgets/react/hooks.jsx"; import { useNoteContext } from "../widgets/react/hooks.jsx";
import FloatingButtons from "../widgets/FloatingButtons.jsx"; import FloatingButtons from "../widgets/FloatingButtons.jsx";
import { MOBILE_FLOATING_BUTTONS } from "../widgets/FloatingButtonsDefinitions.jsx"; import { MOBILE_FLOATING_BUTTONS } from "../widgets/FloatingButtonsDefinitions.jsx";
import ToggleSidebarButton from "../widgets/mobile_widgets/toggle_sidebar_button.jsx";
const MOBILE_CSS = ` const MOBILE_CSS = `
<style> <style>
@ -139,7 +139,7 @@ export default class MobileLayout {
.contentSized() .contentSized()
.css("font-size", "larger") .css("font-size", "larger")
.css("align-items", "center") .css("align-items", "center")
.child(new ToggleSidebarButtonWidget().contentSized()) .child(<ToggleSidebarButton />)
.child(<NoteTitleWidget />) .child(<NoteTitleWidget />)
.child(new MobileDetailMenuWidget(true).contentSized()) .child(new MobileDetailMenuWidget(true).contentSized())
) )

3
apps/client/src/translations/en/translation.json
View File

@ -1682,7 +1682,8 @@
"hoist-this-note-workspace": "Hoist this note (workspace)", "hoist-this-note-workspace": "Hoist this note (workspace)",
"refresh-saved-search-results": "Refresh saved search results", "refresh-saved-search-results": "Refresh saved search results",
"create-child-note": "Create child note", "create-child-note": "Create child note",
"unhoist": "Unhoist" "unhoist": "Unhoist",
"toggle-sidebar": "Toggle sidebar"
}, },
"title_bar_buttons": { "title_bar_buttons": {
"window-on-top": "Keep Window on Top" "window-on-top": "Keep Window on Top"

18
apps/client/src/widgets/mobile_widgets/toggle_sidebar_button.ts
View File

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

18
apps/client/src/widgets/mobile_widgets/toggle_sidebar_button.tsx Normal file
View File

@ -0,0 +1,18 @@
import { useContext } from "preact/hooks";
import ActionButton from "../react/ActionButton";
import { ParentComponent } from "../react/react_utils";
import { t } from "../../services/i18n";
export default function ToggleSidebarButton() {
const parentComponent = useContext(ParentComponent);
return (
<ActionButton
icon="bx bx-sidebar"
text={t("note_tree.toggle-sidebar")}
onClick={() => parentComponent?.triggerCommand("setActiveScreen", {
screen: "tree"
})}
/>
)
}