65 lines
2.5 KiB
Markdown
65 lines
2.5 KiB
Markdown
|
# Plan: Iterate Layers Panel Visual Design
|
||
|
|
|
||
|
|
## Goal
|
||
|
|
Iteratively improve the iced layers panel to match the Photoshop reference screenshots. Test, take screenshots, compare, and fix until it looks right.
|
||
|
|
|
||
|
|
## Visual Issues to Fix (from code analysis)
|
||
|
|
|
||
|
|
### 1. Active Layer Row Styling
|
||
|
|
**Current**: `active_item_bg` uses `bg_active` (#404040) with 1px accent border
|
||
|
|
**Photoshop**: Subtle blue-tinted background fill, no prominent border
|
||
|
|
**Fix**: Change active row to use `accent` color at low alpha (0.15-0.2) for background, remove or淡化 the border
|
||
|
|
|
||
|
|
### 2. Layer Row Spacing
|
||
|
|
**Current**: `spacing(1)` between rows — too tight
|
||
|
|
**Photoshop**: ~4px spacing between rows
|
||
|
|
**Fix**: Increase to `spacing(2)` or `spacing(3)`
|
||
|
|
|
||
|
|
### 3. Visibility Icon
|
||
|
|
**Current**: `◉`/`○` Unicode characters
|
||
|
|
**Photoshop**: Eye icon (👁)
|
||
|
|
**Fix**: Use eye emoji or simpler toggle indicator
|
||
|
|
|
||
|
|
### 4. Thumbnail Border
|
||
|
|
**Current**: No border on thumbnails
|
||
|
|
**Photoshop**: 1px subtle border around thumbnails
|
||
|
|
**Fix**: Add container with border around thumbnail image
|
||
|
|
|
||
|
|
### 5. Layer Name Font
|
||
|
|
**Current**: Monospace font for active layer
|
||
|
|
**Photoshop**: Proportional font for all layers
|
||
|
|
**Fix**: Remove `.font(iced::Font::MONOSPACE)` from active layer name
|
||
|
|
|
||
|
|
### 6. Controls Layout
|
||
|
|
**Current**: Blend mode, opacity, lock in separate rows
|
||
|
|
**Photoshop**: More compact, blend mode + opacity on same row
|
||
|
|
**Fix**: Reorganize controls to be more compact
|
||
|
|
|
||
|
|
### 7. Button Styling
|
||
|
|
**Current**: Default iced button styling
|
||
|
|
**Photoshop**: Flat buttons with subtle borders, no background
|
||
|
|
**Fix**: Add button style function for flat Photoshop-like buttons
|
||
|
|
|
||
|
|
### 8. Panel Header
|
||
|
|
**Current**: "Layers" text with monospace font
|
||
|
|
**Photoshop**: Panel title with specific styling
|
||
|
|
**Fix**: Adjust header to match Photoshop's panel title style
|
||
|
|
|
||
|
|
## Implementation Steps
|
||
|
|
|
||
|
|
1. **Fix active row styling** — Change background to accent color at low alpha
|
||
|
|
2. **Increase row spacing** — Change from `spacing(1)` to `spacing(2)`
|
||
|
|
3. **Fix visibility icon** — Use eye emoji or simpler indicator
|
||
|
|
4. **Add thumbnail border** — Wrap thumbnail in container with border
|
||
|
|
5. **Fix font** — Remove monospace from active layer name
|
||
|
|
6. **Reorganize controls** — Make more compact
|
||
|
|
7. **Add button styles** — Create flat Photoshop-like button style
|
||
|
|
8. **Fix panel header** — Match Photoshop's title style
|
||
|
|
|
||
|
|
## Verification
|
||
|
|
1. Build and run the app
|
||
|
|
2. Take screenshot of Layers panel
|
||
|
|
3. Compare with Photoshop reference
|
||
|
|
4. Identify remaining differences
|
||
|
|
5. Repeat until satisfied
|