feat: add drag-and-drop to BannerEditor and CreatorLogoEditor
This commit is contained in:
@@ -41,7 +41,10 @@
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div v-else class="image-preview-container" @click="startEditing">
|
||||
<div v-else class="image-preview-container"
|
||||
@click="startEditing"
|
||||
@dragover.prevent
|
||||
@drop.prevent="handleDrop">
|
||||
<img
|
||||
:src="fileUrl || fallbackUrl"
|
||||
:alt="t('preview')"
|
||||
@@ -209,6 +212,20 @@ const cancel = () => {
|
||||
}
|
||||
emits('closeRequested')
|
||||
}
|
||||
|
||||
// Add drop handler
|
||||
const handleDrop = (event) => {
|
||||
const file = event.dataTransfer.files[0]
|
||||
if (file && file.type.startsWith('image/')) {
|
||||
selectedFile.value = file
|
||||
const reader = new FileReader()
|
||||
reader.onload = (e) => {
|
||||
fileUrl.value = e.target.result
|
||||
showCropper.value = true
|
||||
}
|
||||
reader.readAsDataURL(file)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@@ -226,6 +243,12 @@ const cancel = () => {
|
||||
@apply rounded-lg;
|
||||
@apply relative;
|
||||
@apply cursor-pointer;
|
||||
@apply border-2;
|
||||
@apply border-dashed;
|
||||
@apply border-gray-300;
|
||||
@apply hover:border-gray-500;
|
||||
@apply transition-colors;
|
||||
@apply duration-200;
|
||||
}
|
||||
|
||||
.preview-image {
|
||||
|
||||
@@ -42,7 +42,10 @@
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div v-else class="image-preview-container" @click="startEditing">
|
||||
<div v-else class="image-preview-container"
|
||||
@click="startEditing"
|
||||
@dragover.prevent
|
||||
@drop.prevent="handleDrop">
|
||||
<div class="circular-preview">
|
||||
<img
|
||||
:src="fileUrl || fallbackUrl"
|
||||
@@ -216,6 +219,20 @@ const cancel = () => {
|
||||
}
|
||||
emits('closeRequested')
|
||||
}
|
||||
|
||||
// Add drop handler
|
||||
const handleDrop = (event) => {
|
||||
const file = event.dataTransfer.files[0]
|
||||
if (file && file.type.startsWith('image/')) {
|
||||
selectedFile.value = file
|
||||
const reader = new FileReader()
|
||||
reader.onload = (e) => {
|
||||
fileUrl.value = e.target.result
|
||||
showCropper.value = true
|
||||
}
|
||||
reader.readAsDataURL(file)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@@ -229,6 +246,14 @@ const cancel = () => {
|
||||
@apply flex;
|
||||
@apply justify-center;
|
||||
@apply items-center;
|
||||
@apply border-2;
|
||||
@apply border-dashed;
|
||||
@apply border-gray-300;
|
||||
@apply hover:border-gray-500;
|
||||
@apply transition-colors;
|
||||
@apply duration-200;
|
||||
@apply rounded-lg;
|
||||
@apply p-4;
|
||||
}
|
||||
|
||||
.circular-preview {
|
||||
|
||||
Reference in New Issue
Block a user