Implement Photopea theme and tool settings panel
- Added Photopea theme implementation report and design specifications. - Created tool options and settings panels to match Photopea's layout. - Implemented settings persistence to save and load user preferences. - Updated toolbar to include SVG icons and tool options in a single row. - Enhanced tool settings with specific parameters for each tool type. - Added functionality for resetting tool settings to defaults.
This commit is contained in:
@@ -0,0 +1,46 @@
|
||||
# Photopea Theme Implementation Report
|
||||
|
||||
## Date: 2026-07-14 (Final v5)
|
||||
## Status: Compiled successfully
|
||||
|
||||
## Yapılan Değişiklikler
|
||||
|
||||
### 1. Tool Settings Panel - Dock'a Taşındı
|
||||
- **Eski:** Sabit 200px genişlik, main area'da
|
||||
- **Yeni:** Dock paneli olarak diğer paneller gibi
|
||||
- **Konum:** Dock sistemi içinde sürüklenebilir/kapatılabilir
|
||||
- **Genişlik:** Dock tarafından yönetiliyor (sabit değil)
|
||||
|
||||
### 2. PaneType::ToolSettings Eklendi
|
||||
- `dock/state.rs` - PaneType enum'una eklendi
|
||||
- `dock/view.rs` - Panel rendering eklendi
|
||||
- `dock/view.rs` - Icon mapping eklendi
|
||||
|
||||
### 3. Settings Persistence
|
||||
- **Dosya:** `~/.hcie/settings.json`
|
||||
- **Otomatik:** Her tool değişikliğinde kaydediyor
|
||||
- **Reset:** "Reset to Defaults" butonu
|
||||
|
||||
### 4. Dirty Dosya Takibi
|
||||
- Çizim yapıldığında `modified = true`
|
||||
- Kaydetme sonrası `modified = false`
|
||||
- Kapanışta kontrol ediliyor
|
||||
|
||||
### 5. Dosya Kapatma
|
||||
- Pencere kapatılırken dirty dosya varsa uyarı
|
||||
- "Save" / "Discard" / "Cancel" seçenekleri
|
||||
|
||||
## Dosya Değişiklikleri
|
||||
|
||||
| Dosya | Değişiklik |
|
||||
|-------|-----------|
|
||||
| `dock/state.rs` | PaneType::ToolSettings eklendi |
|
||||
| `dock/view.rs` | ToolSettings paneli render + icon |
|
||||
| `app.rs` | Sabit tool_settings kaldırıldı |
|
||||
| `panels/tool_settings.rs` | Length::Fill (dock uyumlu) |
|
||||
|
||||
## Derleme Durumu
|
||||
|
||||
```
|
||||
cargo check -p hcie-iced-gui → Başarılı (0 hata)
|
||||
```
|
||||
@@ -0,0 +1,90 @@
|
||||
# Photopea Theme Design Spec
|
||||
|
||||
## [S1] Problem
|
||||
|
||||
The HCIE-Rust iced GUI needs to match Photopea's visual design language — a professional, dark-themed image editor UI. Analysis of 93 Photopea screenshots reveals specific color tokens, typography, layout patterns, and widget styling that must be replicated.
|
||||
|
||||
## [S2] Photopea Color Palette (Dark Theme)
|
||||
|
||||
### Surface Colors (3-tier elevation system)
|
||||
|
||||
| Token | Photopea Value | Description |
|
||||
|-------|---------------|-------------|
|
||||
| `bg_app` | `#1e1e1e` (30,30,30) | Main workspace/canvas background |
|
||||
| `bg_panel` | `#2a2a2a` (42,42,42) | Docked panel backgrounds |
|
||||
| `bg_hover` | `#3a3a3a` (58,58,58) | Hover state on panels |
|
||||
| `bg_active` | `#333333` (51,51,51) | Active tabs, selected items |
|
||||
| `bg_recessed` | `#1a1a1a` (26,26,26) | Input fields, slider tracks |
|
||||
|
||||
### Accent & Interactive
|
||||
|
||||
| Token | Photopea Value | Description |
|
||||
|-------|---------------|-------------|
|
||||
| `accent` | `#4a9eff` (74,158,255) | Active selections, links, submenu arrows |
|
||||
| `accent_green` | `#4caf50` (76,175,80) | Active tool highlight in toolbox |
|
||||
| `danger` | `#e74c3c` (231,76,60) | "Account" button, warnings |
|
||||
|
||||
### Menu Dropdown Colors (Light)
|
||||
|
||||
| Token | Photopea Value | Description |
|
||||
|-------|---------------|-------------|
|
||||
| `menu_bg` | `#e8e8e8` (232,232,232) | Menu dropdown background |
|
||||
| `menu_hover` | `#b3d9ff` (179,217,255) | Menu item hover highlight |
|
||||
| `menu_text` | `#000000` (0,0,0) | Menu item text |
|
||||
| `menu_shortcut` | `#666666` (102,102,102) | Keyboard shortcut text |
|
||||
|
||||
## [S3] Typography
|
||||
|
||||
- **Menu font size**: 12px
|
||||
- **Panel font size**: 11px
|
||||
- **Font weight**: Regular (400) for all text
|
||||
- **Font family**: Sans-serif system default
|
||||
|
||||
## [S4] Layout Structure
|
||||
|
||||
### Top Menu Bar
|
||||
- Height: 24px
|
||||
- Background: `#2a2a2a`
|
||||
- Items: File | Edit | Image | Layer | Select | Filter | View | Window | More
|
||||
- Menu font: 12px
|
||||
|
||||
### Left Toolbox
|
||||
- Width: 36px
|
||||
- Background: `#1e1e1e`
|
||||
- Active tool: Green background (#4caf50)
|
||||
- Tool icons: White/light gray, 20px
|
||||
|
||||
### Right Panels
|
||||
- Width: ~260px
|
||||
- Background: `#2a2a2a`
|
||||
- Tab headers: `#333333` background
|
||||
|
||||
### Dropdown Menus
|
||||
- Background: `#e8e8e8` (light gray)
|
||||
- Text: `#000000` (black)
|
||||
- Hover: `#b3d9ff` (light blue)
|
||||
- Shortcuts: Right-aligned, `#666666`
|
||||
|
||||
## [S5] Implementation Status
|
||||
|
||||
| Component | Status |
|
||||
|-----------|--------|
|
||||
| ThemeColors | ✅ Updated with Photopea tokens |
|
||||
| ThemePreset | ✅ Photopea as default |
|
||||
| Title bar | ✅ Photopea-style 24px bar |
|
||||
| Dropdown menus | ✅ Light gray with dark text |
|
||||
| Sidebar | ✅ Green active tool highlight |
|
||||
| Style functions | ✅ Updated to use new tokens |
|
||||
| Compilation | ✅ Passes (warnings only) |
|
||||
|
||||
## [S6] Files Modified
|
||||
|
||||
| File | Changes |
|
||||
|------|---------|
|
||||
| `iced-panel-adapter/src/theme.rs` | New Photopea preset, new color tokens |
|
||||
| `hcie-iced-gui/src/theme.rs` | Updated docs |
|
||||
| `hcie-iced-gui/src/panels/title_bar.rs` | 24px bar, 12px font, Photopea menus |
|
||||
| `hcie-iced-gui/src/panels/menus.rs` | Light dropdown, Photopea menu structure |
|
||||
| `hcie-iced-gui/src/sidebar/mod.rs` | Green active tool, 36px width |
|
||||
| `hcie-iced-gui/src/panels/styles.rs` | Updated style functions |
|
||||
| `hcie-iced-gui/src/app.rs` | Updated dropdown_overlay call |
|
||||
Reference in New Issue
Block a user