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

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

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