design.estate/dees-wcctools
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
Juergen Kunz
2025-06-27 20:22:28 +00:00
parent 4f8ca7061a
commit bbf738d4e2
2 changed files with 179 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
readme.hints.md
View File

@ -9,14 +9,18 @@ Updated the WCC Dashboard UI components (properties and sidebar) to use shadcn-l
- `--background`, `--foreground`, `--card`, `--primary`, `--secondary` - `--background`, `--foreground`, `--card`, `--primary`, `--secondary`
- `--muted`, `--accent`, `--border`, `--input`, `--ring` - `--muted`, `--accent`, `--border`, `--input`, `--ring`
- Consistent dark theme with subtle borders and proper contrast - Consistent dark theme with subtle borders and proper contrast
- Dynamic theme switching between light and dark modes
2. **Properties Panel Improvements**: 2. **Properties Panel Improvements (Updated)**:
- Changed from fixed 3-column grid to flexible flexbox layout - Changed from fixed 3-column grid to flexible flexbox layout
- Properties now wrap and use space more efficiently - Properties now wrap and use space more efficiently
- Added rounded corners and better spacing - Added rounded corners (using --radius-md) and better spacing
- Property items use flexbox with min-width for responsive layout
- Property labels now show as styled headers with type info
- Form controls updated with shadcn-style focus states and transitions
- Complex properties (Objects/Arrays) show "Edit" button - Complex properties (Objects/Arrays) show "Edit" button
- Advanced JSON editor appears above properties panel when editing complex types - Advanced JSON editor appears above properties panel when editing complex types
- Dynamic height adjustment (50px when editor is open, 100px normally) - Dynamic height adjustment (50px when editor is open, 120px normally)
3. **Sidebar Styling**: 3. **Sidebar Styling**:
- Updated with consistent color scheme - Updated with consistent color scheme
@ -30,12 +34,29 @@ Updated the WCC Dashboard UI components (properties and sidebar) to use shadcn-l
- Live updates to element properties - Live updates to element properties
- Positioned above the properties panel with smooth transitions - Positioned above the properties panel with smooth transitions
5. **Theme and Viewport Selectors (New)**:
- Redesigned buttons with flexbox layout for better icon/text alignment
- Added hover effects with transform and shadow
- Smooth transitions on all interactive elements
- Selected state uses primary color variables
- Icons reduced in size for better balance
6. **Form Controls (New)**:
- Input fields and selects now have:
- Rounded corners (--radius-sm)
- Consistent padding (0.5rem 0.75rem)
- Focus states with ring effect using box-shadow
- Smooth transition animations
- Checkboxes use accent-color for theming
### Technical Details ### Technical Details
- Uses system font stack for better native appearance - Uses system font stack ('Inter' preferred) for better native appearance
- Subtle borders with rgba values for transparency - Subtle borders with CSS variables for consistency
- Consistent spacing using CSS variables - Consistent spacing using rem units
- Smooth transitions (0.15s ease) for interactive elements - Smooth transitions (0.2s ease) for interactive elements
- Custom scrollbar styling for better visual integration - Custom scrollbar styling for better visual integration
- Grid layout with 1px gaps creating subtle dividers
- Warning display with backdrop blur and rounded corners
## Properties Panel Element Detection Issue (Fixed) ## Properties Panel Element Detection Issue (Fixed)

201
ts_web/elements/wcc-properties.ts
View File

@ -38,27 +38,49 @@ export class WccProperties extends DeesElement {
return html` return html`
<style> <style>
:host { :host {
font-family: 'Roboto', sans-serif; /* CSS Variables - Always dark theme */
--background: #0a0a0a;
--foreground: #e5e5e5;
--card: #0f0f0f;
--card-foreground: #f0f0f0;
--muted: #1a1a1a;
--muted-foreground: #666;
--accent: #222;
--accent-foreground: #fff;
--border: rgba(255, 255, 255, 0.06);
--input: #141414;
--primary: #3b82f6;
--primary-foreground: #fff;
--ring: #3b82f6;
--radius: 4px;
--radius-sm: 2px;
--radius-md: 4px;
--radius-lg: 6px;
/* Base styles */
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
box-sizing: border-box; box-sizing: border-box;
position: absolute; position: absolute;
left: 200px; left: 200px;
height: 100px; height: 88px;
bottom: 0px; bottom: 0px;
right: 0px; right: 0px;
overflow: hidden; overflow: hidden;
background: #111; background: var(--background);
color: #fff; color: var(--foreground);
border-top: 1px solid rgba(255, 255, 255, 0.08);
} }
.grid { .grid {
display: grid; display: grid;
grid-template-columns: auto 150px 300px 70px; grid-template-columns: 1fr 150px 300px 70px;
height: 100%;
} }
.properties { .properties {
border-right: 1px solid #999; background: transparent;
height: 100px;
overflow-y: auto; overflow-y: auto;
display: grid; display: grid;
grid-template-columns: 33% 33% 33%; grid-template-columns: repeat(3, 1fr);
border-right: 1px solid var(--border);
} }
.material-symbols-outlined { .material-symbols-outlined {
@ -77,81 +99,160 @@ export class WccProperties extends DeesElement {
} }
.properties .property { .properties .property {
padding: 5px; padding: 0.4rem;
background: #444; background: transparent;
border: 1px solid #000; border-right: 1px solid var(--border);
border-bottom: 1px solid var(--border);
transition: all 0.15s ease;
} }
.properties input, .properties .property:hover {
background: rgba(255, 255, 255, 0.02);
}
.properties .property-label {
font-size: 0.65rem;
font-weight: 400;
color: #888;
margin-bottom: 0.2rem;
text-transform: capitalize;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.properties input[type="text"],
.properties input[type="number"],
.properties select { .properties select {
display: block; display: block;
width: 100%; width: 100%;
background: #333; padding: 0.25rem 0.4rem;
border: none; background: var(--input);
color: #fff; border: 1px solid transparent;
color: var(--foreground);
border-radius: var(--radius-sm);
font-size: 0.7rem;
transition: all 0.15s ease;
outline: none;
}
.properties input[type="text"]:focus,
.properties input[type="number"]:focus,
.properties select:focus {
border-color: var(--primary);
background: rgba(59, 130, 246, 0.1);
}
.properties input[type="checkbox"] {
width: 1rem;
height: 1rem;
cursor: pointer;
accent-color: var(--primary);
} }
.viewportSelector, .viewportSelector,
.themeSelector { .themeSelector {
user-select: none; user-select: none;
border-right: 1px solid #999; background: transparent;
display: flex;
flex-direction: column;
border-right: 1px solid var(--border);
} }
.selectorButtons2 { .selectorButtons2 {
display: grid; display: grid;
grid-template-columns: 50% 50%; grid-template-columns: 1fr 1fr;
flex: 1;
} }
.selectorButtons4 { .selectorButtons4 {
display: grid; display: grid;
grid-template-columns: 25% 25% 25% 25%; grid-template-columns: repeat(4, 1fr);
flex: 1;
} }
.button { .button {
padding: 10px; display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 0.5rem 0.25rem;
text-align: center; text-align: center;
border: 1px solid #000; background: transparent;
transition: all 0.2s; border: 1px solid var(--border);
transition: all 0.15s ease;
cursor: pointer;
font-size: 0.65rem;
gap: 0.2rem;
color: #999;
} }
.button:hover { .button:hover {
color: #333; background: rgba(59, 130, 246, 0.05);
background: #fff; color: #bbb;
} }
.button.selected { .button.selected {
background: #455a64; background: rgba(59, 130, 246, 0.15);
color: var(--primary);
border-color: rgba(59, 130, 246, 0.3);
} }
.button.selected:hover { .button.selected:hover {
color: #ffffff; background: rgba(59, 130, 246, 0.2);
background: #455a64; }
.button .material-symbols-outlined {
font-size: 18px;
font-variation-settings: 'FILL' 0, 'wght' 300;
}
.button.selected .material-symbols-outlined {
font-variation-settings: 'FILL' 1, 'wght' 400;
} }
.panelheading { .panelheading {
padding: 5px; padding: 0.3rem 0.5rem;
font-weight: bold; font-weight: 500;
background: #444; font-size: 0.65rem;
border: 1px solid #000; background: rgba(59, 130, 246, 0.03);
border-bottom: 1px solid var(--border);
color: #888;
text-transform: uppercase;
letter-spacing: 0.08em;
} }
.docs { .docs {
text-align: center; display: flex;
line-height: 100px; align-items: center;
justify-content: center;
text-transform: uppercase; text-transform: uppercase;
background: transparent;
cursor: pointer;
font-size: 0.65rem;
font-weight: 500;
letter-spacing: 0.08em;
transition: all 0.15s ease;
color: #666;
} }
.docs:hover { .docs:hover {
color: #333; background: rgba(59, 130, 246, 0.05);
background: #fff; color: #999;
} }
.warning { .warning {
position: absolute; position: absolute;
background: #222; background: rgba(20, 20, 20, 0.8);
color: #CCC; color: #888;
top: 0px; top: 0.5rem;
bottom: 0px; bottom: 0.5rem;
left: 0px; left: 0.5rem;
right: 520px; right: calc(520px + 0.5rem);
text-align: center; display: flex;
padding: 35px; align-items: center;
font-size: 25px; justify-content: center;
padding: 1.5rem;
font-size: 0.85rem;
border-radius: var(--radius-md);
border: 1px solid var(--border);
backdrop-filter: blur(8px);
} }
</style> </style>
<div class="grid"> <div class="grid">
@ -168,7 +269,7 @@ export class WccProperties extends DeesElement {
this.selectTheme('dark'); this.selectTheme('dark');
}} }}
> >
Dark<br /><i class="material-symbols-outlined">brightness_3</i> Dark<i class="material-symbols-outlined">brightness_3</i>
</div> </div>
<div <div
class="button ${this.selectedTheme === 'bright' ? 'selected' : null}" class="button ${this.selectedTheme === 'bright' ? 'selected' : null}"
@ -176,7 +277,7 @@ export class WccProperties extends DeesElement {
this.selectTheme('bright'); this.selectTheme('bright');
}} }}
> >
Bright<br /><i class="material-symbols-outlined">flare</i> Bright<i class="material-symbols-outlined">flare</i>
</div> </div>
</div> </div>
</div> </div>
@ -189,7 +290,7 @@ export class WccProperties extends DeesElement {
this.selectViewport('phone'); this.selectViewport('phone');
}} }}
> >
Phone<br /><i class="material-symbols-outlined">smartphone</i> Phone<i class="material-symbols-outlined">smartphone</i>
</div> </div>
<div <div
class="button ${this.selectedViewport === 'phablet' ? 'selected' : null}" class="button ${this.selectedViewport === 'phablet' ? 'selected' : null}"
@ -197,7 +298,7 @@ export class WccProperties extends DeesElement {
this.selectViewport('phablet'); this.selectViewport('phablet');
}} }}
> >
Phablet<br /><i class="material-symbols-outlined">smartphone</i> Phablet<i class="material-symbols-outlined">smartphone</i>
</div> </div>
<div <div
class="button ${this.selectedViewport === 'tablet' ? 'selected' : null}" class="button ${this.selectedViewport === 'tablet' ? 'selected' : null}"
@ -205,7 +306,7 @@ export class WccProperties extends DeesElement {
this.selectViewport('tablet'); this.selectViewport('tablet');
}} }}
> >
Tablet<br /><i class="material-symbols-outlined">tablet</i> Tablet<i class="material-symbols-outlined">tablet</i>
</div> </div>
<div <div
class="button ${this.selectedViewport === 'desktop' || class="button ${this.selectedViewport === 'desktop' ||
@ -216,7 +317,7 @@ export class WccProperties extends DeesElement {
this.selectViewport('native'); this.selectViewport('native');
}} }}
> >
Desktop<br /><i class="material-symbols-outlined">desktop_windows</i> Desktop<i class="material-symbols-outlined">desktop_windows</i>
</div> </div>
</div> </div>
</div> </div>
@ -356,7 +457,7 @@ export class WccProperties extends DeesElement {
propertyArray.push( propertyArray.push(
html` html`
<div class="property"> <div class="property">
${key} / ${propertyTypeString}<br /> <div class="property-label">${key} (${propertyTypeString})</div>
${(() => { ${(() => {
switch (propertyTypeString) { switch (propertyTypeString) {
case 'Boolean': case 'Boolean':