124 lines
2.1 KiB
Svelte
124 lines
2.1 KiB
Svelte
<script>
|
|
import Icon from "../utils/Icon.svelte";
|
|
|
|
export let type;
|
|
export let content;
|
|
export let raw = false;
|
|
export let discreet = false;
|
|
export let sticky = false;
|
|
|
|
let icon = undefined;
|
|
switch (type) {
|
|
case 'success':
|
|
icon = 'check';
|
|
break;
|
|
case 'info':
|
|
icon = 'info';
|
|
break;
|
|
case 'warning':
|
|
icon = 'alert-triangle';
|
|
break;
|
|
case 'error':
|
|
icon = 'x-circle';
|
|
break;
|
|
case 'error-alert':
|
|
icon = 'alert-circle';
|
|
break;
|
|
}
|
|
|
|
let message;
|
|
|
|
function hide() {
|
|
message.remove();
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
@import "../../scss/vars";
|
|
|
|
.message {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
|
|
padding: 8px 16px;
|
|
|
|
border-radius: 5px;
|
|
|
|
:global(.icon) {
|
|
--icon-size: 24px;
|
|
margin-right: 8px;
|
|
}
|
|
|
|
&:not(&-discreet) {
|
|
background-color: rgba(255, 255, 255, 0.33);
|
|
|
|
&[data-type=info], &[data-type=question] {
|
|
color: var(--on-info);
|
|
background-color: var(--info);
|
|
}
|
|
|
|
&[data-type=success] {
|
|
color: var(--on-success);
|
|
background-color: var(--success);
|
|
}
|
|
|
|
&[data-type=warning] {
|
|
color: var(--on-warning);
|
|
background-color: var(--warning);
|
|
}
|
|
|
|
&[data-type=error], &[data-type=error-alert] {
|
|
color: var(--on-error);
|
|
background-color: var(--error);
|
|
}
|
|
}
|
|
|
|
&-discreet {
|
|
color: var(--on-surface);
|
|
|
|
.icon {
|
|
--icon-size: 20px;
|
|
}
|
|
}
|
|
|
|
.content {
|
|
flex-grow: 1;
|
|
}
|
|
|
|
button {
|
|
background-color: transparent;
|
|
color: inherit;
|
|
margin: 0;
|
|
padding: 0;
|
|
|
|
border: 0;
|
|
|
|
:global(.icon) {
|
|
margin: 0;
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|
|
|
|
<div class="message" class:message-discreet={discreet} data-type="{type}" bind:this={message}>
|
|
{#if icon}
|
|
<Icon name={icon}/>
|
|
{/if}
|
|
|
|
<span class="content">
|
|
{#if raw}
|
|
{@html content}
|
|
{:else}
|
|
{content}
|
|
{/if}
|
|
</span>
|
|
|
|
{#if !sticky}
|
|
<button type="button" on:click={hide}>
|
|
<Icon name="x"/>
|
|
</button>
|
|
{/if}
|
|
</div>
|