Change repos-list into a component

app/components/repo-show-tabs.coffee

@@ -0,0 +1,54 @@
+`import Ember from 'ember'`
+
+RepoShowTabsComponent = Ember.Component.extend
+  # hrm. how to parametrize bind-attr?
+  classCurrent: (->
+    'active' if @get('tab') == 'current'
+  ).property('tab')
+
+  classBuilds: (->
+    'active' if @get('tab') == 'builds'
+  ).property('tab')
+
+  classPullRequests: (->
+    'active' if @get('tab') == 'pull_requests'
+  ).property('tab')
+
+  classBranches: (->
+    'active' if @get('tab') == 'branches'
+  ).property('tab')
+
+  classEvents: (->
+    'active' if @get('tab') == 'events'
+  ).property('tab')
+
+  classBuild: (->
+    tab = @get('tab')
+    classes = []
+    classes.push('active') if tab == 'build'
+    classes.push('display-inline') if tab == 'build' || tab == 'job'
+    classes.join(' ')
+  ).property('tab')
+
+  # TODO: refactor tabs, most of the things here are not really DRY
+  classJob: (->
+    'active' if @get('tab') == 'job'
+  ).property('tab')
+
+  classRequests: (->
+    'active' if @get('tab') == 'requests'
+  ).property('tab')
+
+  classCaches: (->
+    'active' if @get('tab') == 'caches'
+  ).property('tab')
+
+  classSettings: (->
+    'active' if @get('tab') == 'settings'
+  ).property('tab')
+
+  classRequest: (->
+    'active' if @get('tab') == 'request'
+  ).property('tab')
+
+`export default RepoShowTabsComponent`

app/components/repos-list-item.coffee

@@ -0,0 +1,29 @@
+`import Ember from 'ember'`
+`import Polling from 'travis/mixins/polling'`
+`import { colorForState } from 'travis/utils/helpers'`
+
+ReposListItemComponent = Ember.Component.extend Polling,
+  tagName: 'li'
+
+  pollModels: 'repo'
+
+  classNames: ['repo']
+  classNameBindings: ['color', 'selected']
+  selected: (->
+    @get('repo') == @get('selectedRepo')
+  ).property('selectedRepo')
+
+  color: (->
+    colorForState(@get('repo.lastBuildState'))
+  ).property('repo.lastBuildState')
+
+  scrollTop: (->
+    if (window.scrollY > 0)
+      $('html, body').animate({scrollTop: 0}, 200)
+  )
+
+  click: ->
+    @scrollTop()
+    @get('controller').transitionToRoute('/' + @get('repo.slug'))
+
+`export default ReposListItemComponent`

app/components/repos-list.coffee

@@ -0,0 +1,6 @@
+`import Ember from 'ember'`
+
+ReposListComponent = Ember.Component.extend
+  tagName: 'ul'
+
+`export default ReposListComponent`

app/controllers/repos.coffee

@@ -2,7 +2,8 @@
 `import limit from 'travis/utils/computed-limit'`
 `import Repo from 'travis/models/repo'`
 
-Controller = Ember.ArrayController.extend
+Controller = Ember.Controller.extend
+  contentBinding: 'repos'
   actions:
     activate: (name) ->
       @activate(name)
@@ -29,7 +30,7 @@ Controller = Ember.ArrayController.extend
       if @get('tab') == 'owned' && @get('isLoaded') && @get('length') == 0
         @container.lookup('router:main').send('redirectToGettingStarted')
 
-  isLoadedBinding: 'content.isLoaded'
+  isLoadedBinding: 'repos.isLoaded'
   needs: ['currentUser', 'repo', 'runningJobs', 'queue']
   currentUserBinding: 'controllers.currentUser.model'
   selectedRepo: (->
@@ -57,8 +58,8 @@ Controller = Ember.ArrayController.extend
   ).property()
 
   updateTimes: ->
-    if content = @get('content')
+    if repos = @get('repos')
-      content.forEach (r) -> r.updateTimes()
+      repos.forEach (r) -> r.updateTimes()
 
   activate: (tab, params) ->
     @set('sortProperties', ['sortOrder'])
@@ -66,7 +67,7 @@ Controller = Ember.ArrayController.extend
     this["view_#{tab}".camelize()](params)
 
   viewOwned: ->
-    @set('content', @get('userRepos'))
+    @set('repos', @get('userRepos'))
 
   viewRunning: ->
 
@@ -79,7 +80,7 @@ Controller = Ember.ArrayController.extend
 
   viewSearch: (phrase) ->
     @set('search', phrase)
