TriliumNext/Trilium
1
0
Fork 0
mirror of https://github.com/TriliumNext/Trilium.git synced 2025-12-10 03:53:37 -06:00
Code Issues 1.1k Packages Projects Releases 10 Wiki Activity

feat(tab_navigation): add the buttons on vertical layout

Browse Source
This commit is contained in:
Elian Doran 2025-12-09 14:06:57 +02:00
parent 2a9558e9c5
commit 346ad1e8a3
No known key found for this signature in database
3 changed files with 25 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
apps/client/src/layouts/desktop_layout.tsx
View File

@ -45,6 +45,7 @@ import PromotedAttributes from "../widgets/PromotedAttributes.jsx";
import SpacerWidget from "../widgets/launch_bar/SpacerWidget.jsx";
import LauncherContainer from "../widgets/launch_bar/LauncherContainer.jsx";
import Breadcrumb from "../widgets/Breadcrumb.jsx";
import TabHistoryNavigationButtons from "../widgets/TabHistoryNavigationButtons.jsx";
export default class DesktopLayout {
@ -102,7 +103,12 @@ export default class DesktopLayout {
new FlexContainer("column")
.id("rest-pane")
.css("flex-grow", "1")
.optChild(!fullWidthTabBar, new FlexContainer("row").child(new TabRowWidget()).optChild(customTitleBarButtons, <TitleBarButtons />).css("height", "40px"))
.optChild(!fullWidthTabBar,
new FlexContainer("row")
.child(<TabHistoryNavigationButtons />)
.child(new TabRowWidget())
.optChild(customTitleBarButtons, <TitleBarButtons />)
.css("height", "40px"))
.child(
new FlexContainer("row")
.filling()

7
apps/client/src/widgets/TabHistoryNavigationButtons.css Normal file
View File

@ -0,0 +1,7 @@
.component.tab-history-navigation-buttons {
contain: none;
flex-shrink: 0;
display: flex;
align-items: center;
margin-inline-end: 0.5em;
}

11
apps/client/src/widgets/TabHistoryNavigationButtons.tsx Normal file
View File

@ -0,0 +1,11 @@
import ActionButton from "./react/ActionButton";
import "./TabHistoryNavigationButtons.css";
export default function TabHistoryNavigationButtons() {
return (
<div className="tab-history-navigation-buttons">
<ActionButton icon="bx bx-left-arrow-alt" />
<ActionButton icon="bx bx-right-arrow-alt" />
</div>
)
}