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

merge

Browse source
This commit is contained in:
isUnknown 2024-10-08 17:29:59 +02:00
parent 3f10b863c1
commit fa34aed357
18 changed files with 165 additions and 171 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,9 +0,0 @@
Date: 2024-10-02 01:10
----
Uuid: 1NmPGSM9FKgiyOwH
----
Template: default

9
public/content/projects/1_miss-dior-blooming-bouquet/1_client-brief/1510991102_perfume-2721147_1280.jpg.txt
View file

@ -1,9 +0,0 @@
Date: 2024-10-02 01:10
----
Uuid: ump9516TWbjrIo7T
----
Template: default

0
public/content/projects/1_miss-dior-blooming-bouquet/1_client-brief/4049252942_perfume-2643349_1280.jpg → public/content/projects/1_miss-dior-blooming-bouquet/1_client-brief/3194485007_perfume-2643349_1280.jpg
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 217 KiB

After

Width:  |  Height:  |  Size: 217 KiB

Before After
Before After

17
public/content/projects/1_miss-dior-blooming-bouquet/1_client-brief/3194485007_perfume-2643349_1280.jpg.txt Normal file
View file

@ -0,0 +1,17 @@
Date: 2024-10-02 02:10
----
Description:
----
Tags:
----
Uuid: RBUbSD0s5cYo0uQE
----
Template: image

0
public/content/projects/1_miss-dior-blooming-bouquet/1_client-brief/1445320111_perfume-1042715_1280.jpg → public/content/projects/1_miss-dior-blooming-bouquet/1_client-brief/3969630140_perfume-1042715_1280.jpg
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 114 KiB

After

Width:  |  Height:  |  Size: 114 KiB

Before After
Before After

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

@ -0,0 +1,17 @@
Description:
----
Tags: coloris & nuances, DA globale
----
Date: 2024-10-02 02:10
----
Uuid: gc1lqYk2YUOBgEoS
----
Template: image

9
public/content/projects/1_miss-dior-blooming-bouquet/1_client-brief/4049252942_perfume-2643349_1280.jpg.txt
View file

@ -1,9 +0,0 @@
Date: 2024-10-02 01:10
----
Uuid: RaQyVfBK6c8gv8pW
----
Template: default

0
public/content/projects/1_miss-dior-blooming-bouquet/1_client-brief/1510991102_perfume-2721147_1280.jpg → public/content/projects/1_miss-dior-blooming-bouquet/1_client-brief/4175623167_perfume-2721147_1280.jpg
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 119 KiB

After

Width:  |  Height:  |  Size: 119 KiB

Before After
Before After

17
public/content/projects/1_miss-dior-blooming-bouquet/1_client-brief/4175623167_perfume-2721147_1280.jpg.txt Normal file
View file

@ -0,0 +1,17 @@
Date: 2024-10-02 02:10
----
Description:
----
Tags:
----
Uuid: nf6u4SZVnNUUKKU2
----
Template: image

6
public/content/projects/1_miss-dior-blooming-bouquet/1_client-brief/client-brief.txt
View file

@ -16,9 +16,9 @@ Description: Sed congue magna magna lorem aliquam diam dolor arcu fusce adipisci
Clientbriefimages:
- file://ump9516TWbjrIo7T
- file://RaQyVfBK6c8gv8pW
- file://1NmPGSM9FKgiyOwH
- file://gc1lqYk2YUOBgEoS
- file://RBUbSD0s5cYo0uQE
- file://nf6u4SZVnNUUKKU2
----

4
public/content/projects/projects.txt
View file

@ -2,6 +2,10 @@ Title: Projets
----
Clientbriefimagetags: bouchon, bouton poussoir, coloris & nuances, DA globale, forme & design, matériaux & textures, parachèvements
----
Steps: Votre Brief, Offre Commerciale, Brief Enrichi, Rendu 360°
----

6
public/site/blueprints/files/image.yml
View file

@ -12,6 +12,6 @@ fields:
size: small
width: 1/2
tags:
type: tags
# tags:
# type: tags
type: multiselect
options: query
query: page('projects').clientBriefImageTags.split

6
public/site/blueprints/pages/projects.yml
View file

@ -1,6 +1,12 @@
title: Projets
sections:
fieldsSection:
type: fields
fields:
clientBriefImageTags:
label: Tags des images ajoutées aux briefs
type: tags
drafts:
extends: sections/projects
headline: Brouillons

2
public/site/config/routes/upload-images.php
View file

@ -34,7 +34,7 @@ return [
$newFile = $page->createFile([
'source' => $upload['tmp_name'],
'filename' => $name,
'template' => 'default',
'template' => 'image',
'content' => [
'date' => date('Y-m-d h:m')
]

5
public/site/templates/client-brief.json.php
View file

@ -5,11 +5,14 @@ $images = [];
foreach ($page->clientBriefImages()->toFiles() as $image) {
$images[] = [
'url' => $image->url(),
'uuid' => (string) $image->uuid()
'uuid' => (string) $image->uuid(),
'tags' => page('projects')->clientBriefImageTags()->split(),
'selectedTags' => $image->tags()->split()
];
}
$specificData = [
"tags" => $page->parent()->parent()->clientBriefImageTags()->split(),
"images" => $images
];

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

@ -20,81 +20,48 @@
<fieldset class="project-details__filters | flex-1">
<legend class="text-sm text-grey-700 | mb-8">Filtrer par tags</legend>
<div class="flex" style="gap: var(--space-8)">
<button class="btn btn--sm btn--grey" id="all" aria-pressed="true">
<button
class="btn btn--sm btn--grey"
id="all"
:aria-pressed="selectedTags.length === 0"
@click="selectedTags = []"
>
Voir tout
</button>
<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
>
<template v-for="(tag, index) in page.tags" :key="index">
<input
class="sr-only"
type="checkbox"
:id="tag + '-page'"
:name="tag + '-page'"
:value="tag + '-page'"
v-model="selectedTags"
/>
<label class="btn btn--sm btn--primary" :for="tag + '-page'">{{
toPascalCase(tag)
}}</label>
</template>
</div>
</fieldset>
</header>
<div class="h-full | masonry">
<button
<button
data-icon="upload"
class="flex flex-col | bg-white | border border-grey-200 | text-grey-800 | font-medium | rounded-2xl"
@click="addImages = true"
>Ajouter une ou plusieurs images</button
>
<figure v-for="image in images" class="image" @click="imageDetails = true">
Ajouter une ou plusieurs images
</button>
<figure
v-for="image in images"
class="image"
@click="imageDetails = true"
>
<span class="tag | btn btn--sm">Tag</span>
<img :src="image.url" alt="" />
</figure>
</div>
<Dialog
id="add-images"
v-model:visible="addImages"
@ -111,7 +78,10 @@
<li>Inspirations</li>
</ul>
</nav>
<div class="auto-grid | bg-grey-50 | border border-grey-200 | rounded-2xl | w-full | p-8" style="--min:15rem;--gap:0.5rem">
<div
class="auto-grid | bg-grey-50 | border border-grey-200 | rounded-2xl | w-full | p-8"
style="--min: 15rem; --gap: 0.5rem"
>
<FileUpload
mode="basic"
name="images[]"
@ -154,19 +124,34 @@
</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="" />
<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="" />
<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="" />
<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="" />
<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="" />
<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>
@ -180,74 +165,24 @@
header="Détails de l’image"
class="bg-white | text-grey-800 | rounded-2xl | overflow-hidden"
>
<img :src="image" alt="" class="bg-grey-200" loading="lazy" />
<img :src="modal.url" 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
>
<template v-for="(tag, index) in modal.tags" :key="index">
<input
class="sr-only"
type="checkbox"
:id="tag + '-image'"
:name="tag + '-image'"
:value="tag + '-image'"
v-model="modal.selectedTags"
/>
<label class="btn btn--sm btn--primary" :for="tag + '-image'">{{
toPascalCase(tag)
}}</label>
</template>
</div>
</fieldset>
<div class="image__description | w-full">
@ -281,10 +216,12 @@ import FileUpload from "primevue/fileupload";
import Dialog from "primevue/dialog";
import { useToast } from "primevue/usetoast";
import { usePageStore } from "../../../stores/page";
import { ref } from "vue";
import { ref, watch } from "vue";
import { toPascalCase } from "../../../helpers";
const { page } = usePageStore();
const toast = useToast();
const selectedTags = ref([]);
const beforeSend = (event) => {
const formData = event.formData;
@ -294,6 +231,19 @@ const beforeSend = (event) => {
);
};
const modal = ref(null);
watch(modal, (newValue) => {
if (newValue) {
newValue.selectedTags = newValue.selectedTags.map((tag) => {
if (!tag.includes("image")) {
return tag + "-image";
} else {
return tag;
}
});
}
});
const images = ref(page.images);
const onAdvancedUpload = (event) => {
@ -371,7 +321,6 @@ input[type="file"] {
flex-grow: 1;
}
#add-images {
--sidebar-width: 12.5rem;
counter-set: selected-images;
@ -395,7 +344,7 @@ input[type="file"] {
border-left-color: var(--color-grey-800);
}
#add-images nav li.active::before {
content: '';
content: "";
width: 2px;
position: absolute;
top: 0;
@ -428,7 +377,6 @@ input[type="file"] {
height: 1.5rem;
}
#image-details {
width: min(100vw - var(--gutter) * 2, 62.5rem);
height: min(100vh - var(--gutter) * 2, 50rem);

2
src/components/project/ClientBrief/ModeSelection.vue
View file

@ -5,7 +5,7 @@
>
<div class="flex">
<div
@click="emit('update:step', 'AddImages')"
@click="emit('update:step', 'Images')"
class="card card--cta | flex-1 | h-full"
style="--padding: var(--space-32); --row-gap: var(--space-32)"
>

9
src/helpers/index.js Normal file
View file

@ -0,0 +1,9 @@
function toPascalCase(string) {
return string.replace(/\p{L}+/gu, function (w) {
return (
w[0].toLocaleUpperCase("fr-FR") + w.slice(1).toLocaleLowerCase("fr-FR")
);
});
}
export { toPascalCase };