Add sidebar with Accordions to AddImageModal
This commit is contained in:
parent
b2f5b96e9e
commit
382356f8bc
1 changed files with 169 additions and 75 deletions
|
|
@ -15,82 +15,139 @@
|
||||||
<li>Inspirations</li>
|
<li>Inspirations</li>
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
<div
|
<div class="with-sidebar | h-full" data-side="right" style="--sidebar-width: 26rem; gap: var(--gap)">
|
||||||
class="auto-grid | bg-grey-50 | border border-grey-200 | rounded-2xl | w-full | p-8"
|
<div class="bg-grey-50 | border border-grey-200 | rounded-2xl | p-8 | overflow-y">
|
||||||
style="--min: 15rem; --gap: 0.5rem"
|
<div
|
||||||
>
|
class="auto-grid"
|
||||||
<FileUpload
|
style="--min: 15rem; --gap: 0.5rem"
|
||||||
mode="basic"
|
|
||||||
name="images[]"
|
|
||||||
:url="'/upload-images.json?pageUri=' + page.uri"
|
|
||||||
@upload="onAdvancedUpload($event)"
|
|
||||||
:auto="true"
|
|
||||||
:multiple="true"
|
|
||||||
accept="image/*"
|
|
||||||
:maxFileSize="1000000"
|
|
||||||
invalidFileSizeMessage="Fichier trop lourd"
|
|
||||||
chooseLabel="Ajouter une ou plusieurs images"
|
|
||||||
class="flex flex-col justify-center | bg-white | border border-grey-200 | text-grey-800 | font-medium | rounded-xl"
|
|
||||||
>
|
|
||||||
<template #chooseicon>
|
|
||||||
<svg
|
|
||||||
width="20"
|
|
||||||
height="20"
|
|
||||||
viewBox="0 0 20 20"
|
|
||||||
fill="none"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
d="M0.714355 15.0001V16.4286C0.714355 17.1864 1.01538 17.9131 1.55119 18.4489C2.08701 18.9848 2.81374 19.2858 3.5715 19.2858H16.4286C17.1864 19.2858 17.9131 18.9848 18.4489 18.4489C18.9848 17.9131 19.2858 17.1864 19.2858 16.4286V15.0001M5.71436 5.71436L10.0001 0.714355M10.0001 0.714355L14.2858 5.71436M10.0001 0.714355V13.5715"
|
|
||||||
stroke="currentColor"
|
|
||||||
stroke-width="1.25"
|
|
||||||
stroke-linecap="round"
|
|
||||||
stroke-linejoin="round"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</template>
|
|
||||||
<template
|
|
||||||
#content="{
|
|
||||||
files,
|
|
||||||
uploadedFiles,
|
|
||||||
removeUploadedFileCallback,
|
|
||||||
removeFileCallback,
|
|
||||||
}"
|
|
||||||
>
|
>
|
||||||
<div v-if="files.length > 0">Fichiers importés</div>
|
<FileUpload
|
||||||
</template>
|
mode="basic"
|
||||||
</FileUpload>
|
name="images[]"
|
||||||
<figure class="image">
|
:url="'/upload-images.json?pageUri=' + page.uri"
|
||||||
<img
|
@upload="onAdvancedUpload($event)"
|
||||||
src="https://images.unsplash.com/photo-1541643600914-78b084683601?q=80&w=2008&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
|
:auto="true"
|
||||||
alt=""
|
:multiple="true"
|
||||||
/>
|
accept="image/*"
|
||||||
</figure>
|
:maxFileSize="1000000"
|
||||||
<figure class="image">
|
invalidFileSizeMessage="Fichier trop lourd"
|
||||||
<img
|
chooseLabel="Ajouter une ou plusieurs images"
|
||||||
src="https://images.unsplash.com/photo-1541643600914-78b084683601?q=80&w=2008&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
|
class="flex flex-col justify-center | bg-white | border border-grey-200 | text-grey-800 | font-medium | rounded-xl"
|
||||||
alt=""
|
>
|
||||||
/>
|
<template #chooseicon>
|
||||||
</figure>
|
<svg
|
||||||
<figure class="image">
|
width="20"
|
||||||
<img
|
height="20"
|
||||||
src="https://images.unsplash.com/photo-1541643600914-78b084683601?q=80&w=2008&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
|
viewBox="0 0 20 20"
|
||||||
alt=""
|
fill="none"
|
||||||
/>
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
</figure>
|
>
|
||||||
<figure class="image">
|
<path
|
||||||
<img
|
d="M0.714355 15.0001V16.4286C0.714355 17.1864 1.01538 17.9131 1.55119 18.4489C2.08701 18.9848 2.81374 19.2858 3.5715 19.2858H16.4286C17.1864 19.2858 17.9131 18.9848 18.4489 18.4489C18.9848 17.9131 19.2858 17.1864 19.2858 16.4286V15.0001M5.71436 5.71436L10.0001 0.714355M10.0001 0.714355L14.2858 5.71436M10.0001 0.714355V13.5715"
|
||||||
src="https://images.unsplash.com/photo-1541643600914-78b084683601?q=80&w=2008&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
|
stroke="currentColor"
|
||||||
alt=""
|
stroke-width="1.25"
|
||||||
/>
|
stroke-linecap="round"
|
||||||
</figure>
|
stroke-linejoin="round"
|
||||||
<figure class="image">
|
/>
|
||||||
<img
|
</svg>
|
||||||
src="https://images.unsplash.com/photo-1541643600914-78b084683601?q=80&w=2008&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
|
</template>
|
||||||
alt=""
|
<template
|
||||||
/>
|
#content="{
|
||||||
</figure>
|
files,
|
||||||
<Toast />
|
uploadedFiles,
|
||||||
|
removeUploadedFileCallback,
|
||||||
|
removeFileCallback,
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
<div v-if="files.length > 0">Fichiers importés</div>
|
||||||
|
</template>
|
||||||
|
</FileUpload>
|
||||||
|
<figure class="image">
|
||||||
|
<img
|
||||||
|
src="https://images.unsplash.com/photo-1541643600914-78b084683601?q=80&w=2008&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
|
||||||
|
alt=""
|
||||||
|
/>
|
||||||
|
</figure>
|
||||||
|
<figure class="image">
|
||||||
|
<img
|
||||||
|
src="https://images.unsplash.com/photo-1541643600914-78b084683601?q=80&w=2008&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
|
||||||
|
alt=""
|
||||||
|
/>
|
||||||
|
</figure>
|
||||||
|
<figure class="image">
|
||||||
|
<img
|
||||||
|
src="https://images.unsplash.com/photo-1541643600914-78b084683601?q=80&w=2008&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
|
||||||
|
alt=""
|
||||||
|
/>
|
||||||
|
</figure>
|
||||||
|
<figure class="image">
|
||||||
|
<img
|
||||||
|
src="https://images.unsplash.com/photo-1541643600914-78b084683601?q=80&w=2008&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
|
||||||
|
alt=""
|
||||||
|
/>
|
||||||
|
</figure>
|
||||||
|
<figure class="image">
|
||||||
|
<img
|
||||||
|
src="https://images.unsplash.com/photo-1541643600914-78b084683601?q=80&w=2008&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
|
||||||
|
alt=""
|
||||||
|
/>
|
||||||
|
</figure>
|
||||||
|
<Toast />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-col items-start | bg-grey-50 | border border-grey-200 | rounded-2xl | w-full | p-8">
|
||||||
|
<Accordion value="0" class="flex flex-col" style="--row-gap:var(--space-8)">
|
||||||
|
<AccordionPanel v-for="tab in tabs" :key="tab.title" :value="tab.value" class="w-full | bg-white | rounded-xl | p-12 pt-8">
|
||||||
|
<AccordionHeader>
|
||||||
|
<span class="badge">{{ tab.title }}</span>
|
||||||
|
</AccordionHeader>
|
||||||
|
<AccordionContent>
|
||||||
|
<div class="image-details__description | my-16">
|
||||||
|
<label
|
||||||
|
for="image-description"
|
||||||
|
class="flex | text-sm text-grey-700 | mb-8"
|
||||||
|
>Description</label
|
||||||
|
>
|
||||||
|
<textarea
|
||||||
|
name="image-description"
|
||||||
|
id="image-description"
|
||||||
|
placeholder="Ajoutez une description à cette image…"
|
||||||
|
rows="3"
|
||||||
|
class="border border-grey-200 | rounded-xl | p-16 | w-full"
|
||||||
|
@input="saveDescription()"
|
||||||
|
></textarea>
|
||||||
|
</div>
|
||||||
|
<fieldset class="image-details__filters | flex-1">
|
||||||
|
<legend class="text-sm text-grey-700 | mb-8">Sélectionner un ou plusieurs tags</legend>
|
||||||
|
<div class="flex" style="gap: var(--space-8)">
|
||||||
|
<template v-for="tag in ['Parachèvements', 'Forme & Design', 'Matériaux & Textures', 'Coloris & Nuances']" :key="tag">
|
||||||
|
<input
|
||||||
|
class="sr-only"
|
||||||
|
type="checkbox"
|
||||||
|
:id="`${tag}`"
|
||||||
|
:name="`${tag}`"
|
||||||
|
:value="`${tag}`"
|
||||||
|
v-model="localSelectedTags"
|
||||||
|
/>
|
||||||
|
<label class="btn btn--sm btn--primary" :for="`${tag}`">{{ tag }}</label>
|
||||||
|
</template>
|
||||||
|
</div>
|
||||||
|
</fieldset>
|
||||||
|
</AccordionContent>
|
||||||
|
</AccordionPanel>
|
||||||
|
<template #collapseicon>
|
||||||
|
<svg aria-hidden="true" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" style="transform:rotate(180deg)">
|
||||||
|
<path d="M1.875 6.0625L9.5625 13.75C9.61861 13.8098 9.68638 13.8574 9.76163 13.89C9.83688 13.9226 9.918 13.9394 10 13.9394C10.082 13.9394 10.1631 13.9226 10.2384 13.89C10.3136 13.8574 10.3814 13.8098 10.4375 13.75L18.125 6.0625" stroke="#5E6060" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
</svg>
|
||||||
|
</template>
|
||||||
|
<template #expandicon>
|
||||||
|
<svg aria-hidden="true" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M1.875 6.0625L9.5625 13.75C9.61861 13.8098 9.68638 13.8574 9.76163 13.89C9.83688 13.9226 9.918 13.9394 10 13.9394C10.082 13.9394 10.1631 13.9226 10.2384 13.89C10.3136 13.8574 10.3814 13.8098 10.4375 13.75L18.125 6.0625" stroke="#5E6060" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
</svg>
|
||||||
|
</template>
|
||||||
|
</Accordion>
|
||||||
|
<button class="btn | w-full | mt-auto">Ajouter les images sélectionnées</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</Dialog>
|
</Dialog>
|
||||||
|
|
@ -101,6 +158,10 @@ import Dialog from "primevue/dialog";
|
||||||
import Toast from "primevue/toast";
|
import Toast from "primevue/toast";
|
||||||
import { useToast } from "primevue/usetoast";
|
import { useToast } from "primevue/usetoast";
|
||||||
import FileUpload from "primevue/fileupload";
|
import FileUpload from "primevue/fileupload";
|
||||||
|
import Accordion from 'primevue/accordion';
|
||||||
|
import AccordionPanel from 'primevue/accordionpanel';
|
||||||
|
import AccordionHeader from 'primevue/accordionheader';
|
||||||
|
import AccordionContent from 'primevue/accordioncontent';
|
||||||
import { usePageStore } from "../../../stores/page";
|
import { usePageStore } from "../../../stores/page";
|
||||||
import { ref, watch } from "vue";
|
import { ref, watch } from "vue";
|
||||||
|
|
||||||
|
|
@ -116,6 +177,25 @@ const isOpen = ref(isAddImagesModalOpen);
|
||||||
watch(isOpen, (newValue) => {
|
watch(isOpen, (newValue) => {
|
||||||
emit("close");
|
emit("close");
|
||||||
});
|
});
|
||||||
|
|
||||||
|
const tabs = [
|
||||||
|
{
|
||||||
|
"title": "1",
|
||||||
|
"value": "0"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "2",
|
||||||
|
"value": "1"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "3",
|
||||||
|
"value": "2"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "4",
|
||||||
|
"value": "3"
|
||||||
|
}
|
||||||
|
]
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
|
@ -174,4 +254,18 @@ watch(isOpen, (newValue) => {
|
||||||
width: 1.5rem;
|
width: 1.5rem;
|
||||||
height: 1.5rem;
|
height: 1.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.with-sidebar[data-side="right"] > * {
|
||||||
|
height: 100%;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Accordion */
|
||||||
|
[data-pc-name="accordionheader"] {
|
||||||
|
height: var(--space-40);
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue