[WIP] add back broken notifications

source/ui/MainView.ts

@@ -49,6 +49,11 @@ export default class MainView extends router(i18n(withUser(LitElement))){
   }
 
   render() {
+    setTimeout(()=>{
+      Notification.show("Render MainView", "info", 0);
+
+    })
+
     return html`
       <corpus-navbar>
         <nav-link .selected=${this.isActive("/ui/scenes/")} href="/ui/scenes/">Collection</nav-link>
@@ -65,7 +70,7 @@ export default class MainView extends router(i18n(withUser(LitElement))){
         <change-locale style="flex:none"></change-locale>
       </footer>
       <modal-dialog></modal-dialog>
-      <div id="ff-notification-stack"></div>
+      <notification-stack></notification-stack>
     `;
   }
   static styles = [styles];

source/ui/composants/Icon.ts

@@ -49,7 +49,6 @@ export default class Icon extends LitElement
 
     protected render()
     {
-        console.log("Render icon :", this.name, this.template);
         if (this.name) {
             const template = (this.constructor as typeof Icon).templates[this.name];
             if (!template) {

source/ui/composants/Notification.ts

@@ -1,14 +1,11 @@
-import { LitElement, customElement, property } from "lit-element";
+import { LitElement, css, customElement, html, property } from "lit-element";
+
+import styles from '!lit-css-loader?{"specifier":"lit-element"}!sass-loader!../styles/notifications.scss';
 
 
 type NotificationLevel = "info" | "success" | "warning" | "error";
 
-const _levelClasses = {
-    "info": "notification-info",
-    "success": "notification-success",
-    "warning": "notification-warning",
-    "error": "notification-error"
-} as const;
+
 
 const _levelIcons = {
     "info": "info",
@@ -49,9 +46,26 @@ class Notification extends LitElement{
       this.timeout = timeout !== undefined ? timeout : _levelTimeouts[this.level];
   }
 
-}
+  render(){
+    return html`
+      <div class="notification notification-${this.level}">
+        <span class="notification-icon">${_levelIcons[this.level]}</span>
+        <span class="notification-message">${this.message}</span>
+        <span class="notification-close" @click=${this.remove}>❎</span>
+      </div>
+    `;
+  }
+
+  remove(){
+    this.parentElement?.removeChild(this);
+  }
 
+}
 
+/**
+ * Notification stack implementation.
+ * This is a very rough implementation that won't support any sort of nested stacks.
+ */
 @customElement("notification-stack")
 export default class Notifications extends LitElement{
   static container: HTMLElement = null;
@@ -60,6 +74,30 @@ export default class Notifications extends LitElement{
     if(!Notifications.container){
       return console.error("Notification stack not configured. Please mount <notification-stack> in your DOM before calling Notification.show");
     }
+    Notifications.container.appendChild(line);
+    if(0 < timeout) setTimeout(()=>{
+      line.remove();
+    }, line.timeout);
+  }
+
+  connectedCallback(){
+    super.connectedCallback();
+    if(Notifications.container){
+      console.error("Notification stack already configured. Please mount <notification-stack> only once in your DOM");
+    }else{
+      Notifications.container = this;
+    }
+  }
+
+  disconnectedCallback(): void {
+    super.disconnectedCallback();
+    if(Notifications.container === this){
+      Notifications.container = null;
+    }
+  }
+  render(){
+    return html`<div class="notifications"><slot></slot></div>`;
   }
 
+  static readonly styles = [styles];
 }

source/ui/styles/notifications.scss

@@ -0,0 +1,49 @@
+@import "./variables.scss";
+:host{
+  position: fixed;
+  z-index: 100;
+  bottom: 0;
+  right: 0;
+  width: 30%;
+  min-width: 250px;
+  max-width: 500px;
+
+  display: flex;
+  flex-direction: column;
+}
+
+::slotted(.notification) {
+  position: relative;
+  left: 0;
+  margin: 8px;
+  padding: 4px;
+  background: $color-background-light;
+  box-shadow: 0 0 20px rgba(0, 0, 0, 0.35);
+
+  > .ui-icon {
+    height: 2em;
+    padding: 8px; 
+  }
+
+  &.notification-info > .ui-icon {
+    fill: $color-info;
+  }
+  &.notification-success > .ui-icon {
+    fill: $color-success; 
+  }
+  &.notification-warning > .ui-icon {
+    fill: $color-warning; 
+  }
+  &.notification-error > .ui-icon {
+    fill: $color-error; 
+  }
+
+  .btn {
+    flex: 0;
+    padding: 8px; 
+  }
+  .fade{
+    transition: left 0.5s ease-in;
+    left: 100%;
+  }
+}

source/ui/styles/variables.scss

@@ -9,6 +9,11 @@ $color-secondary-dark: darken($color-secondary, 15%);
 
 $color-tertiary: #103040; // Holusion dark blue
 
+$color-info: #73adff;
+$color-success: #8ae65c;
+$color-warning: #e6a345;
+$color-error: #e64545;
+
 $color-text: #eee;
 $color-text-light: #eee;
 $color-text-dark: #a0a0a0;