mirror of
https://github.com/The-Low-Code-Foundation/OpenNoodl.git
synced 2026-01-11 23:02:56 +01:00
ea45e8b3a3
- Added MIME type mappings for .otf, .woff, and .woff2 font formats - Fixed missing break statement after .wav case (was falling through to .mp4) - Fonts now load correctly in editor preview without 404 errors - Resolves OTS parsing error messages in console The web server was already serving project directory files correctly, but browsers were rejecting font files due to missing/incorrect MIME types. Related to TASK-006
438 lines
9.3 KiB
Markdown
438 lines
9.3 KiB
Markdown
# TASK-000G: Component Visual Updates - Dialogs & Panels
|
|
|
|
## Overview
|
|
|
|
Apply visual refinements to dialog, modal, and panel components to create a modern, elevated UI feel. These are high-visibility components that frame content throughout the editor.
|
|
|
|
**Priority:** MEDIUM
|
|
**Effort:** 1-2 hours
|
|
**Risk:** Medium
|
|
**Dependencies:** TASK-000A, TASK-000D, TASK-000E (Color tokens, Core UI audit, Spacing tokens)
|
|
|
|
---
|
|
|
|
## Objective
|
|
|
|
Make dialogs and panels feel modern and elevated with:
|
|
- Subtle borders for definition
|
|
- Refined shadows for depth
|
|
- Better backdrop styling
|
|
- Consistent header/body/footer structure
|
|
- Proper spacing using tokens
|
|
|
|
---
|
|
|
|
## Part 1: Dialog/Modal Refinements
|
|
|
|
### File
|
|
```
|
|
packages/noodl-core-ui/src/components/layout/BaseDialog/BaseDialog.module.scss
|
|
```
|
|
|
|
### Improvements to Apply
|
|
|
|
```scss
|
|
/* Dialog wrapper - handles backdrop */
|
|
.Root {
|
|
/* Backdrop styling */
|
|
&.has-backdrop {
|
|
background-color: var(--base-color-black-transparent-80);
|
|
|
|
/* Optional: subtle blur for modern feel */
|
|
/* Note: may have performance implications */
|
|
backdrop-filter: blur(4px);
|
|
-webkit-backdrop-filter: blur(4px);
|
|
}
|
|
}
|
|
|
|
/* The visible dialog box */
|
|
.VisibleDialog {
|
|
/* Background */
|
|
background-color: var(--theme-color-bg-2);
|
|
|
|
/* Border for definition against backdrop */
|
|
border: 1px solid var(--theme-color-border-subtle);
|
|
|
|
/* Modern rounded corners */
|
|
border-radius: var(--radius-lg);
|
|
|
|
/* Elevated shadow */
|
|
box-shadow: var(--shadow-popup);
|
|
|
|
/* Overflow handling */
|
|
overflow: hidden;
|
|
|
|
/* Maximum size constraints */
|
|
max-height: 90vh;
|
|
max-width: 90vw;
|
|
}
|
|
|
|
/* Dialog header */
|
|
.DialogHeader {
|
|
padding: var(--spacing-4) var(--spacing-5);
|
|
border-bottom: 1px solid var(--theme-color-border-subtle);
|
|
|
|
/* Flex layout for title + close button */
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: var(--spacing-4);
|
|
}
|
|
|
|
.DialogTitle {
|
|
font-size: var(--font-size-2xl);
|
|
font-weight: var(--font-weight-semibold);
|
|
color: var(--theme-color-fg-highlight);
|
|
line-height: var(--line-height-tight);
|
|
margin: 0;
|
|
}
|
|
|
|
.DialogSubtitle {
|
|
font-size: var(--font-size-base);
|
|
color: var(--theme-color-fg-default-shy);
|
|
margin-top: var(--spacing-1);
|
|
}
|
|
|
|
/* Dialog body */
|
|
.DialogBody {
|
|
padding: var(--spacing-5);
|
|
overflow-y: auto;
|
|
|
|
/* Smooth scrolling */
|
|
scroll-behavior: smooth;
|
|
|
|
/* Scrollbar styling (webkit) */
|
|
&::-webkit-scrollbar {
|
|
width: 8px;
|
|
}
|
|
|
|
&::-webkit-scrollbar-track {
|
|
background: var(--theme-color-bg-3);
|
|
}
|
|
|
|
&::-webkit-scrollbar-thumb {
|
|
background: var(--theme-color-bg-5);
|
|
border-radius: var(--radius-full);
|
|
|
|
&:hover {
|
|
background: var(--theme-color-fg-muted);
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Dialog footer */
|
|
.DialogFooter {
|
|
padding: var(--spacing-4) var(--spacing-5);
|
|
border-top: 1px solid var(--theme-color-border-subtle);
|
|
background-color: var(--theme-color-bg-1);
|
|
|
|
/* Flex layout for buttons */
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
gap: var(--spacing-3);
|
|
}
|
|
|
|
/* Close button in header */
|
|
.CloseButton {
|
|
width: 32px;
|
|
height: 32px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: var(--radius-default);
|
|
background: transparent;
|
|
border: none;
|
|
color: var(--theme-color-fg-muted);
|
|
cursor: pointer;
|
|
transition:
|
|
background-color var(--transition-default) var(--transition-ease),
|
|
color var(--transition-default) var(--transition-ease);
|
|
|
|
&:hover {
|
|
background-color: var(--theme-color-bg-hover);
|
|
color: var(--theme-color-fg-default);
|
|
}
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
## Part 2: Panel Refinements
|
|
|
|
### Files
|
|
```
|
|
packages/noodl-core-ui/src/components/sidebar/BasePanel/BasePanel.module.scss
|
|
packages/noodl-core-ui/src/components/sidebar/Section/Section.module.scss
|
|
```
|
|
|
|
### BasePanel Improvements
|
|
|
|
```scss
|
|
.Root {
|
|
/* Background */
|
|
background-color: var(--theme-color-bg-2);
|
|
|
|
/* Border for definition */
|
|
border: 1px solid var(--theme-color-border-subtle);
|
|
border-radius: var(--radius-md);
|
|
|
|
/* Consistent padding */
|
|
padding: var(--spacing-panel-padding);
|
|
|
|
/* Panel gap between children */
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-panel-gap);
|
|
}
|
|
|
|
.PanelHeader {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding-bottom: var(--spacing-3);
|
|
border-bottom: 1px solid var(--theme-color-border-subtle);
|
|
margin-bottom: var(--spacing-2);
|
|
}
|
|
|
|
.PanelTitle {
|
|
font-size: var(--font-size-lg);
|
|
font-weight: var(--font-weight-semibold);
|
|
color: var(--theme-color-fg-default-contrast);
|
|
}
|
|
```
|
|
|
|
### Section Improvements
|
|
|
|
```scss
|
|
.Root {
|
|
/* Section spacing */
|
|
padding: var(--spacing-section-padding) 0;
|
|
|
|
/* Border between sections */
|
|
&:not(:last-child) {
|
|
border-bottom: 1px solid var(--theme-color-border-subtle);
|
|
}
|
|
}
|
|
|
|
.SectionHeader {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: var(--spacing-3);
|
|
}
|
|
|
|
.SectionTitle {
|
|
font-size: var(--text-label-size);
|
|
font-weight: var(--text-label-weight);
|
|
letter-spacing: var(--text-label-letter-spacing);
|
|
color: var(--theme-color-fg-muted);
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.SectionContent {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-2);
|
|
}
|
|
|
|
/* Collapsible section */
|
|
.SectionToggle {
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-2);
|
|
|
|
&:hover .SectionTitle {
|
|
color: var(--theme-color-fg-default-shy);
|
|
}
|
|
}
|
|
|
|
.CollapseIcon {
|
|
transition: transform var(--transition-default) var(--transition-ease);
|
|
|
|
&.is-collapsed {
|
|
transform: rotate(-90deg);
|
|
}
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
## Part 3: Sidebar Item Refinements
|
|
|
|
### File
|
|
```
|
|
packages/noodl-core-ui/src/components/sidebar/SidebarItem/SidebarItem.module.scss
|
|
```
|
|
|
|
### Improvements
|
|
|
|
```scss
|
|
.Root {
|
|
padding: var(--spacing-2) var(--spacing-3);
|
|
border-radius: var(--radius-default);
|
|
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-2);
|
|
|
|
color: var(--theme-color-fg-default);
|
|
|
|
transition:
|
|
background-color var(--transition-default) var(--transition-ease),
|
|
color var(--transition-default) var(--transition-ease);
|
|
|
|
cursor: pointer;
|
|
|
|
&:hover {
|
|
background-color: var(--theme-color-bg-hover);
|
|
}
|
|
|
|
&.is-active {
|
|
background-color: var(--theme-color-primary);
|
|
color: var(--theme-color-on-primary);
|
|
}
|
|
|
|
&.is-selected {
|
|
background-color: var(--theme-color-bg-4);
|
|
color: var(--theme-color-fg-highlight);
|
|
}
|
|
}
|
|
|
|
.ItemIcon {
|
|
flex-shrink: 0;
|
|
width: 16px;
|
|
height: 16px;
|
|
color: inherit;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.ItemLabel {
|
|
flex: 1;
|
|
font-size: var(--font-size-base);
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.ItemBadge {
|
|
flex-shrink: 0;
|
|
font-size: var(--font-size-xs);
|
|
padding: var(--spacing-0-5) var(--spacing-1);
|
|
background-color: var(--theme-color-bg-5);
|
|
border-radius: var(--radius-sm);
|
|
color: var(--theme-color-fg-default-shy);
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
## Part 4: Tooltip Refinements
|
|
|
|
### File
|
|
```
|
|
packages/noodl-core-ui/src/components/common/Tooltip/Tooltip.module.scss
|
|
```
|
|
|
|
### Improvements
|
|
|
|
```scss
|
|
.Root {
|
|
background-color: var(--theme-color-bg-4);
|
|
color: var(--theme-color-fg-default);
|
|
|
|
padding: var(--spacing-1-5) var(--spacing-2);
|
|
border-radius: var(--radius-default);
|
|
|
|
font-size: var(--font-size-sm);
|
|
line-height: var(--line-height-normal);
|
|
|
|
box-shadow: var(--shadow-md);
|
|
border: 1px solid var(--theme-color-border-default);
|
|
|
|
/* Ensure tooltip is above everything */
|
|
z-index: var(--z-tooltip);
|
|
|
|
/* Max width for long content */
|
|
max-width: 250px;
|
|
}
|
|
|
|
/* Arrow/pointer if applicable */
|
|
.Arrow {
|
|
fill: var(--theme-color-bg-4);
|
|
stroke: var(--theme-color-border-default);
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
## Testing Checklist
|
|
|
|
### Dialogs/Modals
|
|
- [ ] Dialog has visible border
|
|
- [ ] Shadow creates sense of elevation
|
|
- [ ] Backdrop is semi-transparent dark
|
|
- [ ] Backdrop blur works (if enabled)
|
|
- [ ] Header/body/footer clearly separated
|
|
- [ ] Title text is prominent
|
|
- [ ] Close button works and has hover state
|
|
- [ ] Footer buttons aligned correctly
|
|
- [ ] Scrollable body works for long content
|
|
- [ ] Focus trapped inside dialog
|
|
|
|
### Panels
|
|
- [ ] Panel has subtle border
|
|
- [ ] Header section distinct from content
|
|
- [ ] Section titles are uppercase/muted
|
|
- [ ] Content areas have proper spacing
|
|
- [ ] Collapsible sections animate smoothly
|
|
|
|
### Sidebar Items
|
|
- [ ] Items have hover states
|
|
- [ ] Active item clearly highlighted (red)
|
|
- [ ] Selected item distinct from hover
|
|
- [ ] Icons aligned with text
|
|
- [ ] Overflow text truncates with ellipsis
|
|
|
|
### Tooltips
|
|
- [ ] Tooltip has border and shadow
|
|
- [ ] Text is readable
|
|
- [ ] Position correctly relative to trigger
|
|
- [ ] Arrow points to trigger (if applicable)
|
|
|
|
### General
|
|
- [ ] Consistent border radius across all components
|
|
- [ ] Consistent border colors
|
|
- [ ] Smooth transitions
|
|
- [ ] Storybook shows all variations correctly
|
|
|
|
---
|
|
|
|
## Verification in Storybook
|
|
|
|
```bash
|
|
npm run storybook
|
|
```
|
|
|
|
Navigate to:
|
|
- Layout / BaseDialog
|
|
- Sidebar / BasePanel
|
|
- Sidebar / Section
|
|
- Sidebar / SidebarItem
|
|
- Common / Tooltip
|
|
|
|
Review all stories and variants.
|
|
|
|
---
|
|
|
|
## Success Criteria
|
|
|
|
- [ ] Dialogs feel elevated and professional
|
|
- [ ] Panels have clear visual structure
|
|
- [ ] Sections organize content clearly
|
|
- [ ] Sidebar items are interactive and obvious
|
|
- [ ] Tooltips are readable and well-positioned
|
|
- [ ] Consistent use of tokens throughout
|
|
- [ ] No visual regressions from previous functionality
|