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> <span style={{color:'rgba(255,255,255,0.5)',fontFamily:'monospace',fontSize:10}}>Konverter · Formatter · Helfer</span>
</div> </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 ? ( {mobile ? (
<div style={{position:'relative', marginBottom:16}}> <div style={{marginBottom:16}}>
<div ref={chipScrollRef} onScroll={onChipScroll} <div style={{display:'flex',alignItems:'center',gap:4}}>
style={{display:'flex',gap:6,overflowX:'auto', {chipScroll.left && (
padding:'3px 3px 6px 3px', <button onClick={()=>{ chipScrollRef.current?.scrollBy({left:-160,behavior:'smooth'}); }}
scrollbarWidth:'none',WebkitOverflowScrolling:'touch'}}> style={{flexShrink:0,background:'rgba(255,255,255,0.06)',border:'1px solid rgba(255,255,255,0.12)',
{TOOL_DEFS.map(t=>( borderRadius:20,color:'rgba(255,255,255,0.6)',cursor:'pointer',
<button key={t.id} padding:'6px 8px',fontSize:14,lineHeight:1}}>‹</button>
onClick={()=>{ if(t.ready){setActiveTool(t.id);setActiveTab(t.tabs?.[0]?.id||'');} else toast('Kommt bald 🚧'); }} )}
style={{ <div ref={chipScrollRef} onScroll={onChipScroll}
display:'flex', alignItems:'center', gap:6, flexShrink:0, style={{display:'flex',gap:6,overflowX:'auto',flex:1,
padding:'7px 12px', borderRadius:20, fontFamily:'monospace', fontSize:11, padding:'3px 2px 6px',
cursor:t.ready?'pointer':'default', whiteSpace:'nowrap', scrollbarWidth:'none',WebkitOverflowScrolling:'touch'}}>
background: activeTool===t.id ? 'rgba(78,205,196,0.15)' : 'rgba(255,255,255,0.05)', {TOOL_DEFS.map(t=>(
border: activeTool===t.id ? '1px solid #4ecdc4' : '1px solid rgba(255,255,255,0.1)', <button key={t.id}
color: activeTool===t.id ? '#4ecdc4' : t.ready ? 'rgba(255,255,255,0.75)' : 'rgba(255,255,255,0.3)', onClick={()=>{ if(t.ready){setActiveTool(t.id);setActiveTab(t.tabs?.[0]?.id||'');} else toast('Kommt bald 🚧'); }}
fontWeight: activeTool===t.id ? 700 : 400, style={{
}}> display:'flex', alignItems:'center', gap:6, flexShrink:0,
<span style={{fontSize:15}}>{getIcon(t.label)}</span> padding:'7px 12px', borderRadius:20, fontFamily:'monospace', fontSize:11,
<span>{getText(t.label)}</span> cursor:t.ready?'pointer':'default', whiteSpace:'nowrap',
</button> 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)',
<div style={{flexShrink:0, width:28}}/> 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> </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>
) : ( ) : (
<div style={{display:'grid',gridTemplateColumns:'repeat(2,1fr)',gap:5,marginBottom:16}}> <div style={{display:'grid',gridTemplateColumns:'repeat(2,1fr)',gap:5,marginBottom:16}}>