diff --git a/public/css/app.bundle.css b/public/css/app.bundle.css index 5764ebc..25a5fb0 100644 --- a/public/css/app.bundle.css +++ b/public/css/app.bundle.css @@ -449,13 +449,14 @@ ul{list-style-type:none;margin:0;padding:0;} ul li{display:inline-block} .wrap{width:800px;margin:0 auto} #notify{position:fixed;top:-68px;z-index:1;width:100%;background:#fcfcfc;color:#aaafbf;border-top:3px solid #aaafbf;border-bottom:1px solid #f3f4f8;} -#notify.system{top:0%;left:50%;-webkit-transform:translateX(-50%) translateY(-50%);-moz-transform:translateX(-50%) translateY(-50%);-o-transform:translateX(-50%) translateY(-50%);-ms-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%);width:500px} +#notify.system{top:0%;left:50%;-webkit-transform:translateX(-50%) translateY(-50%);-moz-transform:translateX(-50%) translateY(-50%);-o-transform:translateX(-50%) translateY(-50%);-ms-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%);width:500px;} +#notify.system p{padding-top:20px} #notify.success{border-top-color:#00b361;color:#00b361} #notify.warn{border-top-color:#ea9712;color:#ea9712} #notify.alert{border-top-color:#c1041c;color:#c1041c} #notify .icon,#notify p{display:block} #notify .icon{font-size:26px;padding:18px;width:38px;float:left} -#notify p{padding:20px 20px 20px 74px;text-align:justify} +#notify p{padding:22px 20px 20px 74px;text-align:justify} #head{background:#c1041c;height:64px;} #head #icon{font-size:26px;margin:0;padding:10px 0;line-height:44px;height:44px;width:74px;background:#77000e;display:inline-block;color:#c1041c;margin:0;text-align:center} #head .q{position:relative;display:inline-block;margin:13px 20px 0 20px;vertical-align:top;} diff --git a/public/css/app.css b/public/css/app.css index 21ab131..4a7a6bf 100644 --- a/public/css/app.css +++ b/public/css/app.css @@ -42,13 +42,14 @@ ul{list-style-type:none;margin:0;padding:0;} ul li{display:inline-block} .wrap{width:800px;margin:0 auto} #notify{position:fixed;top:-68px;z-index:1;width:100%;background:#fcfcfc;color:#aaafbf;border-top:3px solid #aaafbf;border-bottom:1px solid #f3f4f8;} -#notify.system{top:0%;left:50%;-webkit-transform:translateX(-50%) translateY(-50%);-moz-transform:translateX(-50%) translateY(-50%);-o-transform:translateX(-50%) translateY(-50%);-ms-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%);width:500px} +#notify.system{top:0%;left:50%;-webkit-transform:translateX(-50%) translateY(-50%);-moz-transform:translateX(-50%) translateY(-50%);-o-transform:translateX(-50%) translateY(-50%);-ms-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%);width:500px;} +#notify.system p{padding-top:20px} #notify.success{border-top-color:#00b361;color:#00b361} #notify.warn{border-top-color:#ea9712;color:#ea9712} #notify.alert{border-top-color:#c1041c;color:#c1041c} #notify .icon,#notify p{display:block} #notify .icon{font-size:26px;padding:18px;width:38px;float:left} -#notify p{padding:20px 20px 20px 74px;text-align:justify} +#notify p{padding:22px 20px 20px 74px;text-align:justify} #head{background:#c1041c;height:64px;} #head #icon{font-size:26px;margin:0;padding:10px 0;line-height:44px;height:44px;width:74px;background:#77000e;display:inline-block;color:#c1041c;margin:0;text-align:center} #head .q{position:relative;display:inline-block;margin:13px 20px 0 20px;vertical-align:top;} diff --git a/public/js/app.bundle.js b/public/js/app.bundle.js index b282a7d..0c0e67e 100644 --- a/public/js/app.bundle.js +++ b/public/js/app.bundle.js @@ -41527,15 +41527,16 @@ Router.prototype.mount = function(routes, path) { 'top': HEIGHT }, init: function() { - var defaults, + var defaults, hide, show, _this = this; defaults = { 'text': '', 'type': '', 'system': false, - 'icon': 'megaphone' + 'icon': 'megaphone', + 'ttl': 5e3 }; - return mediator.on('!app/notify', function(opts) { + show = function(opts) { var pos; opts = _.defaults(opts, defaults); _this.set(opts); @@ -41544,15 +41545,21 @@ Router.prototype.mount = function(routes, path) { 'easing': d3.ease('bounce'), 'duration': 800 }); - return _.delay(function() { - return _this.animate('top', HEIGHT, { - 'easing': d3.ease('back'), - 'complete': function() { - return _this.set('text', null); - } - }); - }, 5e3); - }); + if (!opts.ttl) { + return; + } + return _.delay(hide, opts.ttl); + }; + hide = function() { + return _this.animate('top', HEIGHT, { + 'easing': d3.ease('back'), + 'complete': function() { + return _this.set('text', null); + } + }); + }; + mediator.on('!app/notify', show); + return mediator.on('!app/notify/hide', hide); }, 'components': { Icons: Icons diff --git a/public/js/app.js b/public/js/app.js index 8790e1d..9ceda74 100644 --- a/public/js/app.js +++ b/public/js/app.js @@ -1074,15 +1074,16 @@ 'top': HEIGHT }, init: function() { - var defaults, + var defaults, hide, show, _this = this; defaults = { 'text': '', 'type': '', 'system': false, - 'icon': 'megaphone' + 'icon': 'megaphone', + 'ttl': 5e3 }; - return mediator.on('!app/notify', function(opts) { + show = function(opts) { var pos; opts = _.defaults(opts, defaults); _this.set(opts); @@ -1091,15 +1092,21 @@ 'easing': d3.ease('bounce'), 'duration': 800 }); - return _.delay(function() { - return _this.animate('top', HEIGHT, { - 'easing': d3.ease('back'), - 'complete': function() { - return _this.set('text', null); - } - }); - }, 5e3); - }); + if (!opts.ttl) { + return; + } + return _.delay(hide, opts.ttl); + }; + hide = function() { + return _this.animate('top', HEIGHT, { + 'easing': d3.ease('back'), + 'complete': function() { + return _this.set('text', null); + } + }); + }; + mediator.on('!app/notify', show); + return mediator.on('!app/notify/hide', hide); }, 'components': { Icons: Icons diff --git a/src/styles/app.styl b/src/styles/app.styl index 4ea328e..b491ab9 100644 --- a/src/styles/app.styl +++ b/src/styles/app.styl @@ -47,6 +47,9 @@ ul transform: translateX(-50%) translateY(-50%) width: 500px + p + padding-top: 20px + &.success border-top-color: #00B361 color: #00B361 @@ -69,7 +72,7 @@ ul float: left p - padding: 20px 20px 20px 74px + padding: 22px 20px 20px 74px text-align: justify #head diff --git a/src/views/notify.coffee b/src/views/notify.coffee index e654cf2..4432b13 100644 --- a/src/views/notify.coffee +++ b/src/views/notify.coffee @@ -16,11 +16,12 @@ module.exports = Ractive.extend 'type': '' 'system': no 'icon': 'megaphone' + 'ttl': 5e3 - # Animate. + # Show a notification. # type: alert/warn/success # system: yes/no - mediator.on '!app/notify', (opts) => + show = (opts) => opts = _.defaults opts, defaults # Set the text. @@ -31,15 +32,24 @@ module.exports = Ractive.extend @animate 'top', pos, 'easing': d3.ease('bounce') 'duration': 800 - _.delay => - # Slide out of the view. - @animate 'top', HEIGHT, - 'easing': d3.ease('back') - 'complete': => - # Reset the text when all is done. - @set 'text', null - # Ttl. - , 5e3 + + # If no ttl then show permanently. + return unless opts.ttl + + # Slide out of the view. + _.delay hide, opts.ttl + + # Hide a notification. + hide = => + @animate 'top', HEIGHT, + 'easing': d3.ease('back') + 'complete': => + # Reset the text when all is done. + @set 'text', null + + # On outside messages. + mediator.on '!app/notify', show + mediator.on '!app/notify/hide', hide 'components': { Icons }