Merge branch 'sidebar-tabs'

Conflicts:
	assets/scripts/spec/support/conditions.coffee

assets/scripts/app/controllers/sidebar.coffee

@@ -1,5 +1,8 @@
 Travis.reopen
   SidebarController: Em.ArrayController.extend
+    needs: ['runningJobs']
+    jobsBinding: 'controllers.runningJobs'
+
     init: ->
       @_super.apply this, arguments
       @tickables = []

assets/scripts/app/templates/jobs/running.hbs

@@ -1,5 +1,3 @@
-<h4>Running Jobs ({{view.jobs.length}})</h4>
-
 <ul class="groups">
   {{#each group in view.groups}}
     {{view view.GroupView groupBinding="group"}}

assets/scripts/app/templates/jobs/running/group.hbs

@@ -5,9 +5,11 @@
 <ul class="jobs">
   {{#each job in sortedJobs}}
     <li class="job">
+      {{#if job.repoData.slug}}
         {{#linkTo "job" job.repoData job}}
           #{{job.number}}
         {{/linkTo}}
+      {{/if}}
     </li>
   {{/each}}
 </ul>

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

@@ -9,8 +9,19 @@
 </div>
 
 {{view view.DecksView}}
-{{view view.WorkersView}}
+
-{{view view.RunningJobsView}}
+<ul class="tabs">
+  <li id="tab_jobs" {{bindAttr class="view.classJobs"}}>
+    <h5><a href="#" {{action activate "jobs" target="view"}}>{{t layouts.application.running}} ({{jobs.length}})</a></h5>
+  </li>
+  <li id="tab_workers" {{bindAttr class="view.classWorkers"}}>
+    <h5><a href="#" {{action activate "workers" target="view"}}>{{t layouts.application.workers}}</a></h5>
+  </li>
+</ul>
+
+<div class="pane">
+  {{outlet pane}}
+</div>
 {{view view.QueuesView}}
 {{view view.LinksView}}
 

assets/scripts/app/templates/workers/list.hbs

@@ -1,8 +1,5 @@
 {{#view Travis.WorkersView}}
-  <h4>
-    {{t workers}}
   <a id="toggle-workers" {{action toggleWorkers target="view"}}></a>
-  </h4>
   <ul id="workers">
     {{#each group in controller.groups}}
       {{#view Travis.WorkersListView}}

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

@@ -64,10 +64,9 @@ Travis.reopen
     currentUserBinding: 'controller.currentUser'
 
     closeMenu: ->
-      console.log 'closeMenu'
       $('.menu').removeClass('display')
 
-    menu: ->
+    menu: (event) ->
       @popupCloseAll()
       $('#tools .menu').toggleClass('display')
       event.stopPropagation()

assets/scripts/app/views/sidebar.coffee

@@ -2,6 +2,28 @@
   SidebarView: Travis.View.extend
     templateName: 'layouts/sidebar'
 
+    didInsertElement: ->
+      @_super.apply this, arguments
+
+      @activate('jobs')
+
+    activate: (name) ->
+      return if @get('activeTab') == name
+      @set('activeTab', name)
+      @connectOutlet 'pane', @["#{name.capitalize()}View"].create(controller: @get('controller'))
+
+    classQueues: (->
+      'active' if @get('activeTab') == 'queues'
+    ).property('activeTab')
+
+    classWorkers: (->
+      'active' if @get('activeTab') == 'workers'
+    ).property('activeTab')
+
+    classJobs: (->
+      'active' if @get('activeTab') == 'jobs'
+    ).property('activeTab')
+
     DecksView: Em.View.extend
       templateName: "sponsors/decks"
       init: ->
@@ -26,7 +48,7 @@
         @_super.apply this, arguments
         @set 'controller', @get('controller').container.lookup('controller:queues')
 
-    RunningJobsView: Em.View.extend
+    JobsView: Em.View.extend
       templateName: 'jobs/running'
       elementId: 'running-jobs'
       init: ->

assets/scripts/spec/event_spec.coffee

@@ -121,6 +121,9 @@ describe 'events', ->
   describe 'an event adding a worker', ->
     beforeEach ->
       app ''
+      waitFor sidebarTabsRendered
+      runs ->
+        $('#right #tab_workers a').trigger('click')
         waitFor workersRendered
 
     it 'adds a worker to the workers list', ->
@@ -155,6 +158,9 @@ describe 'events', ->
   describe 'an event updating a worker', ->
     beforeEach ->
       app '/travis-ci/travis-core'
+      waitFor sidebarTabsRendered
+      runs ->
+        $('#right #tab_workers a').trigger('click')
         waitFor workersRendered
 
     it 'does not update repository if it\'s already in the store', ->

assets/scripts/spec/support/conditions.coffee

@@ -13,3 +13,5 @@
 @workersRendered = notEmpty('.worker')
 @logRendered     = notEmpty('#log p')
 @appRendered     = -> $('.ember-view.application').length
+
+@sidebarTabsRendered = notEmpty('#right #tab_workers a')

assets/styles/right.sass

@@ -11,6 +11,7 @@
 
   .box
     margin-top: 25px
+    margin-left: -3px
     padding: 15px
     border: 1px solid $color-border-normal
     background-color: $color-bg-sidebar-box
@@ -56,5 +57,6 @@
     white-space: nowrap
     text-overflow: ellipsis
     display: inline-block
+    display: -moz-inline-stack
   .group a
     cursor: pointer

assets/styles/right/lists.sass

@@ -1,12 +1,51 @@
 @import "_mixins/all"
 
 #right
-  #queues
+  .tabs
-    margin-top: 0
+    margin-top: 28px
+    height: 25px
+    border-bottom-color: $color-border-light
+
+    li
+      display: inline-block
+      height: 24px
+      margin-right: 5px
+      background-color: $color-bg-right
+      border: 1px solid $color-bg-right
+      border-bottom-color: $color-border-light
+      white-space: nowrap
+      cursor: pointer
+      @include border-top-radius(4px)
+      font-size: 10px
+
+      &:hover
+        background-color: $color-bg-tab-hover
+        border-color: $color-border-light
+        border-bottom-color: $color-bg-tab-active
+
+    .active
+      background-color: $color-bg-tab-active
+      border-color: $color-border-light
+      border-bottom-color: $color-bg-tab-active
+
+    h5
+      margin: 0
+      font-size: $font-size-small
+      font-weight: normal
+      line-height: 26px
+
+      a
+        display: block
+        padding: 0 10px
+
+  .pane
+    position: relative
 
   #toggle-workers
+    position: absolute
+    top: -30px
+    right: 5px
     display: inline-block
-    float: right
     width: 10px
     height: 10px
     cursor: pointer
@@ -17,6 +56,9 @@
   #workers li ul
     display: none
 
+  #queues
+    margin-top: 0
+
   #workers li,
   #queues ul li
     overflow: hidden

assets/styles/right/sponsors.sass

@@ -4,6 +4,7 @@
   .sponsors
     &.top
       height: 140px
+      margin-left: -3px
 
       li
         overflow: hidden

assets/styles/tabs.sass

@@ -61,3 +61,13 @@
   #main
     .tab
       margin: 30px 0 0 12px
+
+#right
+  .tabs
+    margin-left: -3px
+
+    .active
+      background-color: $color-bg-right
+      border-bottom-color: $color-bg-right
+      h5
+        font-weight: bold