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

system notification

This commit is contained in:
Radek Stepan 2014-09-26 21:01:58 -07:00
parent 0bf4d91de9
commit 3c6fe79123
15 changed files with 297 additions and 175 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

@ -16,6 +16,7 @@ GitHub Burndown Chart as a service. Public repos are free, for private access au
### The 20%
- [ ] verify that project exists on project page when fetching it remotely (add behind the scenes)
- [ ] need to show status (receiving information etc.) per repo
- [ ] provide a documentation site
- [ ] visiting a chart page saves the project if it isn't saved already
@ -34,6 +35,7 @@ GitHub Burndown Chart as a service. Public repos are free, for private access au
- [ ] highlight for a moment recently changed milestone
- [ ] smooth animation when transitioning between icons and notifications
- [ ] show logged-in state only after it is known
- [x] how does a message look like when we have an error and nothing to render?
- [x] format milestone titles prepending "Milestone" word if appropriate
- [x] Variable document.title on different pages
- [x] be able to go back to homepage

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

@ -449,12 +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.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.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:inline-block}
#notify .icon{font-size:26px;padding:18px;width:38px}
#notify p{margin-right:10px}
#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}
#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;}

7
public/css/app.css
View File

@ -42,12 +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.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.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:inline-block}
#notify .icon{font-size:26px;padding:18px;width:38px}
#notify p{margin-right:10px}
#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}
#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;}

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

