feat: add maximize/minimize buttons to namespace drawer
Add toolbar with maximize/minimize and close buttons to namespace detail drawer, matching Headlamp's native drawer behavior. Changes: - Add maximize/minimize button (⊡/⊟) to toggle drawer width - Maximized width: calc(100vw - 240px) to avoid covering sidebar - Normal width: 1000px - Add smooth transition animation (0.3s) - Add hover effects using MUI theme variables - Improve close button styling with hover state - Add accessibility labels and tooltips Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com> Co-Authored-By: Happy <yesreply@happy.engineering>
This commit is contained in:
@@ -44,6 +44,7 @@ interface NamespaceDetailPanelProps {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function NamespaceDetailPanel({ namespace, onClose }: NamespaceDetailPanelProps) {
|
function NamespaceDetailPanel({ namespace, onClose }: NamespaceDetailPanelProps) {
|
||||||
|
const [isMaximized, setIsMaximized] = React.useState(false);
|
||||||
const { data, loading, error } = usePolarisDataContext();
|
const { data, loading, error } = usePolarisDataContext();
|
||||||
|
|
||||||
if (loading) {
|
if (loading) {
|
||||||
@@ -107,13 +108,14 @@ function NamespaceDetailPanel({ namespace, onClose }: NamespaceDetailPanelProps)
|
|||||||
right: 0;
|
right: 0;
|
||||||
top: 0;
|
top: 0;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
width: 1000px;
|
width: ${isMaximized ? 'calc(100vw - 240px)' : '1000px'};
|
||||||
background-color: var(--mui-palette-background-default, #fafafa);
|
background-color: var(--mui-palette-background-default, #fafafa);
|
||||||
color: var(--mui-palette-text-primary);
|
color: var(--mui-palette-text-primary);
|
||||||
box-shadow: -2px 0 8px rgba(0,0,0,0.15);
|
box-shadow: -2px 0 8px rgba(0,0,0,0.15);
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
z-index: 1200;
|
z-index: 1200;
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
|
transition: width 0.3s ease;
|
||||||
}
|
}
|
||||||
`}
|
`}
|
||||||
</style>
|
</style>
|
||||||
@@ -129,20 +131,54 @@ function NamespaceDetailPanel({ namespace, onClose }: NamespaceDetailPanelProps)
|
|||||||
<h2 style={{ margin: 0, color: 'var(--mui-palette-text-primary)' }}>
|
<h2 style={{ margin: 0, color: 'var(--mui-palette-text-primary)' }}>
|
||||||
Polaris — {namespace}
|
Polaris — {namespace}
|
||||||
</h2>
|
</h2>
|
||||||
<button
|
<div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
|
||||||
onClick={onClose}
|
<button
|
||||||
style={{
|
onClick={() => setIsMaximized(!isMaximized)}
|
||||||
border: 'none',
|
style={{
|
||||||
background: 'transparent',
|
border: 'none',
|
||||||
fontSize: '24px',
|
background: 'transparent',
|
||||||
cursor: 'pointer',
|
fontSize: '20px',
|
||||||
padding: '0 8px',
|
cursor: 'pointer',
|
||||||
color: 'var(--mui-palette-text-primary)',
|
padding: '4px 8px',
|
||||||
}}
|
color: 'var(--mui-palette-text-secondary, #666)',
|
||||||
aria-label="Close panel"
|
borderRadius: '4px',
|
||||||
>
|
}}
|
||||||
×
|
onMouseEnter={e => {
|
||||||
</button>
|
e.currentTarget.style.backgroundColor =
|
||||||
|
'var(--mui-palette-action-hover, rgba(0, 0, 0, 0.04))';
|
||||||
|
}}
|
||||||
|
onMouseLeave={e => {
|
||||||
|
e.currentTarget.style.backgroundColor = 'transparent';
|
||||||
|
}}
|
||||||
|
aria-label={isMaximized ? 'Minimize panel' : 'Maximize panel'}
|
||||||
|
title={isMaximized ? 'Minimize' : 'Maximize'}
|
||||||
|
>
|
||||||
|
{isMaximized ? '⊟' : '⊡'}
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={onClose}
|
||||||
|
style={{
|
||||||
|
border: 'none',
|
||||||
|
background: 'transparent',
|
||||||
|
fontSize: '24px',
|
||||||
|
cursor: 'pointer',
|
||||||
|
padding: '4px 8px',
|
||||||
|
color: 'var(--mui-palette-text-secondary, #666)',
|
||||||
|
borderRadius: '4px',
|
||||||
|
}}
|
||||||
|
onMouseEnter={e => {
|
||||||
|
e.currentTarget.style.backgroundColor =
|
||||||
|
'var(--mui-palette-action-hover, rgba(0, 0, 0, 0.04))';
|
||||||
|
}}
|
||||||
|
onMouseLeave={e => {
|
||||||
|
e.currentTarget.style.backgroundColor = 'transparent';
|
||||||
|
}}
|
||||||
|
aria-label="Close panel"
|
||||||
|
title="Close"
|
||||||
|
>
|
||||||
|
×
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<SectionBox title="External">
|
<SectionBox title="External">
|
||||||
|
|||||||
Reference in New Issue
Block a user