diff --git a/app/assets/stylesheets/components/_flash-message.scss b/app/assets/stylesheets/components/_flash-message.scss index e6abce7c..d4f7123a 100644 --- a/app/assets/stylesheets/components/_flash-message.scss +++ b/app/assets/stylesheets/components/_flash-message.scss @@ -8,12 +8,35 @@ .message { position: relative; - background: $hb-purple-dark; color: white; font-size: 13px; text-align: center; padding: 8px; margin-bottom: 4px; 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; + } + } + + .info { + background: $hb-purple-dark; + } + + .warning { + background: $hb-red; + } + + .hb-spinner { + position: relative; + float: right; + right: 28px; + bottom: 4px; } } diff --git a/ember-app/app/components/flash/hb-flash-message.js b/ember-app/app/components/flash/hb-flash-message.js index 276a5774..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(), @@ -19,10 +59,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 +72,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 +92,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..3a7cb4d1 100644 --- a/ember-app/app/components/flash/hb-message.js +++ b/ember-app/app/components/flash/hb-message.js @@ -2,6 +2,14 @@ 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); + }, setMessage: function(){ var message = this.get('flash.message'); @@ -14,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-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}} diff --git a/ember-app/app/templates/components/flash/hb-message.hbs b/ember-app/app/templates/components/flash/hb-message.hbs index 2e269b87..816172e1 100644 --- a/ember-app/app/templates/components/flash/hb-message.hbs +++ b/ember-app/app/templates/components/flash/hb-message.hbs @@ -1 +1,9 @@ -{{truncate message 50}} +{{#if flash.sticky}} + +{{/if}} + +
+ +{{#if progress}} + {{hb-spinner}} +{{/if}}