Skip to content
Snippets Groups Projects
Commit 4b370351 authored by Sebastien DUMETZ's avatar Sebastien DUMETZ
Browse files

Add back broken notifications with custom styles

parent 1b23f950
No related branches found
No related tags found
No related merge requests found
......@@ -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];
......
......@@ -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) {
......
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];
}
\ No newline at end of file
......@@ -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%);
}
}
@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;
}
......@@ -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;
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment