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

DevTools Mobile: Scroll-Fades abgerundet, links-Fade dynamisch bei Scroll-Position

Browse Source
This commit is contained in:
Dicken
2026-06-05 01:22:31 +02:00
parent ee47a8bcc7
commit eea77f30da
1 changed files with 32 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -3092,6 +3092,17 @@ const TOOL_DEFS = [
export default function DevTools({ toast, mobile }) {
const [activeTool, setActiveTool] = useState('cron');
const [activeTab, setActiveTab] = useState('explain');
const chipScrollRef = useRef(null);
const [chipScroll, setChipScroll] = useState({ left: false, right: true });
const onChipScroll = () => {
const el = chipScrollRef.current;
if (!el) return;
setChipScroll({
left: el.scrollLeft > 4,
right: el.scrollLeft < el.scrollWidth - el.clientWidth - 4,
});
};
const active = TOOL_DEFS.find(t=>t.id===activeTool);
const ActiveComp = active?.tabs ? active.components[activeTab] : active?.component;
@@ -3109,9 +3120,10 @@ export default function DevTools({ toast, mobile }) {
{/* Tool-Auswahl: Mobile = horizontal scroll mit Fade-Hint, Desktop = 2-Spalten-Grid */}
{mobile ? (
<div style={{position:'relative', marginBottom:16}}>
<div style={{display:'flex',gap:6,overflowX:'auto',
padding:'3px 3px 6px 3px', /* Platz für border, kein clip */
scrollbarWidth:'none',WebkitOverflowScrolling:'touch'}}>
<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 🚧'); }}
@@ -3128,19 +3140,24 @@ export default function DevTools({ toast, mobile }) {
<span>{getText(t.label)}</span>
</button>
))}
{/* Abstandshalter rechts damit letzter Chip nicht unter Fade liegt */}
<div style={{flexShrink:0, width:32}}/>
<div style={{flexShrink:0, width:28}}/>
</div>
{/* Fade-Overlay rechts → signalisiert weiteren Inhalt ohne Chips abzuschneiden */}
<div style={{
position:'absolute', right:0, top:0, bottom:6, width:48, pointerEvents:'none',
background:'linear-gradient(to right, transparent, #0d0d0f 80%)',
}}/>
{/* Scroll-Pfeil */}
<div style={{
position:'absolute', right:6, top:'50%', transform:'translateY(-60%)',
color:'rgba(255,255,255,0.35)', fontSize:14, pointerEvents:'none',
}}>›</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}}>