adds initial components for notification service: confirm modal and toasts

wherehows-web/app/components/dataset-author.js

@@ -60,7 +60,7 @@ export default Component.extend({
   removeFromSourceMessage,
 
   init() {
-    this._super(...arguments);
+    this._super(...Array.from(arguments));
 
     // Sets a reference to the userNamesResolver function on instantiation.
     //  Typeahead component uses this function to resolve matches for user
@@ -147,14 +147,16 @@ export default Component.extend({
    *
    * @param {Object} currentProps the current props on the currentProps
    *   to be updated
-   * @param {String|Object} props the property to update on the currentProps in
+   * @param {...string|object|*} args
+   * @prop {String|Object} args[0] the property to update on the currentProps in
    *   the list of owners. Props can be also be an Object containing the
    *   properties mapped to updated values.
-   * @param {*} [value] optional value to set on the currentProps in
+   * @prop {*} [args[1]] value to set on the currentProps in
    *   the source list, required is props is map of key -> value pairs
    * @private
    */
-  _updateOwner(currentProps, ...[props, value]) {
+  _updateOwner(currentProps, ...args) {
+    const [props, value] = args;
     const sourceOwners = get(this, 'owners');
     // Create a copy so in-flight mutations are not propagates to the ui
     const updatingOwners = [...sourceOwners];

wherehows-web/app/components/notifications-service.ts

@@ -0,0 +1,5 @@
+import Ember from 'ember';
+
+const { Component } = Ember;
+
+export default Component.extend({});

wherehows-web/app/styles/abstracts/_functions.scss

@@ -81,3 +81,42 @@
 @function set-color($color, $hue) {
   @return map-get(map-get($color-scheme, $color), $hue);
 }
+
+/// Gets the item spacing length value from the map $item-spacings
+/// @param {Number} @spacing-unit - the type of spacing to retrieve
+@function item-spacing($spacing-unit) {
+  /// item-spacing maps, defines the spaces between elements in application layout
+  /// @type Map
+  /// @prop {String} key - number representing a spacing type
+  /// @prop {Length} value - pixel length
+  $item-spacings: (
+    1: 4px,
+    2: 8px,
+    3: 12px,
+    4: 16px,
+    5: 24px,
+    6: 32px,
+    7: 48px,
+    8: 64px,
+    9: 96px
+  );
+
+
+  // If item-spacing is passed a list, for example:
+  // padding: item-spacing(1 2 3 4)
+  // map item-spacing onto each element in the list and return it.
+  @if type-of($spacing-unit) == list {
+    $result: ();
+    @each $i in $spacing-unit {
+      $result: append($result, item-spacing($i));
+    }
+    @return $result;
+  }
+
+  // negative types
+  @if ($spacing-unit < 0) {
+    @return -1 * map-get($item-spacings, -1 * $spacing-unit);
+  }
+
+  @return map-get($item-spacings, $spacing-unit);
+}

wherehows-web/app/styles/components/_navbar.scss

@@ -11,6 +11,7 @@ $item-spacing: 10px;
    * Explicitly sets the .navbar min-height to a shared value
    */
   min-height: $nav-min-height;
+
   &-inverse {
     /**
      * Overrides the styling for navbar
@@ -18,6 +19,7 @@ $item-spacing: 10px;
     background-color: $brand-color;
     border-color: $brand-color;
   }
+
   .navbar-nav {
     > .active {
       /**

wherehows-web/app/styles/components/notifications/_all.scss

@@ -1,2 +1,4 @@
 @import "notification-dot";
 @import "action-notifications";
+@import "notification-toast";
+@import "notification-confirm-modal";

wherehows-web/app/styles/components/notifications/_notification-confirm-modal.scss

@@ -0,0 +1,51 @@
+/// Defines the styles for the notification confirm modal
+/// Includes 3 structural elements: __header, __content, __footer
+.notification-confirm-modal {
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, .1), 0 12px 18px 1px rgba(0, 0, 0, .2);
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  border-radius: 2px;
+  overflow: auto;
+  background-color: set-color(white, base);
+  max-height: calc(100vh - 64px);
+  min-height: 48px;
+  width: 520px;
+
+  &__header,
+  &__content,
+  &__footer {
+    padding: item-spacing(2 4);
+  }
+
+  &__header {
+    border-bottom: 1px solid rgba(0, 0, 0, .15);
+  }
+
+  &__heading-text {
+    margin-top: 0;
+  }
+
+  &__footer {
+    border-top: 1px solid rgba(0, 0, 0, .15);
+    display: flex;
+    justify-content: flex-end;
+
+    button + button {
+      margin-left: item-spacing(2);
+    }
+  }
+}
+
+.notification-confirm-modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: z('modal');
+  display: flex;
+  height: 100vh;
+  width: 100vw;
+  align-items: center;
+  justify-content: center;
+  background-color: rgba(41, 39, 36, 0.75);
+}

wherehows-web/app/styles/components/notifications/_notification-toast.scss

@@ -0,0 +1,66 @@
+/// Defines the styles for the notification toast component
+/// Contains the states --info, --success, --error
+/// Also includes a __dismiss element when applicable i.e.shown
+.notification-toast {
+  position: fixed;
+  text-align: left;
+  border-radius: 2px;
+  display: block;
+  width: 400px;
+  z-index: z('toast');
+  bottom: item-spacing(7);
+  left: item-spacing(6);
+  background: set-color(white, base);
+  padding: 0;
+  overflow: hidden;
+  height: 96px;
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, .1), 0 6px 9px rgba(0, 0, 0, .2);
+  margin-top: 12px;
+
+  &__content {
+    overflow: hidden;
+    height: 100%;
+    padding: item-spacing(4 6 4 8);
+
+    &::before {
+      content: '';
+      height: 100%;
+      width: 48px;
+      position: absolute;
+      left: 0;
+      top: 0;
+      z-index: 2;
+    }
+
+    &--info {
+      &::before {
+        background-color: set-color(grey, light);
+      }
+    }
+
+    &--error {
+      &::before {
+        background-color: set-color(red, red5);
+      }
+    }
+
+    &--success {
+      &::before {
+        background-color: set-color(green, green5);
+      }
+    }
+  }
+
+  &__dismiss {
+    background-color: transparent;
+    border-radius: 0;
+    border: 0;
+    height: 100%;
+    position: absolute;
+    right: 0;
+    top: 0;
+    padding: 0;
+    width: 48px;
+    z-index: 1;
+  }
+}

wherehows-web/app/templates/application.hbs

@@ -1,5 +1,6 @@
 {{#if session.isAuthenticated}}
   {{partial "navbar"}}
+
   {{#hero-container}}
     <header class="nacho-hero__header">
       Search for datasets, metrics and flows
@@ -8,9 +9,12 @@
       {{search-bar-form didSearch=(action "didSearch")}}
     </section>
   {{/hero-container}}
+
   <section class="container-fluid">
     {{partial "main"}}
   </section>
+
+  {{notifications-service service=notifications}}
 {{else}}
   {{outlet "login"}}
 {{/if}}