Update AddImages.vue: use checkboxes instead of buttons for project tags filter, use mode="basic" for FileUpload component, add Dialog component
This commit is contained in:
parent
572efebdf4
commit
c7b2052be1
1 changed files with 151 additions and 61 deletions
|
|
@ -1,83 +1,127 @@
|
||||||
<template>
|
<template>
|
||||||
<section class="h-full | flex flex-col" style="--row-gap: var(--space-32)">
|
<section class="h-full | flex flex-col" style="--row-gap: var(--space-32)">
|
||||||
<header
|
<header
|
||||||
class="project-details | flex items-baseline | bg-white | rounded-2xl | p-16 | w-full"
|
class="project-details | flex | bg-white | rounded-2xl | p-16 | w-full"
|
||||||
>
|
>
|
||||||
<div class="project-details__description | flex-1">
|
<div class="project-details__description | flex-1">
|
||||||
<h2 class="text-sm text-grey-700 | mb-8">Description du projet</h2>
|
<label for="project-description" class="flex | text-sm text-grey-700 | mb-8">Description du projet</label>
|
||||||
<textarea
|
<textarea
|
||||||
name="description"
|
name="project-description"
|
||||||
id="description"
|
id="project-description"
|
||||||
placeholder="Ajoutez une description générale de votre projet…"
|
placeholder="Ajoutez une description générale de votre projet…"
|
||||||
rows="3"
|
rows="3"
|
||||||
class="border border-grey-200 | rounded-xl | p-16 | w-full"
|
class="border border-grey-200 | rounded-xl | p-16 | w-full"
|
||||||
></textarea>
|
></textarea>
|
||||||
</div>
|
</div>
|
||||||
<div class="project-details__filters | flex-1">
|
<fieldset class="project-details__filters | flex-1">
|
||||||
<h2 class="text-sm text-grey-700 | mb-8">Filtrer par tags</h2>
|
<legend class="text-sm text-grey-700 | mb-8">Filtrer par tags</legend>
|
||||||
<div class="flex" style="gap: var(--space-8)">
|
<div class="flex" style="gap: var(--space-8)">
|
||||||
<button class="btn btn--sm btn--grey" id="all">Voir tout</button>
|
<button class="btn btn--sm btn--grey" id="all" aria-pressed="true">Voir tout</button>
|
||||||
<button class="btn btn--sm btn--primary">Bouchon</button>
|
<input class="sr-only" type="checkbox" id="bouchon" name="bouchon">
|
||||||
<button class="btn btn--sm btn--primary">Bouton Poussoir</button>
|
<label class="btn btn--sm btn--primary" for="bouchon">Bouchon</label>
|
||||||
<button class="btn btn--sm btn--primary">Coloris & Nuances</button>
|
<input class="sr-only" type="checkbox" id="bouchon-poussoir" name="bouchon-poussoir">
|
||||||
<button class="btn btn--sm btn--primary">DA Globale</button>
|
<label class="btn btn--sm btn--primary" for="bouchon-poussoir">Bouton Poussoir</label>
|
||||||
<button class="btn btn--sm btn--primary">Forme & Design</button>
|
<input class="sr-only" type="checkbox" id="coloris-nuances" name="coloris-nuances">
|
||||||
<button class="btn btn--sm btn--primary">Matériaux & Textures</button>
|
<label class="btn btn--sm btn--primary" for="coloris-nuances">Coloris & Nuances</label>
|
||||||
<button class="btn btn--sm btn--primary">Parachèvements</button>
|
<input class="sr-only" type="checkbox" id="da-globale" name="da-globale">
|
||||||
|
<label class="btn btn--sm btn--primary" for="da-globale">DA Globale</label>
|
||||||
|
<input class="sr-only" type="checkbox" id="forme-design" name="forme-design">
|
||||||
|
<label class="btn btn--sm btn--primary" for="forme-design">Forme & Design</label>
|
||||||
|
<input class="sr-only" type="checkbox" id="materiaux-textures" name="materiaux-textures">
|
||||||
|
<label class="btn btn--sm btn--primary" for="materiaux-textures">Matériaux & Textures</label>
|
||||||
|
<input class="sr-only" type="checkbox" id="parachevements" name="parachevements">
|
||||||
|
<label class="btn btn--sm btn--primary" for="parachevements">Parachèvements</label>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</fieldset>
|
||||||
</header>
|
</header>
|
||||||
<!-- <div class="h-full | masonry">
|
|
||||||
<button
|
|
||||||
data-icon="upload"
|
|
||||||
class="flex flex-col | bg-white | border border-grey-200 | text-grey-800 | font-medium | rounded-2xl"
|
|
||||||
>
|
|
||||||
Ajouter une ou plusieurs images
|
|
||||||
</button>
|
|
||||||
</div> -->
|
|
||||||
<div class="h-full | masonry">
|
<div class="h-full | masonry">
|
||||||
<button
|
<FileUpload
|
||||||
data-icon="upload"
|
mode="basic"
|
||||||
|
name="images[]"
|
||||||
|
:url="'/upload.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 | bg-white | border border-grey-200 | text-grey-800 | font-medium | rounded-2xl"
|
class="flex flex-col | bg-white | border border-grey-200 | text-grey-800 | font-medium | rounded-2xl"
|
||||||
>
|
>
|
||||||
<FileUpload
|
<template #chooseicon>
|
||||||
name="images[]"
|
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
:url="'/upload.json?pageUri=' + page.uri"
|
<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"/>
|
||||||
@upload="onAdvancedUpload($event)"
|
</svg>
|
||||||
:multiple="true"
|
</template>
|
||||||
accept="image/*"
|
<template
|
||||||
:maxFileSize="1000000"
|
#content="{
|
||||||
invalidFileSizeMessage="Fichier trop lourd"
|
files,
|
||||||
|
uploadedFiles,
|
||||||
|
removeUploadedFileCallback,
|
||||||
|
removeFileCallback
|
||||||
|
}"
|
||||||
>
|
>
|
||||||
<template #empty>
|
<div v-if="files.length > 0">Fichiers importés</div>
|
||||||
<span class="empty-message"
|
</template>
|
||||||
>Glissez-déposez vos fichiers ici pour les ajouter.</span
|
</FileUpload>
|
||||||
>
|
|
||||||
</template>
|
|
||||||
<template
|
|
||||||
#content="{
|
|
||||||
files,
|
|
||||||
uploadedFiles,
|
|
||||||
removeUploadedFileCallback,
|
|
||||||
removeFileCallback,
|
|
||||||
}"
|
|
||||||
>
|
|
||||||
<div v-if="files.length > 0">Fichiers importés</div>
|
|
||||||
</template>
|
|
||||||
</FileUpload>
|
|
||||||
</button>
|
|
||||||
<Toast />
|
<Toast />
|
||||||
|
<figure v-for="image in images" class="image" @click="visible = true">
|
||||||
|
<span class="tag | btn btn--sm">Tag</span>
|
||||||
|
<img :src="image" alt="" />
|
||||||
|
</figure>
|
||||||
</div>
|
</div>
|
||||||
<figure v-for="image in images" class="image">
|
<Dialog
|
||||||
<span class="tag | btn btn--sm">Tag</span>
|
v-model:visible="visible"
|
||||||
<img :src="image" alt="" />
|
modal
|
||||||
</figure>
|
header="Détails de l’image"
|
||||||
|
:style="{ width: '62.5rem', height: '50rem' }"
|
||||||
|
class="bg-white | text-grey-800 | rounded-2xl | overflow-hidden"
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
:src="image"
|
||||||
|
alt=""
|
||||||
|
class="bg-grey-200"
|
||||||
|
loading="lazy"
|
||||||
|
>
|
||||||
|
<div class="flex flex-col | p-32" style="--row-gap: var(--space-32)">
|
||||||
|
<fieldset class="image__tags">
|
||||||
|
<legend class="text-sm text-grey-700 | mb-8">Tags</legend>
|
||||||
|
<div class="flex" style="gap: var(--space-8)">
|
||||||
|
<input class="sr-only" type="checkbox" id="bouchon" name="bouchon">
|
||||||
|
<label class="btn btn--sm btn--primary" for="bouchon">Bouchon</label>
|
||||||
|
<input class="sr-only" type="checkbox" id="bouchon-poussoir" name="bouchon-poussoir">
|
||||||
|
<label class="btn btn--sm btn--primary" for="bouchon-poussoir">Bouton Poussoir</label>
|
||||||
|
<input class="sr-only" type="checkbox" id="coloris-nuances" name="coloris-nuances">
|
||||||
|
<label class="btn btn--sm btn--primary" for="coloris-nuances">Coloris & Nuances</label>
|
||||||
|
<input class="sr-only" type="checkbox" id="da-globale" name="da-globale">
|
||||||
|
<label class="btn btn--sm btn--primary" for="da-globale">DA Globale</label>
|
||||||
|
<input class="sr-only" type="checkbox" id="forme-design" name="forme-design">
|
||||||
|
<label class="btn btn--sm btn--primary" for="forme-design">Forme & Design</label>
|
||||||
|
<input class="sr-only" type="checkbox" id="materiaux-textures" name="materiaux-textures">
|
||||||
|
<label class="btn btn--sm btn--primary" for="materiaux-textures">Matériaux & Textures</label>
|
||||||
|
<input class="sr-only" type="checkbox" id="parachevements" name="parachevements">
|
||||||
|
<label class="btn btn--sm btn--primary" for="parachevements">Parachèvements</label>
|
||||||
|
</div>
|
||||||
|
</fieldset>
|
||||||
|
<div class="image__description | w-full">
|
||||||
|
<label for="image-description" class="flex | text-sm text-grey-700 | mb-8">Description de l’image</label>
|
||||||
|
<textarea
|
||||||
|
name="image-description"
|
||||||
|
id="image-description"
|
||||||
|
placeholder="Ajoutez une description à l’image…"
|
||||||
|
class="border border-grey-200 | rounded-xl | p-16 | w-full"
|
||||||
|
></textarea>
|
||||||
|
</div>
|
||||||
|
<button data-icon="trash" class="btn btn--black-10 | ml-auto mt-auto" @click="visible = false">Supprimer cette image</button>
|
||||||
|
</div>
|
||||||
|
</Dialog>
|
||||||
</section>
|
</section>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import Toast from "primevue/toast";
|
import Toast from "primevue/toast";
|
||||||
import FileUpload from "primevue/fileupload";
|
import FileUpload from "primevue/fileupload";
|
||||||
|
import Dialog from 'primevue/dialog';
|
||||||
import { useToast } from "primevue/usetoast";
|
import { useToast } from "primevue/usetoast";
|
||||||
import { usePageStore } from "../../../stores/page";
|
import { usePageStore } from "../../../stores/page";
|
||||||
import { ref } from "vue";
|
import { ref } from "vue";
|
||||||
|
|
@ -117,19 +161,65 @@ const onAdvancedUpload = (event) => {
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
button[data-icon="upload"] {
|
fieldset {
|
||||||
|
appearance: none;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-pc-name="fileupload"] button {
|
||||||
padding: 6.875rem 4.875rem;
|
padding: 6.875rem 4.875rem;
|
||||||
}
|
}
|
||||||
|
[data-pc-name="fileupload"] button:hover {
|
||||||
|
background: var(--color-primary-10);
|
||||||
|
border-color: var(--color-primary-20);
|
||||||
|
color: var(--color-primary-100);
|
||||||
|
}
|
||||||
input[type="file"] {
|
input[type="file"] {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
/* button[aria-label="Choose"],
|
|
||||||
button[aria-label="Upload"] {
|
|
||||||
display: none;
|
|
||||||
} */
|
|
||||||
|
|
||||||
.empty-message {
|
[data-pc-section="mask"] {
|
||||||
margin-top: 1rem;
|
background-color: var(--color-black-50);
|
||||||
|
}
|
||||||
|
[data-pc-name="dialog"] {
|
||||||
|
flex-direction: row !important;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
[data-pc-name="dialog"] [data-pc-section="header"] {
|
||||||
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
right: 0;
|
||||||
|
z-index: 1102;
|
||||||
|
padding: 1.5rem var(--space-32);
|
||||||
|
}
|
||||||
|
[data-pc-section="title"] {
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: var(--text-lg);
|
||||||
|
}
|
||||||
|
[data-pc-name="pcclosebutton"] {
|
||||||
|
position: absolute;
|
||||||
|
top: var(--space-16);
|
||||||
|
right: var(--space-16);
|
||||||
|
padding: 0.625rem;
|
||||||
|
}
|
||||||
|
[data-pc-name="pcclosebutton"] svg {
|
||||||
|
width: 1.25rem;
|
||||||
|
height: 1.25rem;
|
||||||
|
}
|
||||||
|
[data-pc-name="pcclosebutton"] span {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
[data-pc-name="dialog"] [data-pc-section="content"] {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
[data-pc-name="dialog"] [data-pc-section="content"] > * {
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
[data-pc-name="dialog"] [data-pc-section="content"] > div {
|
||||||
|
padding-top: 5rem;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue