Leopoldadmin/web-cad
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: right sidebar header + left sidebar toggle + ribbon color pickers + ribbon height

Browse Source
This commit is contained in:
A0 Orchestrator
2026-07-03 10:52:38 +02:00
parent a6d2e2d718
commit eefd99ee48
4 changed files with 83 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/LeftSidebar.tsx
+1 -6
View File
@@ -106,7 +106,7 @@ const LeftSidebar: React.FC<LeftSidebarProps> = ({ activeTool, onToolChange, sel
<aside className={`leftbar${className ? ' ' + className : ''}${collapsed ? ' leftbar-collapsed' : ''}`} aria-label="Werkzeugpalette">
<div className="leftbar-header">
<span className="leftbar-title">Werkzeuge</span>
<button className="leftbar-toggle" aria-label="Linke Leiste ausblenden" onClick={onCollapse}>
<button className="leftbar-toggle" aria-label="Linke Leiste ein-/ausklappen" onClick={collapsed ? onToggleCollapse : onCollapse} title="Linke Leiste ein-/ausklappen">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="15 18 9 12 15 6"/></svg>
</button>
</div>
@@ -201,11 +201,6 @@ const LeftSidebar: React.FC<LeftSidebarProps> = ({ activeTool, onToolChange, sel
<div className="leftbar-resize-handle" onMouseDown={handleResizeMouseDown} />
<div className="leftbar-footer">
{onToggleCollapse && (
<button className="leftbar-footer-btn" title="Linke Leiste ein-/ausklappen" aria-label="Linke Leiste ein-/ausklappen" onClick={onToggleCollapse}>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"/></svg>
</button>
)}
<button className="leftbar-footer-btn" title="Plugin hinzufügen" aria-label="Plugin hinzufügen">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="16"/><line x1="8" y1="12" x2="16" y2="12"/></svg>
</button>
frontend/src/components/RibbonBar.tsx
+18 -16
View File
@@ -225,23 +225,25 @@ const RibbonBar: React.FC<RibbonBarProps> = ({
<>
<div className="ribbon-group">
<div className="ribbon-group-btns">
<div className="ribbon-color-control" title="Hintergrundfarbe der Zeichenfläche">
<label className="ribbon-color-label">Hintergrund</label>
<input
type="color"
value={canvasBgColor}
onChange={(e) => onCanvasBgColorChange?.(e.target.value)}
style={{ width: '32px', height: '32px', border: '1px solid var(--color-border)', borderRadius: '4px', cursor: 'pointer', padding: 0, background: 'none' }}
/>
<div className="ribbon-color-picker" title="Hintergrundfarbe der Zeichenfläche">
<div className="ribbon-color-swatch" style={{ background: canvasBgColor }}>
<input
type="color"
value={canvasBgColor}
onChange={(e) => onCanvasBgColorChange?.(e.target.value)}
/>
</div>
<span className="ribbon-color-label">Hintergrund</span>
</div>
<div className="ribbon-color-control" title="Gitterfarbe">
<label className="ribbon-color-label">Gitterfarbe</label>
<input
type="color"
value={gridColor}
onChange={(e) => onGridColorChange?.(e.target.value)}
style={{ width: '32px', height: '32px', border: '1px solid var(--color-border)', borderRadius: '4px', cursor: 'pointer', padding: 0, background: 'none' }}
/>
<div className="ribbon-color-picker" title="Gitterfarbe">
<div className="ribbon-color-swatch" style={{ background: gridColor }}>
<input
type="color"
value={gridColor}
onChange={(e) => onGridColorChange?.(e.target.value)}
/>
</div>
<span className="ribbon-color-label">Gitter</span>
</div>
</div>
<div className="ribbon-group-label">Farben</div>
frontend/src/components/RightSidebar.tsx
+5 -7
View File
@@ -36,14 +36,12 @@ const RightSidebar: React.FC<RightSidebarProps> = ({
}) => {
return (
<aside className={`rightbar${className ? ' ' + className : ''}${collapsed ? ' rightbar-collapsed' : ''}`} aria-label="Eigenschaften-Panels">
<button className="rightbar-close" aria-label="Rechte Leiste schließen" onClick={onCollapse}>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg>
</button>
{onToggleCollapse && (
<button className="rightbar-collapse-toggle" aria-label="Rechte Leiste ein-/ausklappen" onClick={onToggleCollapse} title="Rechte Leiste ein-/ausklappen">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg>
<div className="rightbar-header">
<span className="rightbar-title">Eigenschaften</span>
<button className="rightbar-toggle" aria-label="Rechte Leiste ein-/ausklappen" onClick={collapsed ? onToggleCollapse : onCollapse} title="Rechte Leiste ein-/ausklappen">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="9 18 15 12 9 6"/></svg>
</button>
)}
</div>
<div className="rightbar-tabs" role="tablist">
{tabs.map((tab) => (
<button
frontend/src/styles.css
+59 -23
View File
@@ -53,7 +53,7 @@
/* Layout */
--topbar-h: 38px;
--ribbon-h: 72px;
--ribbon-h: 86px;
--leftbar-w: 200px;
--rightbar-w: 300px;
--cmdline-h: 56px;
@@ -371,7 +371,7 @@ a:hover { text-decoration: underline; }
flex: 1;
display: flex;
align-items: center;
padding: 0 var(--spacing-md);
padding: 6px 8px;
gap: var(--spacing-lg);
overflow: hidden;
}
@@ -385,7 +385,7 @@ a:hover { text-decoration: underline; }
}
.ribbon-group-btns { display: flex; align-items: center; gap: 2px; flex: 1; }
.ribbon-group-label {
font-size: 12px;
font-size: 11px;
color: var(--color-text-muted);
text-transform: uppercase;
letter-spacing: 0.4px;
@@ -395,6 +395,38 @@ a:hover { text-decoration: underline; }
padding-top: 3px;
margin-top: 2px;
}
.ribbon-color-picker {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
}
.ribbon-color-swatch {
width: 32px;
height: 24px;
border-radius: 4px;
border: 2px solid var(--color-border);
cursor: pointer;
position: relative;
overflow: hidden;
}
.ribbon-color-swatch input[type="color"] {
position: absolute;
top: -4px;
left: -4px;
width: calc(100% + 8px);
height: calc(100% + 8px);
border: none;
padding: 0;
cursor: pointer;
opacity: 0;
}
.ribbon-color-swatch:hover { border-color: var(--color-primary); }
.ribbon-color-label {
font-size: 11px;
color: var(--color-text-muted);
text-align: center;
}
.ribbon-divider {
width: 1px;
height: 60%;
@@ -442,7 +474,7 @@ a:hover { text-decoration: underline; }
.app-body.left-collapsed .leftbar .tool-section { display: none; }
.app-body.left-collapsed .leftbar-toggle svg { transform: rotate(180deg); }
.app-body.left-collapsed .leftbar-toggle { display: grid !important; }
.app-body.right-collapsed { grid-template-columns: var(--leftbar-w) 1fr 0; }
.app-body.right-collapsed { grid-template-columns: var(--leftbar-w) 1fr 28px; }
.app-body.both-collapsed { grid-template-columns: 0 1fr 0; }
/* ============================================================
@@ -2199,32 +2231,36 @@ body.drawer-open { overflow: hidden; }
/* ─── Desktop Sidebar Collapse ─────────────────────────── */
.rightbar-collapse-toggle {
position: absolute;
top: 8px;
right: 32px;
width: 24px;
height: 24px;
.rightbar-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 12px;
border-bottom: 1px solid var(--color-border);
flex-shrink: 0;
}
.rightbar-title {
font-weight: 600;
font-size: 13px;
}
.rightbar-toggle {
width: 22px;
height: 22px;
display: grid;
place-items: center;
background: var(--color-surface-2);
border: 1px solid var(--color-border);
border-radius: 4px;
cursor: pointer;
border-radius: var(--radius-xs);
color: var(--color-text-muted);
z-index: 10;
transition: all var(--t-fast);
}
.rightbar-collapse-toggle:hover {
background: var(--color-surface-3);
color: var(--color-text);
}
.rightbar-collapse-toggle svg { width: 14px; height: 14px; }
.rightbar-toggle:hover { background: var(--color-surface-2); color: var(--color-text); }
.rightbar-toggle svg { width: 14px; height: 14px; }
.app-body.right-collapsed .rightbar { width: 0; min-width: 0; overflow: hidden; border-left: none; }
.app-body.right-collapsed .rightbar { padding: 4px; }
.app-body.right-collapsed .rightbar-header { justify-content: center; }
.app-body.right-collapsed .rightbar-title { display: none; }
.app-body.right-collapsed .rightbar-tabs,
.app-body.right-collapsed .rightbar-content,
.app-body.right-collapsed .rightbar-close { display: none; }
.app-body.right-collapsed .rightbar-content { display: none; }
.app-body.right-collapsed .rightbar-toggle { display: grid !important; transform: rotate(180deg); }
.leftbar-collapsed .tool-section,
.leftbar-collapsed .leftbar-title,