From 2449201cb3bc274df40b0b75a923e7d6cf57e118 Mon Sep 17 00:00:00 2001
From: Richard Frank <richardfrank@me.com>
Date: Wed, 13 Apr 2016 10:22:05 -0600
Subject: [PATCH 1/6] Makes the flash 'toast' logic much more intelligent,
 allows for sticky flashes, and adds styling for warnings

---
 .../components/_flash-message.scss            |  9 ++++++-
 .../app/components/flash/hb-flash-message.js  | 24 +++++++++++++------
 ember-app/app/components/flash/hb-message.js  |  6 +++++
 .../components/flash/hb-flash-message.hbs     |  1 +
 4 files changed, 32 insertions(+), 8 deletions(-)

diff --git a/app/assets/stylesheets/components/_flash-message.scss b/app/assets/stylesheets/components/_flash-message.scss
index e6abce7c..012540ba 100644
--- a/app/assets/stylesheets/components/_flash-message.scss
+++ b/app/assets/stylesheets/components/_flash-message.scss
@@ -8,7 +8,6 @@
 
   .message {
     position: relative;
-    background: $hb-purple-dark;
     color: white;
     font-size: 13px;
     text-align: center;
@@ -16,4 +15,12 @@
     margin-bottom: 4px;
     box-shadow: -1px 2px 2px rgba(0,0,0,0.5);
   }
+
+  .info {
+    background: $hb-purple-dark;
+  }
+
+  .warning {
+    background: #f9646e;
+  }
 }
