136 lines
3.9 KiB
Svelte
136 lines
3.9 KiB
Svelte
<script lang="ts">
|
|
import Modal from "../../../Modal.svelte"
|
|
import { apiBaseURL } from "../../../../../config"
|
|
import { createEventDispatcher } from "svelte"
|
|
import UploadImage from "./UploadImageWidget.svelte"
|
|
import Icon from "../../Icon.svelte"
|
|
import { mdiDeleteOutline } from "@mdi/js"
|
|
|
|
const dispatch = createEventDispatcher()
|
|
export let images: MedialibEntry[] = []
|
|
</script>
|
|
|
|
<Modal
|
|
show="{true}"
|
|
size="xl"
|
|
on:close="{() => {
|
|
dispatch('closeImageLibrary')
|
|
}}"
|
|
>
|
|
<svelte:fragment slot="title">
|
|
<img
|
|
src="../../../../../../media/solar_camera-outline.svg"
|
|
alt="icon"
|
|
/>
|
|
FOTOS
|
|
</svelte:fragment>
|
|
<div class="images">
|
|
<UploadImage on:uploadImage="{() => dispatch('uploadImage')}" />
|
|
{#each images as image}
|
|
<div class="image">
|
|
<div class="image-wrapper">
|
|
<img
|
|
src="{`${apiBaseURL}medialib/${image.id}/${image.file.src}`}"
|
|
alt="Image Preview"
|
|
class="image"
|
|
aria-hidden="true"
|
|
/>
|
|
<button
|
|
class="removeElement"
|
|
on:click|preventDefault|stopPropagation="{() => {
|
|
dispatch('removeImage', image.id)
|
|
}}"
|
|
>
|
|
<Icon
|
|
path="{mdiDeleteOutline}"
|
|
size="1rem"
|
|
/>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
</Modal>
|
|
|
|
<style lang="less">
|
|
@import "../../../../assets/css/variables.less";
|
|
h3.label {
|
|
display: flex;
|
|
gap: 0.6rem;
|
|
align-items: center;
|
|
}
|
|
.images {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, 12rem);
|
|
gap: 6px;
|
|
|
|
.image {
|
|
width: 12rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.image-wrapper {
|
|
height: 12rem;
|
|
width: 100%;
|
|
position: relative;
|
|
|
|
background-color: var(--bg-100);
|
|
width: 100%;
|
|
aspect-ratio: 1/1;
|
|
|
|
img {
|
|
width: 100%;
|
|
height: unset;
|
|
aspect-ratio: 1/1;
|
|
object-fit: cover;
|
|
border-radius: 12px;
|
|
}
|
|
@media @mobile {
|
|
width: min(200px, 40vw);
|
|
min-width: 50%;
|
|
height: 50%;
|
|
aspect-ratio: unset;
|
|
img {
|
|
aspect-ratio: unset;
|
|
height: 100%;
|
|
}
|
|
}
|
|
position: relative;
|
|
.removeElement {
|
|
top: 0.6rem;
|
|
right: 0.6rem;
|
|
position: absolute;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 1.6rem;
|
|
height: 1.6rem;
|
|
border-radius: 48px;
|
|
background: var(--bg-100);
|
|
img {
|
|
width: 1.2rem;
|
|
height: 1.2rem;
|
|
}
|
|
}
|
|
border-radius: 12px;
|
|
img {
|
|
width: 100%;
|
|
border-radius: 12px;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
}
|
|
@media @mobile {
|
|
flex-direction: row;
|
|
gap: 6px;
|
|
width: 100%;
|
|
}
|
|
}
|
|
@media @mobile {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 100%;
|
|
}
|
|
}
|
|
</style>
|