Update Images.vue: add add-images dialog
This commit is contained in:
parent
3c266159fa
commit
1c86575bb5
1 changed files with 172 additions and 58 deletions
|
|
@ -83,58 +83,101 @@
|
||||||
</fieldset>
|
</fieldset>
|
||||||
</header>
|
</header>
|
||||||
<div class="h-full | masonry">
|
<div class="h-full | masonry">
|
||||||
<FileUpload
|
<button
|
||||||
mode="basic"
|
data-icon="upload"
|
||||||
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 | 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"
|
||||||
|
>Ajouter une ou plusieurs images</button
|
||||||
>
|
>
|
||||||
<template #chooseicon>
|
<figure v-for="image in images" class="image" @click="imageDetails = true">
|
||||||
<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>
|
|
||||||
</template>
|
|
||||||
</FileUpload>
|
|
||||||
<Toast />
|
|
||||||
<figure v-for="image in images" class="image" @click="visible = true">
|
|
||||||
<span class="tag | btn btn--sm">Tag</span>
|
<span class="tag | btn btn--sm">Tag</span>
|
||||||
<img :src="image.url" alt="" />
|
<img :src="image.url" alt="" />
|
||||||
</figure>
|
</figure>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<Dialog
|
<Dialog
|
||||||
v-model:visible="visible"
|
id="add-images"
|
||||||
|
v-model:visible="addImages"
|
||||||
|
modal
|
||||||
|
header="Ajouter des images"
|
||||||
|
class="bg-white | text-grey-800 | rounded-2xl | overflow-hidden | p-32"
|
||||||
|
>
|
||||||
|
<div class="with-sidebar | h-full">
|
||||||
|
<nav>
|
||||||
|
<ul>
|
||||||
|
<li class="active">Mes Images</li>
|
||||||
|
<li>Matériauthèque</li>
|
||||||
|
<li>Réalisations</li>
|
||||||
|
<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">
|
||||||
|
<FileUpload
|
||||||
|
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>
|
||||||
|
</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>
|
||||||
|
</Dialog>
|
||||||
|
|
||||||
|
<Dialog
|
||||||
|
id="image-details"
|
||||||
|
v-model:visible="imageDetails"
|
||||||
modal
|
modal
|
||||||
header="Détails de l’image"
|
header="Détails de l’image"
|
||||||
:style="{ width: '62.5rem', height: '50rem' }"
|
|
||||||
class="bg-white | text-grey-800 | rounded-2xl | overflow-hidden"
|
class="bg-white | text-grey-800 | rounded-2xl | overflow-hidden"
|
||||||
>
|
>
|
||||||
<img :src="image" alt="" class="bg-grey-200" loading="lazy" />
|
<img :src="image" alt="" class="bg-grey-200" loading="lazy" />
|
||||||
|
|
@ -223,7 +266,7 @@
|
||||||
<button
|
<button
|
||||||
data-icon="delete"
|
data-icon="delete"
|
||||||
class="btn btn--black-10 | ml-auto mt-auto"
|
class="btn btn--black-10 | ml-auto mt-auto"
|
||||||
@click="visible = false"
|
@click="imageDetails = false"
|
||||||
>
|
>
|
||||||
Supprimer cette image
|
Supprimer cette image
|
||||||
</button>
|
</button>
|
||||||
|
|
@ -284,7 +327,7 @@ fieldset {
|
||||||
border: none;
|
border: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
[data-pc-name="fileupload"] button {
|
button[data-icon="upload"] {
|
||||||
padding: 6.875rem 4.875rem;
|
padding: 6.875rem 4.875rem;
|
||||||
}
|
}
|
||||||
[data-pc-name="fileupload"] button:hover {
|
[data-pc-name="fileupload"] button:hover {
|
||||||
|
|
@ -296,19 +339,14 @@ input[type="file"] {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
[role="dialog"] {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
[data-pc-section="mask"] {
|
[data-pc-section="mask"] {
|
||||||
background-color: var(--color-black-50);
|
background-color: var(--color-black-50);
|
||||||
}
|
}
|
||||||
[data-pc-name="dialog"] {
|
[data-pc-section="header"] {
|
||||||
flex-direction: row !important;
|
height: var(--space-40);
|
||||||
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"] {
|
[data-pc-section="title"] {
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
|
|
@ -319,6 +357,8 @@ input[type="file"] {
|
||||||
top: var(--space-16);
|
top: var(--space-16);
|
||||||
right: var(--space-16);
|
right: var(--space-16);
|
||||||
padding: 0.625rem;
|
padding: 0.625rem;
|
||||||
|
width: var(--space-40);
|
||||||
|
height: var(--space-40);
|
||||||
}
|
}
|
||||||
[data-pc-name="pcclosebutton"] svg {
|
[data-pc-name="pcclosebutton"] svg {
|
||||||
width: 1.25rem;
|
width: 1.25rem;
|
||||||
|
|
@ -327,13 +367,87 @@ input[type="file"] {
|
||||||
[data-pc-name="pcclosebutton"] span {
|
[data-pc-name="pcclosebutton"] span {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
[data-pc-name="dialog"] [data-pc-section="content"] {
|
[data-pc-section="content"] {
|
||||||
|
flex-grow: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
#add-images {
|
||||||
|
--sidebar-width: 12.5rem;
|
||||||
|
counter-set: selected-images;
|
||||||
|
width: min(100vw - var(--gutter) * 2, 100rem);
|
||||||
|
height: min(100vh - var(--gutter) * 2, 60rem);
|
||||||
|
padding-top: var(--space-16);
|
||||||
|
row-gap: var(--space-32);
|
||||||
|
}
|
||||||
|
#add-images nav li {
|
||||||
|
position: relative;
|
||||||
|
height: var(--space-48);
|
||||||
|
border-left: 1px solid var(--color-grey-400);
|
||||||
|
padding: var(--space-12) var(--space-16);
|
||||||
|
color: var(--color-grey-400);
|
||||||
|
font-weight: 500;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
#add-images nav li:hover,
|
||||||
|
#add-images nav li.active {
|
||||||
|
color: var(--color-grey-800);
|
||||||
|
border-left-color: var(--color-grey-800);
|
||||||
|
}
|
||||||
|
#add-images nav li.active::before {
|
||||||
|
content: '';
|
||||||
|
width: 2px;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: -1px;
|
||||||
|
bottom: 0;
|
||||||
|
background: var(--color-grey-800);
|
||||||
|
}
|
||||||
|
#add-images [data-pc-name="fileupload"] button {
|
||||||
|
padding: 3rem;
|
||||||
|
aspect-ratio: 1/1;
|
||||||
|
}
|
||||||
|
#add-images .image {
|
||||||
|
counter-increment: selected-images;
|
||||||
|
aspect-ratio: 1/1;
|
||||||
|
border-radius: var(--rounded-xl);
|
||||||
|
}
|
||||||
|
#add-images .image::after {
|
||||||
|
content: counter(selected-images);
|
||||||
|
top: var(--space-12);
|
||||||
|
right: var(--space-12);
|
||||||
|
border-radius: 50%;
|
||||||
|
color: var(--color-white);
|
||||||
|
font-weight: 700;
|
||||||
|
background: var(--color-grey-800);
|
||||||
|
mask: none;
|
||||||
|
display: grid;
|
||||||
|
place-items: center;
|
||||||
|
text-align: center;
|
||||||
|
width: 1.5rem;
|
||||||
|
height: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
#image-details {
|
||||||
|
width: min(100vw - var(--gutter) * 2, 62.5rem);
|
||||||
|
height: min(100vh - var(--gutter) * 2, 50rem);
|
||||||
|
flex-direction: row !important;
|
||||||
|
}
|
||||||
|
#image-details [data-pc-section="header"] {
|
||||||
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
right: 0;
|
||||||
|
z-index: 1102;
|
||||||
|
padding: 1.5rem var(--space-32);
|
||||||
|
}
|
||||||
|
#image-details [data-pc-section="content"] {
|
||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
[data-pc-name="dialog"] [data-pc-section="content"] > * {
|
#image-details [data-pc-section="content"] > * {
|
||||||
width: 50%;
|
width: 50%;
|
||||||
}
|
}
|
||||||
[data-pc-name="dialog"] [data-pc-section="content"] > div {
|
#image-details [data-pc-section="content"] > div {
|
||||||
padding-top: 5rem;
|
padding-top: 5rem;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue