add project ui

README.md

@@ -1,5 +1,57 @@
 # burnchart
 
-1. Do not show login/logged-in state when we are still fetching that information from Firebase
+## Concept
-1. Handle 404 on routes; from catch all check if '/' or go 404 controller
+
-1. Variable document.title on different pages
+GitHub Burndown Chart as a service. Public repos are free, for private access auth via GitHub and pay.
+
+## Name
+
+charcoal, charriot
+
+- gurndown [.com/.io] github burndown
+- bithubchart [.com/.io] burndown github chart
+- burnchart [.io]
+
+## Tasks
+
+### MVP
+
+[ ] landing page allows you to immediately jump into action
+[ ] past repos are cached remotely or in localStorage
+[ ] show chart for the current milestone or choose a custom one
+[ ] be able to config options through UI that currently have to be hardcoded in config
+[ ] embed user tracking
+[ ] sort projects based on their closest due dates
+[ ] show only repo name if all projects are under our name
+[ ] rotate between percentage progress and points left
+[ ] Send notifications to people like Codeship or have our own delivery system perhaps like Github or just show a notification icon and onclick ask people to upgrade 
+
+### Extras
+
+[ ] choose your own strategy for naming issues, e.g. all issues are one size
+[ ] choose your own theme
+[ ] custom milestone start dates
+[ ] show burndown chart for all milestones
+[ ] handle Enterprise editions of GH
+[ ] auto-update the chart (with delay when no activity) when logged-in
+[ ] show a countdown clock towards the end of the milestone or show overdue
+[ ] add weekly velocity across all projects and a bar chart to that effect
+[ ] show a little lightning and a number for today's velocity
+[ ] show burnchart only for your tasks; this would be a second category of projects & tasks in the dashboard
+[ ] show an overall text-based status like: all projects on time etc.
+[ ] until GH fix milestone start date then provide an option to specify it (either do that on GH server or locally)
+[ ] work on mobile devices
+[ ] show velocity number for each member of the team in the corner of the layout
+[ ] show velocity for all team members and how it progresses through time
+[ ] points collector - give medals for 1st 3 spots in terms of velocity
+[ ] Do not show login/logged-in state when we are still fetching that information from Firebase
+[ ] Handle 404 on routes; from catch all check if '/' or go 404 controller
+[ ] Variable document.title on different pages
+[ ] In add a project form autocomplete on my username, orgs I am member of and repos I have access to
+[ ] Someone might create a public repo, add it to the system and switch it to private; need to check repo priviledges at runtime; or when asking for auth, one would choose either public OR public/private, but this could get confusign.
+
+## Notes
+
+- *payment gateways* in Canada: http://www.shopify.com/payment-gateways/canada
+- start people on a *Startup* plan showing them a comparison table to upgrade to a better offering
+- Startup, small business and enterprise plans

public/css/app.bundle.css

@@ -437,7 +437,7 @@ table {
 100%{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-o-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg)}
 }
 body{color:#3e4457;font-family:'MuseoSans500Regular',sans-serif}
-a{text-decoration:none;color:#aaafbf}
+a{text-decoration:none;color:#aaafbf;cursor:pointer}
 h1,h2,h3,p{margin:0}
 ul{list-style-type:none;margin:0;padding:0;}
 ul li{display:inline-block}
@@ -471,20 +471,14 @@ ul li{display:inline-block}
 #content #hero .content .cta a{font-family:'MuseoSlab500Regular',serif;padding:11px 20px;-webkit-border-radius:2px;border-radius:2px;display:inline-block;margin:0 4px;}
 #content #hero .content .cta a.primary{font-weight:bold;background:#c1041c;color:#fff}
 #content #hero .content .cta a.secondary{background:#fff;color:#c1041c}
-#content #add{border:1px solid #cdcecf;-webkit-border-radius:2px;border-radius:2px;background:#fff;width:400px;}
 #content #add h2{color:#3e4457}
 #content #add p{font-family:'MuseoSlab500Regular',serif;color:#b1b6c4;margin-top:10px;line-height:20px;text-align:justify;text-justify:inter-word;}
 #content #add p a{color:#3e4457}
-#content #add .form{padding:20px;}
+#content #add .form{margin-top:20px;}
 #content #add .form table{width:100%;}
 #content #add .form table tr td:first-child{width:100%}
 #content #add .form input{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;padding:10px;width:100%;-webkit-border-radius:2px 0 0 2px;border-radius:2px 0 0 2px;border:1px solid #dde1ed;border-right:0;-webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,0.2);box-shadow:inset 0 1px 2px rgba(0,0,0,0.2)}
 #content #add .form a{margin-left:-2px;font-family:'MuseoSlab500Regular',serif;padding:11px 20px;-webkit-border-radius:0 2px 2px 0;border-radius:0 2px 2px 0;display:inline-block;font-weight:bold;background:#c1041c;color:#fff}
-#content #add .header,#content #add .footer{padding:20px 30px}
-#content #add .header{-webkit-box-shadow:0 1px 2px rgba(221,225,237,0.5);box-shadow:0 1px 2px rgba(221,225,237,0.5);margin-bottom:2px;border-bottom:1px solid #dde1ed;}
-#content #add .header a{font-family:'MuseoSlab500Regular',serif}
-#content #add .footer{background:#f9fafb;color:#aaafbf;-webkit-box-shadow:inset 0 1px 2px rgba(221,225,237,0.2);box-shadow:inset 0 1px 2px rgba(221,225,237,0.2);border-top:1px solid #dde1ed;text-align:center;font-family:'MuseoSlab500Regular',serif;}
-#content #add .footer .icon{display:inline-block;color:#aaafbf}
 #content #repos{border:1px solid #cdcecf;-webkit-border-radius:2px;border-radius:2px;}
 #content #repos h2{color:#3e4457;display:inline-block}
 #content #repos .sort{float:right;line-height:30px}

public/css/app.css

@@ -30,7 +30,7 @@
 100%{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-o-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg)}
 }
 body{color:#3e4457;font-family:'MuseoSans500Regular',sans-serif}
-a{text-decoration:none;color:#aaafbf}
+a{text-decoration:none;color:#aaafbf;cursor:pointer}
 h1,h2,h3,p{margin:0}
 ul{list-style-type:none;margin:0;padding:0;}
 ul li{display:inline-block}
@@ -64,20 +64,14 @@ ul li{display:inline-block}
 #content #hero .content .cta a{font-family:'MuseoSlab500Regular',serif;padding:11px 20px;-webkit-border-radius:2px;border-radius:2px;display:inline-block;margin:0 4px;}
 #content #hero .content .cta a.primary{font-weight:bold;background:#c1041c;color:#fff}
 #content #hero .content .cta a.secondary{background:#fff;color:#c1041c}
-#content #add{border:1px solid #cdcecf;-webkit-border-radius:2px;border-radius:2px;background:#fff;width:400px;}
 #content #add h2{color:#3e4457}
 #content #add p{font-family:'MuseoSlab500Regular',serif;color:#b1b6c4;margin-top:10px;line-height:20px;text-align:justify;text-justify:inter-word;}
 #content #add p a{color:#3e4457}
-#content #add .form{padding:20px;}
+#content #add .form{margin-top:20px;}
 #content #add .form table{width:100%;}
 #content #add .form table tr td:first-child{width:100%}
 #content #add .form input{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;padding:10px;width:100%;-webkit-border-radius:2px 0 0 2px;border-radius:2px 0 0 2px;border:1px solid #dde1ed;border-right:0;-webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,0.2);box-shadow:inset 0 1px 2px rgba(0,0,0,0.2)}
 #content #add .form a{margin-left:-2px;font-family:'MuseoSlab500Regular',serif;padding:11px 20px;-webkit-border-radius:0 2px 2px 0;border-radius:0 2px 2px 0;display:inline-block;font-weight:bold;background:#c1041c;color:#fff}
-#content #add .header,#content #add .footer{padding:20px 30px}
-#content #add .header{-webkit-box-shadow:0 1px 2px rgba(221,225,237,0.5);box-shadow:0 1px 2px rgba(221,225,237,0.5);margin-bottom:2px;border-bottom:1px solid #dde1ed;}
-#content #add .header a{font-family:'MuseoSlab500Regular',serif}
-#content #add .footer{background:#f9fafb;color:#aaafbf;-webkit-box-shadow:inset 0 1px 2px rgba(221,225,237,0.2);box-shadow:inset 0 1px 2px rgba(221,225,237,0.2);border-top:1px solid #dde1ed;text-align:center;font-family:'MuseoSlab500Regular',serif;}
-#content #add .footer .icon{display:inline-block;color:#aaafbf}
 #content #repos{border:1px solid #cdcecf;-webkit-border-radius:2px;border-radius:2px;}
 #content #repos h2{color:#3e4457;display:inline-block}
 #content #repos .sort{float:right;line-height:30px}

public/js/app.bundle.js

@@ -21536,9 +21536,22 @@ goog.exportProperty(FirebaseSimpleLogin,"onOpen",FirebaseSimpleLogin.onOpen);Fir
       module.exports = Ractive.extend({
         'template': require('../templates/addProjectForm'),
         'data': {
-          'user': user
+          'user': user,
+          'value': null
         },
-        'adapt': [Ractive.adaptors.Ractive]
+        'adapt': [Ractive.adaptors.Ractive],
+        init: function() {
+          var autocomplete;
+          autocomplete = function(value) {
+            return console.log('Autocomplete', value);
+          };
+          this.observe('value', _.debounce(autocomplete, 200), {
+            'init': false
+          });
+          return this.on('submit', function() {
+            return console.log('Submit the form with', this.get('value'));
+          });
+        }
       });
       
     });
@@ -21679,13 +21692,13 @@ goog.exportProperty(FirebaseSimpleLogin,"onOpen",FirebaseSimpleLogin.onOpen);Fir
     // addProjectForm.mustache
     root.require.register('burnchart/src/templates/addProjectForm.js', function(exports, require, module) {
     
-      module.exports = ["<div id=\"add\">","    <div class=\"header\">","        <h2>Add a Project</h2>","        <p>Type in the name of the repository as you would normally. If you'd like to add a private GitHub project, <a href=\"#\">Sign In</a> first.</p>","    </div>","","    <div class=\"form\">","        <table>","            <tr>","                <td>","                    <input type=\"text\" placeholder=\"user/repo\" autocomplete=\"off\">","                </td>","                <td>","                    <a href=\"#\">Add</a>","                </td>","            </tr>","        </table>","    </div>","","    <div class=\"footer\">","        <span class=\"icon spin6\"></span> Connecting to your repo.","    </div>","</div>"].join("\n");
+      module.exports = ["<div id=\"add\">","    <div class=\"header\">","        <h2>Add a Project</h2>","        <p>Type in the name of the repository as you would normally. If you'd like to add a private GitHub project, <a href=\"#\">Sign In</a> first.</p>","    </div>","","    <div class=\"form\">","        <table>","            <tr>","                <td>","                    <input type=\"text\" placeholder=\"user/repo\" autocomplete=\"off\" value=\"{{value}}\">","                </td>","                <td>","                    <a on-click=\"submit\">Add</a>","                </td>","            </tr>","        </table>","    </div>","</div>"].join("\n");
     });
 
     // header.mustache
     root.require.register('burnchart/src/templates/header.js', function(exports, require, module) {
     
-      module.exports = ["<div id=\"head\">","    <div class=\"right\">","        {{#user.displayName}}","            {{user.displayName}} logged in","        {{else}}","            <a href=\"#\" class=\"github\" on-click=\"!login\"><span class=\"icon github\"></span> Sign In</a>","        {{/user.displayName}}","    </div>","","    <h1><span class=\"icon fire-station\"></span></h1>","","    <div class=\"q\">","        <span class=\"icon search\"></span>","        <span class=\"icon down-open\"></span>","        <input type=\"text\" placeholder=\"Jump to...\">","    </div>","","    <ul>","        <li><a href=\"#project/add\" class=\"add\"><span class=\"icon plus-circled\"></span> Add a Project</a></li>","        <li><a href=\"#\" class=\"faq\">FAQ</a></li>","    </ul>","</div>"].join("\n");
+      module.exports = ["<div id=\"head\">","    <div class=\"right\">","        {{#user.displayName}}","            {{user.displayName}} logged in","        {{else}}","            <a class=\"github\" on-click=\"!login\"><span class=\"icon github\"></span> Sign In</a>","        {{/user.displayName}}","    </div>","","    <h1><span class=\"icon fire-station\"></span></h1>","","    <div class=\"q\">","        <span class=\"icon search\"></span>","        <span class=\"icon down-open\"></span>","        <input type=\"text\" placeholder=\"Jump to...\">","    </div>","","    <ul>","        <li><a href=\"#project/add\" class=\"add\"><span class=\"icon plus-circled\"></span> Add a Project</a></li>","        <li><a href=\"#\" class=\"faq\">FAQ</a></li>","    </ul>","</div>"].join("\n");
     });
 
     // layout.mustache

public/js/app.js

@@ -57,9 +57,22 @@
       module.exports = Ractive.extend({
         'template': require('../templates/addProjectForm'),
         'data': {
-          'user': user
+          'user': user,
+          'value': null
         },
-        'adapt': [Ractive.adaptors.Ractive]
+        'adapt': [Ractive.adaptors.Ractive],
+        init: function() {
+          var autocomplete;
+          autocomplete = function(value) {
+            return console.log('Autocomplete', value);
+          };
+          this.observe('value', _.debounce(autocomplete, 200), {
+            'init': false
+          });
+          return this.on('submit', function() {
+            return console.log('Submit the form with', this.get('value'));
+          });
+        }
       });
       
     });
@@ -200,13 +213,13 @@
     // addProjectForm.mustache
     root.require.register('burnchart/src/templates/addProjectForm.js', function(exports, require, module) {
     
-      module.exports = ["<div id=\"add\">","    <div class=\"header\">","        <h2>Add a Project</h2>","        <p>Type in the name of the repository as you would normally. If you'd like to add a private GitHub project, <a href=\"#\">Sign In</a> first.</p>","    </div>","","    <div class=\"form\">","        <table>","            <tr>","                <td>","                    <input type=\"text\" placeholder=\"user/repo\" autocomplete=\"off\">","                </td>","                <td>","                    <a href=\"#\">Add</a>","                </td>","            </tr>","        </table>","    </div>","","    <div class=\"footer\">","        <span class=\"icon spin6\"></span> Connecting to your repo.","    </div>","</div>"].join("\n");
+      module.exports = ["<div id=\"add\">","    <div class=\"header\">","        <h2>Add a Project</h2>","        <p>Type in the name of the repository as you would normally. If you'd like to add a private GitHub project, <a href=\"#\">Sign In</a> first.</p>","    </div>","","    <div class=\"form\">","        <table>","            <tr>","                <td>","                    <input type=\"text\" placeholder=\"user/repo\" autocomplete=\"off\" value=\"{{value}}\">","                </td>","                <td>","                    <a on-click=\"submit\">Add</a>","                </td>","            </tr>","        </table>","    </div>","</div>"].join("\n");
     });
 
     // header.mustache
     root.require.register('burnchart/src/templates/header.js', function(exports, require, module) {
     
-      module.exports = ["<div id=\"head\">","    <div class=\"right\">","        {{#user.displayName}}","            {{user.displayName}} logged in","        {{else}}","            <a href=\"#\" class=\"github\" on-click=\"!login\"><span class=\"icon github\"></span> Sign In</a>","        {{/user.displayName}}","    </div>","","    <h1><span class=\"icon fire-station\"></span></h1>","","    <div class=\"q\">","        <span class=\"icon search\"></span>","        <span class=\"icon down-open\"></span>","        <input type=\"text\" placeholder=\"Jump to...\">","    </div>","","    <ul>","        <li><a href=\"#project/add\" class=\"add\"><span class=\"icon plus-circled\"></span> Add a Project</a></li>","        <li><a href=\"#\" class=\"faq\">FAQ</a></li>","    </ul>","</div>"].join("\n");
+      module.exports = ["<div id=\"head\">","    <div class=\"right\">","        {{#user.displayName}}","            {{user.displayName}} logged in","        {{else}}","            <a class=\"github\" on-click=\"!login\"><span class=\"icon github\"></span> Sign In</a>","        {{/user.displayName}}","    </div>","","    <h1><span class=\"icon fire-station\"></span></h1>","","    <div class=\"q\">","        <span class=\"icon search\"></span>","        <span class=\"icon down-open\"></span>","        <input type=\"text\" placeholder=\"Jump to...\">","    </div>","","    <ul>","        <li><a href=\"#project/add\" class=\"add\"><span class=\"icon plus-circled\"></span> Add a Project</a></li>","        <li><a href=\"#\" class=\"faq\">FAQ</a></li>","    </ul>","</div>"].join("\n");
     });
 
     // layout.mustache

src/components/addProjectForm.coffee

@@ -8,5 +8,15 @@ module.exports = Ractive.extend
 
     'data':
         'user': user
+        'value': null
 
-    'adapt': [ Ractive.adaptors.Ractive ]
+    'adapt': [ Ractive.adaptors.Ractive ]
+
+    init: ->
+        autocomplete = (value) ->
+            console.log 'Autocomplete', value
+
+        @observe 'value', _.debounce(autocomplete, 200), { 'init': no }
+
+        @on 'submit', ->
+            console.log 'Submit the form with', @get('value')

src/styles/app.styl

@@ -13,6 +13,7 @@ body
 a
     text-decoration: none
     color: #AAAFBF
+    cursor: pointer
 
 h1, h2, h3, p
     margin: 0
@@ -173,11 +174,6 @@ ul
                         color: $strong_color
 
     #add
-        border: 1px solid #CDCECF
-        border-radius: 2px
-        background: #FFF
-        width: 400px
-
         h2
             color: #3E4457
 
@@ -193,8 +189,8 @@ ul
                 color: #3E4457
 
         .form
-            padding: 20px
+            margin-top: 20px
-
+            
             table
                 width: 100%
 
@@ -222,29 +218,6 @@ ul
                 background: $strong_color
                 color: #FFF
 
-        .header, .footer
-            padding: 20px 30px
-
-        .header
-            box-shadow: 0 1px 2px rgba(#DDE1ED, 50%)
-            margin-bottom: 2px
-            border-bottom: 1px solid #DDE1ED
-
-            a
-                font-family: $serif_font
-
-        .footer
-            background: #F9FAFB
-            color: #AAAFBF
-            box-shadow: inset 0 1px 2px rgba(#DDE1ED, 20%)
-            border-top: 1px solid #DDE1ED
-            text-align: center
-            font-family: $serif_font
-
-            .icon
-                display: inline-block
-                color: #AAAFBF
-
     #repos
         border: 1px solid #CDCECF
         border-radius: 2px

src/templates/addProjectForm.mustache

@@ -8,16 +8,12 @@
         <table>
             <tr>
                 <td>
-                    <input type="text" placeholder="user/repo" autocomplete="off">
+                    <input type="text" placeholder="user/repo" autocomplete="off" value="{{value}}">
                 </td>
                 <td>
-                    <a href="#">Add</a>
+                    <a on-click="submit">Add</a>
                 </td>
             </tr>
         </table>
     </div>
-
-    <div class="footer">
-        <span class="icon spin6"></span> Connecting to your repo.
-    </div>
 </div>

src/templates/header.mustache

@@ -3,7 +3,7 @@
         {{#user.displayName}}
             {{user.displayName}} logged in
         {{else}}
-            <a href="#" class="github" on-click="!login"><span class="icon github"></span> Sign In</a>
+            <a class="github" on-click="!login"><span class="icon github"></span> Sign In</a>
         {{/user.displayName}}
     </div>