Creating a notification mechanism

2017-09-29 12:51:39 -03:00
1 parent 06fe7f0da7
commit 820b2efd88
@@ -32,4 +32,6 @@ import './input/range.html';
 import './input/select.html';
 import './input/text.html';

+import './notification';
+
 import './popover/form.html';
@@ -0,0 +1,4 @@
+import './notificationArea.html';
+import './notificationArea.styl';
+import './notificationNote.html';
+import './notificationNote.js';
@@ -0,0 +1,3 @@
+<template name="notificationArea">
+    <div id="notificationArea" class="notification-area"></div>
+</template>
@@ -0,0 +1,62 @@
+@require '{ohif:design}/app'
+
+.notification-area
+  position: fixed
+  right: 0
+  top: 50px
+  max-width: 320px
+  z-index: 10000
+
+.notification-note
+  opacity: 0
+  position: relative
+  transition(opacity 0.5s linear\, max-height 0.5s linear)
+  width: 300px
+  z-index: 2
+
+  .note-container
+    padding: 10px
+    transform(translateY(0))
+    transition(transform 0.5s linear)
+
+    .note-body
+      margin: 0
+      padding: 10px
+      position: relative
+
+      &:not(.hide-dismiss)
+        padding-right: 40px
+
+        .note-dismiss
+          display: block
+
+    .note-dismiss
+      bottom: 0
+      cursor: pointer
+      display: none
+      position: absolute
+      right: 0
+      top: 0
+      width: 40px
+
+      i
+        display: block
+        font-size: 20px
+        left: 0
+        position: absolute
+        text-align: center
+        top: 50%
+        transform(translateY(-50%))
+        width: 100%
+
+  &.in
+    max-height: auto
+    opacity: 1
+
+  &.out
+    max-height: 0 !important
+    opacity: 0
+    z-index: 1
+
+    .note-container
+      transform(translateY(-100%))
@@ -0,0 +1,12 @@
+<template name="notificationNote">
+    <div class="notification-note {{this.class}}">
+        <div class="note-container">
+            <div class="note-body alert alert-{{choose this.style 'info'}} {{#if hideDismiss}}hide-dismiss{{/if}}">
+                <div class="note-text">{{this.text}}</div>
+                <div class="note-dismiss">
+                    <i class="fa fa-times"></i>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
@@ -0,0 +1,21 @@
+import { Meteor } from 'meteor/meteor';
+import { Template } from 'meteor/templating';
+import { OHIF } from 'meteor/ohif:core';
+
+Template.notificationNote.onRendered(() => {
+    const instance = Template.instance();
+    Meteor.setTimeout(() => {
+        const $note = instance.$('.notification-note');
+        $note.css('max-height', $note.outerHeight()).addClass('in');
+    }, 100);
+});
+
+Template.notificationNote.events({
+    'click .note-dismiss'(event, instance) {
+        if (instance.data.promiseResolve) {
+            instance.data.promiseResolve();
+        } else {
+            OHIF.ui.notifications.dismiss(instance.data.id);
+        }
+    }
+});