system notification
This commit is contained in:
Radek Stepan
parent
0bf4d91de9
commit
3c6fe79123
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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;}
|
||||
|
|
|
|||
|
|
@ -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;}
|
||||
|
|
|
|||
|
|
@ -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\">"," © 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
103
public/js/app.js
|
|
@ -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\">"," © 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,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()
|
||||
|
|
@ -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'
|
||||
mediator.fire '!app/notify',
|
||||
'text': 'You have some interesting news in your inbox. Go check it out now.'
|
||||
'type': 'warn'
|
||||
window.location.hash = '#'
|
||||
|
||||
module.exports = ->
|
||||
# Init the routes.
|
||||
router.init '/'
|
||||
router
|
||||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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}}
|
||||
|
|
@ -1,6 +1,13 @@
|
|||
{{#text}}
|
||||
<div id="notify" class="{{type}}" style="top:{{-top}}px">
|
||||
<Icons icon="megaphone"/>
|
||||
{{#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}}
|
||||
|
|
@ -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>
|
||||
|
|
@ -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,6 +27,13 @@
|
|||
</tr>
|
||||
{{/milestones}}
|
||||
{{/projects.list}}
|
||||
</table>
|
||||
|
||||
<div class="footer">
|
||||
<a href="#"><Icons icon="cog"/> Edit</a>
|
||||
</div>
|
||||
</div>
|
||||
{{/projects.list.length}}
|
||||
|
||||
<!--
|
||||
<tr>
|
||||
|
|
@ -82,10 +89,3 @@
|
|||
</td>
|
||||
</tr>
|
||||
-->
|
||||
</table>
|
||||
|
||||
<div class="footer">
|
||||
<a href="#"><Icons icon="cog"/> Edit</a>
|
||||
</div>
|
||||
</div>
|
||||
{{/projects.list}}
|
||||
|
|
@ -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'
|
||||
|
|
@ -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 }
|
||||
|
||||
|
|
|
|||
|
|
@ -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}"
|
||||
Loading…
Reference in New Issue