mirror of
https://github.com/TriliumNext/Trilium.git
synced 2025-12-10 03:53:37 -06:00
feat(layout): add icon to the badge
This commit is contained in:
parent
6b50d9b087
commit
f42031c8de
@ -2,6 +2,7 @@ import "./BreadcrumbBadges.css";
|
|||||||
|
|
||||||
import { ComponentChildren } from "preact";
|
import { ComponentChildren } from "preact";
|
||||||
import { useIsNoteReadOnly, useNoteContext } from "./react/hooks";
|
import { useIsNoteReadOnly, useNoteContext } from "./react/hooks";
|
||||||
|
import Icon from "./react/Icon";
|
||||||
|
|
||||||
export default function NoteBadges() {
|
export default function NoteBadges() {
|
||||||
return (
|
return (
|
||||||
@ -17,15 +18,18 @@ function ReadOnlyBadge() {
|
|||||||
const isExplicitReadOnly = note?.isLabelTruthy("readOnly");
|
const isExplicitReadOnly = note?.isLabelTruthy("readOnly");
|
||||||
|
|
||||||
return (isReadOnly &&
|
return (isReadOnly &&
|
||||||
<Badge onClick={() => enableEditing()}>
|
<Badge
|
||||||
|
icon="bx bx-lock"
|
||||||
|
onClick={() => enableEditing()}>
|
||||||
{isExplicitReadOnly ? "Read-only" : "Auto read-only"}
|
{isExplicitReadOnly ? "Read-only" : "Auto read-only"}
|
||||||
</Badge>
|
</Badge>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
function Badge({ children, onClick }: { children: ComponentChildren, onClick?: () => void }) {
|
function Badge({ icon, children, onClick }: { icon: string, children: ComponentChildren, onClick?: () => void }) {
|
||||||
return (
|
return (
|
||||||
<div className="breadcrumb-badge" onClick={onClick}>
|
<div className="breadcrumb-badge" onClick={onClick}>
|
||||||
|
<Icon icon={icon} />
|
||||||
{children}
|
{children}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user