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