studio-variable/designtopack
3
0
Fork 0
Code Issues 7 Pull requests Projects Releases Packages Wiki Activity Actions

restore filters

Browse source
This commit is contained in:
isUnknown 2024-10-08 17:49:11 +02:00
parent 279a1248f9
commit 80e63eb529
2 changed files with 23 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

2
public/content/projects/1_miss-dior-blooming-bouquet/1_client-brief/2846277834_perfume-1042715_1280.jpg.txt
View file

@ -2,7 +2,7 @@ Description:
---- ----
Tags: bouton poussoir, coloris & nuances Tags: bouton poussoir, coloris & nuances, matériaux & textures
---- ----

36
src/components/project/ClientBrief/Images.vue
View file

@ -8,23 +8,30 @@
<button <button
data-icon="upload" data-icon="upload"
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"
@click="addImages = true" @click="isAddImagesOpen = true"
> >
Ajouter une ou plusieurs images Ajouter une ou plusieurs images
</button> </button>
<figure <template v-for="image in images" :key="image.uri">
v-for="image in images" <figure
class="image" v-if="
@click="imageDetails = true" selectedTags.length === 0 ||
> selectedTags.some((pageSelectedTag) =>
<span class="tag | btn btn--sm">Tag</span> image.tags.includes(pageSelectedTag)
<img :src="image.url" alt="" /> )
</figure> "
class="image"
@click="imageDetails = image"
>
<span class="tag | btn btn--sm">Tag</span>
<img :src="image.url" alt="" />
</figure>
</template>
</div> </div>
<Dialog <Dialog
id="add-images" id="add-images"
v-model:visible="addImages" v-model:visible="isAddImagesOpen"
modal modal
header="Ajouter des images" header="Ajouter des images"
class="bg-white | text-grey-800 | rounded-2xl | overflow-hidden | p-32" class="bg-white | text-grey-800 | rounded-2xl | overflow-hidden | p-32"
@ -125,7 +132,7 @@
header="Détails de l’image" header="Détails de l’image"
class="bg-white | text-grey-800 | rounded-2xl | overflow-hidden" class="bg-white | text-grey-800 | rounded-2xl | overflow-hidden"
> >
<img :src="modal.url" alt="" class="bg-grey-200" loading="lazy" /> <img :src="imageDetails.url" alt="" class="bg-grey-200" loading="lazy" />
<div class="flex flex-col | p-32" style="--row-gap: var(--space-32)"> <div class="flex flex-col | p-32" style="--row-gap: var(--space-32)">
<fieldset class="image__tags"> <fieldset class="image__tags">
<legend class="text-sm text-grey-700 | mb-8">Tags</legend> <legend class="text-sm text-grey-700 | mb-8">Tags</legend>
@ -137,8 +144,8 @@
:id="pageTag + '-image'" :id="pageTag + '-image'"
:name="pageTag + '-image'" :name="pageTag + '-image'"
:value="pageTag" :value="pageTag"
@change="saveTags(modal)" @change="saveTags(imageDetails)"
v-model="modal.tags" v-model="imageDetails.tags"
/> />
<label <label
class="btn btn--sm btn--primary" class="btn btn--sm btn--primary"
@ -187,8 +194,9 @@ const { page } = usePageStore();
const toast = useToast(); const toast = useToast();
const selectedTags = ref([]); const selectedTags = ref([]);
const modal = ref(null); const imageDetails = ref(null);
const images = ref(page.images); const images = ref(page.images);
const isAddImagesOpen = ref(false);
function onAdvancedUpload(event) { function onAdvancedUpload(event) {
if (event.xhr.status === 200) { if (event.xhr.status === 200) {