Merge branch 'landing-page' of github.com:travis-ci/travis-web into landing-page

app/routes/home.coffee

@@ -1,34 +1,56 @@
 `import BasicRoute from 'travis/routes/basic'`
 `import config from 'travis/config/environment'`
-`import Repo from 'travis/models/repo'`
 `import limit from 'travis/utils/computed-limit'`
 
 Route = BasicRoute.extend
-  activate: ->
+  init: ->
-    if !config.pro && @pusher
+    store = @store
-      @pusher.subscribeAll(['common'])
-
-    @_super.apply(this, arguments)
-    @store.set('isLandingPageOpened', true)
-
-    @controllerFor('top').set('landingPage', true)
-
-  deactivate: ->
-    @_super.apply(this, arguments)
-    @store.set('isLandingPageOpened', false)
-
-    @controllerFor('top').set('landingPage', false)
-
-  setupController: (controller, model) ->
     repos = Ember.ArrayProxy.extend(
       isLoadedBinding: 'repos.isLoaded'
-      repos: Repo.withLastBuild(@store)
+      repos: @store.filter 'repo', (repo) ->
+        buildId = repo.get('lastBuildId')
+        store.hasRecordForId('build', buildId)
       sorted: Ember.computed.sort('repos', 'sortedReposKeys')
       content: limit('sorted', 'limit')
       sortedReposKeys: ['sortOrder:asc']
       limit: 3
     ).create()
 
-    controller.set('repos', repos)
+    @set('repos', repos)
+
+    setInterval =>
+      @set('letMoreReposThrough', true)
+    , 5000
+
+    @_super.apply this, arguments
+
+  activate: ->
+    if !config.pro && @pusher
+      @pusher.subscribeAll(['common'])
+
+    @store.addPusherEventHandlerGuard('landing-page', (event, data) =>
+      @allowMoreRepos(event, data)
+    )
+
+    @_super.apply(this, arguments)
+
+    @controllerFor('top').set('landingPage', true)
+
+  allowMoreRepos: (event, data) ->
+    if @get('repos.length') < 3
+      return true
+
+    if event == 'build:started' && @get('letMoreReposThrough')
+      @set('letMoreReposThrough', false)
+      return true
+
+  deactivate: ->
+    @_super.apply(this, arguments)
+
+    @store.removePusherEventHandlerGuard('landing-page')
+    @controllerFor('top').set('landingPage', false)
+
+  setupController: (controller, model) ->
+    controller.set('repos', @get('repos'))
 
 `export default Route`

app/store.coffee

@@ -7,20 +7,18 @@ Store = DS.Store.extend
 
   init: ->
     @_super.apply(this, arguments)
+    @set('pusherEventHandlerGuards', {})
 
-    # we will let one start event every 5 seconds to populate some repos for
+  addPusherEventHandlerGuard: (name, callback) ->
-    # landing page
+    @get('pusherEventHandlerGuards')[name] = callback
-    setInterval =>
+
-      @set('allowMoreLandingPageRepos', true)
+  removePusherEventHandlerGuard: (name) ->
-    , 5000
+    delete @get('pusherEventHandlerGuards')[name]
 
   canHandleEvent: (event, data) ->
-    if @get('isLandingPageOpened') && @get('allowMoreLandingPageRepos') && event == 'build:started'
+    [name, type] = event.split(':')
-      @set('allowMoreLandingPageRepos', false)
-      return true
-
     auth = @container.lookup('auth:main')
-    if !@get('isRecentTabOpen') && event != 'job:log' && auth.get('signedIn') &&
+    if event != 'job:log' && auth.get('signedIn') &&
         !config.pro && !config.enterprise
       # if recent repos hasn't been opened yet, we can safely
       # drop any events that doesn't belong to repos owned by
@@ -33,7 +31,13 @@ Store = DS.Store.extend
       else if name == 'build'
         id = data.repository.id
 
-      return if !@hasRecordForId('repo', id) && !permissions.contains(id)
+      return @hasRecordForId('repo', id) || permissions.contains(id)
+
+    for name, callback of @get('pusherEventHandlerGuards')
+      unless callback(event, data)
+        return false
+
+    return true
 
   receivePusherEvent: (event, data) ->
     [name, type] = event.split(':')

