user login state fades into view when known

Gruntfile.coffee

@@ -32,6 +32,7 @@ module.exports = (grunt) ->
                     # Vendor dependencies.
                     'vendor/lodash/dist/lodash.js'
                     'vendor/ractive/ractive.js'
+                    'vendor/ractive-transitions-fade/ractive-transitions-fade.js'
                     'vendor/ractive-adaptor/adaptor.js'
                     'vendor/firebase/firebase.js'
                     'vendor/firebase-simple-login/firebase-simple-login.js'

TODO.md

@@ -2,15 +2,9 @@
 
 ##Release: MVP
 
-- [x] upgrade to Ractive [0.6.0](https://github.com/ractivejs/ractive/blob/dev/CHANGELOG.md)
 - [ ] create a 500/400/loading system messages
-- [ ] slide top menu on page load too
 - [ ] deal with Firebase timing out, are we still logged-in?
-- [ ] on system-wide notifications show a button that takes us to the index unless we are on index
 - [ ] mediator `!app/notify/edit` will edit the current notification
-- [ ] slide topbar up a bit on hover so that the user can click the menu
-- [ ] landing/index page needs to show (hero box) immediately
-- [ ] logged-in state slides into view independent of page loading
 - [ ] 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
@@ -33,6 +27,8 @@
 - [ ] trigger success topbar when we have completed a milestone on chart page; show plain when we are behind
 - [ ] on chart page show a little progress bar in the title
 - [ ] use tap plugin for Ractive
+- [x] logged-in state fade into view independent of page loading
+- [x] upgrade to Ractive [0.6.0](https://github.com/ractivejs/ractive/blob/dev/CHANGELOG.md)
 
 ##Future Releases
 

bower.json

@@ -16,6 +16,7 @@
     "d3": "~3.4.11",
     "d3-tip": "~0.6.5",
     "marked": "~0.3.2",
-    "director": "~1.2.2"
+    "director": "~1.2.2",
+    "ractive-transitions-fade": "~0.1.2"
   }
 }

public/js/app.bundle.js

@@ -21148,6 +21148,107 @@
 	};
 
 }( typeof window !== 'undefined' ? window : this ) );
+;/*
+
+	ractive-transitions-fade
+	========================
+
+	Version 0.1.2.
+
+	This plugin does exactly what it says on the tin - it fades elements
+	in and out, using CSS transitions. You can control the following
+	properties: `duration`, `delay` and `easing` (which must be a valid
+	CSS transition timing function, and defaults to `linear`).
+
+	The `duration` property is in milliseconds, and defaults to 300 (you
+	can also use `fast` or `slow` instead of a millisecond value, which
+	equate to 200 and 600 respectively). As a shorthand, you can use
+	`intro='fade:500'` instead of `intro='fade:{"duration":500}'` - this
+	applies to many other transition plugins as well.
+
+	If an element has an opacity other than 1 (whether directly, because
+	of an inline style, or indirectly because of a CSS rule), it will be
+	respected. You can override the target opacity of an intro fade by
+	specifying a `to` property between 0 and 1.
+
+	==========================
+
+	Troubleshooting: If you're using a module system in your app (AMD or
+	something more nodey) then you may need to change the paths below,
+	where it says `require( 'Ractive' )` or `define([ 'Ractive' ]...)`.
+
+	==========================
+
+	Usage: Include this file on your page below Ractive, e.g:
+
+	    <script src='lib/ractive.js'></script>
+	    <script src='lib/ractive-transitions-fade.js'></script>
+
+	Or, if you're using a module loader, require this module:
+
+	    // requiring the plugin will 'activate' it - no need to use
+	    // the return value
+	    require( 'ractive-transitions-fade' );
+
+	Add a fade transition like so:
+
+	    <div intro='fade'>this will fade in</div>
+
+*/
+
+(function ( global, factory ) {
+
+	'use strict';
+
+	// Common JS (i.e. browserify) environment
+	if ( typeof module !== 'undefined' && module.exports && typeof require === 'function' ) {
+		factory( require( 'ractive' ) );
+	}
+
+	// AMD?
+	else if ( typeof define === 'function' && define.amd ) {
+		define([ 'ractive' ], factory );
+	}
+
+	// browser global
+	else if ( global.Ractive ) {
+		factory( global.Ractive );
+	}
+
+	else {
+		throw new Error( 'Could not find Ractive! It must be loaded before the ractive-transitions-fade plugin' );
+	}
+
+}( typeof window !== 'undefined' ? window : this, function ( Ractive ) {
+
+	'use strict';
+
+	var fade, defaults;
+
+	defaults = {
+		delay: 0,
+		duration: 300,
+		easing: 'linear'
+	};
+
+	fade = function ( t, params ) {
+		var targetOpacity;
+
+		params = t.processParams( params, defaults );
+
+		if ( t.isIntro ) {
+			targetOpacity = t.getStyle( 'opacity' );
+			t.setStyle( 'opacity', 0 );
+		} else {
+			targetOpacity = 0;
+		}
+
+		t.animateStyle( 'opacity', targetOpacity, params ).then( t.complete );
+	};
+
+	Ractive.transitions.fade = fade;
+
+}));
 ;// Ractive adaptor plugin
 // =======================
 //
@@ -41197,6 +41298,7 @@ Router.prototype.mount = function(routes, path) {
           var _this = this;
           this.client = new Firebase("https://" + (config.get('firebase')) + ".firebaseio.com");
           this.auth = new FirebaseSimpleLogin(this.client, function(err, obj) {
+            user.set('loaded', true);
             if (err || !obj) {
               return _this.authCb(err);
             }
@@ -41622,7 +41724,7 @@ Router.prototype.mount = function(routes, path) {
     // 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 class=\"github\" on-click=\"!login\"><Icons icon=\"github\"/> Sign In</a>","    {{/user.displayName}}","  </div>","","  <a id=\"icon\" href=\"#\">","    <Icons icon=\"{{icon}}\"/>","  </a>","","  <div class=\"q\">","    <Icons icon=\"search\"/>","    <Icons icon=\"down-open\"/>","    <input type=\"text\" placeholder=\"Jump to...\">","  </div>","","  <ul>","    <li><a href=\"#new/project\" class=\"add\"><Icons icon=\"plus-circled\"/> Add a Project</a></li>","    <li><a href=\"#\" class=\"faq\">FAQ</a></li>","    <li><a href=\"#reset\">DB Reset</a></li>","    <li><a href=\"#notify\">Notify</a></li>","  </ul>","</div>"].join("\n");
+      module.exports = ["<div id=\"head\">","  {{#with user}}","    {{#loaded}}","      <div class=\"right\" intro=\"fade\">","        {{#displayName}}","          {{displayName}} logged in","        {{else}}","          <a class=\"github\" on-click=\"!login\"><Icons icon=\"github\"/> Sign In</a>","        {{/displayName}}","      </div>","    {{/loaded}}","  {{/with}}","","  <a id=\"icon\" href=\"#\">","    <Icons icon=\"{{icon}}\"/>","  </a>","","  <div class=\"q\">","    <Icons icon=\"search\"/>","    <Icons icon=\"down-open\"/>","    <input type=\"text\" placeholder=\"Jump to...\">","  </div>","","  <ul>","    <li><a href=\"#new/project\" class=\"add\"><Icons icon=\"plus-circled\"/> Add a Project</a></li>","    <li><a href=\"#\" class=\"faq\">FAQ</a></li>","    <li><a href=\"#reset\">DB Reset</a></li>","    <li><a href=\"#notify\">Notify</a></li>","  </ul>","</div>"].join("\n");
     });
 
     // hero.mustache

public/js/app.js

@@ -389,6 +389,7 @@
           var _this = this;
           this.client = new Firebase("https://" + (config.get('firebase')) + ".firebaseio.com");
           this.auth = new FirebaseSimpleLogin(this.client, function(err, obj) {
+            user.set('loaded', true);
             if (err || !obj) {
               return _this.authCb(err);
             }
@@ -814,7 +815,7 @@
     // 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 class=\"github\" on-click=\"!login\"><Icons icon=\"github\"/> Sign In</a>","    {{/user.displayName}}","  </div>","","  <a id=\"icon\" href=\"#\">","    <Icons icon=\"{{icon}}\"/>","  </a>","","  <div class=\"q\">","    <Icons icon=\"search\"/>","    <Icons icon=\"down-open\"/>","    <input type=\"text\" placeholder=\"Jump to...\">","  </div>","","  <ul>","    <li><a href=\"#new/project\" class=\"add\"><Icons icon=\"plus-circled\"/> Add a Project</a></li>","    <li><a href=\"#\" class=\"faq\">FAQ</a></li>","    <li><a href=\"#reset\">DB Reset</a></li>","    <li><a href=\"#notify\">Notify</a></li>","  </ul>","</div>"].join("\n");
+      module.exports = ["<div id=\"head\">","  {{#with user}}","    {{#loaded}}","      <div class=\"right\" intro=\"fade\">","        {{#displayName}}","          {{displayName}} logged in","        {{else}}","          <a class=\"github\" on-click=\"!login\"><Icons icon=\"github\"/> Sign In</a>","        {{/displayName}}","      </div>","    {{/loaded}}","  {{/with}}","","  <a id=\"icon\" href=\"#\">","    <Icons icon=\"{{icon}}\"/>","  </a>","","  <div class=\"q\">","    <Icons icon=\"search\"/>","    <Icons icon=\"down-open\"/>","    <input type=\"text\" placeholder=\"Jump to...\">","  </div>","","  <ul>","    <li><a href=\"#new/project\" class=\"add\"><Icons icon=\"plus-circled\"/> Add a Project</a></li>","    <li><a href=\"#\" class=\"faq\">FAQ</a></li>","    <li><a href=\"#reset\">DB Reset</a></li>","    <li><a href=\"#notify\">Notify</a></li>","  </ul>","</div>"].join("\n");
     });
 
     // hero.mustache

src/modules/firebase.coffee

@@ -10,6 +10,8 @@ class Class
     
     # Check if we have a user in session.
     @auth = new FirebaseSimpleLogin @client, (err, obj) =>
+      user.set 'loaded', yes
+
       return @authCb err if err or not obj
 
       # Save user.

src/templates/header.mustache

@@ -1,11 +1,15 @@
 <div id="head">
-  <div class="right">
-    {{#user.displayName}}
-      {{user.displayName}} logged in
+  {{#with user}}
+    {{#loaded}}
+      <div class="right" intro="fade">
+        {{#displayName}}
+          {{displayName}} logged in
         {{else}}
           <a class="github" on-click="!login"><Icons icon="github"/> Sign In</a>
-    {{/user.displayName}}
+        {{/displayName}}
       </div>
+    {{/loaded}}
+  {{/with}}
 
   <a id="icon" href="#">
     <Icons icon="{{icon}}"/>