Add Iced panel adapter and AI chat/script panels
- Implemented a theme system in `iced-panel-adapter` for consistent styling across panels. - Created `iced-panel-ai-chat` for an AI assistant interface, including message handling and UI components. - Developed `iced-panel-script` for a DSL editor with execution capabilities, allowing procedural drawing commands. - Introduced message types for interaction in both chat and script panels. - Added color and theme management for improved visual consistency.
This commit is contained in:
@@ -0,0 +1,226 @@
|
||||
# Iced GUI — Photoshop-Style UI Overhaul Plan
|
||||
|
||||
## Goal
|
||||
Transform the iced GUI from a generic dark theme to a professional Photoshop-like appearance with proper toolbox, menus, panels, and window management.
|
||||
|
||||
---
|
||||
|
||||
## 1. Custom Window Frame (No OS Title Bar)
|
||||
|
||||
**Files:** `main.rs`, `app.rs`
|
||||
|
||||
### Changes:
|
||||
- Set `decorations: false` in iced window settings to hide OS title bar
|
||||
- Build custom title bar with: app icon, "HCIE" text, menu bar, window controls (min/max/close)
|
||||
- Add `Message::WindowDrag`, `Message::WindowMinimize`, `Message::WindowMaximize`, `Message::WindowClose`
|
||||
- Use `iced::window::drag(id)` for title bar drag-to-move
|
||||
- Use `iced::window::minimize(id, true)` for minimize
|
||||
- Use `iced::window::toggle_maximize(id)` for maximize
|
||||
- Title bar: 24px height, `#2a2a2a` background, subtle bottom border
|
||||
- Window controls: minimize/maximize/close buttons on right side (like Photoshop)
|
||||
|
||||
### Window Setup:
|
||||
```rust
|
||||
iced::application("HCIE", HcieIcedApp::update, HcieIcedApp::view)
|
||||
.window_settings(window::Settings {
|
||||
decorations: false,
|
||||
..Default::default()
|
||||
})
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 2. Photoshop-Style Theme
|
||||
|
||||
**Files:** `panels/styles.rs`, `theme.rs`
|
||||
|
||||
### Color Palette (matching Photoshop):
|
||||
| Token | Value | Usage |
|
||||
|-------|-------|-------|
|
||||
| `bg_app` | `#1e1e1e` | Main app background |
|
||||
| `bg_panel` | `#2d2d2d` | Panel backgrounds |
|
||||
| `bg_panel_header` | `#333333` | Panel title bars |
|
||||
| `bg_hover` | `#3a3a3a` | Hover states |
|
||||
| `bg_active` | `#404040` | Active/selected states |
|
||||
| `accent` | `#2d8ceb` | Blue accent (selection, active tool) |
|
||||
| `border` | `#1a1a1a` | Panel borders (very subtle) |
|
||||
| `border_high` | `#444444` | Emphasized borders |
|
||||
| `text_primary` | `#cccccc` | Primary text |
|
||||
| `text_secondary` | `#888888` | Secondary text |
|
||||
| `text_disabled` | `#555555` | Disabled text |
|
||||
| `canvas_bg` | `#262626` | Canvas area background |
|
||||
|
||||
### Style Functions to Update:
|
||||
- `panel_background()` — `#2d2d2d` with no visible border
|
||||
- `panel_header()` — `#333333` background, no horizontal rule
|
||||
- `active_item_bg()` — subtle `#404040` highlight (NOT blue tint)
|
||||
- `inactive_item_bg()` — transparent
|
||||
- `menubar_background()` — `#2a2a2a`
|
||||
- `statusbar_background()` — `#2a2a2a`
|
||||
- `sidebar_background()` — `#2d2d2d`
|
||||
- `titlebar_background()` — `#1e1e1e`
|
||||
|
||||
---
|
||||
|
||||
## 3. Toolbox with SVG Icons (Photoshop-Style)
|
||||
|
||||
**Files:** `sidebar/mod.rs`, new: `sidebar/tool_slots.rs`
|
||||
|
||||
### Layout:
|
||||
- **Single column** (default): 36px wide, icons only, no text labels
|
||||
- **Two-column mode**: Toggle button (◀/▶ arrow) at top expands to 72px
|
||||
- Toggle button: small arrow at top of toolbox
|
||||
- Tool buttons: 28x28px icons, 3px rounded corners
|
||||
- Active tool: subtle `#404040` background + `#2d8ceb` border
|
||||
- Hover: `#3a3a3a` background
|
||||
- Submenu indicator: small triangle for tools with sub-tools
|
||||
|
||||
### Tool Slots (matching egui's TOOL_SLOTS):
|
||||
```
|
||||
Slot 0: Move
|
||||
Slot 1: VectorSelect
|
||||
Slot 2: Select (rect)
|
||||
Slot 3: Lasso, PolygonSelect (submenu)
|
||||
Slot 4: MagicWand
|
||||
Slot 5: SmartSelect, VisionSelect (submenu)
|
||||
Slot 6: Crop
|
||||
Slot 7: Eyedropper
|
||||
Slot 8: Brush
|
||||
Slot 9: Pen
|
||||
Slot 10: Spray
|
||||
Slot 11: Eraser
|
||||
Slot 12: FloodFill
|
||||
Slot 13: Gradient
|
||||
Slot 14: Text
|
||||
Slot 15: VectorLine
|
||||
Slot 16: VectorRect
|
||||
Slot 17: VectorCircle
|
||||
Slot 18: Vector shapes (submenu: Arrow, Star, Polygon, etc.)
|
||||
Slot 19: Retouch (submenu: SpotRemoval, RedEye, SmartPatch)
|
||||
```
|
||||
|
||||
### SVG Icons:
|
||||
- Use existing SVG files from `hcie-egui-app/assets/icons/`
|
||||
- Copy SVG files to `hcie-iced-app/assets/icons/`
|
||||
- Use iced's `svg::Handle::from_path()` to load icons
|
||||
- Tint icons: active=`#2d8ceb`, default=`#cccccc`, hover=`#ffffff`
|
||||
- Icon size: 20x20px within 28x28 button
|
||||
|
||||
### Color Swatches (bottom of toolbox):
|
||||
- Overlapping fg/bg swatches (20x20 each, offset 2px)
|
||||
- Swap button (⇅) between them
|
||||
- Reset to B/W button
|
||||
|
||||
---
|
||||
|
||||
## 4. Panel Titles (Modern, No Blue Tint)
|
||||
|
||||
**Files:** `dock/view.rs`
|
||||
|
||||
### Current (bad):
|
||||
- Blue tinted background on active panel
|
||||
- Horizontal rule under title
|
||||
- Primitive appearance
|
||||
|
||||
### New (Photoshop-style):
|
||||
- Panel header: `#333333` background, 24px height
|
||||
- Title text: 11px, `#cccccc` color, no bold
|
||||
- No horizontal rule
|
||||
- Close/maximize buttons: subtle, appear on hover only
|
||||
- Active panel: slightly lighter header (`#3a3a3a`)
|
||||
- Panel border: 1px `#1a1a1a` (barely visible)
|
||||
|
||||
### Implementation:
|
||||
- Remove `horizontal_rule` from panel titles
|
||||
- Replace blue tint with neutral `#3a3a3a` for active
|
||||
- Make close/maximize buttons hover-only (opacity transition)
|
||||
- Add small panel icon next to title (from SVG assets)
|
||||
|
||||
---
|
||||
|
||||
## 5. Menu Dropdown (Overlay, Not Separate Panel)
|
||||
|
||||
**Files:** `panels/menus.rs`
|
||||
|
||||
### Current (bad):
|
||||
- Menu opens as a separate panel in the dock
|
||||
- Takes up space, pushes other content
|
||||
|
||||
### New (Photoshop-style):
|
||||
- Menu dropdown renders as an **overlay** on top of the UI
|
||||
- Dark background `#2d2d2d`, 1px border `#444444`
|
||||
- Items: 11px text, 24px height, hover highlight `#3a3a3a`
|
||||
- Keyboard shortcuts shown on right side in `#888888`
|
||||
- Separators: 1px line `#3a3a3a`
|
||||
- Click outside to close
|
||||
- Escape to close
|
||||
|
||||
### Implementation:
|
||||
- Track `active_menu: Option<usize>` in app state
|
||||
- When menu button clicked, set `active_menu = Some(idx)`
|
||||
- Render dropdown as a `Stack` overlay on top of main content
|
||||
- Use `iced::widget::mouse_area` wrapper to detect clicks outside
|
||||
- Menu items dispatch `Message::MenuAction(menu_idx, item_idx)`
|
||||
|
||||
---
|
||||
|
||||
## 6. Dock Manager (Draggable Panels)
|
||||
|
||||
**Files:** `dock/state.rs`, `dock/view.rs`
|
||||
|
||||
### Current:
|
||||
- Dock exists with PaneGrid but drag/drop may not be fully functional
|
||||
- Panel rearrangement limited
|
||||
|
||||
### New:
|
||||
- Ensure `on_drag(Message::PaneDragged)` is properly wired
|
||||
- Handle `DragEvent::Picked`, `DragEvent::Dropped`, `DragEvent::Canceled`
|
||||
- On `Dropped`: call `state.drop(pane, target)` for proper rearrangement
|
||||
- Add right-click context menu on panel titles (Pin, Float, Close)
|
||||
- Support panel undocking (float) and re-docking
|
||||
|
||||
### Implementation:
|
||||
- Wire `Message::PaneDragged` handler to call appropriate state methods
|
||||
- Add `PaneDrop(pane, target)` message that calls `state.drop()`
|
||||
- Add context menu overlay for panel title bars
|
||||
|
||||
---
|
||||
|
||||
## 7. Menu Items (Full Photoshop-Style)
|
||||
|
||||
**Files:** `panels/menus.rs`, `app.rs`
|
||||
|
||||
### Menu Structure:
|
||||
| Menu | Items |
|
||||
|------|-------|
|
||||
| File | New, Open, Open Recent, Save, Save As, Export PNG, Export JPEG, Close |
|
||||
| Edit | Undo, Redo, Cut, Copy, Paste, Select All, Deselect, Fill |
|
||||
| Image | Canvas Size, Image Size, Rotate CW, Rotate CCW, Flip H, Flip V |
|
||||
| Layer | New Layer, Duplicate, Delete, Merge Down, Flatten, Clear |
|
||||
| Filter | (all filter categories with submenus) |
|
||||
| Select | All, Deselect, Invert, Grow, Shrink, Feather |
|
||||
| View | Zoom In, Zoom Out, Fit Screen, 100%, Panel Toggles |
|
||||
| Window | Dock Profile, Reset Layout |
|
||||
| Help | About, Documentation |
|
||||
|
||||
---
|
||||
|
||||
## Execution Order
|
||||
|
||||
1. **Theme colors** — Update `styles.rs` with Photoshop palette
|
||||
2. **Custom title bar** — Hide OS decorations, build custom title bar
|
||||
3. **Toolbox SVG icons** — Copy SVGs, implement icon rendering
|
||||
4. **Toolbox layout** — Single column + expand toggle
|
||||
5. **Panel titles** — Remove blue tint, modernize
|
||||
6. **Menu overlay** — Implement dropdown overlay system
|
||||
7. **Dock drag/drop** — Wire pane rearrangement
|
||||
8. **Menu items** — Wire all menu actions
|
||||
|
||||
---
|
||||
|
||||
## Verification
|
||||
|
||||
1. Build: `cargo build -p hcie-iced-gui`
|
||||
2. Launch and compare with Photoshop screenshot
|
||||
3. Test: tool selection, drawing, color picking, menu dropdowns, panel rearrangement
|
||||
4. Screenshot comparison with Photoshop reference
|
||||
Reference in New Issue
Block a user