mirror of
https://github.com/sbondCo/Watcharr.git
synced 2026-08-07 07:14:44 +00:00
Move notifications to its own component.
This commit is contained in:
IRHM
@@ -2,6 +2,10 @@
|
|||||||
|
|
||||||
These changes are awaiting release:
|
These changes are awaiting release:
|
||||||
|
|
||||||
|
## Changed
|
||||||
|
|
||||||
|
- Move notifications to its own component.
|
||||||
|
|
||||||
## Fixed
|
## Fixed
|
||||||
|
|
||||||
- SpinnerTiny: Use svg instead of the css border trick to create the spinner fixing it looking more like a horseshoe than a circle on different browser scales (also added animation on the svg circle).
|
- SpinnerTiny: Use svg instead of the css border trick to create the spinner fixing it looking more like a horseshoe than a circle on different browser scales (also added animation on the svg circle).
|
||||||
|
|||||||
@@ -0,0 +1,112 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import { store } from "@/store.svelte";
|
||||||
|
import SpinnerTiny from "./SpinnerTiny.svelte";
|
||||||
|
import { unNotify } from "./util/notify";
|
||||||
|
import Icon from "./Icon.svelte";
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div id="notifications">
|
||||||
|
{#each store.notifications as n}
|
||||||
|
<div class={`${n.type} notif`}>
|
||||||
|
{#if n.type === "loading"}
|
||||||
|
<SpinnerTiny />
|
||||||
|
{/if}
|
||||||
|
<!-- only comes from our strings (which may have html) -->
|
||||||
|
<!-- eslint-disable-next-line -->
|
||||||
|
<span>{@html n.text}</span>
|
||||||
|
<button
|
||||||
|
class="plain"
|
||||||
|
onclick={() => {
|
||||||
|
unNotify(n.id);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Icon i="close" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
#notifications {
|
||||||
|
display: flex;
|
||||||
|
flex-flow: column;
|
||||||
|
gap: 10px;
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
margin-bottom: 8px;
|
||||||
|
z-index: 99999;
|
||||||
|
|
||||||
|
.notif {
|
||||||
|
display: flex;
|
||||||
|
flex-flow: row;
|
||||||
|
align-items: center;
|
||||||
|
min-width: 200px;
|
||||||
|
color: black;
|
||||||
|
background-color: white;
|
||||||
|
border-radius: 8px;
|
||||||
|
border: 1px solid rgba($color: #000000, $alpha: 0.2);
|
||||||
|
box-shadow: 0 4px 10px rgba($color: #000000, $alpha: 0.2);
|
||||||
|
animation: comein 250ms ease forwards;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
&.loading {
|
||||||
|
padding-left: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes comein {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.error {
|
||||||
|
color: white;
|
||||||
|
background-color: $error;
|
||||||
|
border: 1px solid $error;
|
||||||
|
|
||||||
|
span {
|
||||||
|
border-color: rgba($color: white, $alpha: 0.5);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.success {
|
||||||
|
color: white;
|
||||||
|
background-color: $success;
|
||||||
|
border: 1px solid $success;
|
||||||
|
|
||||||
|
span {
|
||||||
|
border-color: rgba($color: white, $alpha: 0.5);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
span {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
padding-right: 12px;
|
||||||
|
border-right: 1px solid rgba($color: black, $alpha: 0.2);
|
||||||
|
padding: 10px 12px;
|
||||||
|
padding-left: 9px;
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: white;
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin: 8px;
|
||||||
|
width: 22px;
|
||||||
|
height: 100%;
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -1,8 +1,5 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import Icon from "@/lib/Icon.svelte";
|
import Notifications from "@/lib/notifications.svelte";
|
||||||
import SpinnerTiny from "@/lib/SpinnerTiny.svelte";
|
|
||||||
import { unNotify } from "@/lib/util/notify";
|
|
||||||
import { store } from "@/store.svelte";
|
|
||||||
import { onMount } from "svelte";
|
import { onMount } from "svelte";
|
||||||
import { pwaInfo } from "virtual:pwa-info";
|
import { pwaInfo } from "virtual:pwa-info";
|
||||||
|
|
||||||
@@ -37,26 +34,8 @@
|
|||||||
</svelte:head>
|
</svelte:head>
|
||||||
|
|
||||||
<div id="tooltip"></div>
|
<div id="tooltip"></div>
|
||||||
<div id="notifications">
|
|
||||||
{#each store.notifications as n}
|
<Notifications />
|
||||||
<div class={`${n.type} notif`}>
|
|
||||||
{#if n.type === "loading"}
|
|
||||||
<SpinnerTiny />
|
|
||||||
{/if}
|
|
||||||
<!-- only comes from our strings (which may have html) -->
|
|
||||||
<!-- eslint-disable-next-line -->
|
|
||||||
<span>{@html n.text}</span>
|
|
||||||
<button
|
|
||||||
class="plain"
|
|
||||||
onclick={() => {
|
|
||||||
unNotify(n.id);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Icon i="close" />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
{/each}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{@render children?.()}
|
{@render children?.()}
|
||||||
|
|
||||||
|
|||||||
@@ -235,89 +235,6 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
:global {
|
:global {
|
||||||
#notifications {
|
|
||||||
display: flex;
|
|
||||||
flex-flow: column;
|
|
||||||
gap: 10px;
|
|
||||||
position: fixed;
|
|
||||||
bottom: 0;
|
|
||||||
left: 50%;
|
|
||||||
transform: translateX(-50%);
|
|
||||||
margin-bottom: 8px;
|
|
||||||
z-index: 99999;
|
|
||||||
|
|
||||||
.notif {
|
|
||||||
display: flex;
|
|
||||||
flex-flow: row;
|
|
||||||
align-items: center;
|
|
||||||
min-width: 200px;
|
|
||||||
color: black;
|
|
||||||
background-color: white;
|
|
||||||
border-radius: 8px;
|
|
||||||
border: 1px solid rgba($color: #000000, $alpha: 0.2);
|
|
||||||
box-shadow: 0 4px 10px rgba($color: #000000, $alpha: 0.2);
|
|
||||||
animation: comein 250ms ease forwards;
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
&.loading {
|
|
||||||
padding-left: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes comein {
|
|
||||||
from {
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
to {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.error {
|
|
||||||
color: white;
|
|
||||||
background-color: $error;
|
|
||||||
border: 1px solid $error;
|
|
||||||
|
|
||||||
span {
|
|
||||||
border-color: rgba($color: white, $alpha: 0.5);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.success {
|
|
||||||
color: white;
|
|
||||||
background-color: $success;
|
|
||||||
border: 1px solid $success;
|
|
||||||
|
|
||||||
span {
|
|
||||||
border-color: rgba($color: white, $alpha: 0.5);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
span {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
padding-right: 12px;
|
|
||||||
border-right: 1px solid rgba($color: black, $alpha: 0.2);
|
|
||||||
padding: 10px 12px;
|
|
||||||
padding-left: 9px;
|
|
||||||
|
|
||||||
a {
|
|
||||||
color: white;
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
button {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
margin: 8px;
|
|
||||||
width: 22px;
|
|
||||||
height: 100%;
|
|
||||||
color: inherit;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.small-scrollbar {
|
.small-scrollbar {
|
||||||
@supports selector(::-webkit-scrollbar) {
|
@supports selector(::-webkit-scrollbar) {
|
||||||
&::-webkit-scrollbar {
|
&::-webkit-scrollbar {
|
||||||
|
|||||||
Reference in New Issue
Block a user