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

be able to close topbar messages

This commit is contained in:
Radek Stepan 2014-09-30 20:16:47 -07:00
parent b7c3e000ac
commit 806196246a
9 changed files with 63 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
TODO.md
View File

@ -4,7 +4,6 @@
- [ ] create a 500/400/loading system messages
- [ ] slide top menu on page load too
- [ ] allow user to close topbar messages
- [ ] deal with Firebase timing out, are we still logged-in?
- [ ] on system-wide notifications show a button that takes us to the index unless we are on index
- [ ] mediator `!app/notify/edit` will edit the current notification
@ -32,6 +31,7 @@
- [ ] show logged-in state only after it is known
- [ ] trigger success topbar when we have completed a milestone on chart page; show plain when we are behind
- [ ] on chart page show a little progress bar in the title
- [ ] use tap plugin for Ractive
##Future Releases

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

@ -449,11 +449,13 @@ 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 .close{float:right;font-size:16px;padding:22px;cursor:pointer;}
#notify .close:before{content:"\d7";display:block}
#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.success,#notify.ok,#notify.good{border-top-color:#00b361;color:#00b361}
#notify.warn,#notify.trouble{border-top-color:#ea9712;color:#ea9712}
#notify.alert,#notify.bad,#notify.fucked{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:22px 20px 20px 74px;text-align:justify}

8
public/css/app.css
View File

@ -42,11 +42,13 @@ 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 .close{float:right;font-size:16px;padding:22px;cursor:pointer;}
#notify .close:before{content:"\d7";display:block}
#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.success,#notify.ok,#notify.good{border-top-color:#00b361;color:#00b361}
#notify.warn,#notify.trouble{border-top-color:#ea9712;color:#ea9712}
#notify.alert,#notify.bad,#notify.fucked{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:22px 20px 20px 74px;text-align:justify}

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

@ -41246,8 +41246,7 @@ Router.prototype.mount = function(routes, path) {
done = system.async();
mediator.fire('!app/notify', {
'text': 'You have some interesting news in your inbox. Go check it out now.',
'type': 'warn',
'system': true
'type': 'warn'
});
window.location.hash = '#';
return _.delay(done, 3e3);
@ -41289,7 +41288,7 @@ Router.prototype.mount = function(routes, path) {
// notify.mustache
root.require.register('burnchart/src/templates/notify.js', function(exports, require, module) {
module.exports = ["{{#text}}"," {{#system}}"," <div id=\"notify\" class=\"{{type}} system\" style=\"top:{{top}}%\">"," <Icons icon=\"{{icon}}\"/>"," <p>{{text}}</p>"," </div>"," {{else}}"," <div id=\"notify\" class=\"{{type}}\" style=\"top:{{-top}}px\">"," <Icons icon=\"{{icon}}\"/>"," <p>{{text}}</p>"," </div>"," {{/system}}","{{/text}}"].join("\n");
module.exports = ["{{#text}}"," {{#system}}"," <div id=\"notify\" class=\"{{type}} system\" style=\"top:{{top}}%\">"," <Icons icon=\"{{icon}}\"/>"," <p>{{text}}</p>"," </div>"," {{else}}"," <div id=\"notify\" class=\"{{type}}\" style=\"top:{{-top}}px\">"," <span class=\"close\" on-click=\"close\" />"," <Icons icon=\"{{icon}}\"/>"," <p>{{text}}</p>"," </div>"," {{/system}}","{{/text}}"].join("\n");
});
// chart.mustache
@ -41565,8 +41564,9 @@ Router.prototype.mount = function(routes, path) {
'top': HEIGHT
},
init: function() {
var defaults, hide, show,
var defaults, hidden, hide, show,
_this = this;
hidden = true;
defaults = {
'text': '',
'type': '',
@ -41576,8 +41576,8 @@ Router.prototype.mount = function(routes, path) {
};
show = function(opts) {
var pos;
opts = _.defaults(opts, defaults);
_this.set(opts);
hidden = false;
_this.set(opts = _.defaults(opts, defaults));
pos = [0, 50][+opts.system];
_this.animate('top', pos, {
'easing': d3.ease('bounce'),
@ -41589,6 +41589,10 @@ Router.prototype.mount = function(routes, path) {
return _.delay(hide, opts.ttl);
};
hide = function() {
if (hidden) {
return;
}
hidden = true;
return _this.animate('top', HEIGHT, {
'easing': d3.ease('back'),
'complete': function() {
@ -41597,7 +41601,8 @@ Router.prototype.mount = function(routes, path) {
});
};
mediator.on('!app/notify', show);
return mediator.on('!app/notify/hide', hide);
mediator.on('!app/notify/hide', hide);
return this.on('close', hide);
},
'components': {
Icons: Icons

19
public/js/app.js
View File

@ -793,8 +793,7 @@
done = system.async();
mediator.fire('!app/notify', {
'text': 'You have some interesting news in your inbox. Go check it out now.',
'type': 'warn',
'system': true
'type': 'warn'
});
window.location.hash = '#';
return _.delay(done, 3e3);
@ -836,7 +835,7 @@
// notify.mustache
root.require.register('burnchart/src/templates/notify.js', function(exports, require, module) {
module.exports = ["{{#text}}"," {{#system}}"," <div id=\"notify\" class=\"{{type}} system\" style=\"top:{{top}}%\">"," <Icons icon=\"{{icon}}\"/>"," <p>{{text}}</p>"," </div>"," {{else}}"," <div id=\"notify\" class=\"{{type}}\" style=\"top:{{-top}}px\">"," <Icons icon=\"{{icon}}\"/>"," <p>{{text}}</p>"," </div>"," {{/system}}","{{/text}}"].join("\n");
module.exports = ["{{#text}}"," {{#system}}"," <div id=\"notify\" class=\"{{type}} system\" style=\"top:{{top}}%\">"," <Icons icon=\"{{icon}}\"/>"," <p>{{text}}</p>"," </div>"," {{else}}"," <div id=\"notify\" class=\"{{type}}\" style=\"top:{{-top}}px\">"," <span class=\"close\" on-click=\"close\" />"," <Icons icon=\"{{icon}}\"/>"," <p>{{text}}</p>"," </div>"," {{/system}}","{{/text}}"].join("\n");
});
// chart.mustache
@ -1112,8 +1111,9 @@
'top': HEIGHT
},
init: function() {
var defaults, hide, show,
var defaults, hidden, hide, show,
_this = this;
hidden = true;
defaults = {
'text': '',
'type': '',
@ -1123,8 +1123,8 @@
};
show = function(opts) {
var pos;
opts = _.defaults(opts, defaults);
_this.set(opts);
hidden = false;
_this.set(opts = _.defaults(opts, defaults));
pos = [0, 50][+opts.system];
_this.animate('top', pos, {
'easing': d3.ease('bounce'),
@ -1136,6 +1136,10 @@
return _.delay(hide, opts.ttl);
};
hide = function() {
if (hidden) {
return;
}
hidden = true;
return _this.animate('top', HEIGHT, {
'easing': d3.ease('back'),
'complete': function() {
@ -1144,7 +1148,8 @@
});
};
mediator.on('!app/notify', show);
return mediator.on('!app/notify/hide', hide);
mediator.on('!app/notify/hide', hide);
return this.on('close', hide);
},
'components': {
Icons: Icons

1
src/modules/router.coffee
View File

@ -23,7 +23,6 @@ module.exports = window.router = router = Router
mediator.fire '!app/notify',
'text': 'You have some interesting news in your inbox. Go check it out now.'
'type': 'warn'
'system': yes
window.location.hash = '#'
_.delay done, 3e3

16
src/styles/app.styl
View File

@ -40,6 +40,16 @@ ul
border-top: 3px solid #AAAFBF
border-bottom: 1px solid #F3F4F8
.close
float: right
font-size: 16px
padding: 22px
cursor: pointer
&:before
content: "\d7"
display: block
// system-wide notification
&.system
top: 0% // hide from view
@ -50,15 +60,15 @@ ul
p
padding-top: 20px
&.success
&.success, &.ok, &.good
border-top-color: #00B361
color: #00B361
&.warn
&.warn, &.trouble
border-top-color: #EA9712
color: #EA9712
&.alert
&.alert, &.bad, &.fucked
border-top-color: $strong_color
color: $strong_color

1
src/templates/notify.mustache
View File

@ -6,6 +6,7 @@
</div>
{{else}}
<div id="notify" class="{{type}}" style="top:{{-top}}px">
<span class="close" on-click="close" />
<Icons icon="{{icon}}"/>
<p>{{text}}</p>
</div>

16
src/views/notify.coffee
View File

@ -11,6 +11,8 @@ module.exports = Ractive.extend
'top': HEIGHT
init: ->
hidden = yes
defaults =
'text': ''
'type': ''
@ -19,13 +21,11 @@ module.exports = Ractive.extend
'ttl': 5e3
# Show a notification.
# type: alert/warn/success
# system: yes/no
show = (opts) =>
opts = _.defaults opts, defaults
hidden = no
# Set the text.
@set opts
# Set the opts.
@set opts = _.defaults opts, defaults
# Which position to slide to?
pos = [ 0, 50 ][ +opts.system ] # 0px or 50% from top
# Slide into view.
@ -41,6 +41,9 @@ module.exports = Ractive.extend
# Hide a notification.
hide = =>
return if hidden
hidden = yes
@animate 'top', HEIGHT,
'easing': d3.ease('back')
'complete': =>
@ -51,6 +54,9 @@ module.exports = Ractive.extend
mediator.on '!app/notify', show
mediator.on '!app/notify/hide', hide
# Close us prematurely...
@on 'close', hide
'components': { Icons }
'adapt': [ Ractive.adaptors.Ractive ]