emmanuelandRotimi Best
80cb9a5672
CLASSROOMIO-T-255: Lesson page UX improvements CLASSROOMIO-T-255:Updated part of the code CLASSROOMIO-T-255:Worked on the sidebar CLASSROOMIO-T-255:Worked on the sidebar CLASSROOMIO-T-255:Worked on the sidebar CLASSROOMIO-T-255:Worked on the sidebar and the appbar Co-authored-by: Ifeanyi Nwosu <[email protected]> Co-authored-by: Rotimi Best <[email protected]> Merge-request: CLASSROOMIO-MR-117 Merged-by: Best Admin <[email protected]>
74 lines
1.8 KiB
Svelte
74 lines
1.8 KiB
Svelte
<script lang="ts">
|
|
import { fly } from 'svelte/transition';
|
|
import { InlineNotification } from 'carbon-components-svelte';
|
|
import { capitalizeFirstLetter } from '$lib/utils/functions/string';
|
|
|
|
import { SNACKBAR_SEVERITY } from './constants';
|
|
import { snackbarStore, snackbarStoreInitialState } from './store';
|
|
|
|
let timeoutId: NodeJS.Timeout | undefined;
|
|
let kind: 'error' | 'info' | 'info-square' | 'success' | 'warning' | 'warning-alt' = 'info';
|
|
|
|
function handleClose() {
|
|
if (typeof $snackbarStore.handleClose === 'function') {
|
|
$snackbarStore.handleClose();
|
|
}
|
|
|
|
snackbarStore.update((_s) => ({
|
|
..._s,
|
|
...snackbarStoreInitialState
|
|
}));
|
|
clearTimeout(timeoutId);
|
|
timeoutId = undefined;
|
|
}
|
|
|
|
// When open is true trigger autoHideDuration
|
|
function handleOpen(open: boolean) {
|
|
if (!open) {
|
|
return;
|
|
}
|
|
|
|
const { autoHideDuration } = $snackbarStore;
|
|
|
|
if (typeof autoHideDuration === 'number' && !timeoutId) {
|
|
clearTimeout(timeoutId);
|
|
timeoutId = setTimeout(handleClose, autoHideDuration);
|
|
}
|
|
}
|
|
|
|
$: handleOpen($snackbarStore.open);
|
|
$: kind =
|
|
$snackbarStore.severity === SNACKBAR_SEVERITY.SUCCESS
|
|
? 'success'
|
|
: $snackbarStore.severity === SNACKBAR_SEVERITY.ERROR
|
|
? 'error'
|
|
: 'info';
|
|
</script>
|
|
|
|
{#if $snackbarStore.open}
|
|
{#key $snackbarStore.message}
|
|
<div transition:fly={{ x: 200, duration: 500 }} class="root absolute">
|
|
<InlineNotification
|
|
{kind}
|
|
title={capitalizeFirstLetter(kind || '')}
|
|
subtitle={$snackbarStore.message}
|
|
on:close={(e) => {
|
|
e.preventDefault();
|
|
handleClose();
|
|
}}
|
|
/>
|
|
</div>
|
|
{/key}
|
|
{/if}
|
|
|
|
<style>
|
|
.root {
|
|
right: 5%;
|
|
left: auto;
|
|
top: 24px;
|
|
transform: translateX(-5%);
|
|
min-width: 288px;
|
|
z-index: 51;
|
|
}
|
|
</style>
|