Merge branch 'to-the-left'

app/controllers/queue.coffee

@@ -1,9 +1,14 @@
 `import Ember from 'ember'`
 
 Controller = Ember.ArrayController.extend
+  isLoaded: false
   content: (->
-    @store.filter 'job', {}, (job) ->
+    result = @store.filter('job', {}, (job) ->
       ['created', 'queued'].indexOf(job.get('state')) != -1
+    )
+    result.then =>
+      @set('isLoaded', true)
+    result
   ).property()
 
 `export default Controller`

app/controllers/repos.coffee

@@ -7,6 +7,19 @@ Controller = Ember.ArrayController.extend
     activate: (name) ->
       @activate(name)
 
+    showRunningJobs: ->
+      @activate('running')
+
+    showMyRepositories: ->
+      # this is a bit of a hack. I don't want to switch URL for 'running'
+      # so depending on current state I'm either just switching back or 
+      # redirecting
+      if @get('tab') == 'running'
+        @activate('owned')
+      else
+        @transitionToRoute('main.repositories')
+
+
   tabOrIsLoadedDidChange: (->
     @possiblyRedirectToGettingStartedPage()
   ).observes('isLoaded', 'tab', 'length')
@@ -17,7 +30,7 @@ Controller = Ember.ArrayController.extend
         @container.lookup('router:main').send('redirectToGettingStarted')
 
   isLoadedBinding: 'content.isLoaded'
-  needs: ['currentUser', 'repo']
+  needs: ['currentUser', 'repo', 'runningJobs', 'queue']
   currentUserBinding: 'controllers.currentUser'
   selectedRepo: (->
     # we need to observe also repo.content here, because we use
@@ -26,6 +39,11 @@ Controller = Ember.ArrayController.extend
     @get('controllers.repo.repo.content') || @get('controllers.repo.repo')
   ).property('controllers.repo.repo', 'controllers.repo.repo.content')
 
+  startedJobsCount: Ember.computed.alias('controllers.runningJobs.length')
+  allJobsCount: (->
+    @get('startedJobsCount') + @get('controllers.queue.length')
+  ).property('startedJobsCount', 'controllers.queue.length')
+
   init: ->
     @_super.apply this, arguments
     if !Ember.testing
@@ -57,6 +75,8 @@ Controller = Ember.ArrayController.extend
   viewOwned: ->
     @set('content', @get('userRepos'))
 
+  viewRunning: ->
+
   userRepos: (->
     if login = @get('currentUser.login')
       Repo.accessibleBy(@store, login)
@@ -91,4 +111,8 @@ Controller = Ember.ArrayController.extend
     'Could not find any repos'
   ).property('tab')
 
+  showRunningJobs: (->
+    @get('tab') == 'running'
+  ).property('tab')
+
 `export default Controller`

app/controllers/running-jobs.coffee

@@ -1,9 +1,14 @@
 `import Ember from 'ember'`
 
 Controller = Ember.ArrayController.extend
+  isLoaded: false
   content: (->
-    @store.filter 'job', { state: 'started' }, (job) ->
+    result = @store.filter('job', { state: 'started' }, (job) ->
       ['started', 'received'].indexOf(job.get('state')) != -1
+    )
+    result.then =>
+      @set('isLoaded', true)
+    result
   ).property()
 
 `export default Controller`

app/controllers/sidebar.coffee

@@ -1,19 +0,0 @@
-`import Ember from 'ember'`
-
-Controller = Ember.ArrayController.extend
-  init: ->
-    @_super.apply this, arguments
-    @tickables = []
-
-  tips: [
-    "Did you know that you can parallelize tests on Travis CI? <a href=\"http://docs.travis-ci.com/user/speeding-up-the-build/#Paralellizing-your-build-on-one-VM?utm_source=tips\">Learn more</a>"
-    "Did you know that you can split a build into several smaller pieces? <a href=\"http://docs.travis-ci.com/user/speeding-up-the-build/#Parallelizing-your-builds-across-virtual-machines?utm_source=tips\">Learn more</a>"
-    "Did you know that you can skip a build? <a href=\"http://docs.travis-ci.com/user/how-to-skip-a-build/?utm_source=tips\">Learn more</a>"
-  ]
-
-  tip: (->
-    if tips = @get('tips')
-      tips[Math.floor(Math.random()*tips.length)]
-  ).property().volatile()
-
-`export default Controller`

app/styles/app/layout.sass

@@ -75,15 +75,15 @@
     min-height: 100vh
 
   #left
