diff --git a/src/ElementeApp.jsx b/src/ElementeApp.jsx index a09f096..14d4be8 100644 --- a/src/ElementeApp.jsx +++ b/src/ElementeApp.jsx @@ -21,6 +21,32 @@ const labelXs = { letterSpacing: '0.06em', textTransform: 'uppercase', } +// Anzeige-Modus der Kacheln, geteilt mit Werkzeuge-Panel via localStorage. +const TILE_MODE_KEY = 'dossier_tile_mode' // 'both' | 'icon' | 'text' +function readTileMode() { + try { return localStorage.getItem(TILE_MODE_KEY) || 'both' } catch { return 'both' } +} +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 } + +function TileModeDropdown({ mode, onChange }) { + return ( + + ) +} + function fmtNum(v) { if (v == null || v === '') return '' const n = Number(v) @@ -51,8 +77,11 @@ function ReferenzSelector({ value, onChange }) { // Raster-Kachel — Icon oben, Label darunter, einheitliche Zellgroesse. // hasMenu zeigt ein kleines Chevron neben dem Label (Rechtsklick = Untertypen). +// mode: 'both' (Icon+Text) | 'icon' (nur Symbol) | 'text' (nur Text) function PillButton({ icon, label, hint, onClick, onContextMenu, disabled, - hasMenu, badge }) { + hasMenu, badge, mode = 'both' }) { + const showIcon = mode !== 'text' + const showLabel = mode !== 'icon' return ( ) } -function GridSection({ label, children }) { +function GridSection({ label, mode, children }) { return ( -
+
{children}
@@ -112,11 +130,28 @@ function GridSection({ label, children }) { ) } +function TileModeDropdown({ mode, onChange }) { + return ( + + ) +} + // --------------------------------------------------------------------------- export default function WerkzeugeApp() { + const [mode, setMode] = useState(readTileMode) useEffect(() => { notifyReady() }, []) + const changeMode = (m) => { setMode(m); writeTileMode(m) } const groups = Object.entries(TOOLS) return ( @@ -129,10 +164,13 @@ export default function WerkzeugeApp() { boxSizing: 'border-box', overflowY: 'auto', overflowX: 'hidden', }}> +
+ +
{groups.map(([title, items]) => ( - + {items.map(([icon, label, cmd, tip]) => ( - + ))} ))}