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(breadcrumb_badges): basic shrink support

Browse Source
This commit is contained in:
Elian Doran 2025-12-10 13:03:06 +02:00
parent 07b76b80f4
commit 9f274883e3
No known key found for this signature in database
2 changed files with 26 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
apps/client/src/widgets/BreadcrumbBadges.css
View File

@ -5,19 +5,21 @@
.breadcrumb-badges {
display: flex;
gap: 5px;
min-width: 0;
flex-shrink: 1;
overflow: hidden;
--badge-radius: 12px;
.breadcrumb-badge {
display: flex;
align-items: center;
padding: 2px 6px;
border-radius: 12px;
border-radius: var(--badge-radius);
font-size: 0.75em;
background-color: var(--color, --badge-background-color);
background-color: var(--color, var(--badge-background-color));
color: white;
min-width: 0;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
flex-shrink: 1;
&.clickable {
cursor: pointer;
@ -36,13 +38,30 @@
color: inherit;
text-decoration: none;
}
> * {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
.dropdown {
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-badge {
border-radius: 0;
}
.btn {
border: 0;
margin: 0;

4
apps/client/src/widgets/BreadcrumbBadges.tsx
View File

@ -112,7 +112,7 @@ function Badge({ icon, className, text, tooltip, onClick, href }: BadgeProps) {
className={clsx("breadcrumb-badge", className, { "clickable": !!onClick })}
onClick={onClick}
>
{href ? <a href={href}>{content}</a> : content}
{href ? <a href={href}>{content}</a> : <span>{content}</span>}
</div>
);
}
@ -130,7 +130,7 @@ function BadgeWithDropdown({ children, tooltip, className, dropdownOptions, ...p
hideToggleArrow
title={tooltip}
titlePosition="bottom"
dropdownOptions={{ popperConfig: { placement: "bottom" } }}
dropdownOptions={{ popperConfig: { placement: "bottom", strategy: "fixed" } }}
{...dropdownOptions}
>{children}</Dropdown>
);