gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-12-12 10:24:23 +01:00
Code Issues Actions 7 Packages Projects Releases Wiki Activity

feat(layout/status_bar): integrate breadcrumbs

Browse Source
This commit is contained in:
Elian Doran 2025-12-12 00:21:40 +02:00
parent 9ee3c48485
commit 2f44b9dc59
No known key found for this signature in database
4 changed files with 69 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -143,7 +143,6 @@ export default class DesktopLayout {
new FlexContainer("row")
.class("breadcrumb-row")
.cssBlock(".breadcrumb-row > * { margin: 5px; }")
.child(<Breadcrumb />)
.optChild(isNewLayout, <BreadcrumbBadges />)
.child(<SpacerWidget baseSize={0} growthFactor={1} />)
.child(<MovePaneButton direction="left" />)

128
apps/client/src/widgets/Breadcrumb.css
View File

@ -1,9 +1,7 @@
.breadcrumb-row {
position: relative;
height: 30px;
min-height: 30px;
align-items: center;
padding: 10px;
container-type: inline-size;
@container (max-width: 700px) {
@ -47,72 +45,72 @@
margin: 0;
}
}
.breadcrumb {
display: flex;
margin: 0;
align-items: center;
font-size: 0.9em;
gap: 0.25em;
flex-wrap: nowrap;
overflow: hidden;
max-width: 85%;
> span,
> span > span {
display: flex;
align-items: center;
min-width: 0;
a {
color: inherit;
text-decoration: none;
min-width: 0;
max-width: 150px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
display: block;
flex-shrink: 2;
}
}
> span:last-of-type a {
max-width: 300px;
flex-shrink: 1;
}
ul {
flex-direction: column;
list-style-type: none;
margin: 0;
padding: 0;
}
.dropdown-item span,
.dropdown-item strong,
.breadcrumb-last-item {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
display: block;
max-width: 300px;
}
.breadcrumb-last-item {
text-decoration: none;
color: unset;
cursor: text;
}
input {
padding: 0 10px;
width: 200px;
}
}
}
body.experimental-feature-new-layout .breadcrumb-row {
padding-inline-end: 0;
}
.component.breadcrumb {
contain: none;
display: flex;
margin: 0;
align-items: center;
font-size: 0.9em;
gap: 0.25em;
flex-wrap: nowrap;
overflow: hidden;
max-width: 85%;
> span,
> span > span {
display: flex;
align-items: center;
min-width: 0;
a {
color: inherit;
text-decoration: none;
min-width: 0;
max-width: 150px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
display: block;
flex-shrink: 2;
}
}
> span:last-of-type a {
max-width: 300px;
flex-shrink: 1;
}
ul {
flex-direction: column;
list-style-type: none;
margin: 0;
padding: 0;
}
.dropdown-item span,
.dropdown-item strong,
.breadcrumb-last-item {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
display: block;
max-width: 300px;
}
.breadcrumb-last-item {
text-decoration: none;
color: unset;
cursor: text;
}
input {
padding: 0 10px;
width: 200px;
}
}

2
apps/client/src/widgets/layout/StatusBar.css
View File

@ -1,3 +1,5 @@
.component.status-bar {
contain: none;
border-top: 1px solid var(--main-border-color);
background-color: var(--left-pane-background-color)
}

5
apps/client/src/widgets/layout/StatusBar.tsx
View File

@ -1,9 +1,12 @@
import Breadcrumb from "../Breadcrumb";
import "./StatusBar.css";
export default function StatusBar() {
return (
<div className="status-bar">
Status bar goes here.
<div className="breadcrumb-row">
<Breadcrumb />
</div>
</div>
);
}