yes
mellobacon committed
Dec 1, 2022 at 01:20 UTC
1b9a5a4c201f5ec44759a8b3544b1c9d54128591
3 files changed
+26
-2
src/components/Notifications/Notification.svelte
+19
-2
@@ -1,5 +1,7 @@
1
<script lang="ts">
2
- import { updateReadStatus } from "./Notifications";
2
+ import { NotificationButton } from "carbon-components-svelte";
3
+ import { getTime } from "../../config/config";
4
+ import { closeNotification, updateReadStatus } from "./Notifications";
5
6
export let id;
7
export let type = "";
@@ -10,7 +12,7 @@
12
let notification;
13
</script>
14
<div class="info">
13
- <span>01:25:47 PM CST</span>
15
+ <span>{getTime()}</span>
16
<!-- svelte-ignore a11y-click-events-have-key-events -->
17
<span class="mark-read" on:click|preventDefault={() => {
18
read = !read
@@ -35,6 +37,10 @@
37
<div class="action-button" on:click={action.action}>{action.label}</div>
38
{/each}
39
</div>
40
+
41
+ <div class="close-button">
42
+ <NotificationButton on:click={() => {closeNotification(id)}}></NotificationButton>
43
+ </div>
44
</div>
45
46
<style lang="scss">
@@ -90,6 +96,9 @@
96
.action-button {
97
color: #bdd4ff75 !important;
98
}
99
+ :global(.bx--toast-notification__close-button .bx--toast-notification__close-icon) {
100
+ fill: #bdd4ff75 !important;
101
+ }
102
}
103
&::before {
104
position: absolute;
@@ -135,5 +144,13 @@
144
}
145
}
146
}
147
+ .close-button {
148
+ flex-grow: 1;
149
+ :global(.bx--toast-notification__close-button .bx--toast-notification__close-icon) {
150
+ fill: #ffffff;
151
+ cursor: pointer;
152
+ z-index: 1;
153
+ }
154
+ }
155
}
156
</style>
\ No newline at end of file
src/components/Notifications/Notifications.ts
+4
@@ -66,6 +66,10 @@ export function clearNotifications() {
66
notifications.set(notificationlist);
67
updateNotificationStatus();
68
}
69
+export function closeNotification(id) {
70
+ notificationlist = notificationlist.filter(n => n.id !== id);
71
+ notifications.set(notificationlist);
72
+}
73
function getType(type: NotifType) {
74
switch (type) {
75
case NotifType.Message:
src/overrides.css
+3
@@ -76,6 +76,9 @@ a.bx--tabs__nav-link:focus, a.bx--tabs__nav-link:active, a.bx--tabs__nav-link {
76
.bx--tree-parent-node.bx--tree-node--selected>.bx--tree-node__label {
77
background-color: transparent !important;
78
}
79
+.bx--toast-notification__close-button .bx--toast-notification__close-icon {
80
+ fill: #ffffff;
81
+}
82
/*----------------------*/
83
.editor-pane .splitpanes__pane {
84
background-color: transparent;