Tools + Elements: horizontal tiles in grid + dropdown moved left
- Tile content back to horizontal (icon beside label, left-aligned) while keeping the aligned grid columns — per user choice 'Raster + horizontal' - Wider 'both' column (86px) to fit icon+label in one row, single-row height - Display-mode dropdown moved to the left (justify-content flex-start) - icon-only and text-only modes stay centered; hasMenu chevron inline next to label (both/text) or as corner indicator (icon-only)
This commit is contained in:
+11
-9
@@ -12,8 +12,8 @@ function readTileMode() {
|
||||
function writeTileMode(m) {
|
||||
try { localStorage.setItem(TILE_MODE_KEY, m) } catch { /* WebView ohne Storage */ }
|
||||
}
|
||||
const TILE_MIN_COL = { icon: 40, text: 66, both: 58 }
|
||||
const TILE_MIN_H = { icon: 38, text: 30, both: 46 }
|
||||
const TILE_MIN_COL = { icon: 40, text: 64, both: 86 }
|
||||
const TILE_MIN_H = { icon: 32, text: 30, both: 32 }
|
||||
|
||||
// Tool-Definitionen: [icon, label, rhino-command, tooltip]
|
||||
// Material-Symbol-Namen siehe https://fonts.google.com/icons
|
||||
@@ -81,27 +81,29 @@ function ToolTile({ icon, label, cmd, tip, mode }) {
|
||||
e.currentTarget.style.background = 'var(--bg-input)'
|
||||
}}
|
||||
style={{
|
||||
display: 'flex', flexDirection: 'column',
|
||||
alignItems: 'center', justifyContent: 'center', gap: 4,
|
||||
padding: '6px 4px',
|
||||
display: 'flex', flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: mode === 'both' ? 'flex-start' : 'center',
|
||||
gap: showIcon && showLabel ? 7 : 0,
|
||||
padding: mode === 'icon' ? '6px' : '5px 11px',
|
||||
minHeight: TILE_MIN_H[mode],
|
||||
background: 'var(--bg-input)',
|
||||
border: '1px solid var(--border-light)',
|
||||
borderRadius: 999,
|
||||
cursor: 'pointer',
|
||||
transition: 'background 0.12s, border-color 0.12s',
|
||||
fontSize: 10, fontWeight: 500,
|
||||
fontSize: 11, fontWeight: 500,
|
||||
color: 'var(--text-primary)',
|
||||
appearance: 'none', WebkitAppearance: 'none',
|
||||
}}
|
||||
>
|
||||
{showIcon && (
|
||||
<Icon name={icon} size={mode === 'icon' ? 18 : 16}
|
||||
<Icon name={icon} size={16}
|
||||
style={{ color: 'var(--accent)', flexShrink: 0 }} />
|
||||
)}
|
||||
{showLabel && (
|
||||
<span style={{
|
||||
maxWidth: '100%', overflow: 'hidden',
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis', whiteSpace: 'nowrap',
|
||||
}}>{label}</span>
|
||||
)}
|
||||
@@ -164,7 +166,7 @@ export default function WerkzeugeApp() {
|
||||
boxSizing: 'border-box',
|
||||
overflowY: 'auto', overflowX: 'hidden',
|
||||
}}>
|
||||
<div style={{ display: 'flex', justifyContent: 'flex-end' }}>
|
||||
<div style={{ display: 'flex', justifyContent: 'flex-start' }}>
|
||||
<TileModeDropdown mode={mode} onChange={changeMode} />
|
||||
</div>
|
||||
{groups.map(([title, items]) => (
|
||||
|
||||
Reference in New Issue
Block a user