app/styles/app/landing.sass

@@ -157,6 +157,102 @@
       color: #828282
       margin-bottom: 20px
       list-style-type: none
+      position: relative
+      height: 120px
+      width: 400px
+      padding: 10px 0 0 60px
+      text-align: left
+
+      .tile-status
+        position: absolute
+        top: 0
+        left: 0
+        bottom: 0
+
+      .owner, .name
+        display: block
+
+      .owner
+        font-size: 14px
+        line-height: 1.8em
+      .name
+        font-size: 22px
+
+      .state
+        display: inline-block
+        margin-left: 4px
+
+      .commit, .number, .branch, .finished-at
+        position: absolute
+        display: block
+        background-repeat: no-repeat
+        background-position: left center
+        padding-left: 23px
+
+      .number
+        left: 60px
+        top: 65px
+        background-image: inline-image('svg/build-number-icon.svg')
+
+      .commit
+        left: 250px
+        top: 65px
+        background-image: inline-image('svg/commit-icon.svg')
+
+      .branch
+        left: 250px
+        top: 90px
+        background-image: inline-image('dashboard/branch.svg')
+        background-size: 19px 19px
+
+      .finished-at
+        left: 60px
+        top: 90px
+        background-image: inline-image('svg/finished-icon.svg')
+        background-size: 19px 19px
+
+      &.started .tile-status,
+      &.created .tile-status,
+      &.received .tile-status,
+      &.queued .tile-status
+        background-color: $start-color
+      &.failed .tile-status
+        background-color: $fail-color
+      &.errored .tile-status
+        background-color: $error-color
+      &.canceled .tile-status
+        background-color: $cancel-color
+      &.passed .tile-status
+        background-color: $pass-color
+      &.inactive .tile-status
+        background-color: $cancel-color
+
+      &.started .owner,
+      &.started .name,
+      &.created .owner,
+      &.created .name,
+      &.received .owner,
+      &.received .name,
+      &.queued .owner,
+      &.queued .name
+        color: $start-color
+      &.failed .owner,
+      &.failed .name
+        color: $fail-color
+      &.errored .owner,
+      &.errored .name
+        color: $error-color
+      &.canceled .owner,
+      &.canceled .name
+        color: $cancel-color
+      &.passed .owner,
+      &.passed .name
+        color: $pass-color
+      &.inactive .owner,
+      &.inactive .name
+        color: $cancel-color
+
+
 
   .free-for-oss
     text-align: center

app/templates/home.hbs

@@ -44,12 +44,21 @@
       <div class="medium-6 columns">
         <ul class="repos">
         {{#each repo in repos}}
-          <li {{bind-attr class=":repo repo.lastBuildState"}}>
+          <li {{bind-attr class=":repo repo.lastBuild.state"}}>
-            {{repo.owner}}<br/>
+            <span class="tile-status">
-            {{repo.name}}<br/>
+              <span {{bind-attr class=":icon :icon-status repo.lastBuild.state"}}></span>
-            #{{repo.lastBuildNumber}}<br/>
+            </span>
-            {{landing-page-last-build-time repo.lastBuildFinishedAt}}<br/>
+            <span class="owner">{{repo.owner}}</span>
+            <span class="name">{{repo.name}}</span>
+            {{#link-to "build" repo repo.lastBuild.id class="number"}}{{repo.lastBuild.number}} <span class="state">{{repo.lastBuild.state}}</span>{{/link-to}}
+            <span class="commit">{{format-sha repo.lastBuild.commit.sha}}</span>
+            <span class="branch">{{repo.lastBuild.branch}}</span>
+            <span class="finished-at">
+              {{landing-page-last-build-time repo.lastBuild.finishedAt}}
+            </span>
           </li>
+        {{else}}
+        <span class="sync-spinner sync-spinner--grey"><i></i><i></i><i></i></span>
         {{/each}}
         </ul>
       </div>
@@ -221,4 +230,4 @@
       </div>
     </div>
   </div>
-</div>
+</div>