Dicken/dickendock
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

DevTools Mobile: Pfeil-Buttons statt Gradient-Fades, kein Chip-Clipping

Browse Source
This commit is contained in:
Dicken
2026-06-05 01:35:23 +02:00
parent eea77f30da
commit e9e639b654
1 changed files with 36 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
frontend/src/tools/devtools.jsx
View File

@@ -3117,47 +3117,44 @@ export default function DevTools({ toast, mobile }) {
<span style={{color:'rgba(255,255,255,0.5)',fontFamily:'monospace',fontSize:10}}>Konverter · Formatter · Helfer</span>
</div>
{/* Tool-Auswahl: Mobile = horizontal scroll mit Fade-Hint, Desktop = 2-Spalten-Grid */}
{/* Tool-Auswahl: Mobile = horizontal scroll mit Pfeil-Hints, Desktop = 2-Spalten-Grid */}
{mobile ? (
<div style={{position:'relative', marginBottom:16}}>
<div ref={chipScrollRef} onScroll={onChipScroll}
style={{display:'flex',gap:6,overflowX:'auto',
padding:'3px 3px 6px 3px',
scrollbarWidth:'none',WebkitOverflowScrolling:'touch'}}>
{TOOL_DEFS.map(t=>(
<button key={t.id}
onClick={()=>{ if(t.ready){setActiveTool(t.id);setActiveTab(t.tabs?.[0]?.id||'');} else toast('Kommt bald 🚧'); }}
style={{
display:'flex', alignItems:'center', gap:6, flexShrink:0,
padding:'7px 12px', borderRadius:20, fontFamily:'monospace', fontSize:11,
cursor:t.ready?'pointer':'default', whiteSpace:'nowrap',
background: activeTool===t.id ? 'rgba(78,205,196,0.15)' : 'rgba(255,255,255,0.05)',
border: activeTool===t.id ? '1px solid #4ecdc4' : '1px solid rgba(255,255,255,0.1)',
color: activeTool===t.id ? '#4ecdc4' : t.ready ? 'rgba(255,255,255,0.75)' : 'rgba(255,255,255,0.3)',
fontWeight: activeTool===t.id ? 700 : 400,
}}>
<span style={{fontSize:15}}>{getIcon(t.label)}</span>
<span>{getText(t.label)}</span>
</button>
))}
<div style={{flexShrink:0, width:28}}/>
<div style={{marginBottom:16}}>
<div style={{display:'flex',alignItems:'center',gap:4}}>
{chipScroll.left && (
<button onClick={()=>{ chipScrollRef.current?.scrollBy({left:-160,behavior:'smooth'}); }}
style={{flexShrink:0,background:'rgba(255,255,255,0.06)',border:'1px solid rgba(255,255,255,0.12)',
borderRadius:20,color:'rgba(255,255,255,0.6)',cursor:'pointer',
padding:'6px 8px',fontSize:14,lineHeight:1}}>‹</button>
)}
<div ref={chipScrollRef} onScroll={onChipScroll}
style={{display:'flex',gap:6,overflowX:'auto',flex:1,
padding:'3px 2px 6px',
scrollbarWidth:'none',WebkitOverflowScrolling:'touch'}}>
{TOOL_DEFS.map(t=>(
<button key={t.id}
onClick={()=>{ if(t.ready){setActiveTool(t.id);setActiveTab(t.tabs?.[0]?.id||'');} else toast('Kommt bald 🚧'); }}
style={{
display:'flex', alignItems:'center', gap:6, flexShrink:0,
padding:'7px 12px', borderRadius:20, fontFamily:'monospace', fontSize:11,
cursor:t.ready?'pointer':'default', whiteSpace:'nowrap',
background: activeTool===t.id ? 'rgba(78,205,196,0.15)' : 'rgba(255,255,255,0.05)',
border: activeTool===t.id ? '1px solid #4ecdc4' : '1px solid rgba(255,255,255,0.1)',
color: activeTool===t.id ? '#4ecdc4' : t.ready ? 'rgba(255,255,255,0.75)' : 'rgba(255,255,255,0.3)',
fontWeight: activeTool===t.id ? 700 : 400,
}}>
<span style={{fontSize:15}}>{getIcon(t.label)}</span>
<span>{getText(t.label)}</span>
</button>
))}
</div>
{chipScroll.right && (
<button onClick={()=>{ chipScrollRef.current?.scrollBy({left:160,behavior:'smooth'}); }}
style={{flexShrink:0,background:'rgba(255,255,255,0.06)',border:'1px solid rgba(255,255,255,0.12)',
borderRadius:20,color:'rgba(255,255,255,0.6)',cursor:'pointer',
padding:'6px 8px',fontSize:14,lineHeight:1}}>›</button>
)}
</div>
{/* Links-Fade — erscheint wenn nach rechts gescrollt */}
{chipScroll.left && (
<div style={{
position:'absolute', left:3, top:3, bottom:6, width:52, pointerEvents:'none',
borderRadius:20,
background:'linear-gradient(to right, #0d0d0f 30%, transparent)',
}}/>
)}
{/* Rechts-Fade — verschwindet wenn am Ende */}
{chipScroll.right && (
<div style={{
position:'absolute', right:3, top:3, bottom:6, width:52, pointerEvents:'none',
borderRadius:20,
background:'linear-gradient(to left, #0d0d0f 30%, transparent)',
}}/>
)}
</div>
) : (
<div style={{display:'grid',gridTemplateColumns:'repeat(2,1fr)',gap:5,marginBottom:16}}>