diff --git a/TODO.md b/TODO.md
index e97df70..0a32adf 100644
--- a/TODO.md
+++ b/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
diff --git a/public/css/app.bundle.css b/public/css/app.bundle.css
index 25a5fb0..5f2d561 100644
--- a/public/css/app.bundle.css
+++ b/public/css/app.bundle.css
@@ -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}
diff --git a/public/css/app.css b/public/css/app.css
index 4a7a6bf..17f4a8a 100644
--- a/public/css/app.css
+++ b/public/css/app.css
@@ -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}
diff --git a/public/js/app.bundle.js b/public/js/app.bundle.js
index 8ce764a..07f5ce6 100644
--- a/public/js/app.bundle.js
+++ b/public/js/app.bundle.js
@@ -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}}"," "," {{else}}"," "," {{/system}}","{{/text}}"].join("\n");
+ module.exports = ["{{#text}}"," {{#system}}"," "," {{else}}"," "," {{/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
diff --git a/public/js/app.js b/public/js/app.js
index ef0c0f8..2d160de 100644
--- a/public/js/app.js
+++ b/public/js/app.js
@@ -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}}"," "," {{else}}"," "," {{/system}}","{{/text}}"].join("\n");
+ module.exports = ["{{#text}}"," {{#system}}"," "," {{else}}"," "," {{/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
diff --git a/src/modules/router.coffee b/src/modules/router.coffee
index 8d93fb6..24a812a 100644
--- a/src/modules/router.coffee
+++ b/src/modules/router.coffee
@@ -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
\ No newline at end of file
diff --git a/src/styles/app.styl b/src/styles/app.styl
index b491ab9..d176893 100644
--- a/src/styles/app.styl
+++ b/src/styles/app.styl
@@ -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
diff --git a/src/templates/notify.mustache b/src/templates/notify.mustache
index c0fe1b5..16bd5df 100644
--- a/src/templates/notify.mustache
+++ b/src/templates/notify.mustache
@@ -6,6 +6,7 @@
{{else}}
diff --git a/src/views/notify.coffee b/src/views/notify.coffee
index 4432b13..0eac2b2 100644
--- a/src/views/notify.coffee
+++ b/src/views/notify.coffee
@@ -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 ]
\ No newline at end of file