Refactor our layout handling

Layout handling in travis-web was implemented in a dynamic way, so we
could change a main layout from any of the routes. This needed a
`rerender` call which was making things harder and needed some hacks. It
also broke a few transitions when upgrading to 1.8.1.

After examining our usage of layouts I've noticed that we don't need to
change the entire layout dynamically and instead we can set layout on
root routes (like "index", "profile" and other root routes).

assets/scripts/app/controllers.coffee

@@ -25,14 +25,6 @@ Travis.TopController = Em.Controller.extend
     Travis.get('authState') == 'signing-in'
   ).property('Travis.authState')
 
-Travis.ApplicationController = Em.Controller.extend
-  templateName: 'layouts/home'
-
-  connectLayout: (name) ->
-    name = "layouts/#{name}"
-    if @get('templateName') != name
-      @set('templateName', name)
-
 Travis.MainController = Em.Controller.extend()
 Travis.StatsLayoutController = Em.Controller.extend()
 Travis.ProfileLayoutController = Em.Controller.extend()

assets/scripts/app/controllers/repos.coffee

@@ -1,6 +1,11 @@
 require 'travis/limited_array'
 
 Travis.ReposController = Ember.ArrayController.extend
+  actions:
+    activate: (name) ->
+      @transitionToRoot()
+      @activate(name)
+
   defaultTab: ( ->
     if @get('currentUser.id')
       'owned'

assets/scripts/app/routes.coffee

@@ -74,8 +74,9 @@ Travis.Router.map ->
   @route 'auth', path: '/auth'
 
   @resource 'profile', path: '/profile', ->
-    @resource 'account', path: '/:login'
-    @route 'info', path: '/info'
+    @resource 'accounts', path: '/', ->
+      @resource 'account', path: '/:login'
+      @route 'info', path: '/info'
 
   @route 'notFound', path: "/*path"
 
@@ -130,7 +131,6 @@ Travis.SimpleLayoutRoute = Travis.Route.extend
   setupController: ->
     $('body').attr('id', 'home')
     @container.lookup('controller:repos').activate()
-    @container.lookup('controller:application').connectLayout 'simple'
     @_super.apply(this, arguments)
 
   renderTemplate: ->
@@ -295,11 +295,12 @@ Travis.IndexRoute = Travis.Route.extend
   renderTemplate: ->
     $('body').attr('id', 'home')
 
-    @render 'repos',   outlet: 'left'
+    @_super.apply this, arguments
+
+    @render 'repos',   outlet: 'left', into: 'index'
 
   setupController: (controller)->
     @container.lookup('controller:repos').activate()
-    @container.lookup('controller:application').connectLayout 'home'
 
 Travis.StatsRoute = Travis.Route.extend
   renderTemplate: ->
@@ -307,42 +308,39 @@ Travis.StatsRoute = Travis.Route.extend
 
     @render 'stats'
 
-  setupController: ->
-    @container.lookup('controller:application').connectLayout('simple')
-
 Travis.NotFoundRoute = Travis.Route.extend
   renderTemplate: ->
     $('body').attr('id', 'not-found')
 
     @render 'not_found'
 
-  setupController: ->
-    @container.lookup('controller:application').connectLayout('simple')
-
 Travis.ProfileRoute = Travis.Route.extend
   needsAuth: true
 
   setupController: (controller, model) ->
-    @container.lookup('controller:application').connectLayout('profile')
     @controllerFor('accounts').set('model', model)
 
+  renderTemplate: ->
+    $('body').attr('id', 'profile')
+    @_super.apply(this, arguments)
+    @render 'loading', outlet: 'left', into: 'profile'
+
+Travis.AccountsRoute = Travis.Route.extend
   model: ->
     Travis.Account.fetch(all: true)
 
   renderTemplate: ->
-    $('body').attr('id', 'profile')
-    @render 'accounts', outlet: 'left'
-
     @_super.apply(this, arguments)
+    @render 'profile_accounts', outlet: 'left', into: 'profile'
 
-Travis.ProfileIndexRoute = Travis.Route.extend
+Travis.AccountsIndexRoute = Travis.Route.extend
   redirect: ->
     # TODO: setting accounts model in ProfileRoute is wrong, but
     #       at this stage it's better than what we had before
-    accounts = @modelFor('profile')
+    accounts = @modelFor('accounts')
     login    = @controllerFor('currentUser').get('login')
     account  = accounts.find (account) -> account.get('login') == login
-    @transitionTo 'account', account
+    @replaceWith 'account', account
 
 Travis.AccountRoute = Travis.Route.extend
   setupController: (controller, account) ->
@@ -351,7 +349,7 @@ Travis.AccountRoute = Travis.Route.extend
     @controllerFor('profile').activate 'hooks'
 
   model: (params) ->
-    @modelFor('profile').find (account) -> account.get('login') == params.login
+    @modelFor('accounts').find (account) -> account.get('login') == params.login
 
   serialize: (account) ->
     if account && account.get
@@ -372,9 +370,6 @@ Travis.AuthRoute = Travis.Route.extend
 
     @render 'auth.signin'
 
-  setupController: ->
-    @container.lookup('controller:application').connectLayout('simple')
-
   deactivate: ->
     @controllerFor('auth').set('redirected', false)
 

assets/scripts/app/templates/accounts.hbs

@@ -0,0 +1 @@
+{{outlet}}

assets/scripts/app/templates/application.hbs

@@ -0,0 +1 @@
+{{outlet}}

assets/scripts/app/templates/index.hbs

@@ -0,0 +1 @@
+{{outlet}}

assets/scripts/app/templates/layouts/home.hbs

@@ -8,5 +8,5 @@
 
 <div id="main">
   {{render "flash"}}
-  {{outlet}}
+  {{yield}}
 </div>

assets/scripts/app/templates/layouts/profile.hbs

@@ -8,7 +8,7 @@
 
 <div id="main">
   {{render "flash"}}
-  {{outlet main}}
+  {{yield}}
 </div>
 
 <div id="right">

assets/scripts/app/templates/layouts/simple.hbs

@@ -4,5 +4,5 @@
 
 <div id="main">
   {{render "flash"}}
-  {{outlet main}}
+  {{yield}}
 </div>

assets/scripts/app/templates/layouts/top.hbs

@@ -45,9 +45,6 @@
       {{/if}}
     </p>
     <ul>
-      <li>
-        {{#link-to "profile.index" class="signed-in"}}Accounts{{/link-to}}
-      </li>
       <li>
         <a href="/" {{action "signOut" target="auth"}}>Sign Out</a>
       </li>

assets/scripts/app/templates/no_owned_repos.hbs

@@ -11,7 +11,7 @@
     <div class="column-right">
       <span class="steps">Step 1: &nbsp; Enabling your projects</span>
       <p>
-        Start by going to your {{#link-to "profile.index"}}profile{{/link-to}} and enable one of your projects. We've been
+        Start by going to your {{#link-to "profile"}}profile{{/link-to}} and enable one of your projects. We've been
         synchronizing all repositories you have administrative access to. Pick one and flip the switch next to it.
       </p>
     </div>

assets/scripts/app/templates/profile.hbs

@@ -0,0 +1 @@
+{{outlet}}

assets/scripts/app/templates/profile/loading.hbs

@@ -0,0 +1 @@
+<div class="loading"><span>Loading</span></div>

assets/scripts/app/templates/profile/tabs.hbs

@@ -7,7 +7,7 @@
   {{#if view.displayUser}}
     <li id="tab_user" {{bind-attr class="view.classUser"}}>
       <h5>
-        {{#link-to "profile.info"}}Profile{{/link-to}}
+        {{#link-to "accounts.info"}}Profile{{/link-to}}
       </h5>
     </li>
   {{/if}}

assets/scripts/app/templates/repos/list/tabs.hbs

@@ -1,17 +1,17 @@
 <ul class="tabs">
   <li id="tab_owned" {{bind-attr class="view.classOwned"}}>
-    <h5><a {{action "activate" "owned" target="view"}}>My Repositories</a></h5>
+    <h5><a {{action "activate" "owned"}}>My Repositories</a></h5>
   </li>
 
   <li id="tab_recent" {{bind-attr class="view.classRecent"}}>
-    <h5><a {{action "activate" "recent" target="view"}}>Recent</a></h5>
+    <h5><a {{action "activate" "recent"}}>Recent</a></h5>
   </li>
 
   <li id="tab_search" {{bind-attr class="view.classSearch"}}>
-    <h5><a {{action "activate" "search" target="view"}}>Search</a></h5>
+    <h5><a {{action "activate" "search"}}>Search</a></h5>
   </li>
 
   <li id="tab_new" {{bind-attr class="view.classNew"}}>
-    <h5>{{#link-to "profile.index" trackEvent="add-repository-from-list" title="Add New Repository"}}+{{/link-to}}</h5>
+    <h5>{{#link-to "profile" trackEvent="add-repository-from-list" title="Add New Repository"}}+{{/link-to}}</h5>
   </li>
 </ul>

assets/scripts/app/views.coffee

@@ -21,10 +21,20 @@ Em.View.reopen
 
       $('.popup').removeClass('display')
 
+Travis.IndexView = Travis.View.extend
+  layoutName: 'layouts/home'
+  classNames: ['application']
+
 Travis.GettingStartedView = Travis.View.extend
   templateName: 'no_owned_repos'
 
+Travis.InsufficientOauthPermissionsView = Travis.View.extend
+  layoutName: 'layouts/simple'
+  classNames: ['application']
+
 Travis.FirstSyncView = Travis.View.extend
+  layoutName: 'layouts/simple'
+  classNames: ['application']
   didInsertElement: ->
     this.addObserver('controller.isSyncing', this, this.isSyncingDidChange)
 

assets/scripts/app/views/accounts.coffee

@@ -1,5 +1,5 @@
 @Travis.reopen
-  AccountsView: Travis.View.extend
+  ProfileAccountsView: Travis.View.extend
     tabBinding: 'controller.tab'
     templateName: 'profile/accounts'
     classAccounts: (->

assets/scripts/app/views/application.coffee

@@ -1,12 +1,5 @@
 Travis.reopen
   ApplicationView: Travis.View.extend
-    templateName: Ember.computed.alias('controller.templateName')
-    classNames: ['application']
-
-    templateNameDidChange: (->
-      @rerender()
-    ).observes('templateName')
-
     click: (event) ->
       # TODO: this solves the case of closing menus and popups,
       #       but I would like to rewrite it later, not sure how

assets/scripts/app/views/profile.coffee

@@ -1,6 +1,8 @@
 Travis.reopen
   ProfileView: Travis.View.extend
     templateName: 'profile/show'
+    layoutName: 'layouts/profile'
+    classNames: ['application']
     accountBinding: 'controller.account'
 
     name: (->

assets/scripts/app/views/repo/list.coffee

@@ -29,10 +29,6 @@
     tabBinding: 'controller.tab'
     currentUserBinding: 'controller.currentUser.id'
 
-    activate: (name) ->
-      @get('controller').transitionToRoot()
-      @get('controller').activate(name)
-
     classRecent: (->
       'active' if @get('tab') == 'recent'
     ).property('tab')

assets/styles/app/loading.sass

@@ -17,3 +17,5 @@ span.loading, span.saving
   color: $color-text-lighter
   background: inline-image('ui/spinner.svg') no-repeat right 4px
 
+#profile #left .loading
+  padding-top: 30px