Improve fixed alerts

Author: joshsmith

app/components/category-item.js

@@ -122,6 +122,6 @@ export default Component.extend({
    */
   _flashError(message) {
     let options = { fixed: true, sticky: false, timeout: 5000 };
-    get(this, 'flashMessages').clearMessages().danger(message, options);
+    get(this, 'flashMessages').danger(message, options);
   }
 });

app/components/flash-messages.js

@@ -0,0 +1,8 @@
+import Component from '@ember/component';
+import { inject as service } from '@ember/service';
+
+export default Component.extend({
+  classNames: ['flash-messages', 'flash-messages--fixed'],
+
+  flashMessages: service()
+});

app/components/flash-messages/fixed-position.js

@@ -0,0 +1,8 @@
+import Component from '@ember/component';
+import { inject as service } from '@ember/service';
+
+export default Component.extend({
+  classNames: ['flash-messages', 'flash-messages--full-width'],
+
+  flashMessages: service()
+});

app/components/flash-messages/full-width.js

@@ -44,6 +44,6 @@ export default Component.extend({
 
   _flashError(message) {
     let options = { fixed: true, sticky: false, timeout: 5000 };
-    get(this, 'flashMessages').clearMessages().danger(message, options);
+    get(this, 'flashMessages').danger(message, options);
   }
 });

app/components/role-item.js

