mirror of
https://github.com/chinchang/web-maker.git
synced 2025-08-04 20:37:29 +02:00
fix file buttons
This commit is contained in:
@@ -140,6 +140,22 @@ const Assets = () => {
|
|||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const removeFileHandler = index => {
|
||||||
|
const file = files[index];
|
||||||
|
const answer = confirm(`Are you sure you want to delete "${file.name}"?`);
|
||||||
|
if (!answer) return;
|
||||||
|
const fileRef = storageRef.child(file.name);
|
||||||
|
fileRef
|
||||||
|
.delete()
|
||||||
|
.then(() => {
|
||||||
|
alertsService.add('File deleted successfully');
|
||||||
|
setFiles(files.filter((_, i) => i !== index));
|
||||||
|
})
|
||||||
|
.catch(error => {
|
||||||
|
console.error('File delete error:', error);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
if (!window.user?.isPro) {
|
if (!window.user?.isPro) {
|
||||||
return (
|
return (
|
||||||
<VStack align="stretch" gap={2}>
|
<VStack align="stretch" gap={2}>
|
||||||
@@ -235,19 +251,52 @@ const Assets = () => {
|
|||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
{filteredFiles.map((file, index) => (
|
{filteredFiles.map((file, index) => (
|
||||||
<button
|
<div
|
||||||
type="button"
|
|
||||||
key={index}
|
key={index}
|
||||||
onClick={() => copyFileUrl(file.url)}
|
|
||||||
class={`asset-manager__file ${
|
class={`asset-manager__file ${
|
||||||
listType === 'grid' ? 'asset-manager__file--grid' : ''
|
listType === 'grid' ? 'asset-manager__file--grid' : ''
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
{/* <a href={file.url} target="_blank" rel="noopener noreferrer"> */}
|
{/* <a href={file.url} target="_blank" rel="noopener noreferrer"> */}
|
||||||
<img src={file.url} />{' '}
|
<div class="d-f relative">
|
||||||
|
<img src={file.url} />{' '}
|
||||||
|
<div class="asset-manager__file-actions">
|
||||||
|
<Stack gap={1} fullWidth justify="center">
|
||||||
|
<button
|
||||||
|
class={`btn btn--dark ${
|
||||||
|
listType === 'list' ? 'btn--active' : ''
|
||||||
|
} hint--rounded hint--top-left`}
|
||||||
|
onClick={() => copyFileUrl(file.url)}
|
||||||
|
aria-label="Copy URL"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path d="M19 21H8V7h11m0-2H8a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h11a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2m-3-4H4a2 2 0 0 0-2 2v14h2V3h12V1Z" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
class={`btn btn--dark ${
|
||||||
|
listType === 'list' ? 'btn--active' : ''
|
||||||
|
} hint--rounded hint--top-left`}
|
||||||
|
onClick={() => removeFileHandler(index)}
|
||||||
|
aria-label="Delete"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="currentColor"
|
||||||
|
>
|
||||||
|
<path d="M9 3v1H4v2h1v13a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V6h1V4h-5V3H9M7 6h10v13H7V6m2 2v9h2V8H9m4 0v9h2V8h-2Z" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</Stack>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
<span class="asset-manager__file-name">{file.name}</span>
|
<span class="asset-manager__file-name">{file.name}</span>
|
||||||
{/* </a> */}
|
{/* </a> */}
|
||||||
</button>
|
</div>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
</VStack>
|
</VStack>
|
||||||
|
@@ -2142,6 +2142,24 @@ while the theme CSS file is loading */
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
height: auto;
|
height: auto;
|
||||||
}
|
}
|
||||||
|
.asset-manager__file-actions {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
opacity: 0;
|
||||||
|
padding: 0.5rem 0;
|
||||||
|
visibility: hidden;
|
||||||
|
transform: translateY(-0.5rem);
|
||||||
|
transition: 0.3s ease;
|
||||||
|
background-color: rgb(255 255 255 / 15%);
|
||||||
|
backdrop-filter: blur(5px);
|
||||||
|
}
|
||||||
|
.asset-manager__file:hover .asset-manager__file-actions {
|
||||||
|
transform: translateY(0rem);
|
||||||
|
opacity: 1;
|
||||||
|
visibility: visible;
|
||||||
|
}
|
||||||
.stack {
|
.stack {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
Reference in New Issue
Block a user