mirror of
https://github.com/hcengineering/platform.git
synced 2025-04-02 14:06:45 +00:00
113 lines
3.1 KiB
Svelte
113 lines
3.1 KiB
Svelte
<!--
|
|
//
|
|
// Copyright © 2024 Hardcore Engineering Inc.
|
|
//
|
|
// Licensed under the Eclipse Public License, Version 2.0 (the "License");
|
|
// you may not use this file except in compliance with the License. You may
|
|
// obtain a copy of the License at https://www.eclipse.org/legal/epl-2.0
|
|
//
|
|
// Unless required by applicable law or agreed to in writing, software
|
|
// distributed under the License is distributed on an "AS IS" BASIS,
|
|
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
//
|
|
// See the License for the specific language governing permissions and
|
|
// limitations under the License.
|
|
//
|
|
-->
|
|
|
|
<script lang="ts">
|
|
import type { ComponentType } from 'svelte'
|
|
import { fade } from 'svelte/transition'
|
|
import Button from './Button.svelte'
|
|
import Icon from './Icon.svelte'
|
|
import CheckCircle from './icons/CheckCircle.svelte'
|
|
import Close from './icons/Close.svelte'
|
|
import Info from './icons/Info.svelte'
|
|
import { NotificationSeverity } from './notifications/NotificationSeverity'
|
|
|
|
export let onClose: (() => void) | undefined = undefined
|
|
export let severity: NotificationSeverity | undefined = undefined
|
|
export let title: string
|
|
|
|
const getIcon = (): ComponentType | undefined => {
|
|
switch (severity) {
|
|
case NotificationSeverity.Success:
|
|
return CheckCircle
|
|
case NotificationSeverity.Error:
|
|
case NotificationSeverity.Info:
|
|
case NotificationSeverity.Warning:
|
|
return Info
|
|
}
|
|
}
|
|
|
|
$: icon = getIcon()
|
|
</script>
|
|
|
|
<div class="root" in:fade out:fade>
|
|
<div class="flex-between">
|
|
<div class="flex-row-center">
|
|
{#if icon}
|
|
<div
|
|
class="mr-2"
|
|
class:icon-success={severity === NotificationSeverity.Success}
|
|
class:icon-error={severity === NotificationSeverity.Error}
|
|
class:icon-info={severity === NotificationSeverity.Info}
|
|
class:icon-warning={severity === NotificationSeverity.Warning}
|
|
>
|
|
<Icon {icon} size="medium" />
|
|
</div>
|
|
{/if}
|
|
<span class="overflow-label fs-bold text-base caption-color">{title}</span>
|
|
</div>
|
|
{#if onClose !== undefined}
|
|
<Button icon={Close} kind="ghost" size="small" on:click={onClose} />
|
|
{/if}
|
|
</div>
|
|
|
|
<div class="content">
|
|
<slot name="content" />
|
|
</div>
|
|
|
|
{#if $$slots.buttons}
|
|
<div class="flex-between gap-2">
|
|
<slot name="buttons" />
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
|
|
<style lang="scss">
|
|
.root {
|
|
overflow: hidden;
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin: 0.75rem;
|
|
padding: 0.5rem;
|
|
min-width: 25rem;
|
|
max-width: 35rem;
|
|
min-height: 7rem;
|
|
color: var(--theme-caption-color);
|
|
background-color: var(--theme-popup-color);
|
|
border: 1px solid var(--theme-popup-divider);
|
|
border-radius: 0.5rem;
|
|
box-shadow: var(--theme-popup-shadow);
|
|
|
|
.icon-success {
|
|
color: var(--theme-won-color);
|
|
}
|
|
.icon-error {
|
|
color: var(--theme-lost-color);
|
|
}
|
|
.icon-info {
|
|
color: var(--primary-color-skyblue);
|
|
}
|
|
.icon-warning {
|
|
color: var(--theme-warning-color);
|
|
}
|
|
|
|
.content {
|
|
flex-grow: 1;
|
|
margin: 1rem 0 1.25rem;
|
|
}
|
|
}
|
|
</style>
|