fix: print and open-standalone icon-only, right-aligned in toolbar

This commit is contained in:
Agent Zero
2026-07-28 12:42:49 +02:00
parent 7194240a32
commit 65bb9c9866
2 changed files with 27 additions and 19 deletions
@@ -15,7 +15,7 @@ function ToolbarButton({ item }: { item: ToolbarItem }) {
title={item.label} title={item.label}
> >
{item.icon && <span className="w-4 h-4 flex-shrink-0">{item.icon}</span>} {item.icon && <span className="w-4 h-4 flex-shrink-0">{item.icon}</span>}
<span className="hidden sm:inline">{item.label}</span> {!item.iconOnly && <span className="hidden sm:inline">{item.label}</span>}
</button> </button>
); );
} }
@@ -214,13 +214,10 @@ export function PluginToolbar() {
groups[g].push(item); groups[g].push(item);
} }
const groupNames = Object.keys(groups); const groupNames = Object.keys(groups);
const rightGroupNames = groupNames.filter((g) => g.startsWith('zz-right'));
const leftGroupNames = groupNames.filter((g) => !g.startsWith('zz-right'));
return ( const renderGroup = (groupName: string, gi: number) => (
<div
className="flex items-center gap-1 px-2 sm:px-3 py-1.5 bg-white border-b border-secondary-200 min-h-[43px] overflow-visible relative z-30"
data-testid="plugin-toolbar"
>
{groupNames.map((groupName, gi) => (
<React.Fragment key={groupName}> <React.Fragment key={groupName}>
{gi > 0 && <div className="w-px h-5 bg-secondary-200 mx-1" />} {gi > 0 && <div className="w-px h-5 bg-secondary-200 mx-1" />}
<div className="flex items-center gap-1"> <div className="flex items-center gap-1">
@@ -233,7 +230,16 @@ export function PluginToolbar() {
})} })}
</div> </div>
</React.Fragment> </React.Fragment>
))} );
return (
<div
className="flex items-center gap-1 px-2 sm:px-3 py-1.5 bg-white border-b border-secondary-200 min-h-[43px] overflow-visible relative z-30"
data-testid="plugin-toolbar"
>
{leftGroupNames.map((groupName, gi) => renderGroup(groupName, gi))}
{rightGroupNames.length > 0 && <div className="flex-1" />}
{rightGroupNames.map((groupName, gi) => renderGroup(groupName, gi))}
</div> </div>
); );
} }
+6 -4
View File
@@ -351,24 +351,26 @@ export function ContactsListPage() {
icon: <Bookmark className="w-3.5 h-3.5" strokeWidth={2} />, icon: <Bookmark className="w-3.5 h-3.5" strokeWidth={2} />,
onClick: () => setSavedFiltersOpen(true), onClick: () => setSavedFiltersOpen(true),
}, },
// Print // Print — icon only, right side
{ {
id: 'print', id: 'print',
plugin: 'contacts', plugin: 'contacts',
label: t('common.print', 'Drucken'), label: t('common.print', 'Drucken'),
type: 'button' as const, type: 'button' as const,
group: 'actions', group: 'zz-right',
icon: <Printer className="w-3.5 h-3.5" strokeWidth={2} />, icon: <Printer className="w-3.5 h-3.5" strokeWidth={2} />,
iconOnly: true,
onClick: () => window.print(), onClick: () => window.print(),
}, },
// Open standalone // Open standalone — icon only, right side
{ {
id: 'open-standalone', id: 'open-standalone',
plugin: 'contacts', plugin: 'contacts',
label: 'In neuem Fenster', label: 'In neuem Fenster',
type: 'button' as const, type: 'button' as const,
group: 'actions', group: 'zz-right',
icon: <ExternalLink className="w-3.5 h-3.5" strokeWidth={2} />, icon: <ExternalLink className="w-3.5 h-3.5" strokeWidth={2} />,
iconOnly: true,
onClick: () => window.open('/contacts-standalone', '_blank', 'width=1200,height=800'), onClick: () => window.open('/contacts-standalone', '_blank', 'width=1200,height=800'),
}, },
]; ];