diff --git a/assets/scripts/app/templates/layouts/sidebar.hbs b/assets/scripts/app/templates/layouts/sidebar.hbs
index 9383426f..3921f4dd 100644
--- a/assets/scripts/app/templates/layouts/sidebar.hbs
+++ b/assets/scripts/app/templates/layouts/sidebar.hbs
@@ -9,9 +9,23 @@
{{view view.DecksView}}
-{{view view.WorkersView}}
-{{view view.RunningJobsView}}
-{{view view.QueuesView}}
+
+
+
+
+ {{outlet pane}}
+
+
{{view view.LinksView}}
diff --git a/assets/scripts/app/views/sidebar.coffee b/assets/scripts/app/views/sidebar.coffee
index 782171f8..47bbdd7b 100644
--- a/assets/scripts/app/views/sidebar.coffee
+++ b/assets/scripts/app/views/sidebar.coffee
@@ -2,6 +2,22 @@
SidebarView: Travis.View.extend
templateName: 'layouts/sidebar'
+ activate: (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 +42,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: ->
diff --git a/assets/styles/right/lists.sass b/assets/styles/right/lists.sass
index 1d8fe8b6..e2eb78f8 100644
--- a/assets/styles/right/lists.sass
+++ b/assets/styles/right/lists.sass
@@ -1,12 +1,51 @@
@import "_mixins/all"
#right
- #queues
- margin-top: 0
+ .tabs
+ margin-top: 28px
+ height: 25px
+ border-bottom-color: $color-border-light
+
+ li
+ display: inline-block
+ height: 24px
+ margin-right: 3px
+ 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