be able to close topbar messages
This commit is contained in:
Radek Stepan
parent
b7c3e000ac
commit
806196246a
2
TODO.md
2
TODO.md
|
|
@ -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
|
||||
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -21,9 +21,8 @@ module.exports = window.router = router = Router
|
|||
done = do system.async
|
||||
|
||||
mediator.fire '!app/notify',
|
||||
'text': 'You have some interesting news in your inbox. Go check it out now.'
|
||||
'type': 'warn'
|
||||
'system': yes
|
||||
'text': 'You have some interesting news in your inbox. Go check it out now.'
|
||||
'type': 'warn'
|
||||
window.location.hash = '#'
|
||||
|
||||
_.delay done, 3e3
|
||||
|
|
@ -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
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
||||
# Set the text.
|
||||
@set opts
|
||||
hidden = no
|
||||
|
||||
# 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 ]
|
||||
Loading…
Reference in New Issue