status-im
/
burnchart
mirror of https://github.com/status-im/burnchart.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

show & hide notifications

This commit is contained in:
Radek Stepan 2014-09-27 12:19:14 -07:00
parent 3c6fe79123
commit 970b1367b8
6 changed files with 69 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
public/css/app.bundle.css
View File

@ -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;}

5
public/css/app.css
View File

@ -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;}

31
public/js/app.bundle.js
View File

@ -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

31
public/js/app.js
View File

@ -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

5
src/styles/app.styl
View File

@ -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

32
src/views/notify.coffee
View File

@ -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 }