loading and filter

assets/scripts/app/controllers.coffee

@@ -26,3 +26,4 @@ require 'controllers/main/error'
 require 'controllers/builds/item'
 require 'controllers/queue'
 require 'controllers/running_jobs'
+require 'controllers/dashboard/repositories'

assets/scripts/app/controllers/dashboard/repositories.coffee

@@ -0,0 +1,19 @@
+Controller = Ember.Controller.extend
+  queryParams: ['filter']
+  filter: null
+
+  filteredRepositories: (->
+    filter = @get('filter')
+    repos = @get('model')
+
+    if filter
+      repos.filter (item, index) ->
+
+        item.slug.match(new RegExp(filter))
+
+    else
+      repos
+
+  ).property('filter', 'model')
+
+Travis.DashboardRepositoriesController = Controller

assets/scripts/app/routes.coffee

@@ -2,14 +2,17 @@ require 'travis/location'
 require 'routes/application'
 
 Ember.Router.reopen
-  location: (if testMode? then Ember.NoneLocation.create() else Travis.Location.create())
-
   handleURL: (url) ->
     url = url.replace(/#.*?$/, '')
     @_super(url)
 
+Travis.Router.reopen
+  location: 'history'
+
 Travis.Router.map ->
-  @resource 'dashboard'
+  @resource 'dashboard', ->
+    @route 'repositories', path: '/'
+
   @resource 'main', path: '/', ->
     @resource 'getting_started'
     @route 'recent'
@@ -80,3 +83,4 @@ require 'routes/settings'
 require 'routes/simple_layout'
 require 'routes/ssh_key'
 require 'routes/dashboard'
+require 'routes/dashboard/repositories'

assets/scripts/app/routes/dashboard.coffee

@@ -11,17 +11,4 @@ Route = TravisRoute.extend
     @get('stylesheetsManager').enable('main')
     @get('stylesheetsManager').disable('dashboard')
 
-  model: ->
-    #return new Ember.RSVP.Promise(->)
-    apiEndpoint = @get('config').api_endpoint
-    $.ajax(apiEndpoint + '/repos?member=lislis', {
-      beforeSend: (xhr) -> 
-        xhr.setRequestHeader('accept', 'application/json; version=2')
-    }).then (response) ->
-      response.repos.map (elem) ->
-        [owner, name] = elem.slug.split('/')
-        elem.owner = owner
-        elem.name = name
-        Ember.Object.create(elem)
-
 Travis.DashboardRoute = Route

assets/scripts/app/routes/dashboard/repositories.coffee

@@ -0,0 +1,18 @@
+require 'routes/route'
+
+TravisRoute = Travis.Route
+
+Route = TravisRoute.extend
+  model: ->
+    apiEndpoint = @get('config').api_endpoint
+    $.ajax(apiEndpoint + '/repos?member=lislis', {
+      beforeSend: (xhr) -> 
+        xhr.setRequestHeader('accept', 'application/json; version=2')
+    }).then (response) ->
+      response.repos.map (elem) ->
+        [owner, name] = elem.slug.split('/')
+        elem.owner = owner
+        elem.name = name
+        Ember.Object.create(elem)
+
+Travis.DashboardRepositoriesRoute = Route

assets/scripts/app/templates/dashboard.hbs

@@ -1,21 +1 @@
-<div class="tiles">
+{{outlet}}
-  <div class="row">
-  {{#each repo in model}}
-    <div class="large-4 medium-6 columns">
-      <div {{bind-attr class=":tile repo.last_build_state"}}>
-        <div class="build-bar">
-        </div>
-        <div class="build-information">
-          <p class="org">{{repo.owner}}</p>
-          <p class="repo">{{#link-to "repo" repo.owner repo.name }}{{repo.name}}{{/link-to}}</p>
-          <div class="duration">{{formatDuration repo.last_build_duration}}</div>
-          <div class="finished">{{formatTime repo.last_build_finished_at}}</div>
-          <p class="build-status">{{#link-to "build" repo.owner repo.name repo.last_build_id}}#{{repo.last_build_number}} {{repo.last_build_state}}{{/link-to}}</p>
-        </div>
-        <div class="star-feature">
-        </div>
-      </div>
-    </div>
-  {{/each}}
-  </div>
-</div>

assets/scripts/app/templates/dashboard/loading.hbs

@@ -0,0 +1,12 @@
+<div class="row">
+  <div class="small-centered columns" id="loader-container-large">
+    <div class="loader-large">
+      <div class="load-circle1"></div>
+      <div class="load-circle2"></div>
+    </div>
+    <div class="load-text">
+      <p>Hold tight.<br>
+      We're consulting the internet.</p>
+    </div>
+  </div>
+</div>

assets/scripts/app/templates/dashboard/repositories.hbs

@@ -0,0 +1,21 @@
+<div class="tiles">
+  <div class="row">
+  {{#each repo in filteredRepositories}}
+    <div class="large-4 medium-6 columns">
+      <div {{bind-attr class=":tile repo.last_build_state"}}>
+        <div class="build-bar">
+        </div>
+        <div class="build-information">
+          <p class="org">{{repo.owner}}</p>
+          <p class="repo">{{#link-to "repo" repo.owner repo.name }}{{repo.name}}{{/link-to}}</p>
+          <div class="duration">{{formatDuration repo.last_build_duration}}</div>
+          <div class="finished">{{formatTime repo.last_build_finished_at}}</div>
+          <p class="build-status">{{#link-to "build" repo.owner repo.name repo.last_build_id}}#{{repo.last_build_number}} {{repo.last_build_state}}{{/link-to}}</p>
+        </div>
+        <div class="star-feature">
+        </div>
+      </div>
+    </div>
+  {{/each}}
+  </div>
+</div>

assets/scripts/app/templates/layouts/dashboard.hbs

@@ -28,46 +28,46 @@
     </div>
   </div>
 
-  <div id="filters-search">
+<div id="filters-search">
-    <div class="row">
+  <div class="row">
-      <div class="small-6 medium-3 large-2 columns" id="filters">
+    <div class="small-6 medium-3 large-2 columns" id="filters">
-        <ul>
+      <ul>
-          <li class="filters-start">
+        <li class="filters-start">
-            <div class="current-org-avatar org-travisci"></div>Travis CI <div class="arrow-down"></div>
+          <div class="current-org-avatar org-travisci"></div>Travis CI <div class="arrow-down"></div>
-            <ul>
-              <li class="org-all">All organizations</li>
-              <li class="currently-selected"><div class="org-avatar org-travisci">Travis CI</div>Travis CI</li>
-              <li><div class="org-avatar org-saltinejustine">Justine Arreche</div>Justine Arreche</li>
-              <li><div class="org-avatar org-openkarma">Open Karma</div>Open Karma</li>
-              <li><div class="org-avatar org-eurucamp">eurucamp</div>eurucamp</li>
-            </ul>
-          </li>
-        </ul>
-      </div>
-      <!-- <div class="small-6 medium-2 large-2 columns no-padding" id="views">
-        <ul>
-          <li class="views-start">
-            View all repos <div class="arrow-down"></div>
-            <ul>
-              <li class="currently-selected">View all repos</li>
-              <li>Queued builds</li>
-              <li>Failed builds</li>
-              <li>Passed builds</li>
-            </ul>
-          </li>
-        </ul>
-      </div> -->
-      <div class="small-6 medium-6 large-6 columns">
-        <div id="search">
           <ul>
-            <li class="search-field">
+            <li class="org-all">All organizations</li>
-              Search all repositories <div class="search-icon">Search</div>
+            <li class="currently-selected"><div class="org-avatar org-travisci">Travis CI</div>Travis CI</li>
-            </li>
+            <li><div class="org-avatar org-saltinejustine">Justine Arreche</div>Justine Arreche</li>
+            <li><div class="org-avatar org-openkarma">Open Karma</div>Open Karma</li>
+            <li><div class="org-avatar org-eurucamp">eurucamp</div>eurucamp</li>
           </ul>
-        </div>
+        </li>
+      </ul>
+    </div>
+    <!-- <div class="small-6 medium-2 large-2 columns no-padding" id="views">
+      <ul>
+        <li class="views-start">
+          View all repos <div class="arrow-down"></div>
+          <ul>
+            <li class="currently-selected">View all repos</li>
+            <li>Queued builds</li>
+            <li>Failed builds</li>
+            <li>Passed builds</li>
+          </ul>
+        </li>
+      </ul>
+    </div> -->
+    <div class="small-6 medium-6 large-6 columns">
+      <div id="search">
+        <ul>
+          <li class="search-field">
+            Search all repositories <div class="search-icon">Search</div>
+          </li>
+        </ul>
       </div>
     </div>
   </div>
+</div>
 
 {{yield}}
 
@@ -76,7 +76,7 @@
 <footer>
   <div class="row">
     <div class="small-6 medium-4 large-4 columns">
-      <img src="images/dashboard/footer-logo.svg">
+      <img src="/images/dashboard/footer-logo.svg">
     </div>
     <div class="small-6 medium-2 large-2 columns">
       <h3>&copy;Travis CI, GmbH</h3>

assets/scripts/app/templates/main/loading.hbs

@@ -1 +1 @@
-<div class="loading"><span>Loading main</span></div>
+<div class="loading"><span>Loading</span></div>

assets/scripts/app/views.coffee

@@ -29,3 +29,4 @@ require 'views/not_found'
 require 'views/auth/signin'
 require 'views/insufficient_oauth_permissions'
 require 'views/first_sync'
+require 'views/application/loading'

assets/scripts/app/views/application/loading.coffee

@@ -0,0 +1,9 @@
+require 'views/view'
+
+TravisView = Travis.View
+
+View = TravisView.extend
+  layoutName: 'layouts/dashboard'
+  classNames: ['dashboard']
+
+Travis.LoadingView = View

assets/styles/dashboard/dashboard.scss

@@ -630,3 +630,107 @@ a  {
     float : right;
   }
 }
+
+
+
+#loader-container-large {
+  margin-top: 2em;
+  height     : 70px;
+  text-align : center;
+}
+
+#loader-container-large .load-text {
+  font-size   : 25px;
+  line-height : 30px;
+  font-weight : 300;
+  margin-top  : 20px;
+  font-weight: 400;
+}
+
+.loader-large {
+  width    : 60px;
+  height   : 60px;
+  position : relative;
+  margin   : 0 auto;
+}
+
+#loader-container-medium {
+  height     : 40px;
+  margin-top : 15px;
+  text-align : center;
+}
+
+#loader-container-medium .load-text {
+  vertical-align : 10px;
+  display        : inline-block;
+}
+
+.loader-medium {
+  width        : 30px;
+  height       : 30px;
+  position     : relative;
+  display      : inline-block;
+  margin       : 0 auto;
+  margin-right : 10px;
+}
+
+#loader-container-small {
+  height     : 20px;
+  margin-top : 22px;
+  text-align : center; 
+}
+
+#loader-container-small .load-text {
+  vertical-align : 3px;
+  display        : inline-block;
+}
+
+.loader-small {
+  width        : 15px;
+  height       : 15px;
+  position     : relative;
+  display      : inline-block;
+  margin       : 0 auto;
+  margin-right : 5px;
+}
+
+.load-circle1, .load-circle2 {
+  width         : 100%;
+  height        : 100%;
+  border-radius : 50%;
+  opacity       : 0.7;
+  position      : absolute;
+  top           : 0;
+  left          : 0;
+  -webkit-animation : bounce 1.5s infinite ease-in-out;
+  animation         : bounce 1.5s infinite ease-in-out;
+}
+
+.load-circle1 {
+  background-color : #347389;
+}
+
+.load-circle2 {
+  background-color : #bdc5c5;
+  -webkit-animation-delay : -0.5s;
+  animation-delay         : -0.5s;
+}
+
+@-webkit-keyframes bounce {
+  0%, 100% { 
+    -webkit-transform : scale(0.0)
+  }
+  60% {
+    -webkit-transform : scale(1.0)
+  }
+}
+
+@keyframes bounce {
+  0%, 100% { 
+    transform         : scale(0.0);
+    -webkit-transform : scale(0.0);
+  } 60% { 
+    transform: scale(1.0);
+    -webkit-transform : scale(1.0);
+  }
+}