#258 notification overlap fix (#260)

Co-authored-by: neil <neil@neils-MacBook-Pro.local>

modules/desktop/electron/electron.ts

@@ -82,22 +82,22 @@ function sendStatusToWindow(text: string, params?: { [key: string]: any }) {
 	mainWindow?.webContents.send("message", text, params || {});
 }
 autoUpdater.on("checking-for-update", () => {
-	sendStatusToWindow("Checking for update...");
+	log.info("checking for tea gui update");
 });
-autoUpdater.on("update-available", (info) => {
-	sendStatusToWindow("Update available.");
+autoUpdater.on("update-available", () => {
+	log.info("update for tea gui available");
 });
-autoUpdater.on("update-not-available", (info) => {
-	sendStatusToWindow("Update not available.");
+autoUpdater.on("update-not-available", () => {
+	log.info("no update for tea gui");
 });
 autoUpdater.on("error", (err) => {
-	sendStatusToWindow("Error in auto-updater. " + err);
+	log.error("auto update:", err);
 });
 autoUpdater.on("download-progress", (progressObj) => {
 	let log_message = "Download speed: " + progressObj.bytesPerSecond;
 	log_message = log_message + " - Downloaded " + progressObj.percent + "%";
 	log_message = log_message + " (" + progressObj.transferred + "/" + progressObj.total + ")";
-	sendStatusToWindow(log_message);
+	log.info("tea gui:", log_message);
 });
 autoUpdater.on("update-downloaded", (info) => {
 	sendStatusToWindow(`A new tea gui(${info.version}) is available. Relaunch the app to update.`, {

modules/desktop/src/routes/+layout.svelte

@@ -28,7 +28,9 @@
 <div id="main-layout" class="w-full">
 	<TopBar />
 	{#each $notificationStore as notification}
-		<Notification {notification} />
+		<Notification {notification} onClose={() => {
+			notificationStore.remove(notification.id);
+		}}/>
 	{/each}
 	<section class="relative pt-4" bind:this={view}>
 		<div class="content">

modules/ui/src/icons/fonts/tea-icons.svg

@@ -32,4 +32,12 @@
 <glyph glyph-name="upload" unicode="&#119;" d="M440 258l-93 0c-12 0-22-7-25-17-10-28-36-46-66-46-30 0-56 18-66 46-3 10-13 17-25 17l-93 0c-14 0-26-11-26-25l0-144c0-14 12-25 26-25l368 0c14 0 26 11 26 25l0 144c0 14-12 25-26 25z m-257 79l34 0 0-88c0-4 4-7 7-7l64 0c3 0 7 3 7 7l0 88 34 0c2 0 5 1 6 3 1 2 1 5-1 7l-73 98c-1 2-3 3-5 3l0 0c-3 0-5-1-6-3l-72-98c-2-2-2-5-1-7 1-2 4-3 6-3z"/>
 <glyph glyph-name="share" unicode="&#120;" d="M421 229l0-74c0-22-8-42-25-58-16-16-35-24-58-24l-237 0c-23 0-42 8-59 24-16 16-24 36-24 58l0 238c0 23 8 42 24 58 17 16 36 24 59 24l72 0c3 0 5 0 7-2 2-2 3-4 3-7 0-5-3-8-8-9-15-5-27-11-38-17-2-1-3-1-4-1l-32 0c-13 0-24-5-33-14-9-9-13-19-13-32l0-238c0-12 4-23 13-32 9-9 20-13 33-13l237 0c13 0 24 4 33 13 9 9 13 20 13 32l0 62c0 3 2 6 5 8 5 2 11 6 16 10 3 3 6 4 10 3 4-2 6-5 6-9z m67 142l-109-110c-4-3-8-5-13-5-3 0-5 0-7 1-8 4-12 9-12 17l0 55-45 0c-62 0-104-12-125-37-23-26-30-71-22-135 1-5-1-8-5-10-2-1-3-1-4-1-3 0-5 2-7 4-2 3-4 6-6 9-2 3-6 10-11 19-6 10-11 20-15 29-4 9-7 20-11 32-3 13-5 25-5 35 0 10 1 18 1 26 1 8 2 17 4 26 2 9 5 18 8 25 4 8 8 16 14 23 5 8 12 15 19 22 8 6 17 12 27 17 11 6 23 10 36 14 13 4 28 7 46 9 17 2 36 3 56 3l45 0 0 55c0 8 4 13 12 17 2 1 4 1 7 1 5 0 9-2 13-5l109-110c4-4 6-8 6-13 0-5-2-9-6-13z"/>
 <glyph glyph-name="calendar" unicode="&#121;" d="M55 37l402 0 0 292-402 0z m110 347l0 82c0 3-1 5-3 7-2 2-4 2-7 2l-18 0c-3 0-5 0-6-2-2-2-3-4-3-7l0-82c0-3 1-5 3-7 1-1 3-2 6-2l18 0c3 0 5 1 7 2 2 2 3 4 3 7z m219 0l0 82c0 3-1 5-3 7-1 2-3 2-6 2l-18 0c-3 0-5 0-7-2-2-2-3-4-3-7l0-82c0-3 1-5 3-7 2-1 4-2 7-2l18 0c3 0 5 1 6 2 2 2 3 4 3 7z m110 18l0-365c0-10-4-19-11-26-7-7-16-11-26-11l-402 0c-10 0-19 4-26 11-7 7-11 16-11 26l0 365c0 10 4 19 11 26 7 7 16 11 26 11l36 0 0 27c0 13 5 24 14 33 9 9 20 13 32 13l18 0c13 0 24-4 33-13 9-9 13-20 13-33l0-27 110 0 0 27c0 13 4 24 13 33 9 9 20 13 33 13l18 0c12 0 23-4 32-13 9-9 14-20 14-33l0-27 36 0c10 0 19-4 26-11 7-7 11-16 11-26z"/>
+<glyph glyph-name="search-icon-1" unicode="&#65;" d="M422 340c0 92-74 166-166 166-92 0-166-74-166-166 0-85 64-156 147-165l0-169 38 0 0 169c83 9 147 80 147 165z m-166-128c-71 0-128 57-128 128 0 71 57 128 128 128 71 0 128-57 128-128 0-71-57-128-128-128z"/>
+<glyph glyph-name="circle-random-20" unicode="&#122;" d="M471 154l16-8c6 11 10 23 14 35l-18 6c-3-12-7-23-12-33z m-453 95l-18-1c0-13 2-25 4-38l18 4c-2 11-3 23-4 35z m475 22c1-5 1-10 1-15 0-12-1-23-3-35l18-3c2 13 3 25 3 38 0 5 0 11-1 16z m-448-124c-6 10-10 21-14 32l-18-5c5-12 10-24 15-35z m461 163c-2 12-6 24-10 36l-17-6c4-11 7-23 9-34z m-47 102l-15-11c8-9 14-19 20-29l16 9c-6 11-13 21-21 31z m-252-389c-11 3-23 6-34 10l-6-17c12-5 24-8 37-11z m227 417c-9 9-19 17-30 25l-10-15c9-7 19-15 27-23z m-89-404c-10-5-22-8-33-11l4-18c13 3 25 7 36 12z m-14 446c11-4 22-9 33-14l8 16c-11 6-23 11-35 15z m-143 21l5-18c11 3 22 6 34 7l-2 18c-13-1-25-4-37-7z m-125-386l-15-11c7-10 16-20 24-29l14 13c-9 9-16 18-23 27z m-8 266l-16 9c-7-10-13-22-18-33l17-8c5 11 10 22 17 32z m207 111c12-1 24-2 35-4l3 18c-12 2-25 4-37 4z m-200-71l13-12c8 9 16 17 25 25l-12 14c-9-9-18-18-26-27z m79-375c-10 5-20 12-29 19l-11-15c10-7 21-14 32-20z m265 23c-9-7-19-14-29-20l9-15c11 6 22 13 31 21z m-127-70l-2 18c-11-1-23-1-35 0l-1-19c5 0 10 0 15 0 8 0 15 0 23 1z m-160 471l10-15c9 6 20 12 31 16l-8 17c-11-5-23-11-33-18z m-117-186l18-2c1 11 3 23 6 34l-17 5c-4-12-6-25-7-37z m466-173l-15 10c-6-9-14-19-22-27l14-13c8 10 16 20 23 30z m-197 316c11-1 23-3 34-6l5 17c-12 4-25 6-38 7z m48-335c-11-4-22-7-33-9l3-18c12 2 25 5 37 10z m71 24l-13 13c-8-8-17-15-27-21l10-16c11 7 21 15 30 24z m-53 292c10-6 20-12 29-19l12 14c-10 8-21 15-32 21z m-101 19l-2 18c-13-2-25-4-37-8l5-18c11 4 23 6 34 8z m-52-331c-11 5-21 11-30 17l-11-14c10-8 21-14 33-20z m239 207c3-11 5-23 6-34l18 1c-1 13-3 26-7 38z m-339 36l16-8c5 10 11 20 18 29l-14 11c-8-10-15-21-20-32z m0-110l-18-2c2-13 5-25 9-37l17 6c-4 11-6 22-8 33z m7-74c7-11 15-21 23-31l14 13c-8 8-15 17-21 27z m39 244l12-14c9 8 18 15 29 20l-9 16c-12-6-22-13-32-22z m121-319c-12 1-23 2-34 5l-5-18c13-3 26-5 38-5z m-187 185l18-1c1 12 3 23 6 34l-18 5c-3-12-5-25-6-38z m380-49c3 12 4 25 4 38l-18 0c0-12-1-23-4-34z m-34 119l16 9c-6 11-13 22-21 32l-15-12c8-9 14-19 20-29z m6-149c-4-10-10-20-17-30l16-10c7 10 13 22 18 33z m-279 68c0-66 53-119 119-119 65 0 119 53 119 119 0 66-54 119-119 119-66 0-119-53-119-119z m119 101c55 0 101-45 101-101 0-55-46-101-101-101-56 0-101 46-101 101 0 56 45 101 101 101z m0-147c25 0 46 21 46 46 0 25-21 46-46 46-25 0-46-21-46-46 0-25 21-46 46-46z m0 73c15 0 27-12 27-27 0-15-12-27-27-27-15 0-27 12-27 27 0 15 12 27 27 27z"/>
+<glyph glyph-name="play-icon" unicode="&#66;" d="M55 507l0-502 402 251z"/>
+<glyph glyph-name="email-icon-www" unicode="&#67;" d="M1 411l0-310 510 0 0 310z m474-125l0-149-438 0 0 150 220-76 218 75z m-438 40l0 49 438 0 0-50-218-76z"/>
+<glyph glyph-name="hamburger-icon-square" unicode="&#68;" d="M0 512l512 0 0-121-512 0z m0-196l512 0 0-120-512 0z m0-195l512 0 0-121-512 0z"/>
+<glyph glyph-name="exclamation-circle" unicode="&#69;" d="M256 475c40 0 77-9 110-29 34-20 60-46 80-80 20-33 29-70 29-110 0-40-9-77-29-110-20-34-46-60-80-80-33-20-70-29-110-29-40 0-77 9-110 29-34 20-60 46-80 80-20 33-29 70-29 110 0 40 9 77 29 110 20 34 46 60 80 80 33 20 70 29 110 29z m37-356l0 54c0 3-1 5-3 7-2 2-4 3-6 3l-55 0c-3 0-5-1-7-3-2-2-3-4-3-7l0-54c0-2 1-5 3-6 2-2 4-3 7-3l55 0c2 0 4 1 6 2 2 2 3 4 3 7z m-1 98l5 178c0 2-1 4-3 5-2 2-4 2-7 2l-62 0c-3 0-5 0-7-2-2-1-3-3-3-5l5-178c0-1 1-3 3-5 1-1 4-2 6-2l53 0c3 0 5 1 7 2 2 2 3 4 3 5z"/>
+<glyph glyph-name="check-circle" unicode="&#70;" d="M403 302c0 6-1 10-5 13l-26 26c-3 4-8 6-13 6-5 0-9-2-12-6l-117-116-65 64c-3 4-7 6-12 6-5 0-10-2-13-6l-26-25c-4-4-5-8-5-13 0-6 1-10 5-13l103-104c4-3 8-5 13-5 5 0 10 2 13 5l155 155c4 4 5 8 5 13z m72-46c0-40-9-77-29-110-20-34-46-60-80-80-33-20-70-29-110-29-40 0-77 9-110 29-34 20-60 46-80 80-20 33-29 70-29 110 0 40 9 77 29 110 20 34 46 60 80 80 33 20 70 29 110 29 40 0 77-9 110-29 34-20 60-46 80-80 20-33 29-70 29-110z"/>
+<glyph glyph-name="tea-x-btn" unicode="&#71;" d="M512 463l-49 49-207-207-207 207-49-49 207-207-207-207 49-49 207 207 207-207 49 49-207 207z"/>
 </font></defs></svg>

modules/ui/src/icons/icons.css

@@ -112,3 +112,27 @@
 .icon-calendar:before {
 	content: "\79";
 }
+.icon-search-icon-1:before {
+	content: "\41";
+}
+.icon-circle-random-20:before {
+	content: "\7a";
+}
+.icon-play-icon:before {
+	content: "\42";
+}
+.icon-email-icon-www:before {
+	content: "\43";
+}
+.icon-hamburger-icon-square:before {
+	content: "\44";
+}
+.icon-exclamation-circle:before {
+	content: "\45";
+}
+.icon-check-circle:before {
+	content: "\46";
+}
+.icon-tea-x-btn:before {
+	content: "\47";
+}

modules/ui/src/notification/notification.svelte

@@ -5,6 +5,8 @@
 	import type { Notification } from "../types";
 
 	export let notification: Notification;
+
+	export let onClose: () => void;
 </script>
 
 <div class=" flex w-full items-center justify-between bg-accent px-4 py-2">
@@ -19,4 +21,5 @@
 			}}>{notification.callback_label}</button
 		>
 	{/if}
+	<button class="icon-tea-x-btn" on:click={onClose} />
 </div>