@@ -16,6 +16,7 @@ export default Component.extend(EmberKeyboardMixin, {
   classNameBindings: ['canReposition:task-card--can-reposition', 'isLoading:task-card--is-loading'],
   tagName: 'div',
 
+  flashMessages: service(),
   session: service(),
   store: service(),
 
@@ -55,6 +56,10 @@ export default Component.extend(EmberKeyboardMixin, {
     set(task, 'archived', true);
     let next = this.$().next(); // get the next sibling
     yield task.save().then(() => {
+      let options = { fixed: true, icon: 'archive', sticky: false, timeout: 5000 };
+      let message = `Archived <strong>${get(task, 'title')}</strong>`;
+      get(this, 'flashMessages').success(message, options);
+
       // trigger a mouseenter since the mouse doesn't update without the user
       if (next) {
         next.trigger('mouseenter');

app/components/task-card.js

@@ -36,9 +36,11 @@ export default Component.extend({
         return RSVP.resolve();
       }
 
+      let username = get(projectUser, 'user.username');
+
       set(projectUser, 'role', role);
       return projectUser.save().then(() => {
-        this._flashSuccess(`Role changed to ${role}`);
+        this._flashSuccess(`Role for <strong>${username}</strong> changed to ${role}`);
       });
     },
 
@@ -55,7 +57,7 @@ export default Component.extend({
   },
 
   _flashSuccess(message) {
-    let options = { fixed: true, sticky: false, timeout: 5000 };
-    get(this, 'flashMessages').clearMessages().success(message, options);
+    let options = { icon: 'check', fixed: true, sticky: false, timeout: 5000, extendedTimeout: 600, preventDuplicates: false };
+    get(this, 'flashMessages').success(message, options);
   }
 });

app/components/user-list-item.js

@@ -1,4 +1,13 @@
-.flash {
+.flash-messages--fixed {
+  display: flex;
+  flex-direction: column-reverse;
+  padding-bottom: 1em;
+  position: fixed;
+  top: 0; bottom: 0; left: 0;
+  z-index: 99999;
+}
+
+.flash-message {
   cursor: pointer;
 }
 
@@ -16,46 +25,76 @@
     padding: 5px 10px 5px 35px;
   }
 
-  // fixed positioned flash message container, displayed at the very top of the page
-  // as wide as the text, centered
-  .fixed-flash {
-    position: fixed;
-    top: 0; left: 0; right: 0;
-    text-align: center;
-
+  &.active {
     .fixed-flash-inner {
-      border-radius: 4px;
-      cursor: pointer;
-      display: inline-block;
-      padding: 5px 20px;
-      margin-top: 15px;
-
-      @include fadeInDown(0.6s);
+      left: -30px;
+      // @include moveInLeft(0.6s);
+    }
 
-      p {
-        margin: 5px 0;
+    &.exiting {
+      .fixed-flash-inner {
+        left: -310px;
+        // @include moveOutLeft(0.6s);
       }
     }
   }
 }
 
+.fixed-flash {
+  z-index: 99999;
+
+  .fixed-flash-inner {
+    background: white;
+    border-top-right-radius: 4px;
+    border-bottom-right-radius: 4px;
+    box-shadow: 0 3px 12px rgba(0,0,0,0.15);
+    color: black;
+    cursor: pointer;
+    display: inline-block;
+    left: -310px;
+    margin-top: 15px;
+    padding: 5px 20px 5px 50px;
+    position: relative;
+    transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
+    width: 310px;
+
+    p {
+      margin: 5px 0;
+    }
+  }
+}
+
 // ember-cli-flash package doesn't currently support custom classes.
 // but they will in their 2.0.0 release. https://github.com/poteto/ember-cli-flash/issues/99
 // Once they do so, the following classes can be renamed after BEM standards  (ex: .alert--state-danger)
 .alert-success {
-  .full-width-container,
-  .fixed-flash-inner {
+  .full-width-container {
     background: $blue;
     color: white;
   }
+
+  .fixed-flash-inner {
+    border-top: 5px solid $blue;
+  }
+
+  i {
+    color: $blue;
+  }
 }
 
 .alert-danger {
-  .full-width-container,
-  .fixed-flash-inner {
+  .full-width-container {
     background: $red;
     color: white;
   }
+
+  .fixed-flash-inner {
+    border-top: 5px solid $red;
+  }
+
+  i {
+    color: $red;
+  }
 }
 
 .alert__close {

app/styles/_alerts.scss

@@ -14,6 +14,22 @@
           animation: fadeInDown $duration;
 }
 
+@mixin moveInLeft($duration: 2s) {
+  -webkit-animation: moveInLeft $duration; /* Safari, Chrome and Opera > 12.1 */
+     -moz-animation: moveInLeft $duration; /* Firefox < 16 */
+      -ms-animation: moveInLeft $duration; /* Internet Explorer */
+       -o-animation: moveInLeft $duration; /* Opera < 12.1 */
+          animation: moveInLeft $duration;
+}
+
+@mixin moveOutLeft($duration: 2s) {
+  -webkit-animation: moveOutLeft $duration; /* Safari, Chrome and Opera > 12.1 */
+     -moz-animation: moveOutLeft $duration; /* Firefox < 16 */
+      -ms-animation: moveOutLeft $duration; /* Internet Explorer */
+       -o-animation: moveOutLeft $duration; /* Opera < 12.1 */
+          animation: moveOutLeft $duration;
+}
+
 @mixin fadeInUp($duration: 2s) {
   -webkit-animation: fadeInUp $duration; /* Safari, Chrome and Opera > 12.1 */
      -moz-animation: fadeInUp $duration; /* Firefox < 16 */
@@ -30,6 +46,14 @@
           animation: fadeOut $duration;
 }
 
+@mixin fadeOutUp($duration: 2s) {
+  -webkit-animation: fadeOutUp $duration; /* Safari, Chrome and Opera > 12.1 */
+     -moz-animation: fadeOutUp $duration; /* Firefox < 16 */
+      -ms-animation: fadeOutUp $duration; /* Internet Explorer */
+       -o-animation: fadeOutUp $duration; /* Opera < 12.1 */
+          animation: fadeOutUp $duration;
+}
+
 @mixin shake {
   animation-name: shake;
   animation-duration: 1s;
@@ -51,6 +75,16 @@
   to { opacity: 1; transform: none; }
 }
 
+@keyframes moveInLeft {
+  from { opacity: 1; transform: translate3d(-100%, 0, 0); }
+  to { opacity: 1; transform: none; }
+}
+
+@keyframes moveOutLeft {
+  from { opacity: 1; transform: none; }
+  to { opacity: 1; transform: translate3d(-100%, 0, 0);; }
+}
+
 @keyframes fadeInUp {
   from { opacity: 0; transform: translate3d(0, 50%, 0); }
   to { opacity: 1; transform: none; }
@@ -61,6 +95,11 @@
   to   { opacity: 0; }
 }
 
+@keyframes fadeOutUp {
+  from { opacity: 1; transform: none; }
+  to { opacity: 0; transform: translate3d(0, -100%, 0); }
+}
+
 @keyframes shake {
   from, to {
     transform: translate3d(0, 0, 0);

app/styles/base/_animations.scss

@@ -12,7 +12,8 @@ isn't this here mainly for updating a user's image? }}
     {{! it'd be nice for the sake of consistency to rename
     'navigation-menu' to 'site-header' }}
     {{navigation-menu}}
-    {{flash-messages}}
+    {{flash-messages/full-width}}
+    {{flash-messages/fixed-position}}
     <div class="site-content {{if isOnboarding "site-content--start"}} {{codeTheme.className}} {{conversations.className}} {{projectTaskBoard.className}}">
       {{outlet}}
     </div>