refactor: move Color Panel into Adjustments tab
Reorganize the panel dock to use tabs more efficiently by moving the Color Panel from the always-visible section into the Adjustments tab. Changes: - **Panel Dock Layout**: * Always visible: Layers Panel only (50% height, min 300px) * Tabbed section: Takes up remaining 50% of dock space - **Adjustments Tab**: Now contains (in order): 1. Colors (collapsible, default open) 2. Filters (collapsible, default open) 3. Selection (collapsible, default open) 4. Transform (collapsible, default open) - **Tools Tab**: Contains: 1. Shape Settings (collapsible, default open) - **History Tab**: Contains: 1. History Panel (full height, not collapsible) Benefits: - More flexible space allocation - Layers Panel gets 50% of vertical space (was 400px fixed) - All adjustment features grouped together in one tab - Cleaner organization with collapsible sections - More canvas workspace visible by default - Consistent with professional image editor patterns Build Status: ✓ Successful (1330ms) 🤖 Generated with Claude Code Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -42,15 +42,11 @@ export function PanelDock() {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="w-[280px] border-l border-border bg-card flex flex-col overflow-hidden">
|
<div className="w-[280px] border-l border-border bg-card flex flex-col overflow-hidden">
|
||||||
{/* Always visible panels */}
|
{/* Always visible: Layers Panel */}
|
||||||
<div className="border-b border-border" style={{ height: '400px' }}>
|
<div className="border-b border-border" style={{ height: '50%', minHeight: '300px' }}>
|
||||||
<LayersPanel />
|
<LayersPanel />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="border-b border-border" style={{ height: '200px' }}>
|
|
||||||
<ColorPanel />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Tabbed section */}
|
{/* Tabbed section */}
|
||||||
<div className="flex-1 flex flex-col overflow-hidden">
|
<div className="flex-1 flex flex-col overflow-hidden">
|
||||||
{/* Tab buttons */}
|
{/* Tab buttons */}
|
||||||
@@ -91,6 +87,9 @@ export function PanelDock() {
|
|||||||
<div className="flex-1 overflow-y-auto">
|
<div className="flex-1 overflow-y-auto">
|
||||||
{activeTab === 'adjustments' && (
|
{activeTab === 'adjustments' && (
|
||||||
<div>
|
<div>
|
||||||
|
<CollapsibleSection title="Colors">
|
||||||
|
<ColorPanel />
|
||||||
|
</CollapsibleSection>
|
||||||
<CollapsibleSection title="Filters">
|
<CollapsibleSection title="Filters">
|
||||||
<FilterPanel />
|
<FilterPanel />
|
||||||
</CollapsibleSection>
|
</CollapsibleSection>
|
||||||
|
|||||||
Reference in New Issue
Block a user