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"> <aside className={`leftbar${className ? ' ' + className : ''}${collapsed ? ' leftbar-collapsed' : ''}`} aria-label="Werkzeugpalette">
<div className="leftbar-header"> <div className="leftbar-header">
<span className="leftbar-title">Werkzeuge</span> <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> <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> </button>
</div> </div>
@@ -201,11 +201,6 @@ const LeftSidebar: React.FC<LeftSidebarProps> = ({ activeTool, onToolChange, sel
<div className="leftbar-resize-handle" onMouseDown={handleResizeMouseDown} /> <div className="leftbar-resize-handle" onMouseDown={handleResizeMouseDown} />
<div className="leftbar-footer"> <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"> <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> <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> </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">
<div className="ribbon-group-btns"> <div className="ribbon-group-btns">
<div className="ribbon-color-control" title="Hintergrundfarbe der Zeichenfläche"> <div className="ribbon-color-picker" title="Hintergrundfarbe der Zeichenfläche">
<label className="ribbon-color-label">Hintergrund</label> <div className="ribbon-color-swatch" style={{ background: canvasBgColor }}>
<input <input
type="color" type="color"
value={canvasBgColor} value={canvasBgColor}
onChange={(e) => onCanvasBgColorChange?.(e.target.value)} 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>
<span className="ribbon-color-label">Hintergrund</span>
</div> </div>
<div className="ribbon-color-control" title="Gitterfarbe"> <div className="ribbon-color-picker" title="Gitterfarbe">
<label className="ribbon-color-label">Gitterfarbe</label> <div className="ribbon-color-swatch" style={{ background: gridColor }}>
<input <input
type="color" type="color"
value={gridColor} value={gridColor}
onChange={(e) => onGridColorChange?.(e.target.value)} 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>
<span className="ribbon-color-label">Gitter</span>
</div> </div>
</div> </div>
<div className="ribbon-group-label">Farben</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 ( return (
<aside className={`rightbar${className ? ' ' + className : ''}${collapsed ? ' rightbar-collapsed' : ''}`} aria-label="Eigenschaften-Panels"> <aside className={`rightbar${className ? ' ' + className : ''}${collapsed ? ' rightbar-collapsed' : ''}`} aria-label="Eigenschaften-Panels">
<button className="rightbar-close" aria-label="Rechte Leiste schließen" onClick={onCollapse}> <div className="rightbar-header">
<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> <span className="rightbar-title">Eigenschaften</span>
</button> <button className="rightbar-toggle" aria-label="Rechte Leiste ein-/ausklappen" onClick={collapsed ? onToggleCollapse : onCollapse} title="Rechte Leiste ein-/ausklappen">
{onToggleCollapse && ( <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 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>
</button> </button>
)} </div>
<div className="rightbar-tabs" role="tablist"> <div className="rightbar-tabs" role="tablist">
{tabs.map((tab) => ( {tabs.map((tab) => (
<button <button
frontend/src/styles.css
+59 -23
View File
@@ -53,7 +53,7 @@
/* Layout */ /* Layout */
--topbar-h: 38px; --topbar-h: 38px;
--ribbon-h: 72px; --ribbon-h: 86px;
--leftbar-w: 200px; --leftbar-w: 200px;
--rightbar-w: 300px; --rightbar-w: 300px;
--cmdline-h: 56px; --cmdline-h: 56px;
@@ -371,7 +371,7 @@ a:hover { text-decoration: underline; }
flex: 1; flex: 1;
display: flex; display: flex;
align-items: center; align-items: center;
padding: 0 var(--spacing-md); padding: 6px 8px;
gap: var(--spacing-lg); gap: var(--spacing-lg);
overflow: hidden; 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-btns { display: flex; align-items: center; gap: 2px; flex: 1; }
.ribbon-group-label { .ribbon-group-label {
font-size: 12px; font-size: 11px;
color: var(--color-text-muted); color: var(--color-text-muted);
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.4px; letter-spacing: 0.4px;
@@ -395,6 +395,38 @@ a:hover { text-decoration: underline; }
padding-top: 3px; padding-top: 3px;
margin-top: 2px; 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 { .ribbon-divider {
width: 1px; width: 1px;
height: 60%; 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 .tool-section { display: none; }
.app-body.left-collapsed .leftbar-toggle svg { transform: rotate(180deg); } .app-body.left-collapsed .leftbar-toggle svg { transform: rotate(180deg); }
.app-body.left-collapsed .leftbar-toggle { display: grid !important; } .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; } .app-body.both-collapsed { grid-template-columns: 0 1fr 0; }
/* ============================================================ /* ============================================================
@@ -2199,32 +2231,36 @@ body.drawer-open { overflow: hidden; }
/* ─── Desktop Sidebar Collapse ─────────────────────────── */ /* ─── Desktop Sidebar Collapse ─────────────────────────── */
.rightbar-collapse-toggle { .rightbar-header {
position: absolute; display: flex;
top: 8px; justify-content: space-between;
right: 32px; align-items: center;
width: 24px; padding: 8px 12px;
height: 24px; 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; display: grid;
place-items: center; place-items: center;
background: var(--color-surface-2); border-radius: var(--radius-xs);
border: 1px solid var(--color-border);
border-radius: 4px;
cursor: pointer;
color: var(--color-text-muted); color: var(--color-text-muted);
z-index: 10;
transition: all var(--t-fast); transition: all var(--t-fast);
} }
.rightbar-collapse-toggle:hover { .rightbar-toggle:hover { background: var(--color-surface-2); color: var(--color-text); }
background: var(--color-surface-3); .rightbar-toggle svg { width: 14px; height: 14px; }
color: var(--color-text);
}
.rightbar-collapse-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-tabs,
.app-body.right-collapsed .rightbar-content, .app-body.right-collapsed .rightbar-content { display: none; }
.app-body.right-collapsed .rightbar-close { display: none; } .app-body.right-collapsed .rightbar-toggle { display: grid !important; transform: rotate(180deg); }
.leftbar-collapsed .tool-section, .leftbar-collapsed .tool-section,
.leftbar-collapsed .leftbar-title, .leftbar-collapsed .leftbar-title,