diff --git a/ember-app/app/components/flash/hb-flash-message.js b/ember-app/app/components/flash/hb-flash-message.js
index 276a5774..1ec84ebe 100644
--- a/ember-app/app/components/flash/hb-flash-message.js
+++ b/ember-app/app/components/flash/hb-flash-message.js
@@ -19,10 +19,11 @@ var HbFlashMessageComponent = Ember.Component.extend({
       } else if(index > max) {
         _self.resetTimer(flash, this.get('timer') * 2);
       }
-    })
+    });
   }.observes('flashMessages.queue.[]', 'currentFlash.[]'),
   addToQueue: function(flash, current){
     var _self = this;
+    flash.id = _.uniqueId('flash');
     flash.on('didDestroyMessage', ()=>{
       _self.scheduleRemove(flash);
     });
@@ -31,10 +32,10 @@ var HbFlashMessageComponent = Ember.Component.extend({
     if(first && !first.isDestroying){
       this.resetTimer(first, this.get('timer') / 2);
     }
-    if(!flash.get('sticky')){
-      this.resetTimer(flash, this.get('timer'));
-    }
-    current.unshiftObject(flash);
+    this.resetTimer(flash, this.get('timer'));
+
+    var index = this.determineIndex(flash);
+    current.insertAt(index, flash);
   },
   scheduleRemove: function(flash){
     var current = this.get('currentFlash');
@@ -51,20 +52,29 @@ var HbFlashMessageComponent = Ember.Component.extend({
   },
   removeFlash: function(flash, callback){
     this.set("removingFlash", true);
-    if(this.get("currentFlash").length === 1){
+    if(this.get("currentFlash").indexOf(flash) === 0){
       return this.$(".message").first().animate({
         'top': '-=38px'
       }, 400, callback);
     }
-    this.$(".message").last().animate({
+    this.$(`.message.${flash.id}`).first().animate({
       'top': '+=8px',
       'opacity': 'hide'
     }, 400, callback);
   },
   resetTimer: function(flash, time){
+    if(flash.get('sticky')){ return; }
     flash._cancelTimer("timer");
     flash._cancelTimer("exitTimer");
     flash._setTimer("timer", "destroyMessage", time);
+  },
+  determineIndex: function(flash){
+    var current = this.get('currentFlash');
+    var sticky = current.find((f)=> {return f.sticky});
+    if(sticky){
+      return current.indexOf(sticky) + 1;
+    }
+    return 0;
   }
 });
 
diff --git a/ember-app/app/components/flash/hb-message.js b/ember-app/app/components/flash/hb-message.js
index 8a3d6689..455d9334 100644
--- a/ember-app/app/components/flash/hb-message.js
+++ b/ember-app/app/components/flash/hb-message.js
@@ -2,6 +2,12 @@ import Ember from 'ember';
 
 var  HbFlashComponent = Ember.Component.extend({
   classNames: ['message'],
+  classNameBindings: ['flash.id'],
+
+  click: function(){
+    var flash = this.get('flash');
+    flash._setTimer("timer", "destroyMessage", 0);
+  },
 
   setMessage: function(){
     var message = this.get('flash.message');
diff --git a/ember-app/app/templates/components/flash/hb-flash-message.hbs b/ember-app/app/templates/components/flash/hb-flash-message.hbs
index df151bb9..09f40f33 100644
--- a/ember-app/app/templates/components/flash/hb-flash-message.hbs
+++ b/ember-app/app/templates/components/flash/hb-flash-message.hbs
@@ -2,5 +2,6 @@
   {{
     flash/hb-message
     flash=flash
+    class=flash.type
   }}
 {{/each}}

From 4b4b857a36d6fb9e54d27e90e90ea8590f336f80 Mon Sep 17 00:00:00 2001
From: Richard Frank <richardfrank@me.com>
Date: Wed, 13 Apr 2016 12:33:51 -0600
Subject: [PATCH 2/6] Adds support for progress toasts

---
 app/assets/stylesheets/components/_flash-message.scss  |  7 +++++++
 ember-app/app/components/flash/hb-message.js           | 10 +++++++++-
 .../app/templates/components/flash/hb-message.hbs      |  4 ++++
 3 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/app/assets/stylesheets/components/_flash-message.scss b/app/assets/stylesheets/components/_flash-message.scss
index 012540ba..1bfa4fe3 100644
--- a/app/assets/stylesheets/components/_flash-message.scss
+++ b/app/assets/stylesheets/components/_flash-message.scss
@@ -23,4 +23,11 @@
   .warning {
     background: #f9646e;
   }
+
+  .hb-spinner {
+    position: relative;
+    float: right;
+    right: 28px;
+    bottom: 4px;
+  }
 }
diff --git a/ember-app/app/components/flash/hb-message.js b/ember-app/app/components/flash/hb-message.js
index 455d9334..e9ed9ba2 100644
--- a/ember-app/app/components/flash/hb-message.js
+++ b/ember-app/app/components/flash/hb-message.js
@@ -3,8 +3,10 @@ import Ember from 'ember';
 var  HbFlashComponent = Ember.Component.extend({
   classNames: ['message'],
   classNameBindings: ['flash.id'],
+  progress: Ember.computed.alias('flash.progress.status'),
 
   click: function(){
+    if(this.get('progress'){return;})
     var flash = this.get('flash');
     flash._setTimer("timer", "destroyMessage", 0);
   },
@@ -20,7 +22,13 @@ var  HbFlashComponent = Ember.Component.extend({
       'top': '+=38px',
       'margin-bottom': '+=42px'
     }, 400);
-  }
+  },
+  observeProgress: function(){
+    var flash = this.get('flash');
+    if(!flash.progress.status && flash.progress.callback){
+      flash.progress.callback.call(this);
+    }
+  }.observes('progress')
 });
 
 export default HbFlashComponent;
diff --git a/ember-app/app/templates/components/flash/hb-message.hbs b/ember-app/app/templates/components/flash/hb-message.hbs
index 2e269b87..2fde1133 100644
--- a/ember-app/app/templates/components/flash/hb-message.hbs
+++ b/ember-app/app/templates/components/flash/hb-message.hbs
@@ -1 +1,5 @@
 {{truncate message 50}}
+
+{{#if progress}}
+  {{hb-spinner}}
+{{/if}}

From fb2fc8868c1a4851ee2315a7aae7accb612c32dd Mon Sep 17 00:00:00 2001
From: Richard Frank <richardfrank@me.com>
Date: Wed, 13 Apr 2016 12:47:21 -0600
Subject: [PATCH 3/6] Documents the various ways to implement flash-messages

---
 .../app/components/flash/hb-flash-message.js  | 40 +++++++++++++++++++
 1 file changed, 40 insertions(+)

diff --git a/ember-app/app/components/flash/hb-flash-message.js b/ember-app/app/components/flash/hb-flash-message.js
index 1ec84ebe..17e378de 100644
--- a/ember-app/app/components/flash/hb-flash-message.js
+++ b/ember-app/app/components/flash/hb-flash-message.js
@@ -1,5 +1,45 @@
 import Ember from 'ember';
 
+//##Usage Info:
+//
+//Inject the `flashMessages: Ember.inject.service()` into the
+//target Ember Class
+//
+//##Standard Info Toast:
+//
+//`this.get('flashMessages').info('Some Message');
+//
+//##Sticky Toast:
+//
+//`this.get('flashMessages').add({
+//   message: 'Some Message',
+//   sticky: true,
+//   type: 'info|warning'
+//})`
+//
+//##Progress Toast:
+//
+//(Note: the callback uses the context of the flash-message component)
+//
+//`var progress = {
+//  status: true,
+//  callback: function(){
+//    this.set('message', 'completed!');
+//    this.get('flash')._setTimer('timer', 'destroyMessage', 2000)
+//  }
+//}`
+//
+//`setTimeout(function(){
+//   Ember.set(progress, 'status', false);
+//}, 10000)`
+//
+//`this.get('flashMessages').add({
+//   message: 'Some Message',
+//   sticky: true,
+//   progress: progress,
+//   type: 'info|warning'
+//})`
+
 var HbFlashMessageComponent = Ember.Component.extend({
   classNames: ['hb-flash-message'],
   flashMessages: Ember.inject.service(),

From 424542eb8adb8d853ec48768b432da4c883841be Mon Sep 17 00:00:00 2001
From: Richard Frank <richardfrank@me.com>
Date: Wed, 13 Apr 2016 14:42:29 -0600
Subject: [PATCH 4/6] Uses var for color, fixes syntax error

---
 app/assets/stylesheets/components/_flash-message.scss | 2 +-
 ember-app/app/components/flash/hb-message.js          | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/assets/stylesheets/components/_flash-message.scss b/app/assets/stylesheets/components/_flash-message.scss
index 1bfa4fe3..f2656ab3 100644
--- a/app/assets/stylesheets/components/_flash-message.scss
+++ b/app/assets/stylesheets/components/_flash-message.scss
@@ -21,7 +21,7 @@
   }
 
   .warning {
-    background: #f9646e;
+    background: $hb-red;
   }
 
   .hb-spinner {
diff --git a/ember-app/app/components/flash/hb-message.js b/ember-app/app/components/flash/hb-message.js
index e9ed9ba2..3a7cb4d1 100644
--- a/ember-app/app/components/flash/hb-message.js
+++ b/ember-app/app/components/flash/hb-message.js
@@ -6,7 +6,7 @@ var  HbFlashComponent = Ember.Component.extend({
   progress: Ember.computed.alias('flash.progress.status'),
 
   click: function(){
-    if(this.get('progress'){return;})
+    if(this.get('progress')){return;}
     var flash = this.get('flash');
     flash._setTimer("timer", "destroyMessage", 0);
   },

From 5e2c0e1d79825d46a31becae179c4dae266b40c1 Mon Sep 17 00:00:00 2001
From: Richard Frank <richardfrank@me.com>
Date: Wed, 13 Apr 2016 16:17:48 -0600
Subject: [PATCH 5/6] Adds x to indicate the toast is closable on sticky
 flashes

---
 app/assets/stylesheets/components/_flash-message.scss   | 6 ++++++
 ember-app/app/templates/components/flash/hb-message.hbs | 4 ++++
 2 files changed, 10 insertions(+)

diff --git a/app/assets/stylesheets/components/_flash-message.scss b/app/assets/stylesheets/components/_flash-message.scss
index f2656ab3..e4cecde4 100644
--- a/app/assets/stylesheets/components/_flash-message.scss
+++ b/app/assets/stylesheets/components/_flash-message.scss
@@ -14,6 +14,12 @@
     padding: 8px;
     margin-bottom: 4px;
     box-shadow: -1px 2px 2px rgba(0,0,0,0.5);
+
+    .ui-icon-x-thin {
+      float: right;
+      font-size: 8px;
+      margin-left: -16px;
+    }
   }
 
   .info {
diff --git a/ember-app/app/templates/components/flash/hb-message.hbs b/ember-app/app/templates/components/flash/hb-message.hbs
index 2fde1133..9d42bd67 100644
--- a/ember-app/app/templates/components/flash/hb-message.hbs
+++ b/ember-app/app/templates/components/flash/hb-message.hbs
@@ -3,3 +3,7 @@
 {{#if progress}}
   {{hb-spinner}}
 {{/if}}
+
+{{#if flash.sticky}}
+  <i class='ui-icon ui-icon-x-thin'></i>
+{{/if}}

From 929dea19b750aae73086092830c24c4223409d73 Mon Sep 17 00:00:00 2001
From: Richard Frank <richardfrank@me.com>
Date: Thu, 14 Apr 2016 12:58:49 -0600
Subject: [PATCH 6/6] Keeps the sticky toast x from overlapping with long
 messages

---
 app/assets/stylesheets/components/_flash-message.scss  |  3 +++
 .../app/templates/components/flash/hb-message.hbs      | 10 +++++-----
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/app/assets/stylesheets/components/_flash-message.scss b/app/assets/stylesheets/components/_flash-message.scss
index e4cecde4..d4f7123a 100644
--- a/app/assets/stylesheets/components/_flash-message.scss
+++ b/app/assets/stylesheets/components/_flash-message.scss
@@ -16,9 +16,12 @@
     box-shadow: -1px 2px 2px rgba(0,0,0,0.5);
 
     .ui-icon-x-thin {
+      position: relative;
+      bottom: 5px;
       float: right;
       font-size: 8px;
       margin-left: -16px;
+      margin-right: -8px;
     }
   }
 
diff --git a/ember-app/app/templates/components/flash/hb-message.hbs b/ember-app/app/templates/components/flash/hb-message.hbs
index 9d42bd67..816172e1 100644
--- a/ember-app/app/templates/components/flash/hb-message.hbs
+++ b/ember-app/app/templates/components/flash/hb-message.hbs
@@ -1,9 +1,9 @@
-{{truncate message 50}}
+{{#if flash.sticky}}
+  <i class='ui-icon ui-icon-x-thin'></i>
+{{/if}}
+
+<div class='message-copy'>{{truncate message 50}}</div>
 
 {{#if progress}}
   {{hb-spinner}}
 {{/if}}
-
-{{#if flash.sticky}}
-  <i class='ui-icon ui-icon-x-thin'></i>
-{{/if}}