mirror of
https://github.com/The-Low-Code-Foundation/OpenNoodl.git
synced 2026-03-08 01:53:30 +01:00
Fixed visual issues with new dashboard and added folder attribution
This commit is contained in:
Richard Osborne
@@ -169,9 +169,65 @@ packages/noodl-core-ui/src/
|
||||
│ ├── AiChatBox/
|
||||
│ └── AiChatMessage/
|
||||
│
|
||||
├── preview/ # 📱 Preview/Launcher UI
|
||||
│ └── launcher/
|
||||
│ ├── Launcher.tsx → Main launcher container
|
||||
│ ├── LauncherContext.tsx → Shared state context
|
||||
│ │
|
||||
│ ├── components/ # Launcher-specific components
|
||||
│ │ ├── LauncherProjectCard/ → Project card display
|
||||
│ │ ├── FolderTree/ → Folder hierarchy UI
|
||||
│ │ ├── FolderTreeItem/ → Individual folder item
|
||||
│ │ ├── TagPill/ → Tag display badge
|
||||
│ │ ├── TagSelector/ → Tag assignment UI
|
||||
│ │ ├── ProjectList/ → List view components
|
||||
│ │ ├── GitStatusBadge/ → Git status indicator
|
||||
│ │ └── ViewModeToggle/ → Card/List toggle
|
||||
│ │
|
||||
│ ├── hooks/ # Launcher hooks
|
||||
│ │ ├── useProjectOrganization.ts → Folder/tag management
|
||||
│ │ ├── useProjectList.ts → Project list logic
|
||||
│ │ └── usePersistentTab.ts → Tab state persistence
|
||||
│ │
|
||||
│ └── views/ # Launcher view pages
|
||||
│ ├── Projects.tsx → Projects tab view
|
||||
│ └── Templates.tsx → Templates tab view
|
||||
│
|
||||
└── styles/ # 🎨 Global styles
|
||||
└── custom-properties/
|
||||
├── colors.css → Design tokens (colors)
|
||||
├── fonts.css → Typography tokens
|
||||
└── spacing.css → Spacing tokens
|
||||
```
|
||||
|
||||
#### 🚀 Launcher/Projects Organization System (Phase 3)
|
||||
|
||||
The Launcher includes a complete project organization system with folders and tags:
|
||||
|
||||
**Key Components:**
|
||||
|
||||
- **FolderTree**: Hierarchical folder display with expand/collapse
|
||||
- **TagPill**: Colored badge for displaying project tags (9 predefined colors)
|
||||
- **TagSelector**: Checkbox-based UI for assigning tags to projects
|
||||
- **useProjectOrganization**: Hook for folder/tag management (uses LocalStorage for Storybook compatibility)
|
||||
|
||||
**Data Flow:**
|
||||
|
||||
```
|
||||
ProjectOrganizationService (editor)
|
||||
↓ (via LauncherContext)
|
||||
useProjectOrganization hook
|
||||
↓
|
||||
FolderTree / TagPill / TagSelector components
|
||||
```
|
||||
|
||||
**Storage:**
|
||||
|
||||
- Projects identified by `localPath` (stable across renames)
|
||||
- Folders: hierarchical structure with parent/child relationships
|
||||
- Tags: 9 predefined colors (#EF4444, #F97316, #EAB308, #22C55E, #06B6D4, #3B82F6, #8B5CF6, #EC4899, #6B7280)
|
||||
- Persisted via `ProjectOrganizationService` → LocalStorage (Storybook) or electron-store (production)
|
||||
|
||||
---
|
||||
|
||||
## 🔍 Finding Things
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -290,6 +290,135 @@ Before completing any UI task, verify:
|
||||
|
||||
---
|
||||
|
||||
## Part 9: Selected/Active State Patterns
|
||||
|
||||
### Decision Matrix: Which Background to Use?
|
||||
|
||||
When styling selected or active items, choose based on the **level of emphasis** needed:
|
||||
|
||||
| Context | Background Token | Text Color | Use Case |
|
||||
| -------------------- | ----------------------- | --------------------------------------- | ---------------------------------------------- |
|
||||
| **Subtle highlight** | `--theme-color-bg-4` | `--theme-color-fg-highlight` | Breadcrumb current page, sidebar selected item |
|
||||
| **Medium highlight** | `--theme-color-bg-5` | `--theme-color-fg-highlight` | Hovered list items, tabs |
|
||||
| **Bold accent** | `--theme-color-primary` | `var(--theme-color-on-primary)` (white) | Dropdown selected item, focused input |
|
||||
|
||||
### Common Pattern: Dropdown/Menu Selected Items
|
||||
|
||||
```scss
|
||||
.MenuItem {
|
||||
padding: 8px 12px;
|
||||
cursor: pointer;
|
||||
|
||||
// Default state
|
||||
color: var(--theme-color-fg-default);
|
||||
background-color: transparent;
|
||||
|
||||
// Hover state (if not selected)
|
||||
&:hover:not(.is-selected) {
|
||||
background-color: var(--theme-color-bg-3);
|
||||
color: var(--theme-color-fg-highlight);
|
||||
}
|
||||
|
||||
// Selected state - BOLD accent for visibility
|
||||
&.is-selected {
|
||||
background-color: var(--theme-color-primary);
|
||||
color: var(--theme-color-on-primary);
|
||||
|
||||
// Icons and child elements also need white
|
||||
svg path {
|
||||
fill: var(--theme-color-on-primary);
|
||||
}
|
||||
}
|
||||
|
||||
// Disabled state
|
||||
&:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Common Pattern: Navigation/Breadcrumb Current Item
|
||||
|
||||
```scss
|
||||
.BreadcrumbItem {
|
||||
padding: 6px 12px;
|
||||
border-radius: 4px;
|
||||
color: var(--theme-color-fg-default);
|
||||
|
||||
// Current/active page - SUBTLE highlight
|
||||
&.is-current {
|
||||
background-color: var(--theme-color-bg-4);
|
||||
color: var(--theme-color-fg-highlight);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### ⚠️ CRITICAL: Never Use These for Backgrounds
|
||||
|
||||
**DO NOT use these tokens for selected/active backgrounds:**
|
||||
|
||||
```scss
|
||||
/* ❌ WRONG - These are now WHITE after token consolidation */
|
||||
background-color: var(--theme-color-secondary);
|
||||
background-color: var(--theme-color-secondary-highlight);
|
||||
background-color: var(--theme-color-fg-highlight);
|
||||
|
||||
/* ❌ WRONG - Poor contrast on dark backgrounds */
|
||||
background-color: var(--theme-color-bg-1); /* Too dark */
|
||||
background-color: var(--theme-color-bg-2); /* Too dark */
|
||||
```
|
||||
|
||||
### Visual Hierarchy Example
|
||||
|
||||
```scss
|
||||
// List with multiple states
|
||||
.ListItem {
|
||||
// Normal
|
||||
background: transparent;
|
||||
color: var(--theme-color-fg-default);
|
||||
|
||||
// Hover (not selected)
|
||||
&:hover:not(.is-selected) {
|
||||
background: var(--theme-color-bg-3); // Subtle lift
|
||||
}
|
||||
|
||||
// Selected
|
||||
&.is-selected {
|
||||
background: var(--theme-color-primary); // Bold, can't miss it
|
||||
color: white;
|
||||
}
|
||||
|
||||
// Selected AND hovered
|
||||
&.is-selected:hover {
|
||||
background: var(--theme-color-primary-highlight); // Slightly lighter red
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Accessibility Checklist for Selected States
|
||||
|
||||
- [ ] Selected item is **immediately visible** (high contrast)
|
||||
- [ ] Color is not the **only** indicator (use icons/checkmarks too)
|
||||
- [ ] Keyboard focus state is **distinct** from selection
|
||||
- [ ] Text contrast meets **WCAG AA** (4.5:1 minimum)
|
||||
|
||||
### Real-World Examples
|
||||
|
||||
✅ **Good patterns** (fixed December 2025):
|
||||
|
||||
- `MenuDialog.module.scss` - Uses `--theme-color-primary` for selected dropdown items
|
||||
- `NodeGraphComponentTrail.module.scss` - Uses `--theme-color-bg-4` for current breadcrumb
|
||||
- `search-panel.module.scss` - Uses `--theme-color-bg-4` for active search result
|
||||
|
||||
❌ **Anti-patterns** (to avoid):
|
||||
|
||||
- Using `--theme-color-secondary` as background (it's white now!)
|
||||
- No visual distinction between selected and unselected items
|
||||
- Low contrast text on selected backgrounds
|
||||
|
||||
---
|
||||
|
||||
## Quick Grep Commands
|
||||
|
||||
```bash
|
||||
@@ -301,8 +430,11 @@ grep -rE '#[0-9a-fA-F]{3,6}' packages/noodl-editor/src/editor/src/styles/
|
||||
|
||||
# Find usage of a specific token
|
||||
grep -r "theme-color-primary" packages/
|
||||
|
||||
# Find potential white-on-white issues
|
||||
grep -r "theme-color-secondary" packages/ --include="*.scss" --include="*.css"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
_Last Updated: December 2024_
|
||||
_Last Updated: December 2025_
|
||||
|
||||
Reference in New Issue
Block a user