BetterSEQTA/BetterSEQTA-Plus
1
0
Fork 0
mirror of https://github.com/BetterSEQTA/BetterSEQTA-Plus.git synced 2026-06-06 03:34:40 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: Updated interface/src/components/BackgroundS

Browse Source
This commit is contained in:
sweep-ai[bot]
2023-11-15 09:53:09 +00:00
committed by GitHub
parent f156663e84
commit c0c32475fd
1 changed files with 21 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
interface/src/components/BackgroundSelector.tsx
+21 -6
View File
@@ -87,7 +87,14 @@ export default function BackgroundSelector({ selectedType, setSelectedType, isEd
store.delete(fileId); store.delete(fileId);
setBackgrounds(prev => prev.filter(bg => bg.id !== fileId)); setBackgrounds(prev => prev.filter(bg => bg.id !== fileId));
// Check if the background being deleted is currently selected <img
className="object-cover w-full h-full rounded-xl"
src={bg.url}
alt="swatch"
/>
</div>
))}
{backgrounds.concat(presetBackgrounds as Background[]).filter(bg => bg.type === 'image' && bg.isPreset && !bg.isDownloaded && !downloadedPresetIds.includes(bg.id)).map(bg => (
if (fileId === selectedBackground) { if (fileId === selectedBackground) {
selectNoBackground(); // Disable the current background selectNoBackground(); // Disable the current background
} }
@@ -123,16 +130,24 @@ export default function BackgroundSelector({ selectedType, setSelectedType, isEd
<input type="file" accept='image/*, video/*' onChange={handleFileChange} className="absolute inset-0 w-full h-full opacity-0 cursor-pointer" /> <input type="file" accept='image/*, video/*' onChange={handleFileChange} className="absolute inset-0 w-full h-full opacity-0 cursor-pointer" />
</div> </div>
{backgrounds.filter(bg => bg.type === 'image').map(bg => ( {backgrounds.filter(bg => bg.type === 'image').map(bg => (
<div key={bg.id} <div
key={bg.id}
onClick={() => selectBackground(bg.id)} onClick={() => selectBackground(bg.id)}
className={`relative w-16 h-16 cursor-pointer rounded-xl transition ring dark:ring-white ring-zinc-300 ${isEditMode ? 'animate-shake' : ''} ${selectedBackground === bg.id && selectedType === "background" ? 'dark:ring-2 ring-4' : 'ring-0'}`}> className={`relative w-16 h-16 cursor-pointer rounded-xl transition ring dark:ring-white ring-zinc-300 ${isEditMode ? 'animate-shake' : ''} ${selectedBackground === bg.id && selectedType === "background" ? 'dark:ring-2 ring-4' : 'ring-0'}`}
>
{isEditMode && ( {isEditMode && (
<div className="absolute top-0 right-0 z-10 flex w-6 h-6 p-2 text-white translate-x-1/2 -translate-y-1/2 bg-red-600 rounded-full place-items-center" <div
onClick={() => deleteBackground(bg.id)}> className="absolute top-0 right-0 z-10 flex w-6 h-6 p-2 text-white translate-x-1/2 -translate-y-1/2 bg-red-600 rounded-full place-items-center"
onClick={() => deleteBackground(bg.id)}
>
<div className="w-4 h-0.5 bg-white"></div> <div className="w-4 h-0.5 bg-white"></div>
</div> </div>
)} )}
<img className="object-cover w-full h-full rounded-xl" src={bg.url} alt="swatch" /> <img
className="object-cover w-full h-full rounded-xl"
src={bg.url}
alt="swatch"
/>
</div> </div>
))} ))}
{backgrounds.concat(presetBackgrounds as Background[]).filter(bg => bg.type === 'image' && bg.isPreset && !bg.isDownloaded && !downloadedPresetIds.includes(bg.id)).map(bg => ( {backgrounds.concat(presetBackgrounds as Background[]).filter(bg => bg.type === 'image' && bg.isPreset && !bg.isDownloaded && !downloadedPresetIds.includes(bg.id)).map(bg => (