-    @set('content', Repo.search(@store, phrase))
+    @set('repos', Repo.search(@store, phrase))
 
   searchObserver: (->
     search = @get('search')

app/routes/main-tab.coffee

@@ -12,15 +12,17 @@ Route = TravisRoute.extend
     @controllerFor('repos').activate(@get('reposTabName'))
 
     @currentRepoDidChange()
-    @controllerFor('repos').addObserver('firstObject', this, 'currentRepoDidChange')
+    if repos = @controllerFor('repos').get('repos')
+      repos.addObserver('firstObject', this, 'currentRepoDidChange')
 
   deactivate: ->
-    @controllerFor('repos').removeObserver('firstObject', this, 'currentRepoDidChange')
+    if repos = @controllerFor('repos').get('repos')
+      repos.removeObserver('firstObject', this, 'currentRepoDidChange')
 
     @_super.apply(this, arguments)
 
   currentRepoDidChange: ->
-    if repo = @controllerFor('repos').get('firstObject')
+    if repo = @controllerFor('repos').get('repos.firstObject')
       @controllerFor('repo').set('repo', repo)
 
   actions:

app/templates/components/repo-show-tabs.hbs

@@ -0,0 +1,83 @@
+<div class="tabnav" role="tablist">
+  <ul class="tab tabs--main">
+    <li id="tab_current" class={{classCurrent}}>
+      {{#if repo.slug}}
+        {{#link-to "repo" repo current-when="repo.index"}}
+          Current
+        {{/link-to}}
+      {{/if}}
+    </li>
+    <li id="tab_branches" class={{classBranches}}>
+      {{#if repo.slug}}
+        {{#link-to "branches" repo}}
+          Branches
+        {{/link-to}}
+      {{/if}}
+    </li>
+    <li id="tab_builds" class={{classBuilds}}>
+      {{#if repo.slug}}
+        {{#link-to "builds" repo}}
+          Build History
+        {{/link-to}}
+      {{/if}}
+    </li>
+    <li id="tab_pull_requests" class={{classPullRequests}}>
+      {{#if repo.slug}}
+        {{#link-to "pullRequests" repo}}
+          Pull Requests
+        {{/link-to}}
+      {{/if}}
+    </li>
+    <li id="tab_build" class={{classBuild}}>
+      {{#if build.id}}
+        {{#if repo.slug}}
+          {{#link-to "build" repo build}}
+            Build #{{build.number}}
+          {{/link-to}}
+        {{/if}}
+      {{/if}}
+    </li>
+    <li id="tab_job" class={{classJob}}>
+      {{#if job.id}}
+        {{#if repo.slug}}
+          {{#link-to "job" repo job}}
+            Job #{{job.number}}
+          {{/link-to}}
+        {{/if}}
+      {{/if}}
+    </li>
+    <li id="tab_settings" class={{classSettings}}>
+      {{#if repo.slug}}
+        {{#link-to "settings" repo}}
+          Settings
+        {{/link-to}}
+      {{/if}}
+    </li>
+    <li id="tab_requests" class="{{classRequests}}">
+      {{#if repo.slug}}
+        {{#link-to "requests" repo}}
+          Requests
+        {{/link-to}}
+      {{/if}}
+    </li>
+    {{#if config.caches_enabled}}
+      <li id="tab_caches" class={{classCaches}}>
+        {{#if repo.slug}}
+          {{#link-to "caches" repo}}
+            Caches
+          {{/link-to}}
+        {{/if}}
+      </li>
+    {{/if}}
+
+    <li id="tab_request" class={{classRequest}}>
+      {{#if request.id}}
+        {{#if repo.slug}}
+          {{#link-to "request" repo request}}
+            Request #{{request.id}}
+          {{/link-to}}
+        {{/if}}
+      {{/if}}
+    </li>
+  </ul>
+</div>

app/templates/components/repos-list-item.hbs

@@ -0,0 +1,35 @@
+<div class="tile tile--sidebar {{repo.lastBuildState}}">
+  <h2 class="tile-title">
+    {{#if repo.slug}}
+      <span 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" title={{lastBuildStartedAt}}>
+      {{format-duration repo.lastBuildDuration}}
+    </abbr>
+  </p>
+
+  <p>
+    <span class="icon icon--cal"></span>
+    Finished: 
+    <abbr class="finished_at timeago" title={{lastBuildFinishedAt}}>
+      {{format-time repo.lastBuildFinishedAt}}
+    </abbr>
+  </p>
+</div>

app/templates/components/repos-list.hbs

@@ -0,0 +1,7 @@
+{{#each repos as |repo|}}
+  {{repos-list-item repo=repo selectedRepo=selectedRepo}}
+{{else}}
+  <p class="empty">{{noReposMessage}}</p>
+{{/each}}
+
+

app/templates/repo.hbs

@@ -20,7 +20,7 @@
           <div class="repo-menu-header">
             {{view 'repo-show-tools'}}
 
-            {{view 'repo-show-tabs'}}
+            {{repo-show-tabs repo=repo tab=tab}}
           </div>
           <div class="tabbody repo-main">
             {{outlet}}

app/templates/repos.hbs

@@ -19,50 +19,7 @@
 {{else}}
   <div class="tabbody sidebar-list">
     {{#if isLoaded}}
-      {{#collection 'repos-list' content=this}}
+      {{repos-list repos=repos selectedRepo=selectedRepo}}
-
-        {{#with view.repo as repo}}
-          <div class="tile tile--sidebar {{repo.lastBuildState}}">
-            <h2 class="tile-title">
-              {{#if repo.slug}}
-                <span 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" title={{lastBuildStartedAt}}>
-                {{format-duration repo.lastBuildDuration}}
-              </abbr>
-            </p>
-
-            <p>
-              <span class="icon icon--cal"></span>
-              Finished: 
-              <abbr class="finished_at timeago" title={{lastBuildFinishedAt}}>
-                {{format-time repo.lastBuildFinishedAt}}
-              </abbr>
-            </p>
-          </div>
-        {{/with}}
-
-      {{else}}
-        <p class="empty">{{noReposMessage}}</p>
-      {{/collection}}
-
     {{else}}
       {{loading-indicator center=true}}
     {{/if}}

app/templates/repos/show/tabs.hbs

@@ -1,83 +1 @@
-<div class="tabnav" role="tablist">
-  <ul class="tab tabs--main">
-    <li id="tab_current" class={{view.classCurrent}}>
-      {{#if repo.slug}}
-        {{#link-to "repo" repo current-when="repo.index"}}
-          Current
-        {{/link-to}}
-      {{/if}}
-    </li>
-    <li id="tab_branches" class={{view.classBranches}}>
-      {{#if repo.slug}}
-        {{#link-to "branches" repo}}
-          Branches
-        {{/link-to}}
-      {{/if}}
-    </li>
-    <li id="tab_builds" class={{view.classBuilds}}>
-      {{#if repo.slug}}
-        {{#link-to "builds" repo}}
-          Build History
-        {{/link-to}}
-      {{/if}}
-    </li>
-    <li id="tab_pull_requests" class={{view.classPullRequests}}>
-      {{#if repo.slug}}
-        {{#link-to "pullRequests" repo}}
-          Pull Requests
-        {{/link-to}}
-      {{/if}}
-    </li>
-    <li id="tab_build" class={{view.classBuild}}>
-      {{#if build.id}}
-        {{#if repo.slug}}
-          {{#link-to "build" repo build}}
-            Build #{{build.number}}
-          {{/link-to}}
-        {{/if}}
-      {{/if}}
-    </li>
-    <li id="tab_job" class={{view.classJob}}>
-      {{#if job.id}}
-        {{#if repo.slug}}
-          {{#link-to "job" repo job}}
-            Job #{{job.number}}
-          {{/link-to}}
-        {{/if}}
-      {{/if}}
-    </li>
-    <li id="tab_settings" class={{view.classSettings}}>
-      {{#if repo.slug}}
-        {{#link-to "settings" repo}}
-          Settings
-        {{/link-to}}
-      {{/if}}
-    </li>
-    <li id="tab_requests" class="{{view.classRequests}}">
-      {{#if repo.slug}}
-        {{#link-to "requests" repo}}
-          Requests
-        {{/link-to}}
-      {{/if}}
-    </li>
-    {{#if config.caches_enabled}}
-      <li id="tab_caches" class={{view.classCaches}}>
-        {{#if repo.slug}}
-          {{#link-to "caches" repo}}
-            Caches
-          {{/link-to}}
-        {{/if}}
-      </li>
-    {{/if}}
 
-    <li id="tab_request" class={{view.classRequest}}>
-      {{#if request.id}}
-        {{#if repo.slug}}
-          {{#link-to "request" repo request}}
-            Request #{{request.id}}
-          {{/link-to}}
-        {{/if}}
-      {{/if}}
-    </li>
-  </ul>
-</div>