@ -40460,7 +40460,7 @@ Router.prototype.mount = function(routes, path) {
// app.coffee
root.require.register('burnchart/src/app.js', function(exports, require, module) {
var App, Header, Notify, Router, key, _i, _len, _ref;
var App, Header, Notify, key, router, _i, _len, _ref;
_ref = ['utils/mixins', 'models/projects'];
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
@ -40468,12 +40468,12 @@ Router.prototype.mount = function(routes, path) {
require("./" + key);
}
Router = require('./modules/router');
Header = require('./views/header');
Notify = require('./views/notify');
router = require('./modules/router');
App = Ractive.extend({
'template': require('./templates/layout'),
'components': {
@ -40481,7 +40481,7 @@ Router.prototype.mount = function(routes, path) {
Notify: Notify
},
init: function() {
return new Router();
return router.init('/');
}
});
@ -41197,7 +41197,7 @@ Router.prototype.mount = function(routes, path) {
});
};
router = Router({
module.exports = window.router = router = Router({
'/': _.partial(route, 'index'),
'/new/project': _.partial(route, 'new'),
'/:owner/:name': _.partial(route, 'project'),
@ -41208,16 +41208,14 @@ Router.prototype.mount = function(routes, path) {
},
'/notify': function() {
mediator.fire('!app/loading', true);
mediator.fire('!app/notify', 'You did something real good', 'warn');
mediator.fire('!app/notify', {
'text': 'You have some interesting news in your inbox. Go check it out now.',
'type': 'warn'
});
return window.location.hash = '#';
}
});
module.exports = function() {
router.init('/');
return router;
};
});
// header.mustache
@ -41244,10 +41242,16 @@ Router.prototype.mount = function(routes, path) {
module.exports = ["<Notify/>","<Header/>","","<div id=\"page\">"," <!-- content loaded from a router -->","</div>","","<div id=\"footer\">"," <div class=\"wrap\">"," &copy; 2012-2014 <a href=\"http://cloudfi.re\">Cloudfire Systems</a>"," </div>","</div>"].join("\n");
});
// milestones.mustache
root.require.register('burnchart/src/templates/milestones.js', function(exports, require, module) {
module.exports = ["{{#milestones.length}}"," <div id=\"projects\">"," <div class=\"header\">"," <a href=\"#\" class=\"sort\"><Icons icon=\"sort-alphabet\"/> Sorted by priority</a>"," <h2>Milestones</h2>"," </div>",""," <table>"," {{#milestones}}"," <tr>"," <td>"," <a class=\"milestone\" href=\"#{{owner}}/{{name}}/{{number}}\">{{ title }}</a>"," </td>"," <td style=\"width:1%\">"," <div class=\"progress\">"," <span class=\"percent\">{{Math.floor(format.progress(closed_issues, open_issues))}}%</span>"," <span class=\"due\">{{{ format.due(due_on) }}}</span>"," <div class=\"outer bar\">"," <div class=\"inner bar {{format.onTime(this)}}\" style=\"width:{{format.progress(closed_issues, open_issues)}}%\"></div>"," </div>"," </div>"," </td>"," </tr>"," {{/milestones}}"," </table>",""," <div class=\"footer\">"," <a href=\"#\"><Icons icon=\"cog\"/> Edit</a>"," </div>"," </div>","{{/milestones.length}}"].join("\n");
});
// notify.mustache
root.require.register('burnchart/src/templates/notify.js', function(exports, require, module) {
module.exports = ["{{#text}}"," <div id=\"notify\" class=\"{{type}}\" style=\"top:{{-top}}px\">"," <Icons icon=\"megaphone\"/>"," <p>{{text}}</p>"," </div>","{{/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\">"," <Icons icon=\"{{icon}}\"/>"," <p>{{text}}</p>"," </div>"," {{/system}}","{{/text}}"].join("\n");
});
// chart.mustache
@ -41271,13 +41275,13 @@ Router.prototype.mount = function(routes, path) {
// project.mustache
root.require.register('burnchart/src/templates/pages/project.js', function(exports, require, module) {
module.exports = ["<div id=\"title\">"," <div class=\"wrap\">"," <h2 class=\"title\">radekstepan/disposable</h2>"," </div>","</div>","","<div id=\"content\" class=\"wrap\">"," Project milestones go here","</div>"].join("\n");
module.exports = ["<div id=\"title\">"," <div class=\"wrap\">"," <h2 class=\"title\">{{route.join('/')}}</h2>"," </div>","</div>","","<div id=\"content\" class=\"wrap\">"," <Milestones owner=\"{{route[0]}}\" name=\"{{route[1]}}\"/>","</div>"].join("\n");
});
// projects.mustache
root.require.register('burnchart/src/templates/projects.js', function(exports, require, module) {
module.exports = ["{{#projects.list.length}}"," <div id=\"projects\">"," <div class=\"header\">"," <a href=\"#\" class=\"sort\"><Icons icon=\"sort-alphabet\"/> Sorted by priority</a>"," <h2>Projects</h2>"," </div>",""," <table>"," {{#projects.list}}"," {{#milestones}}"," <tr>"," <td class=\"repo\">"," <a class=\"project\" href=\"#{{owner}}/{{name}}\">{{owner}}/{{name}}</a>"," </td>"," <td>"," <a class=\"milestone\" href=\"#{{owner}}/{{name}}/{{number}}\">{{ title }}</a>"," </td>"," <td>"," <div class=\"progress\">"," <span class=\"percent\">{{Math.floor(format.progress(closed_issues, open_issues))}}%</span>"," <span class=\"due\">{{{ format.due(due_on) }}}</span>"," <div class=\"outer bar\">"," <div class=\"inner bar {{format.onTime(this)}}\" style=\"width:{{format.progress(closed_issues, open_issues)}}%\"></div>"," </div>"," </div>"," </td>"," </tr>"," {{/milestones}}"," {{/projects.list}}",""," <!--"," <tr>"," <td><a class=\"repo\" href=\"#\">radekstepan/disposable</a></td>"," <td><span class=\"milestone\">Milestone 1.0 <span class=\"icon down-open\"></span></td>"," <td>"," <div class=\"progress\">"," <span class=\"percent\">40%</span>"," <span class=\"due\">due on Friday</span>"," <div class=\"outer bar\">"," <div class=\"inner bar red\" style=\"width:40%\"></div>"," </div>"," </div>"," </td>"," </tr>"," <tr class=\"done\">"," <td><a class=\"repo\" href=\"#\">radekstepan/burnchart</a></td>"," <td><span class=\"milestone\">Beta Milestone <span class=\"icon down-open\"></span></a></td>"," <td>"," <div class=\"progress\">"," <span class=\"percent\">100%</span>"," <span class=\"due\">due tomorrow</span>"," <div class=\"outer bar\">"," <div class=\"inner bar green\" style=\"width:100%\"></div>"," </div>"," </div>"," </td>"," </tr>"," <tr>"," <td><a class=\"repo\" href=\"#\">intermine/intermine</a></td>"," <td><span class=\"milestone\">Emma Release 96 <span class=\"icon down-open\"></span></a></td>"," <td>"," <div class=\"progress\">"," <span class=\"percent\">27%</span>"," <span class=\"due\">due in 2 weeks</span>"," <div class=\"outer bar\">"," <div class=\"inner bar red\" style=\"width:27%\"></div>"," </div>"," </div>"," </td>"," </tr>"," <tr>"," <td><a class=\"repo\" href=\"#\">microsoft/windows</a></td>"," <td><span class=\"milestone\">RC 9 <span class=\"icon down-open\"></span></a></td>"," <td>"," <div class=\"progress\">"," <span class=\"percent\">90%</span>"," <span class=\"due red\">overdue by a month</span>"," <div class=\"outer bar\">"," <div class=\"inner bar red\" style=\"width:90%\"></div>"," </div>"," </div>"," </td>"," </tr>"," -->"," </table>",""," <div class=\"footer\">"," <a href=\"#\"><Icons icon=\"cog\"/> Edit</a>"," </div>"," </div>","{{/projects.list}}"].join("\n");
module.exports = ["{{#projects.list.length}}"," <div id=\"projects\">"," <div class=\"header\">"," <a href=\"#\" class=\"sort\"><Icons icon=\"sort-alphabet\"/> Sorted by priority</a>"," <h2>Projects</h2>"," </div>",""," <table>"," {{#projects.list}}"," {{#milestones}}"," <tr>"," <td class=\"repo\">"," <a class=\"project\" href=\"#{{owner}}/{{name}}\">{{owner}}/{{name}}</a>"," </td>"," <td>"," <a class=\"milestone\" href=\"#{{owner}}/{{name}}/{{number}}\">{{ title }}</a>"," </td>"," <td style=\"width:1%\">"," <div class=\"progress\">"," <span class=\"percent\">{{Math.floor(format.progress(closed_issues, open_issues))}}%</span>"," <span class=\"due\">{{{ format.due(due_on) }}}</span>"," <div class=\"outer bar\">"," <div class=\"inner bar {{format.onTime(this)}}\" style=\"width:{{format.progress(closed_issues, open_issues)}}%\"></div>"," </div>"," </div>"," </td>"," </tr>"," {{/milestones}}"," {{/projects.list}}"," </table>",""," <div class=\"footer\">"," <a href=\"#\"><Icons icon=\"cog\"/> Edit</a>"," </div>"," </div>","{{/projects.list.length}}","","<!--"," <tr>"," <td><a class=\"repo\" href=\"#\">radekstepan/disposable</a></td>"," <td><span class=\"milestone\">Milestone 1.0 <span class=\"icon down-open\"></span></td>"," <td>"," <div class=\"progress\">"," <span class=\"percent\">40%</span>"," <span class=\"due\">due on Friday</span>"," <div class=\"outer bar\">"," <div class=\"inner bar red\" style=\"width:40%\"></div>"," </div>"," </div>"," </td>"," </tr>"," <tr class=\"done\">"," <td><a class=\"repo\" href=\"#\">radekstepan/burnchart</a></td>"," <td><span class=\"milestone\">Beta Milestone <span class=\"icon down-open\"></span></a></td>"," <td>"," <div class=\"progress\">"," <span class=\"percent\">100%</span>"," <span class=\"due\">due tomorrow</span>"," <div class=\"outer bar\">"," <div class=\"inner bar green\" style=\"width:100%\"></div>"," </div>"," </div>"," </td>"," </tr>"," <tr>"," <td><a class=\"repo\" href=\"#\">intermine/intermine</a></td>"," <td><span class=\"milestone\">Emma Release 96 <span class=\"icon down-open\"></span></a></td>"," <td>"," <div class=\"progress\">"," <span class=\"percent\">27%</span>"," <span class=\"due\">due in 2 weeks</span>"," <div class=\"outer bar\">"," <div class=\"inner bar red\" style=\"width:27%\"></div>"," </div>"," </div>"," </td>"," </tr>"," <tr>"," <td><a class=\"repo\" href=\"#\">microsoft/windows</a></td>"," <td><span class=\"milestone\">RC 9 <span class=\"icon down-open\"></span></a></td>"," <td>"," <div class=\"progress\">"," <span class=\"percent\">90%</span>"," <span class=\"due red\">overdue by a month</span>"," <div class=\"outer bar\">"," <div class=\"inner bar red\" style=\"width:90%\"></div>"," </div>"," </div>"," </td>"," </tr>","-->"].join("\n");
});
// date.coffee
@ -41479,6 +41483,33 @@ Router.prototype.mount = function(routes, path) {
});
// milestones.coffee
root.require.register('burnchart/src/views/milestones.js', function(exports, require, module) {
var Icons, mediator, projects;
mediator = require('../modules/mediator');
projects = require('../models/projects');
Icons = require('./icons');
module.exports = Ractive.extend({
'template': require('../templates/milestones'),
'components': {
Icons: Icons
},
'adapt': [Ractive.adaptors.Ractive],
init: function() {
return this.set('milestones', _.filter(projects.get('list'), {
'owner': this.get('owner'),
'name': this.get('name')
}));
}
});
});
// notify.coffee
root.require.register('burnchart/src/views/notify.js', function(exports, require, module) {
@ -41496,16 +41527,20 @@ Router.prototype.mount = function(routes, path) {
'top': HEIGHT
},
init: function() {
var _this = this;
return mediator.on('!app/notify', function(text, type) {
if (type == null) {
type = '';
}
_this.set({
text: text,
type: type
});
_this.animate('top', 0, {
var defaults,
_this = this;
defaults = {
'text': '',
'type': '',
'system': false,
'icon': 'megaphone'
};
return mediator.on('!app/notify', function(opts) {
var pos;
opts = _.defaults(opts, defaults);
_this.set(opts);
pos = [0, 50][+opts.system];
_this.animate('top', pos, {
'easing': d3.ease('bounce'),
'duration': 800
});
@ -41643,30 +41678,18 @@ Router.prototype.mount = function(routes, path) {
// project.coffee
root.require.register('burnchart/src/views/pages/project.js', function(exports, require, module) {
var Hero, Projects, format;
var Milestones;
Hero = require('../hero');
Projects = require('../projects');
format = require('../../utils/format');
Milestones = require('../milestones');
module.exports = Ractive.extend({
'template': require('../../templates/pages/project'),
'components': {
Hero: Hero,
Projects: Projects
},
'data': {
format: format
Milestones: Milestones
},
init: function() {
var name, owner, route, _ref;
var name, owner, _ref;
_ref = this.get('route'), owner = _ref[0], name = _ref[1];
route = {
owner: owner,
name: name
};
return document.title = "" + owner + "/" + name;
}
});

103
public/js/app.js
View File

@ -7,7 +7,7 @@
// app.coffee
root.require.register('burnchart/src/app.js', function(exports, require, module) {
var App, Header, Notify, Router, key, _i, _len, _ref;
var App, Header, Notify, key, router, _i, _len, _ref;
_ref = ['utils/mixins', 'models/projects'];
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
@ -15,12 +15,12 @@
require("./" + key);
}
Router = require('./modules/router');
Header = require('./views/header');
Notify = require('./views/notify');
router = require('./modules/router');
App = Ractive.extend({
'template': require('./templates/layout'),
'components': {
@ -28,7 +28,7 @@
Notify: Notify
},
init: function() {
return new Router();
return router.init('/');
}
});
@ -744,7 +744,7 @@
});
};
router = Router({
module.exports = window.router = router = Router({
'/': _.partial(route, 'index'),
'/new/project': _.partial(route, 'new'),
'/:owner/:name': _.partial(route, 'project'),
@ -755,16 +755,14 @@
},
'/notify': function() {
mediator.fire('!app/loading', true);
mediator.fire('!app/notify', 'You did something real good', 'warn');
mediator.fire('!app/notify', {
'text': 'You have some interesting news in your inbox. Go check it out now.',
'type': 'warn'
});
return window.location.hash = '#';
}
});
module.exports = function() {
router.init('/');
return router;
};
});
// header.mustache
@ -791,10 +789,16 @@
module.exports = ["<Notify/>","<Header/>","","<div id=\"page\">"," <!-- content loaded from a router -->","</div>","","<div id=\"footer\">"," <div class=\"wrap\">"," &copy; 2012-2014 <a href=\"http://cloudfi.re\">Cloudfire Systems</a>"," </div>","</div>"].join("\n");
});
// milestones.mustache
root.require.register('burnchart/src/templates/milestones.js', function(exports, require, module) {
module.exports = ["{{#milestones.length}}"," <div id=\"projects\">"," <div class=\"header\">"," <a href=\"#\" class=\"sort\"><Icons icon=\"sort-alphabet\"/> Sorted by priority</a>"," <h2>Milestones</h2>"," </div>",""," <table>"," {{#milestones}}"," <tr>"," <td>"," <a class=\"milestone\" href=\"#{{owner}}/{{name}}/{{number}}\">{{ title }}</a>"," </td>"," <td style=\"width:1%\">"," <div class=\"progress\">"," <span class=\"percent\">{{Math.floor(format.progress(closed_issues, open_issues))}}%</span>"," <span class=\"due\">{{{ format.due(due_on) }}}</span>"," <div class=\"outer bar\">"," <div class=\"inner bar {{format.onTime(this)}}\" style=\"width:{{format.progress(closed_issues, open_issues)}}%\"></div>"," </div>"," </div>"," </td>"," </tr>"," {{/milestones}}"," </table>",""," <div class=\"footer\">"," <a href=\"#\"><Icons icon=\"cog\"/> Edit</a>"," </div>"," </div>","{{/milestones.length}}"].join("\n");
});
// notify.mustache
root.require.register('burnchart/src/templates/notify.js', function(exports, require, module) {
module.exports = ["{{#text}}"," <div id=\"notify\" class=\"{{type}}\" style=\"top:{{-top}}px\">"," <Icons icon=\"megaphone\"/>"," <p>{{text}}</p>"," </div>","{{/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\">"," <Icons icon=\"{{icon}}\"/>"," <p>{{text}}</p>"," </div>"," {{/system}}","{{/text}}"].join("\n");
});
// chart.mustache
@ -818,13 +822,13 @@
// project.mustache
root.require.register('burnchart/src/templates/pages/project.js', function(exports, require, module) {
module.exports = ["<div id=\"title\">"," <div class=\"wrap\">"," <h2 class=\"title\">radekstepan/disposable</h2>"," </div>","</div>","","<div id=\"content\" class=\"wrap\">"," Project milestones go here","</div>"].join("\n");
module.exports = ["<div id=\"title\">"," <div class=\"wrap\">"," <h2 class=\"title\">{{route.join('/')}}</h2>"," </div>","</div>","","<div id=\"content\" class=\"wrap\">"," <Milestones owner=\"{{route[0]}}\" name=\"{{route[1]}}\"/>","</div>"].join("\n");
});
// projects.mustache
root.require.register('burnchart/src/templates/projects.js', function(exports, require, module) {
module.exports = ["{{#projects.list.length}}"," <div id=\"projects\">"," <div class=\"header\">"," <a href=\"#\" class=\"sort\"><Icons icon=\"sort-alphabet\"/> Sorted by priority</a>"," <h2>Projects</h2>"," </div>",""," <table>"," {{#projects.list}}"," {{#milestones}}"," <tr>"," <td class=\"repo\">"," <a class=\"project\" href=\"#{{owner}}/{{name}}\">{{owner}}/{{name}}</a>"," </td>"," <td>"," <a class=\"milestone\" href=\"#{{owner}}/{{name}}/{{number}}\">{{ title }}</a>"," </td>"," <td>"," <div class=\"progress\">"," <span class=\"percent\">{{Math.floor(format.progress(closed_issues, open_issues))}}%</span>"," <span class=\"due\">{{{ format.due(due_on) }}}</span>"," <div class=\"outer bar\">"," <div class=\"inner bar {{format.onTime(this)}}\" style=\"width:{{format.progress(closed_issues, open_issues)}}%\"></div>"," </div>"," </div>"," </td>"," </tr>"," {{/milestones}}"," {{/projects.list}}",""," <!--"," <tr>"," <td><a class=\"repo\" href=\"#\">radekstepan/disposable</a></td>"," <td><span class=\"milestone\">Milestone 1.0 <span class=\"icon down-open\"></span></td>"," <td>"," <div class=\"progress\">"," <span class=\"percent\">40%</span>"," <span class=\"due\">due on Friday</span>"," <div class=\"outer bar\">"," <div class=\"inner bar red\" style=\"width:40%\"></div>"," </div>"," </div>"," </td>"," </tr>"," <tr class=\"done\">"," <td><a class=\"repo\" href=\"#\">radekstepan/burnchart</a></td>"," <td><span class=\"milestone\">Beta Milestone <span class=\"icon down-open\"></span></a></td>"," <td>"," <div class=\"progress\">"," <span class=\"percent\">100%</span>"," <span class=\"due\">due tomorrow</span>"," <div class=\"outer bar\">"," <div class=\"inner bar green\" style=\"width:100%\"></div>"," </div>"," </div>"," </td>"," </tr>"," <tr>"," <td><a class=\"repo\" href=\"#\">intermine/intermine</a></td>"," <td><span class=\"milestone\">Emma Release 96 <span class=\"icon down-open\"></span></a></td>"," <td>"," <div class=\"progress\">"," <span class=\"percent\">27%</span>"," <span class=\"due\">due in 2 weeks</span>"," <div class=\"outer bar\">"," <div class=\"inner bar red\" style=\"width:27%\"></div>"," </div>"," </div>"," </td>"," </tr>"," <tr>"," <td><a class=\"repo\" href=\"#\">microsoft/windows</a></td>"," <td><span class=\"milestone\">RC 9 <span class=\"icon down-open\"></span></a></td>"," <td>"," <div class=\"progress\">"," <span class=\"percent\">90%</span>"," <span class=\"due red\">overdue by a month</span>"," <div class=\"outer bar\">"," <div class=\"inner bar red\" style=\"width:90%\"></div>"," </div>"," </div>"," </td>"," </tr>"," -->"," </table>",""," <div class=\"footer\">"," <a href=\"#\"><Icons icon=\"cog\"/> Edit</a>"," </div>"," </div>","{{/projects.list}}"].join("\n");
module.exports = ["{{#projects.list.length}}"," <div id=\"projects\">"," <div class=\"header\">"," <a href=\"#\" class=\"sort\"><Icons icon=\"sort-alphabet\"/> Sorted by priority</a>"," <h2>Projects</h2>"," </div>",""," <table>"," {{#projects.list}}"," {{#milestones}}"," <tr>"," <td class=\"repo\">"," <a class=\"project\" href=\"#{{owner}}/{{name}}\">{{owner}}/{{name}}</a>"," </td>"," <td>"," <a class=\"milestone\" href=\"#{{owner}}/{{name}}/{{number}}\">{{ title }}</a>"," </td>"," <td style=\"width:1%\">"," <div class=\"progress\">"," <span class=\"percent\">{{Math.floor(format.progress(closed_issues, open_issues))}}%</span>"," <span class=\"due\">{{{ format.due(due_on) }}}</span>"," <div class=\"outer bar\">"," <div class=\"inner bar {{format.onTime(this)}}\" style=\"width:{{format.progress(closed_issues, open_issues)}}%\"></div>"," </div>"," </div>"," </td>"," </tr>"," {{/milestones}}"," {{/projects.list}}"," </table>",""," <div class=\"footer\">"," <a href=\"#\"><Icons icon=\"cog\"/> Edit</a>"," </div>"," </div>","{{/projects.list.length}}","","<!--"," <tr>"," <td><a class=\"repo\" href=\"#\">radekstepan/disposable</a></td>"," <td><span class=\"milestone\">Milestone 1.0 <span class=\"icon down-open\"></span></td>"," <td>"," <div class=\"progress\">"," <span class=\"percent\">40%</span>"," <span class=\"due\">due on Friday</span>"," <div class=\"outer bar\">"," <div class=\"inner bar red\" style=\"width:40%\"></div>"," </div>"," </div>"," </td>"," </tr>"," <tr class=\"done\">"," <td><a class=\"repo\" href=\"#\">radekstepan/burnchart</a></td>"," <td><span class=\"milestone\">Beta Milestone <span class=\"icon down-open\"></span></a></td>"," <td>"," <div class=\"progress\">"," <span class=\"percent\">100%</span>"," <span class=\"due\">due tomorrow</span>"," <div class=\"outer bar\">"," <div class=\"inner bar green\" style=\"width:100%\"></div>"," </div>"," </div>"," </td>"," </tr>"," <tr>"," <td><a class=\"repo\" href=\"#\">intermine/intermine</a></td>"," <td><span class=\"milestone\">Emma Release 96 <span class=\"icon down-open\"></span></a></td>"," <td>"," <div class=\"progress\">"," <span class=\"percent\">27%</span>"," <span class=\"due\">due in 2 weeks</span>"," <div class=\"outer bar\">"," <div class=\"inner bar red\" style=\"width:27%\"></div>"," </div>"," </div>"," </td>"," </tr>"," <tr>"," <td><a class=\"repo\" href=\"#\">microsoft/windows</a></td>"," <td><span class=\"milestone\">RC 9 <span class=\"icon down-open\"></span></a></td>"," <td>"," <div class=\"progress\">"," <span class=\"percent\">90%</span>"," <span class=\"due red\">overdue by a month</span>"," <div class=\"outer bar\">"," <div class=\"inner bar red\" style=\"width:90%\"></div>"," </div>"," </div>"," </td>"," </tr>","-->"].join("\n");
});
// date.coffee
@ -1026,6 +1030,33 @@
});
// milestones.coffee
root.require.register('burnchart/src/views/milestones.js', function(exports, require, module) {
var Icons, mediator, projects;
mediator = require('../modules/mediator');
projects = require('../models/projects');
Icons = require('./icons');
module.exports = Ractive.extend({
'template': require('../templates/milestones'),
'components': {
Icons: Icons
},
'adapt': [Ractive.adaptors.Ractive],
init: function() {
return this.set('milestones', _.filter(projects.get('list'), {
'owner': this.get('owner'),
'name': this.get('name')
}));
}
});
});
// notify.coffee
root.require.register('burnchart/src/views/notify.js', function(exports, require, module) {
@ -1043,16 +1074,20 @@
'top': HEIGHT
},
init: function() {
var _this = this;
return mediator.on('!app/notify', function(text, type) {
if (type == null) {
type = '';
}
_this.set({
text: text,
type: type
});
_this.animate('top', 0, {
var defaults,
_this = this;
defaults = {
'text': '',
'type': '',
'system': false,
'icon': 'megaphone'
};
return mediator.on('!app/notify', function(opts) {
var pos;
opts = _.defaults(opts, defaults);
_this.set(opts);
pos = [0, 50][+opts.system];
_this.animate('top', pos, {
'easing': d3.ease('bounce'),
'duration': 800
});
@ -1190,30 +1225,18 @@
// project.coffee
root.require.register('burnchart/src/views/pages/project.js', function(exports, require, module) {
var Hero, Projects, format;
var Milestones;
Hero = require('../hero');
Projects = require('../projects');
format = require('../../utils/format');
Milestones = require('../milestones');
module.exports = Ractive.extend({
'template': require('../../templates/pages/project'),
'components': {
Hero: Hero,
Projects: Projects
},
'data': {
format: format
Milestones: Milestones
},
init: function() {
var name, owner, route, _ref;
var name, owner, _ref;
_ref = this.get('route'), owner = _ref[0], name = _ref[1];
route = {
owner: owner,
name: name
};
return document.title = "" + owner + "/" + name;
}
});

4
src/app.coffee
View File

@ -4,9 +4,9 @@
] )
Router = require './modules/router'
Header = require './views/header'
Notify = require './views/notify'
router = require './modules/router'
App = Ractive.extend
@ -15,6 +15,6 @@ App = Ractive.extend
'components': { Header, Notify }
init: ->
new Router()
router.init '/'
module.exports = new App()

13
src/modules/router.coffee
View File

@ -6,7 +6,7 @@ route = (page, args...) ->
Page = require "../views/pages/#{page}"
new Page { el, 'data': { 'route': args } }
router = Router
module.exports = window.router = router = Router
'/': _.partial route, 'index'
'/new/project': _.partial route, 'new'
'/:owner/:name': _.partial route, 'project'
@ -17,10 +17,7 @@ router = Router
window.location.hash = '#'
'/notify': ->
mediator.fire '!app/loading', yes
mediator.fire '!app/notify', 'You did something real good', 'warn'
window.location.hash = '#'
module.exports = ->
# Init the routes.
router.init '/'
router
mediator.fire '!app/notify',
'text': 'You have some interesting news in your inbox. Go check it out now.'
'type': 'warn'
window.location.hash = '#'

13
src/styles/app.styl
View File

@ -40,6 +40,13 @@ ul
border-top: 3px solid #AAAFBF
border-bottom: 1px solid #F3F4F8
// system-wide notification
&.system
top: 0% // hide from view
left: 50%
transform: translateX(-50%) translateY(-50%)
width: 500px
&.success
border-top-color: #00B361
color: #00B361
@ -53,15 +60,17 @@ ul
color: $strong_color
.icon, p
display: inline-block
display: block
.icon
font-size: 26px
padding: 18px
width: 38px
float: left
p
margin-right: 10px
padding: 20px 20px 20px 74px
text-align: justify
#head
background: $strong_color

31
src/templates/milestones.mustache Normal file
View File

@ -0,0 +1,31 @@
{{#milestones.length}}
<div id="projects">
<div class="header">
<a href="#" class="sort"><Icons icon="sort-alphabet"/> Sorted by priority</a>
<h2>Milestones</h2>
</div>
<table>
{{#milestones}}
<tr>
<td>
<a class="milestone" href="#{{owner}}/{{name}}/{{number}}">{{ title }}</a>
</td>
<td style="width:1%">
<div class="progress">
<span class="percent">{{Math.floor(format.progress(closed_issues, open_issues))}}%</span>
<span class="due">{{{ format.due(due_on) }}}</span>
<div class="outer bar">
<div class="inner bar {{format.onTime(this)}}" style="width:{{format.progress(closed_issues, open_issues)}}%"></div>
</div>
</div>
</td>
</tr>
{{/milestones}}
</table>
<div class="footer">
<a href="#"><Icons icon="cog"/> Edit</a>
</div>
</div>
{{/milestones.length}}

15
src/templates/notify.mustache
View File

@ -1,6 +1,13 @@
{{#text}}
<div id="notify" class="{{type}}" style="top:{{-top}}px">
<Icons icon="megaphone"/>
<p>{{text}}</p>
</div>
{{#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}}

4
src/templates/pages/project.mustache
View File

@ -1,9 +1,9 @@
<div id="title">
<div class="wrap">
<h2 class="title">radekstepan/disposable</h2>
<h2 class="title">{{route.join('/')}}</h2>
</div>
</div>
<div id="content" class="wrap">
Project milestones go here
<Milestones owner="{{route[0]}}" name="{{route[1]}}"/>
</div>

114
src/templates/projects.mustache
View File

@ -15,7 +15,7 @@
<td>
<a class="milestone" href="#{{owner}}/{{name}}/{{number}}">{{ title }}</a>
</td>
<td>
<td style="width:1%">
<div class="progress">
<span class="percent">{{Math.floor(format.progress(closed_issues, open_issues))}}%</span>
<span class="due">{{{ format.due(due_on) }}}</span>
@ -27,65 +27,65 @@
</tr>
{{/milestones}}
{{/projects.list}}
<!--
<tr>
<td><a class="repo" href="#">radekstepan/disposable</a></td>
<td><span class="milestone">Milestone 1.0 <span class="icon down-open"></span></td>
<td>
<div class="progress">
<span class="percent">40%</span>
<span class="due">due on Friday</span>
<div class="outer bar">
<div class="inner bar red" style="width:40%"></div>
</div>
</div>
</td>
</tr>
<tr class="done">
<td><a class="repo" href="#">radekstepan/burnchart</a></td>
<td><span class="milestone">Beta Milestone <span class="icon down-open"></span></a></td>
<td>
<div class="progress">
<span class="percent">100%</span>
<span class="due">due tomorrow</span>
<div class="outer bar">
<div class="inner bar green" style="width:100%"></div>
</div>
</div>
</td>
</tr>
<tr>
<td><a class="repo" href="#">intermine/intermine</a></td>
<td><span class="milestone">Emma Release 96 <span class="icon down-open"></span></a></td>
<td>
<div class="progress">
<span class="percent">27%</span>
<span class="due">due in 2 weeks</span>
<div class="outer bar">
<div class="inner bar red" style="width:27%"></div>
</div>
</div>
</td>
</tr>
<tr>
<td><a class="repo" href="#">microsoft/windows</a></td>
<td><span class="milestone">RC 9 <span class="icon down-open"></span></a></td>
<td>
<div class="progress">
<span class="percent">90%</span>
<span class="due red">overdue by a month</span>
<div class="outer bar">
<div class="inner bar red" style="width:90%"></div>
</div>
</div>
</td>
</tr>
-->
</table>
<div class="footer">
<a href="#"><Icons icon="cog"/> Edit</a>
</div>
</div>
{{/projects.list}}
{{/projects.list.length}}
<!--
<tr>
<td><a class="repo" href="#">radekstepan/disposable</a></td>
<td><span class="milestone">Milestone 1.0 <span class="icon down-open"></span></td>
<td>
<div class="progress">
<span class="percent">40%</span>
<span class="due">due on Friday</span>
<div class="outer bar">
<div class="inner bar red" style="width:40%"></div>
</div>
</div>
</td>
</tr>
<tr class="done">
<td><a class="repo" href="#">radekstepan/burnchart</a></td>
<td><span class="milestone">Beta Milestone <span class="icon down-open"></span></a></td>
<td>
<div class="progress">
<span class="percent">100%</span>
<span class="due">due tomorrow</span>
<div class="outer bar">
<div class="inner bar green" style="width:100%"></div>
</div>
</div>
</td>
</tr>
<tr>
<td><a class="repo" href="#">intermine/intermine</a></td>
<td><span class="milestone">Emma Release 96 <span class="icon down-open"></span></a></td>
<td>
<div class="progress">
<span class="percent">27%</span>
<span class="due">due in 2 weeks</span>
<div class="outer bar">
<div class="inner bar red" style="width:27%"></div>
</div>
</div>
</td>
</tr>
<tr>
<td><a class="repo" href="#">microsoft/windows</a></td>
<td><span class="milestone">RC 9 <span class="icon down-open"></span></a></td>
<td>
<div class="progress">
<span class="percent">90%</span>
<span class="due red">overdue by a month</span>
<div class="outer bar">
<div class="inner bar red" style="width:90%"></div>
</div>
</div>
</td>
</tr>
-->

16
src/views/milestones.coffee Normal file
View File

@ -0,0 +1,16 @@
mediator = require '../modules/mediator'
projects = require '../models/projects'
Icons = require './icons'
module.exports = Ractive.extend
'template': require '../templates/milestones'
'components': { Icons }
'adapt': [ Ractive.adaptors.Ractive ]
init: ->
@set 'milestones', _.filter projects.get('list'),
'owner': @get 'owner'
'name': @get 'name'

31
src/views/notify.coffee
View File

@ -11,18 +11,35 @@ module.exports = Ractive.extend
'top': HEIGHT
init: ->
# Save the notify text on us.
mediator.on '!app/notify', (text, type='') =>
@set { text, type }
@animate 'top', 0, # slide to view
defaults =
'text': ''
'type': ''
'system': no
'icon': 'megaphone'
# Animate.
# type: alert/warn/success
# system: yes/no
mediator.on '!app/notify', (opts) =>
opts = _.defaults opts, defaults
# Set the text.
@set opts
# Which position to slide to?
pos = [ 0, 50 ][ +opts.system ] # 0px or 50% from top
# Slide into view.
@animate 'top', pos,
'easing': d3.ease('bounce')
'duration': 800
_.delay =>
@animate 'top', HEIGHT, # slide out of view
# Slide out of the view.
@animate 'top', HEIGHT,
'easing': d3.ease('back')
'complete': =>
@set 'text', null # reset
, 5e3 # ttl
# Reset the text when all is done.
@set 'text', null
# Ttl.
, 5e3
'components': { Icons }

9
src/views/pages/project.coffee
View File

@ -1,17 +1,12 @@
Hero = require '../hero'
Projects = require '../projects'
format = require '../../utils/format'
Milestones = require '../milestones'
module.exports = Ractive.extend
'template': require '../../templates/pages/project'
'components': { Hero, Projects }
'data': { format }
'components': { Milestones }
init: ->
[ owner, name ] = @get 'route'
route = { owner, name }
document.title = "#{owner}/#{name}"