Add back broken notifications with custom styles

source/ui/MainView.ts

@@ -42,13 +42,14 @@ export default class MainView extends router(i18n(withUser(LitElement))){
 
   connectedCallback(): void {
     super.connectedCallback();
-    // FIXME : configure notifications
+
     updateLogin().catch(e => {
       Modal.show({header: "Error", body: e.message});
     });
   }
 
   render() {
+
     return html`
       <corpus-navbar>
         <nav-link .selected=${this.isActive("/ui/scenes/")} href="/ui/scenes/">Collection</nav-link>
@@ -65,7 +66,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,13 @@
-import { LitElement, customElement, property } from "lit-element";
+import { LitElement, css, customElement, html, property } from "lit-element";
+
+import "./Icon";
+
+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",
@@ -36,6 +35,9 @@ class Notification extends LitElement{
   @property({ type: Number })
   timeout: number;
 
+  @property({ type: Boolean })
+  fade :boolean = false;
+
 
   createRenderRoot() {
     return this;
@@ -49,9 +51,31 @@ class Notification extends LitElement{
       this.timeout = timeout !== undefined ? timeout : _levelTimeouts[this.level];
   }
 
-}
+  render(){
+    return html`
+      <div class="notification notification-${this.level}${this.fade?" fade":""}">
+        <ui-icon name="${_levelIcons[this.level]}"></ui-icon>
+        <span class="notification-message">${this.message}</span>
+        <span class="notification-close" @click=${this.remove}>×</span>
+      </div>
+    `;
+  }
+
+  remove(){
+    this.fade = true;
+    setTimeout(()=>{
+      if (this.parentNode) {
+        this.parentNode.removeChild(this);
+      }
+    }, 500);
+  }
 
+}
 
+/**
+ * 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 +84,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/layout.scss

@@ -150,12 +150,55 @@ footer{
   display:flex;
 }
 
+.notification {
+  position: relative;
+  left: 0;
+  margin: 8px;
+  background: $color-background-light;
+  color: $color-light;
+  box-shadow: 0 0 20px rgba(0, 0, 0, 0.35);
+  display: flex;
+  justify-content: stretch;
+  align-items: center;
 
+  .ui-icon {
+    flex: 0 0 auto;
+    height: 2em;
+    width: 2em;
+    padding: 8px; 
+  }
 
-.notification-stack {
-  color: $color-light;
-  .ff-notification > .ui-icon {
-    padding: 0;
-    margin: 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; 
+  }
+
+  .notification-message {
+    flex: 1 1 100%;
+    padding: 8px;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+
+  .notification-close {
+    flex: 0;
+    padding: 4px 6px 6px 6px;
+    font-weight: bolder;
+    color: $color-text-dark;
+    line-height: 1;
+    font-size: 1.5em;
+    cursor: pointer;
+  }
+  &.fade{
+    transition: transform 0.5s ease-in;
+    transform: translateX(100%);
+  }
+}

source/ui/styles/notifications.scss

@@ -0,0 +1,13 @@
+@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;
+}

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;