-    width: grid-calc(5, 24)
+    width: grid-calc(6, 24)
     float: left
     margin-left: -100%
     max-width: 325px
 
   .wrapper-main
-    width: grid-calc(19, 24)
+    width: grid-calc(18, 24)
     float: left
-    margin-left: grid-calc(5, 24)
+    margin-left: grid-calc(6, 24)
     overflow: visible
 
 @media #{$xlarge-up}

app/styles/app/layouts/sidebar.sass

@@ -23,7 +23,8 @@ $sb-font-size: 14px
     @include colorSidebarTiles($pass-color)
   &.started,
   &.created,
-  &.received
+  &.received,
+  &.queued
     @include colorSidebarTiles($created-color)
 
   h2, p
@@ -60,10 +61,11 @@ $sb-font-size: 14px
   border-bottom: solid 2px $sb-grey
   width: 90%
   margin: auto
-  ul
+
-    height: 1.7em
+  .active a:after,
-  li.float-right
+  a:hover:after
-    padding-right: 0
+    bottom: -4px
+
   .icon--plus
     &:after
       transform: translateX(35%)
@@ -73,14 +75,37 @@ $sb-font-size: 14px
       .icon--plus:after
         color: $teal1
       &:after
-        bottom: 0.05em
+        bottom: 0
+
+  @media (min-width: #{lower-bound($large-range)})
+    ul
+        height: 1.7em
+    li
+      padding-right: 1em
+
+  @media #{$xxlarge-up}
+    li
+      padding-right: 2em
+
+  @media (max-width: #{lower-bound($large-range)})
+    li
+      display: block !important
+      float: none
+    a
+      padding: 0 0 .35em
+      margin-bottom: .8em
 
 
 .sidebar-list
   margin-top: 1.4rem
+  color: $grey1
   ul
     @include resetul
     border-bottom: .46rem solid #FAF9F7
     background-color: #FAF9F7
 
-
+.sidebar-seperator
+  width: 90%
+  margin: 1rem auto
+  border: none
+  border-bottom: solid 2px #f2f2f2

app/styles/app/maximize.sass

@@ -18,7 +18,7 @@
       width: 20px
       height: 20px
       border-bottom-left-radius: 4px
-      display: block
+      // display: block
 
       &:hover
         background-color: $color-border-slider-hover

app/templates/layouts/home.hbs

@@ -9,11 +9,6 @@
       {{render "flash"}}
       {{yield}}
     </div>
-    {{#if config.pro}}
-      <div id="right">
-        {{render "sidebar"}}
-      </div>
-    {{/if}}
   </div>
 
   <aside id="left">

app/templates/layouts/profile.hbs

@@ -8,26 +8,6 @@
       {{render "flash"}}
       {{yield}}
     </div>
-
-    <div id="right">
-      <div id="slider" {{action "toggle" target=slider}}>
-        <div class='icon'></div>&nbsp;
-      </div>
-
-      <div class="box">
-        <h4>Getting started?</h4>
-        <p>
-          Please read our <a href="http://docs.travis-ci.com/user/getting-started">guide</a>.
-          You'll be up and running in no time!
-        </p>
-        <p>
-          You can find detailed docs on our <a href="http://docs.travis-ci.com">documentation</a> site.
-        </p>
-        <p>
-          If you need help <a href="http://stackoverflow.com/questions/ask?tags=travis-ci">ask a question</a> or hop on <a href="irc://irc.freenode.net/#travis">#travis</a> on irc.freenode.net
-        </p>
-      </div>
-    </div>
   </div>
 
   <aside id="left">

app/templates/queue.hbs

@@ -1,23 +1,30 @@
-<ul id="queues">
+{{#if isLoaded}}
-  <li class="queue">
+  {{#if length}}
-    <h4>Queue ({{length}})</h4>
+    {{#each job in controller}}
-    <ul>
+      <div {{bind-attr class=":tile :tile--sidebar job.state"}}>
-      {{#if length}}
+          {{#if job.repo.slug}}
-        {{#each job in controller}}
+            <span {{bind-attr class=":icon :icon--job job.state"}}></span>
-          <li>
+            {{#link-to "job" job.repo job}}{{job.repo.slug}}{{/link-to}}
-            {{#if job.repo.slug}}
+          {{/if}}
-              {{#link-to "job" job.repo job}}
+        </h2>
-                <span class="slug" {{bind-attr title="job.slug"}}>
+
-                  {{job.repo.slug}}
+        <p class="tile-title float-right">
-                </span>
+          <span class="icon icon--hash"></span>
-                #{{job.number}}
+          {{#link-to "job" job.repo job}}{{job.number}}{{/link-to}}
-              {{/link-to}}
+        </p>
-            {{/if}}
+
-          </li>
+        <p>
-        {{/each}}
+          <span class="icon icon--clock"></span> Queued
-      {{else}}
+        </p>
-        There are no jobs
+
-      {{/if}}
+      </div>
-    </ul>
+
-  </li>
+    {{/each}}
-</ul>
+  {{else}}
+    <div class="spinner-container">There are no jobs queued</div>
+  {{/if}}
+{{else}}
+  <div class="spinner-container">
+    <span class="sync-spinner sync-spinner--grey"><i></i><i></i><i></i></span>
+  </div>
+{{/if}}

app/templates/repos.hbs

@@ -6,52 +6,68 @@
 
 {{view 'repos-list-tabs'}}
 
-<div class="tabbody sidebar-list">
+{{#if showRunningJobs}}
-
+  <div class="tabbody sidebar-list">
-  {{#if isLoaded}}
+    <div>
-    {{#collection 'repos-list' content=this}}
+      {{render "runningJobs"}}
-      {{#with view.repo as repo}}
-        <div {{bind-attr class=":tile :tile--sidebar repo.lastBuildState"}}>
-          <h2 class="tile-title">
-            {{#if repo.slug}}
-              <span {{bind-attr class=":icon :icon--job repo.lastBuildState"}}></span>
-              {{#link-to "repo" repo class="slug"}}{{repo.slug}}{{/link-to}}
-            {{/if}}
-          </h2>
-          {{#with repo.lastBuildHash as lastBuild}}
-            {{#if repo.slug}}
-              {{#if lastBuild.id}}
-              <p class="tile-title float-right">
-                <span class="icon icon--hash"></span>
-                {{#link-to "build" repo lastBuild.id
-                   class="last_build"}}{{lastBuild.number}}{{/link-to}}
-              </p>
-              {{/if}}
-            {{/if}}
-          {{/with}}
-          <p>
-            <span class="icon icon--clock"></span>
-            Duration: 
-            <abbr class="duration" {{bind-attr title="lastBuildStartedAt"}}>
-              {{format-duration repo.lastBuildDuration}}
-            </abbr>
-          </p>
-          <p>
-            <span class="icon icon--cal"></span>
-            Finished: 
-            <abbr clas  s="finished_at timeago" {{bind-attr title="lastBuildFinishedAt"}}>
-              {{format-time repo.lastBuildFinishedAt}}
-            </abbr>
-          </p>
-        </div>
-      {{/with}}
-    {{else}}
-      <p class="empty">{{noReposMessage}}</p>
-    {{/collection}}
-
-  {{else}}
-    <div class="spinner-container">
-      <span class="sync-spinner sync-spinner--grey"><i></i><i></i><i></i></span>
     </div>
-  {{/if}}
+    <hr class="sidebar-seperator">
-</div>
+    <div>
+      {{render "queue"}}
+    </div>
+  </div>
+{{else}}
+  <div class="tabbody sidebar-list">
+    {{#if isLoaded}}
+      {{#collection 'repos-list' content=this}}
+
+        {{#with view.repo as repo}}
+          <div {{bind-attr class=":tile :tile--sidebar repo.lastBuildState"}}>
+            <h2 class="tile-title">
+              {{#if repo.slug}}
+                <span {{bind-attr class=":icon :icon--job repo.lastBuildState"}}></span>
+                {{#link-to "repo" repo class="slug"}}{{repo.slug}}{{/link-to}}
+              {{/if}}
+            </h2>
+            {{#with repo.lastBuildHash as lastBuild}}
+              {{#if repo.slug}}
+                {{#if lastBuild.id}}
+                <p class="tile-title float-right">
+                  <span class="icon icon--hash"></span>
+                  {{#link-to "build" repo lastBuild.id
+                     class="last_build"}}{{lastBuild.number}}{{/link-to}}
+                </p>
+                {{/if}}
+              {{/if}}
+            {{/with}}
+
+            <p>
+              <span class="icon icon--clock"></span>
+              Duration: 
+              <abbr class="duration" {{bind-attr title="lastBuildStartedAt"}}>
+                {{format-duration repo.lastBuildDuration}}
+              </abbr>
+            </p>
+
+            <p>
+              <span class="icon icon--cal"></span>
+              Finished: 
+              <abbr class="finished_at timeago" {{bind-attr title="lastBuildFinishedAt"}}>
+                {{format-time repo.lastBuildFinishedAt}}
+              </abbr>
+            </p>
+          </div>
+        {{/with}}
+
+      {{else}}
+        <p class="empty">{{noReposMessage}}</p>
+      {{/collection}}
+
+    {{else}}
+      <div class="spinner-container">
+        <span class="sync-spinner sync-spinner--grey"><i></i><i></i><i></i></span>
+      </div>
+    {{/if}}
+  </div>
+{{/if}}
+

app/templates/repos/list/tabs.hbs

@@ -1,7 +1,7 @@
 <div class="tabnav tabnav--sidebar" role="tablist">
   <ul class="tab tabs--sidebar">
     <li id="tab_owned" {{bind-attr class="view.classOwned"}}>
-      {{#link-to "main.repositories"}}My Repositories{{/link-to}}
+      <a href="#" {{action "showMyRepositories"}}>My Repositories</a>
     </li>
 
     {{#unless config.pro}}
@@ -10,11 +10,13 @@
       </li>
     {{/unless}}
 
-    {{!-- <li id="tab_search" {{bind-attr class="view.classSearch"}}>
+    {{#if config.pro}}
-      <h5>Search</h5>
+      <li id="tab_running" {{bind-attr class="view.classRunning"}}>
-    </li> --}}
+        <a href="#" {{action "showRunningJobs"}}>Running ({{startedJobsCount}}/{{allJobsCount}})</a>
+      </li>
+    {{/if}}
 
-    <li id="tab_new" {{bind-attr class="view.classNew :float-right"}}>
+    <li id="tab_new" {{bind-attr class="view.classNew"}}>
       {{#link-to "profile" trackEvent="add-repository-from-list" title="Add New Repository"}}
         <span class="icon icon--plus"></span>
       {{/link-to}}

app/templates/running-jobs.hbs

@@ -1,17 +1,34 @@
-<h4>Running Jobs ({{controller.length}})</h4>
+{{#if isLoaded}}
-
-<ul class="jobs">
   {{#if controller.length}}
     {{#each job in controller}}
-      <li {{bind-attr title="job.slug"}}">
+      <div {{bind-attr class=":tile :tile--sidebar job.state"}}>
-        {{#if job.repo.slug}}
+          {{#if job.repo.slug}}
-          {{#link-to "job" job.repo job}}
+            <span {{bind-attr class=":icon :icon--job job.state"}}></span>
-            {{job.repo.slug}} #{{job.number}}
+            {{#link-to "job" job.repo job}}{{job.repo.slug}}{{/link-to}}
-          {{/link-to}}
+          {{/if}}
-        {{/if}}
+        </h2>
-      </li>
+
+        <p class="tile-title float-right">
+          <span class="icon icon--hash"></span>
+          {{#link-to "job" job.repo job}}{{job.number}}{{/link-to}}
+        </p>
+
+        <p>
+          <span class="icon icon--clock"></span>
+          Duration: 
+          <abbr class="duration" {{bind-attr title="job.startedAt"}}>
+            {{format-duration job.startedAt}}
+          </abbr>
+        </p>
+
+      </div>
+
     {{/each}}
   {{else}}
-    There are no jobs
+    <div class="spinner-container">There are no jobs running</div>
   {{/if}}
-</ul>
+{{else}}
+  <div class="spinner-container">
+    <span class="sync-spinner sync-spinner--grey"><i></i><i></i><i></i></span>
+  </div>
+{{/if}}

app/templates/sidebar.hbs

@@ -1,19 +0,0 @@
-<div id="slider" {{action toggle target=slider}}>
-  <div class='icon'></div>&nbsp;
-</div>
-
-{{#if tip}}
-  <div class="tip box">
-    <h4>Tip:</h4>
-
-    <p>{{{tip}}}</p>
-  </div>
-{{/if}}
-
-{{#if config.sidebar_support_box}}
-  {{view templateName="layouts/support"}}
-{{/if}}
-
-{{render "runningJobs"}}
-
-{{render "queue"}}

app/views/repos-list-tabs.coffee

@@ -12,6 +12,12 @@ View = Ember.View.extend
       'hidden'
   ).property('tab')
 
+  classRunning: (->
+    classes = []
+    classes.push('active')  if @get('tab') == 'running'
+    classes.join(' ')
+  ).property('tab')
+
   classOwned: (->
     classes = []
     classes.push('active')  if @get('tab') == 'owned'