fix scroll

This commit is contained in:
Jade (Rose) Rowland 2024-01-20 14:25:42 -05:00
parent 4fe75143d0
commit 6c28398d20

View File

@ -100,67 +100,65 @@ export function PatternsTab({ context }) {
const viewingPatternID = viewingPatternData?.id; const viewingPatternID = viewingPatternData?.id;
return ( return (
<div className="px-4 w-full dark:text-white text-stone-900 space-y-2 pb-4"> <div className="px-4 w-full dark:text-white text-stone-900 space-y-2 pb-4 flex flex-col overflow-hidden max-h-full">
<ButtonGroup <ButtonGroup
value={patternFilter} value={patternFilter}
onChange={(value) => settingsMap.setKey('patternFilter', value)} onChange={(value) => settingsMap.setKey('patternFilter', value)}
items={patternFilterName} items={patternFilterName}
></ButtonGroup> ></ButtonGroup>
<section> <div className="pr-4 space-x-4 border-b border-foreground mb-2 flex max-w-full items-center h-16 overflow-x-auto">
<ActionButton
label="new"
onClick={() => {
const { data } = userPattern.createAndAddToDB();
updateCodeWindow(data);
}}
/>
<ActionButton
label="duplicate"
onClick={() => {
const { data } = userPattern.duplicate(viewingPatternData);
updateCodeWindow(data);
}}
/>
<ActionButton
label="delete"
onClick={() => {
const { data } = userPattern.delete(viewingPatternID);
updateCodeWindow({ ...data, collection: userPattern.collection });
}}
/>
<label className="hover:opacity-50 cursor-pointer">
<input
style={{ display: 'none' }}
type="file"
multiple
accept="text/plain,application/json"
onChange={(e) => importPatterns(e.target.files)}
/>
import
</label>
<ActionButton label="export" onClick={exportPatterns} />
<ActionButton
label="delete-all"
onClick={() => {
const { data } = userPattern.clearAll();
updateCodeWindow(data);
}}
/>
</div>
<section className="flex overflow-y-scroll max-h-full flex-col">
{patternFilter === patternFilterName.user && ( {patternFilter === patternFilterName.user && (
<div> <PatternButtons
<div className="pr-4 space-x-4 border-b border-foreground mb-2 flex overflow-auto max-w-full items-center"> onClick={(id) => updateCodeWindow({ ...userPatterns[id], collection: userPattern.collection }, false)}
<ActionButton patterns={userPatterns}
label="new" started={context.started}
onClick={() => { activePattern={activePattern}
const { data } = userPattern.createAndAddToDB(); viewingPatternID={viewingPatternID}
updateCodeWindow(data); />
}}
/>
<ActionButton
label="duplicate"
onClick={() => {
const { data } = userPattern.duplicate(viewingPatternData);
updateCodeWindow(data);
}}
/>
<ActionButton
label="delete"
onClick={() => {
const { data } = userPattern.delete(viewingPatternID);
updateCodeWindow({ ...data, collection: userPattern.collection });
}}
/>
<label className="hover:opacity-50 cursor-pointer">
<input
style={{ display: 'none' }}
type="file"
multiple
accept="text/plain,application/json"
onChange={(e) => importPatterns(e.target.files)}
/>
import
</label>
<ActionButton label="export" onClick={exportPatterns} />
<ActionButton
label="delete all"
onClick={() => {
const { data } = userPattern.clearAll();
updateCodeWindow(data);
}}
/>
</div>
<PatternButtons
onClick={(id) => updateCodeWindow({ ...userPatterns[id], collection: userPattern.collection }, false)}
patterns={userPatterns}
started={context.started}
activePattern={activePattern}
viewingPatternID={viewingPatternID}
/>
</div>
)} )}
{patternFilter !== patternFilterName.user && {patternFilter !== patternFilterName.user &&
Array.from(collections.keys()).map((collection) => { Array.from(collections.keys()).map((collection) => {
const patterns = collections.get(collection); const patterns = collections.get(collection);