iconograph-ui 1.0.0 → 1.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -15
- package/index.js +20 -2
- package/lib/assets/icons/icon-failure.svg +1 -0
- package/lib/assets/icons/icon-success.svg +1 -0
- package/lib/form/Button.svelte +41 -0
- package/lib/form/Form.svelte +84 -0
- package/lib/form/Input.svelte +41 -0
- package/lib/layout/BodySection.svelte +25 -0
- package/lib/layout/Card.svelte +18 -0
- package/lib/layout/HeadSection.svelte +29 -0
- package/lib/layout/SectionContent.svelte +15 -0
- package/lib/navigation/MainMenu.svelte +85 -0
- package/lib/navigation/MenuItem.svelte +64 -0
- package/lib/notification/Notification.svelte +89 -0
- package/lib/notification/NotificationWrapper.svelte +27 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,19 +1,5 @@
|
|
|
1
1
|
# sveltekit-iconograph-ui
|
|
2
|
-
A Svelte Kit components library
|
|
3
|
-
|
|
4
|
-
https://svelte.dev/playground/98a473d8e5ec46bca9db12b22b591902?version=5.36.1#H4sIAAAAAAAACnVUa2vbMBT9K3cqpQ3EecFYcNOy0RU2WL6MfZsHla2bWESWjKS8Zvzfe-XYea3DYKSje8859-pRMc0LZDGbc7sSZqvhRUhvLOuzhVToWPy7Yn5fhpAAEN4mfCnLgdug8gFLucP38Mxoj9oTDZu5zMrSPyU68cMhfC9KYz0UnSxFbtA6aTQomVpu94kGkIeoqolDATUsrCng7jC9CyEt31fMFLcIHDbcSp4qBG_AUSk0yPEkJLjnIU_hmfojJIw-PRueXOpZPn66astsSFiz9iGKzjQ97jyNOGxzbAXXDi1kXAPVT6NOqg9cC0gl_aQPFkPs0fJrF_YKUURCsyNxyIg3XK3xseqCaigVzzA3SqB9TNjLhRIEKwkbnvw-Nz32l_0gC99-zX80toR0xLgPzg7yQm6AanSO2EuLG4nbhD1Vn3NfqHZP7jumXj0bUvxJbs5XGKiUMSu4d0ouc6_2PdAyI5sPvVbD-b3C5lh0xfZh0IpBFfDEp2YXOflX6mUMqbFUbkTQw2GxdU0rymSrFtxK4fMYxqPRbYPUDXwm0lEv6IhGC15IRQyF0caV1NM-_DSp8aZlyzGYj2Hy8fahcxRcxKCNxhaiRiyljmHUzksuRON4bLG4NHFdX8f_6ch_TJ50yZ1m5E0ZgzNKCpiUO7iZTqeX7Pn42DeerZbWrOnswA2Ow3dtttxdK44G05Nm0x5qPVIZg8k_hcRLZVKu7lMjaGera6YumO5Vs8v0JIT-s9jbNdb9_zwtz4auvaZ78-4D887q2TNzqfCHZlyqLV0eFi-4cli_AdRRtyfyBAAA
|
|
5
|
-
https://github.com/BearToCode/carta
|
|
6
|
-
|
|
7
2
|
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
Si ta clé est protégée par mot de passe, tu dois l’ajouter à ton agent SSH pour que les commandes Git/NPM puissent l’utiliser sans retaper le mot de passe à chaque fois.
|
|
3
|
+
A Svelte Kit components library
|
|
11
4
|
|
|
12
|
-
2. Installer la lib depuis GitHub via SSH
|
|
13
5
|
|
|
14
|
-
Dans ton package.json
|
|
15
|
-
"dependencies": {
|
|
16
|
-
"svelte-components-lib": "git+ssh://git@github.com/TON_USER/svelte-components-lib.git#v1.0.0"
|
|
17
|
-
}
|
|
18
|
-
puis
|
|
19
|
-
npm install
|
package/index.js
CHANGED
|
@@ -1,3 +1,21 @@
|
|
|
1
|
-
import Button from "./lib/Button.svelte";
|
|
1
|
+
import Button from "./lib/form/Button.svelte";
|
|
2
|
+
import Form from "./lib/form/Form.svelte"
|
|
3
|
+
import Input from "./lib/form/Input.svelte"
|
|
4
|
+
import BodySection from "./lib/layout/BodySection.svelte"
|
|
5
|
+
import HeadSection from "./lib/layout/HeadSection.svelte"
|
|
6
|
+
import Card from "./lib/layout/Card.svelte"
|
|
7
|
+
import MainMenu from "./lib/navigation/MainMenu.svelte"
|
|
8
|
+
import Notification from "./lib/notification/Notification.svelte";
|
|
9
|
+
import NotificationWrapper from "./lib/notification/NotificationWrapper.svelte";
|
|
2
10
|
|
|
3
|
-
export {
|
|
11
|
+
export {
|
|
12
|
+
Button,
|
|
13
|
+
Form,
|
|
14
|
+
Input,
|
|
15
|
+
BodySection,
|
|
16
|
+
HeadSection,
|
|
17
|
+
Card,
|
|
18
|
+
MainMenu,
|
|
19
|
+
Notification,
|
|
20
|
+
NotificationWrapper
|
|
21
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="96px" height="96px"><path fill="#f44336" d="M44,24c0,11.045-8.955,20-20,20S4,35.045,4,24S12.955,4,24,4S44,12.955,44,24z"/><path fill="#fff" d="M29.656,15.516l2.828,2.828l-14.14,14.14l-2.828-2.828L29.656,15.516z"/><path fill="#fff" d="M32.484,29.656l-2.828,2.828l-14.14-14.14l2.828-2.828L32.484,29.656z"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0,0,256,256" width="96px" height="96px" fill-rule="nonzero"><g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><g transform="scale(5.33333,5.33333)"><path d="M44,24c0,11.045 -8.955,20 -20,20c-11.045,0 -20,-8.955 -20,-20c0,-11.045 8.955,-20 20,-20c11.045,0 20,8.955 20,20z" fill="#4caf50"></path><path d="M34.602,14.602l-13.602,13.597l-5.602,-5.598l-2.797,2.797l8.399,8.403l16.398,-16.402z" fill="#ffffff"></path></g></g></svg>
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
<script>
|
|
2
|
+
export let button;
|
|
3
|
+
export let clickEvent;
|
|
4
|
+
</script>
|
|
5
|
+
|
|
6
|
+
<button on:click|stopPropagation={clickEvent} >
|
|
7
|
+
{button.label}
|
|
8
|
+
</button>
|
|
9
|
+
|
|
10
|
+
<style>
|
|
11
|
+
button {
|
|
12
|
+
min-width: 100px;
|
|
13
|
+
display: inline-block;
|
|
14
|
+
background-color: var(--theme-main-color);
|
|
15
|
+
color: #ffffff !important;
|
|
16
|
+
/*box-shadow: #000000a0 0px 1px 3px 0px !important;*/
|
|
17
|
+
border-radius: 8px;
|
|
18
|
+
height: 34px;
|
|
19
|
+
line-height: 34px !important;
|
|
20
|
+
font-size: 13px;
|
|
21
|
+
text-decoration: none;
|
|
22
|
+
text-align: center;
|
|
23
|
+
font-family: var(--theme-main-font);
|
|
24
|
+
font-weight: 700;
|
|
25
|
+
text-transform: uppercase;
|
|
26
|
+
border: none;
|
|
27
|
+
cursor: pointer;
|
|
28
|
+
padding: 0px 20px;
|
|
29
|
+
}
|
|
30
|
+
button:hover {
|
|
31
|
+
background-color: var(--theme-main-color-hover);
|
|
32
|
+
}
|
|
33
|
+
button:active {
|
|
34
|
+
background-color: var(--theme-main-color-hover);
|
|
35
|
+
position: relative;
|
|
36
|
+
top: 1px;
|
|
37
|
+
}
|
|
38
|
+
button:disabled {
|
|
39
|
+
background-color: var(--disabled-background-color) !important;
|
|
40
|
+
}
|
|
41
|
+
</style>
|
|
@@ -0,0 +1,84 @@
|
|
|
1
|
+
<script>
|
|
2
|
+
import Button from "./Button.svelte";
|
|
3
|
+
import { addNotification } from "../notification/NotificationWrapper.svelte";
|
|
4
|
+
|
|
5
|
+
export let inputs = [];
|
|
6
|
+
export let button;
|
|
7
|
+
export let uri;
|
|
8
|
+
|
|
9
|
+
let waiting = false;
|
|
10
|
+
|
|
11
|
+
async function handleSubmit() {
|
|
12
|
+
waiting = true;
|
|
13
|
+
let body = {};
|
|
14
|
+
|
|
15
|
+
inputs.forEach(i => {
|
|
16
|
+
body[i.props.name] = i.value;
|
|
17
|
+
});
|
|
18
|
+
|
|
19
|
+
console.log(body);
|
|
20
|
+
//await timeout(500);
|
|
21
|
+
|
|
22
|
+
const response = await fetch(uri, {
|
|
23
|
+
method: 'POST',
|
|
24
|
+
body: JSON.stringify(body),
|
|
25
|
+
headers: {
|
|
26
|
+
'Content-Type': 'application/json'
|
|
27
|
+
}
|
|
28
|
+
});
|
|
29
|
+
|
|
30
|
+
waiting = false;
|
|
31
|
+
|
|
32
|
+
if (!response.ok && response.status == 404)
|
|
33
|
+
return addNotification({'status': 'failure', 'message': 'Erreur ' + response.status })
|
|
34
|
+
|
|
35
|
+
const data = await response.json();
|
|
36
|
+
if (!response.ok) {
|
|
37
|
+
addNotification({'status': 'failure', 'message': response.status + ': ' + data.message})
|
|
38
|
+
}
|
|
39
|
+
else {
|
|
40
|
+
addNotification({'status': 'success', 'message': 'Request successfull'})
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
}
|
|
44
|
+
</script>
|
|
45
|
+
|
|
46
|
+
<form>
|
|
47
|
+
|
|
48
|
+
{#each inputs as input}
|
|
49
|
+
<div class="form-row">
|
|
50
|
+
<div>
|
|
51
|
+
<label for="{input.props.name}" class="mandatory">{input.props.label}</label>
|
|
52
|
+
|
|
53
|
+
<svelte:component this={input.component} {...input.props} bind:value={input.value} />
|
|
54
|
+
</div>
|
|
55
|
+
</div>
|
|
56
|
+
{/each}
|
|
57
|
+
|
|
58
|
+
<Button button={button} clickEvent={handleSubmit} ></Button>
|
|
59
|
+
|
|
60
|
+
</form>
|
|
61
|
+
|
|
62
|
+
<style>
|
|
63
|
+
.form-row {
|
|
64
|
+
display: flex;
|
|
65
|
+
margin-bottom: 6px;
|
|
66
|
+
}
|
|
67
|
+
.form-row > div {
|
|
68
|
+
flex: 1;
|
|
69
|
+
display: flex;
|
|
70
|
+
flex-direction: column;
|
|
71
|
+
justify-content: space-between;
|
|
72
|
+
margin-right: 12px;
|
|
73
|
+
}
|
|
74
|
+
label {
|
|
75
|
+
display: inline-block;
|
|
76
|
+
padding: 0px 6px;
|
|
77
|
+
margin: 4px 6px;
|
|
78
|
+
font-family: 'Montserrat', sans-serif;
|
|
79
|
+
font-size: 14px;
|
|
80
|
+
font-weight: 600;
|
|
81
|
+
color: #222;
|
|
82
|
+
width: fit-content;
|
|
83
|
+
}
|
|
84
|
+
</style>
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
<script>
|
|
2
|
+
export let name;
|
|
3
|
+
export let type;
|
|
4
|
+
export let value;
|
|
5
|
+
</script>
|
|
6
|
+
|
|
7
|
+
{#if type == "textarea"}
|
|
8
|
+
<textarea name="{name}" bind:value={value} ></textarea>
|
|
9
|
+
{:else}
|
|
10
|
+
<input type={type} name="{name}" bind:value={value} autocomplete="on" required />
|
|
11
|
+
{/if}
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
<style>
|
|
15
|
+
|
|
16
|
+
input, textarea {
|
|
17
|
+
background-color: #f5f5fb;
|
|
18
|
+
border: none;
|
|
19
|
+
border-radius: 6px;
|
|
20
|
+
padding: 7px 14px;
|
|
21
|
+
font-size: 14px;
|
|
22
|
+
line-height: 14px;
|
|
23
|
+
font-weight: 500;
|
|
24
|
+
border: 1px solid #f3f3f3; /*#d1d9e0;*/
|
|
25
|
+
}
|
|
26
|
+
textarea {
|
|
27
|
+
padding: 12px 14px;
|
|
28
|
+
max-width: calc(100% - 28px);
|
|
29
|
+
min-height: 100px;
|
|
30
|
+
}
|
|
31
|
+
/*select {
|
|
32
|
+
background-color: #f5f5fb;
|
|
33
|
+
border: none;
|
|
34
|
+
border-radius: 6px;
|
|
35
|
+
padding: 7px 14px;
|
|
36
|
+
font-size: 14px;
|
|
37
|
+
line-height: 14px;
|
|
38
|
+
font-weight: 500;
|
|
39
|
+
}*/
|
|
40
|
+
|
|
41
|
+
</style>
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
<script>
|
|
2
|
+
import SectionContent from "./SectionContent.svelte";
|
|
3
|
+
|
|
4
|
+
</script>
|
|
5
|
+
|
|
6
|
+
<section class="body-section">
|
|
7
|
+
<SectionContent>
|
|
8
|
+
<slot></slot>
|
|
9
|
+
</SectionContent>
|
|
10
|
+
</section>
|
|
11
|
+
|
|
12
|
+
<style>
|
|
13
|
+
|
|
14
|
+
.body-section {
|
|
15
|
+
margin: 0px;
|
|
16
|
+
width: 100%;
|
|
17
|
+
border-radius: 0px;
|
|
18
|
+
padding: 0px;
|
|
19
|
+
display: flex;
|
|
20
|
+
flex-direction: column;
|
|
21
|
+
align-items: center;
|
|
22
|
+
justify-content: center;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
</style>
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
<script>
|
|
2
|
+
export let padding = '24px';
|
|
3
|
+
export let marginB = '12px';
|
|
4
|
+
</script>
|
|
5
|
+
|
|
6
|
+
<div class="card" style="padding: {padding}; margin-bottom: {marginB}" >
|
|
7
|
+
<slot></slot>
|
|
8
|
+
</div>
|
|
9
|
+
|
|
10
|
+
<style>
|
|
11
|
+
.card {
|
|
12
|
+
width: 100%;
|
|
13
|
+
background-color: var(--main-bg-color);
|
|
14
|
+
box-sizing: border-box;
|
|
15
|
+
border: 1px solid var(--main-border-color);
|
|
16
|
+
border-radius: 8px;
|
|
17
|
+
}
|
|
18
|
+
</style>
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
<script>
|
|
2
|
+
import SectionContent from "./SectionContent.svelte";
|
|
3
|
+
|
|
4
|
+
</script>
|
|
5
|
+
|
|
6
|
+
<section class="head-section">
|
|
7
|
+
<SectionContent>
|
|
8
|
+
<slot></slot>
|
|
9
|
+
</SectionContent>
|
|
10
|
+
</section>
|
|
11
|
+
|
|
12
|
+
<style>
|
|
13
|
+
|
|
14
|
+
.head-section {
|
|
15
|
+
margin: 0px;
|
|
16
|
+
margin-bottom: 12px;
|
|
17
|
+
width: 100%;
|
|
18
|
+
border-radius: 0px;
|
|
19
|
+
padding: 0px;
|
|
20
|
+
background-color: var(--main-bg-color);
|
|
21
|
+
box-sizing: border-box;
|
|
22
|
+
border-bottom: 1px solid var(--main-border-color);
|
|
23
|
+
display: flex;
|
|
24
|
+
flex-direction: column;
|
|
25
|
+
align-items: center;
|
|
26
|
+
justify-content: center;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
</style>
|
|
@@ -0,0 +1,85 @@
|
|
|
1
|
+
<script>
|
|
2
|
+
// @ts-nocheck
|
|
3
|
+
|
|
4
|
+
import MenuItem from './MenuItem.svelte';
|
|
5
|
+
|
|
6
|
+
export let isOpen = false;
|
|
7
|
+
export let menu;
|
|
8
|
+
|
|
9
|
+
</script>
|
|
10
|
+
|
|
11
|
+
<nav class="{isOpen ? '' : 'hidden'}">
|
|
12
|
+
<div class="logo" >
|
|
13
|
+
<!-- Logo -->
|
|
14
|
+
</div>
|
|
15
|
+
|
|
16
|
+
<div class="main">
|
|
17
|
+
<ul>
|
|
18
|
+
{#each menu.main as item}
|
|
19
|
+
<MenuItem item={item}></MenuItem>
|
|
20
|
+
{/each}
|
|
21
|
+
</ul>
|
|
22
|
+
</div>
|
|
23
|
+
|
|
24
|
+
<div class="bottom" >
|
|
25
|
+
<div>
|
|
26
|
+
<a aria-label="Signout Button" class="menu-item signout" href="/auth/signout" data-sveltekit-preload-data="off"></a>
|
|
27
|
+
</div>
|
|
28
|
+
</div>
|
|
29
|
+
</nav>
|
|
30
|
+
|
|
31
|
+
<style>
|
|
32
|
+
nav {
|
|
33
|
+
background-color: var(--main-bg-color);
|
|
34
|
+
position: fixed;
|
|
35
|
+
top: 0px;
|
|
36
|
+
left: 0px;
|
|
37
|
+
width: 85px;
|
|
38
|
+
min-height: 100vh;
|
|
39
|
+
max-height: 100vh;
|
|
40
|
+
box-sizing: border-box;
|
|
41
|
+
border-right: 1px solid var(--main-border-color);
|
|
42
|
+
padding-top: 58px;
|
|
43
|
+
padding-bottom: 10px;
|
|
44
|
+
transition: all ease-in-out 0.4s;
|
|
45
|
+
display: flex;
|
|
46
|
+
flex-direction: column;
|
|
47
|
+
align-items: center;
|
|
48
|
+
z-index: 100;
|
|
49
|
+
}
|
|
50
|
+
nav.hidden {
|
|
51
|
+
transform: translateX(0px);
|
|
52
|
+
}
|
|
53
|
+
nav > .logo {
|
|
54
|
+
width: 40px;
|
|
55
|
+
height: 40px;
|
|
56
|
+
min-height: 40px;
|
|
57
|
+
background-image: var(--logo-minimized);
|
|
58
|
+
background-size: contain;
|
|
59
|
+
background-repeat: no-repeat;
|
|
60
|
+
background-position: center center;
|
|
61
|
+
margin-bottom: 32px;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
nav > .main {
|
|
65
|
+
flex: 1;
|
|
66
|
+
width: 100%;
|
|
67
|
+
max-height: calc(100vh - 140px - 96px);
|
|
68
|
+
overflow-y: scroll;
|
|
69
|
+
}
|
|
70
|
+
nav ul {
|
|
71
|
+
display: flex;
|
|
72
|
+
flex-direction: column;
|
|
73
|
+
width: 100%;
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
nav > .bottom {
|
|
77
|
+
background-color: aqua;
|
|
78
|
+
width: 100%
|
|
79
|
+
}
|
|
80
|
+
nav > .bottom > div {
|
|
81
|
+
height: 96px;
|
|
82
|
+
width: 30px;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
</style>
|
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
<script>
|
|
2
|
+
export let item;
|
|
3
|
+
let isHover = false;
|
|
4
|
+
</script>
|
|
5
|
+
|
|
6
|
+
<li>
|
|
7
|
+
<a aria-label="{item.name} tab menu" href="{item.uri}" class="menu-item {item.selected ? 'selected' : ''}"
|
|
8
|
+
on:mouseenter={() => isHover = true} on:mouseleave={() => isHover = false} data-sveltekit-preload-data="off">
|
|
9
|
+
<div>
|
|
10
|
+
<div><!-- Lateral Color Border --></div>
|
|
11
|
+
<div style="background-image: url({item.selected || isHover ? item.iconHover: item.icon})"></div>
|
|
12
|
+
</div>
|
|
13
|
+
</a>
|
|
14
|
+
</li>
|
|
15
|
+
|
|
16
|
+
<style>
|
|
17
|
+
li {
|
|
18
|
+
list-style: none;
|
|
19
|
+
width: 100%;
|
|
20
|
+
margin-bottom: 14px;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
.menu-item {
|
|
24
|
+
display: inline-block;
|
|
25
|
+
width: 100%;
|
|
26
|
+
height: 48px;
|
|
27
|
+
padding: 0px;
|
|
28
|
+
transition: all ease-in-out 0.17s;
|
|
29
|
+
}
|
|
30
|
+
.menu-item:hover, .menu-item.selected {
|
|
31
|
+
color: #efefef;
|
|
32
|
+
border-left-color: var(--theme-main-color);
|
|
33
|
+
}
|
|
34
|
+
.menu-item > div {
|
|
35
|
+
height: 100%;
|
|
36
|
+
display: flex;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
.menu-item > div > div:nth-of-type(1) {
|
|
40
|
+
height: 100%;
|
|
41
|
+
width: 5px;
|
|
42
|
+
background-color: transparent;
|
|
43
|
+
transition: all ease-in-out 0.17s;
|
|
44
|
+
border-top-right-radius: 8px;
|
|
45
|
+
border-bottom-right-radius: 8px;
|
|
46
|
+
}
|
|
47
|
+
.menu-item > div > div:nth-of-type(2) {
|
|
48
|
+
height: 48px;
|
|
49
|
+
width: 48px;
|
|
50
|
+
margin: 0px 12px;
|
|
51
|
+
border-radius: 12px;
|
|
52
|
+
background-size: 26px auto;
|
|
53
|
+
background-position: center center;
|
|
54
|
+
background-repeat: no-repeat;
|
|
55
|
+
transition: all ease-in-out 0.17s;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
.menu-item.selected > div > div:nth-of-type(1) {
|
|
59
|
+
background-color: var(--theme-main-color);
|
|
60
|
+
}
|
|
61
|
+
.menu-item:hover > div > div:nth-of-type(2) {
|
|
62
|
+
background-color: var(--theme-bg-color-light);
|
|
63
|
+
}
|
|
64
|
+
</style>
|
|
@@ -0,0 +1,89 @@
|
|
|
1
|
+
<script>
|
|
2
|
+
import failureIcon from '$lib/iconograph-ui/assets/icons/icon-failure.svg?url';
|
|
3
|
+
import successIcon from '$lib/iconograph-ui/assets/icons/icon-success.svg?url';
|
|
4
|
+
export let notification;
|
|
5
|
+
|
|
6
|
+
let hidden = false;
|
|
7
|
+
let icon = notification.status === 'failure' ? failureIcon : successIcon;
|
|
8
|
+
|
|
9
|
+
setTimeout(() => {
|
|
10
|
+
hidden = true;
|
|
11
|
+
}, 10000);
|
|
12
|
+
|
|
13
|
+
</script>
|
|
14
|
+
|
|
15
|
+
<div class="notif {hidden ? 'hidden' : ''}">
|
|
16
|
+
<div class="{notification.status}"
|
|
17
|
+
style:background-image={`url("${icon}")`} >
|
|
18
|
+
</div>
|
|
19
|
+
<div>
|
|
20
|
+
{@html notification.message}
|
|
21
|
+
</div>
|
|
22
|
+
<button on:click={() => hidden = true}>
|
|
23
|
+
+
|
|
24
|
+
</button>
|
|
25
|
+
</div>
|
|
26
|
+
|
|
27
|
+
{#if false} <a href="/">Fake</a> {/if}
|
|
28
|
+
|
|
29
|
+
<style>
|
|
30
|
+
.notif {
|
|
31
|
+
display: flex;
|
|
32
|
+
background-color: #ffffff;
|
|
33
|
+
border-radius: 8px;
|
|
34
|
+
padding: 12px 12px;
|
|
35
|
+
margin-top: 12px;
|
|
36
|
+
font-size: 12px;
|
|
37
|
+
font-weight: 600;
|
|
38
|
+
box-sizing: border-box;
|
|
39
|
+
border: 1px solid #e4e4e4;
|
|
40
|
+
box-shadow: #00000028 0 0px 8px;
|
|
41
|
+
align-items: center;
|
|
42
|
+
}
|
|
43
|
+
.notif.hidden {
|
|
44
|
+
display: none;
|
|
45
|
+
}
|
|
46
|
+
.notif > div:nth-of-type(1) {
|
|
47
|
+
width: 20px;
|
|
48
|
+
min-width: 20px;
|
|
49
|
+
height: 20px;
|
|
50
|
+
background-size: 20px auto;
|
|
51
|
+
background-repeat: no-repeat;
|
|
52
|
+
|
|
53
|
+
}
|
|
54
|
+
.notif > div.success {
|
|
55
|
+
background-image: url('/icons/icon-success.svg')
|
|
56
|
+
}
|
|
57
|
+
.notif > div.failure {
|
|
58
|
+
background-image: url('/icons/icon-failure.svg')
|
|
59
|
+
}
|
|
60
|
+
.notif > div:nth-of-type(2) {
|
|
61
|
+
flex: 1;
|
|
62
|
+
margin: 0px 8px;
|
|
63
|
+
padding: 2px 0px;
|
|
64
|
+
line-height: 14px;
|
|
65
|
+
width: 230px;
|
|
66
|
+
}
|
|
67
|
+
.notif > button {
|
|
68
|
+
background-color: #e9e9e9;
|
|
69
|
+
width: 20px;
|
|
70
|
+
min-width: 20px;
|
|
71
|
+
height: 20px;
|
|
72
|
+
line-height: 20px;
|
|
73
|
+
text-align: center;
|
|
74
|
+
border-radius: 20px;
|
|
75
|
+
font-size: 16px;
|
|
76
|
+
font-weight: 700;
|
|
77
|
+
transform: rotate(45deg);
|
|
78
|
+
border: none;
|
|
79
|
+
color: #555;
|
|
80
|
+
cursor: pointer;
|
|
81
|
+
transition: all ease-in-out 0.2s;
|
|
82
|
+
}
|
|
83
|
+
.notif > button:hover {
|
|
84
|
+
background-color: #d7d7d7;
|
|
85
|
+
}
|
|
86
|
+
a {
|
|
87
|
+
text-decoration: underline;
|
|
88
|
+
}
|
|
89
|
+
</style>
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
<script context="module">
|
|
2
|
+
import Notification from "./Notification.svelte";
|
|
3
|
+
import { writable } from 'svelte/store'
|
|
4
|
+
|
|
5
|
+
export let notifications = writable([]);
|
|
6
|
+
|
|
7
|
+
export function addNotification(notif) {
|
|
8
|
+
notifications.update((n) => [...n, notif]);
|
|
9
|
+
}
|
|
10
|
+
</script>
|
|
11
|
+
|
|
12
|
+
<div id="wrapper" >
|
|
13
|
+
{#each $notifications as n}
|
|
14
|
+
<Notification notification={n}></Notification>
|
|
15
|
+
{/each}
|
|
16
|
+
</div>
|
|
17
|
+
|
|
18
|
+
<style>
|
|
19
|
+
#wrapper {
|
|
20
|
+
position: fixed;
|
|
21
|
+
bottom: 30px;
|
|
22
|
+
right: 30px;
|
|
23
|
+
min-width: 300px;
|
|
24
|
+
min-height: 50px;
|
|
25
|
+
z-index: 1000;
|
|
26
|
+
}
|
|
27
|
+
</style>
|