151 lines
2.7 KiB
Svelte
151 lines
2.7 KiB
Svelte
<script lang="ts">
|
|
import { setContext } from 'svelte';
|
|
let visible: boolean = false;
|
|
let title: string = '';
|
|
let description: string = '';
|
|
let validateButton: string = '';
|
|
let validate: Function = () => {};
|
|
|
|
const alert = (newAlert: {
|
|
title: string;
|
|
description: string;
|
|
validate: Function;
|
|
validateButton?: string;
|
|
}) => {
|
|
title = newAlert.title;
|
|
description = newAlert.description;
|
|
validateButton = newAlert.validateButton || 'Oui';
|
|
validate = newAlert.validate;
|
|
visible = true;
|
|
};
|
|
|
|
setContext('alert', { alert });
|
|
|
|
const close = () => {
|
|
visible = false;
|
|
};
|
|
|
|
const keyPress = () => {};
|
|
</script>
|
|
|
|
<slot />
|
|
|
|
<div class="overlay" on:click={() => close()} class:visible on:keypress={keyPress} />
|
|
|
|
<div id="modal" class:visible on:keypress={keyPress}>
|
|
<div class="head">
|
|
<div>
|
|
<p>{title}</p>
|
|
</div>
|
|
</div>
|
|
<div class="desc">
|
|
<p>{description}</p>
|
|
</div>
|
|
<div class="buttons">
|
|
<div>
|
|
<button
|
|
on:click={() => {
|
|
validate();
|
|
close();
|
|
}}
|
|
class="valid">Oui</button
|
|
>
|
|
<button on:click={close} class="cancel">Non</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style lang="scss">
|
|
* {
|
|
margin: 0;
|
|
}
|
|
.valid {
|
|
background-color: rgba(255, 79, 100, 0.2);
|
|
color: rgb(255, 79, 100);
|
|
&:hover {
|
|
background-color: rgba(199, 38, 57, 0.2);
|
|
}
|
|
}
|
|
.cancel {
|
|
background-color: rgba(13, 2, 33, 0.3);
|
|
color: white;
|
|
&:hover {
|
|
background-color: rgba(32, 5, 82, 0.3);
|
|
}
|
|
}
|
|
|
|
.head {
|
|
width: 100%;
|
|
padding: 26px 24px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
font-size: 1.1em;
|
|
border-radius: 5px 5px 0 0;
|
|
background-color: #ff4f64;
|
|
}
|
|
.desc {
|
|
width: 100%;
|
|
padding: 24px;
|
|
background-color: #1d1a5a;
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
.buttons {
|
|
background-color: #1d1a5a;
|
|
width: 100%;
|
|
padding: 0 24px 30px 24px;
|
|
border-radius: 0 0 5px 5px;
|
|
text-align: right;
|
|
box-sizing: border-box;
|
|
button {
|
|
min-height: 36px;
|
|
padding-inline: 16px;
|
|
margin-left: 2%;
|
|
border: none;
|
|
border-radius: 8px;
|
|
transition: 0.3s ease-in-out;
|
|
cursor: pointer;
|
|
}
|
|
div {
|
|
border-top: 1px solid gray;
|
|
padding-top: 20px;
|
|
}
|
|
}
|
|
|
|
#modal {
|
|
position: fixed;
|
|
top: 50%;
|
|
left: 50%;
|
|
//width: 50%;
|
|
max-width: 600px;
|
|
min-width: 500px;
|
|
transform: translateX(-50%) translateY(-50%) scale(0.7);
|
|
visibility: hidden;
|
|
transition: 0.4s;
|
|
opacity: 0;
|
|
z-index: 2000;
|
|
&.visible {
|
|
visibility: visible !important;
|
|
transform: translateX(-50%) translateY(-50%) scale(1) !important;
|
|
opacity: 1 !important;
|
|
}
|
|
}
|
|
|
|
.overlay {
|
|
background-color: black;
|
|
opacity: 0;
|
|
z-index: 1999;
|
|
width: 100%;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
visibility: hidden;
|
|
&.visible {
|
|
opacity: 0.7;
|
|
visibility: visible;
|
|
}
|
|
}
|
|
</style>
|