Add user greeting when app has gained focus

admin/controllers/index.coffee

@@ -28,9 +28,24 @@ class App extends Spine.Controller
     @append @mainNav
     @initApp()
 
+  initApp: =>
+    @setupSession()
+
+    @mainStack = new MainStack
+    @helpUI    = new HelpUI
+    Spine.Route.setup()
+    @navigate('/')
+
+    @hookPanelsToNav()
+    @doOtherStuff()
+
   setupSession: ->
     session.on 'change', @checkRole
-    
+    $(window).on 'focus', @getSessionInfo
+    # @mainNav.bind 'beforeChange', @getSessionInfo
+    @getSessionInfo()
+
+  getSessionInfo: =>
     session.info (err, info) =>
       @checkRole info.userCtx
 
@@ -39,22 +54,12 @@ class App extends Spine.Controller
       @mainNav.hideLogin()
       @startApp() unless @appStarted
       @loadData() unless @dataLoaded
+      @mainNav.greetUser(userCtx.name)
     else
       @mainNav.showLogin()
       @unloadData() if @dataLoaded
       @endApp() if @appStarted
 
-  initApp: =>
-    @setupSession()
-
-    @mainStack = new MainStack
-    @helpUI    = new HelpUI
-    Spine.Route.setup()
-    @navigate('/')
-
-    @hookPanelsToNav()
-    @doOtherStuff()
-
   startApp: =>
     @loadData() unless @dataLoaded
     unless @appStarted

admin/controllers/main-nav.coffee

@@ -12,6 +12,7 @@ class MainNav extends Spine.Controller
     'input[name=username]':   'formUsername'
     'input[name=password]':   'formPassword'
     'li a':                   'links'
+    '.user-greeting':         'userGreeting'
 
   events:
     'submit form.login':      'login'
@@ -38,9 +39,11 @@ class MainNav extends Spine.Controller
       @selectLink($link)
 
   selectLink: ($link) =>
+    @trigger 'beforeChange'
     if $link and not $link.hasClass('active')
       @links.removeClass('active')
       $link.addClass('active')
+      @trigger 'change'
 
   showLogin: =>
     @resetLoginForm()
@@ -77,5 +80,15 @@ class MainNav extends Spine.Controller
     @formPassword.val('')
     @formUsername.focus() if focus
 
+  greetUser: (name) =>
+    show = ->
+      @userGreeting
+        .html("Welcome back <strong>#{name}</strong>")
+        .addClass('show')
+    hide = ->
+      @userGreeting.removeClass('show')
+    @delay show, 1*1000
+    @delay hide, 10*1000
+
 
 module.exports = MainNav

admin/controllers/main-stack.coffee

@@ -45,6 +45,8 @@ class MainStack extends Spine.Stack
     @filterBox = new FilterBox
     @append @filterBox
 
+    # ..also see `hookPanelsToNav()` in index.coffee
+
 
 module.exports = MainStack
     

admin/static/css/theme.styl

@@ -159,7 +159,8 @@ span.label
       font-size: 1.2em
 
       ::-webkit-input-placeholder
-        color: rgba(255,255,255,0.7)
+        color: lighten($primaryColor, 1%)
+        font-weight: $normalFont
 
       &.button
         background: darken($primaryColor, 5%)
@@ -196,8 +197,8 @@ span.label
 
   &.show-login
     top: 30%
-    left: 30%
-    right: 30%
+    left: 26%
+    right: 26%
     bottom: auto
     width: initial
     padding: 0 10px
@@ -213,6 +214,26 @@ span.label
     > ul
       display: none
 
+  .user-greeting
+    position: absolute
+    top: 0
+    left: -($navbarWidth)
+    width: $navbarWidth
+    padding: 16px 18px
+    color: #fff
+    background: $primaryColor
+    transition(0.6s, left)
+    strong
+      display: block
+      font-size: 2.5em
+      border-bottom: 5px solid white
+      padding-bottom: 0.3em
+      letter-spacing: -0.07em
+      word-spacing: 0em
+      white-space: nowrap
+    &.show
+      left: 0
+
 .main.stack
   position: absolute
   top: 0