diff --git a/apps/client/src/widgets/Breadcrumb.tsx b/apps/client/src/widgets/Breadcrumb.tsx index 83ff966b8..c218f7cea 100644 --- a/apps/client/src/widgets/Breadcrumb.tsx +++ b/apps/client/src/widgets/Breadcrumb.tsx @@ -14,6 +14,7 @@ import NoteLink from "./react/NoteLink"; import link_context_menu from "../menus/link_context_menu"; import { TitleEditor } from "./collections/board"; import server from "../services/server"; +import { NoteInfoBadge } from "./BreadcrumbBadges"; const COLLAPSE_THRESHOLD = 5; const INITIAL_ITEMS = 2; @@ -119,7 +120,10 @@ function BreadcrumbItem({ index, notePath, noteContext, notePathLength }: { inde } if (index === notePathLength - 1) { - return ; + return <> + + + ; } return ; diff --git a/apps/client/src/widgets/BreadcrumbBadges.css b/apps/client/src/widgets/BreadcrumbBadges.css index 919cb6353..a8fcd6657 100644 --- a/apps/client/src/widgets/BreadcrumbBadges.css +++ b/apps/client/src/widgets/BreadcrumbBadges.css @@ -9,67 +9,57 @@ flex-shrink: 1; overflow: hidden; --badge-radius: 12px; +} - .breadcrumb-badge { - display: flex; - align-items: center; - padding: 2px 6px; - border-radius: var(--badge-radius); - font-size: 0.75em; - background-color: var(--color, transparent); - color: white; - min-width: 0; - flex-shrink: 1; +.breadcrumb-badge { + display: flex; + align-items: center; + padding: 2px 6px; + border-radius: var(--badge-radius); + font-size: 0.75em; + background-color: var(--color, transparent); + color: white; + min-width: 0; + flex-shrink: 1; - &.clickable { - cursor: pointer; + &.clickable { + cursor: pointer; - &:hover { - background-color: color-mix(in srgb, var(--color, --badge-background-color) 80%, black); - } - } - - &.temporarily-editable-badge { --color: #4fa52b; } - &.read-only-badge { --color: #e33f3b; } - &.share-badge { --color: #3b82f6; } - &.backlinks-badge { color: var(--badge-text-color); } - - a { - color: inherit; - text-decoration: none; - } - - > * { - min-width: 0; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; + &:hover { + background-color: color-mix(in srgb, var(--color, --badge-background-color) 80%, black); } } - .dropdown { + &.temporarily-editable-badge { --color: #4fa52b; } + &.read-only-badge { --color: #e33f3b; } + &.share-badge { --color: #3b82f6; } + &.backlinks-badge { color: var(--badge-text-color); } + + a { + color: inherit !important; + text-decoration: none; + } + + > * { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; - border-radius: var(--badge-radius); + } +} - &.dropdown-backlinks-badge .dropdown-menu { - min-width: 500px; - } +.breadcrumb-dropdown-badge { + min-width: 0; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + border-radius: var(--badge-radius); - .breadcrumb-badge { - border-radius: 0; - } - - .btn { - border: 0; - margin: 0; - padding: 0; - } + &.dropdown-backlinks-badge .dropdown-menu { + min-width: 500px; } - .dropdown-note-info-badge { + &.dropdown-note-info-badge { .dropdown-menu.show ul { list-style-type: none; padding: 0.5em; @@ -93,4 +83,13 @@ } } + .breadcrumb-badge { + border-radius: 0; + } + + .btn { + border: 0; + margin: 0; + padding: 0; + } } diff --git a/apps/client/src/widgets/BreadcrumbBadges.tsx b/apps/client/src/widgets/BreadcrumbBadges.tsx index a50eab5fe..51c346749 100644 --- a/apps/client/src/widgets/BreadcrumbBadges.tsx +++ b/apps/client/src/widgets/BreadcrumbBadges.tsx @@ -12,6 +12,7 @@ import { useIsNoteReadOnly, useNoteContext, useStaticTooltip } from "./react/hoo import Icon from "./react/Icon"; import { NoteSizeWidget, useNoteMetadata } from "./ribbon/NoteInfoTab"; import { useShareInfo } from "./shared_info"; +import FNote from "../entities/fnote"; export default function BreadcrumbBadges() { return ( @@ -19,13 +20,11 @@ export default function BreadcrumbBadges() { - ); } -function NoteInfoBadge() { - const { note } = useNoteContext(); +export function NoteInfoBadge({ note }: { note: FNote | null | undefined }) { const { metadata, ...sizeProps } = useNoteMetadata(note); return (note && @@ -156,7 +155,7 @@ function BadgeWithDropdown({ children, tooltip, className, dropdownOptions, ...p }) { return ( } noDropdownListStyle noSelectButtonStyle