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(layout): implement read-only badge

Browse Source
This commit is contained in:
Elian Doran 2025-12-09 21:06:28 +02:00
parent a0f0da64b4
commit 6b50d9b087
No known key found for this signature in database
3 changed files with 50 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -50,6 +50,7 @@ import { isExperimentalFeatureEnabled } from "../services/experimental_features.
import NoteActions from "../widgets/ribbon/NoteActions.jsx";
import FormattingToolbar from "../widgets/ribbon/FormattingToolbar.jsx";
import StandaloneRibbonAdapter from "../widgets/ribbon/components/StandaloneRibbonAdapter.jsx";
import NoteBadges from "../widgets/BreadcrumbBadges.jsx";
export default class DesktopLayout {
@ -138,6 +139,7 @@ export default class DesktopLayout {
.class("breadcrumb-row")
.cssBlock(".breadcrumb-row > * { margin: 5px; }")
.child(<Breadcrumb />)
.child(<NoteBadges />)
.child(<SpacerWidget baseSize={0} growthFactor={1} />)
.child(<MovePaneButton direction="left" />)
.child(<MovePaneButton direction="right" />)
@ -155,7 +157,7 @@ export default class DesktopLayout {
.filling()
.optChild(isNewLayout, titleRow)
.child(new ContentHeader()
.child(<ReadOnlyNoteInfoBar />)
.optChild(!isNewLayout, <ReadOnlyNoteInfoBar />)
.child(<SharedInfo />)
)
.child(<PromotedAttributes />)

15
apps/client/src/widgets/BreadcrumbBadges.css Normal file
View File

@ -0,0 +1,15 @@
.component.breadcrumb-badges {
display: flex;
gap: 5px;
contain: none;
.breadcrumb-badge {
display: flex;
align-items: center;
padding: 2px 6px;
border-radius: 12px;
font-size: 0.75em;
background-color: var(--badge-background-color);
color: var(--badge-text-color);
}
}

32
apps/client/src/widgets/BreadcrumbBadges.tsx Normal file
View File

@ -0,0 +1,32 @@
import "./BreadcrumbBadges.css";
import { ComponentChildren } from "preact";
import { useIsNoteReadOnly, useNoteContext } from "./react/hooks";
export default function NoteBadges() {
return (
<div className="breadcrumb-badges">
<ReadOnlyBadge />
</div>
);
}
function ReadOnlyBadge() {
const { note, noteContext } = useNoteContext();
const { isReadOnly, enableEditing } = useIsNoteReadOnly(note, noteContext);
const isExplicitReadOnly = note?.isLabelTruthy("readOnly");
return (isReadOnly &&
<Badge onClick={() => enableEditing()}>
{isExplicitReadOnly ? "Read-only" : "Auto read-only"}
</Badge>
);
}
function Badge({ children, onClick }: { children: ComponentChildren, onClick?: () => void }) {
return (
<div className="breadcrumb-badge" onClick={onClick}>
{children}
</div>
);
}