update dashboard row inactive states

app/components/dashboard-row.js

@@ -5,7 +5,7 @@ import { hasAdminPermission, hasPushPermission } from 'travis/utils/permission';
 
 export default Ember.Component.extend({
   tagName: 'li',
-  classNameBindings: ['repo.default_branch.last_build.state'],
+  classNameBindings: ['repo.default_branch.last_build.state', 'repo.active:is-active'],
   classNames: ['rows', 'rows--dashboard'],
   isLoading: false,
   isTriggering: false,

app/controllers/dashboard/repositories.js

@@ -28,6 +28,7 @@ export default Ember.Controller.extend({
         return item.slug.match(new RegExp(filter));
       });
     }
+    this.inactive();
   }.property('filter', 'model', 'org'),
 
   updateFilter() {

app/routes/dashboard/repositories.js

@@ -12,7 +12,7 @@ export default TravisRoute.extend({
   model() {
     var apiEndpoint;
     apiEndpoint = config.apiEndpoint;
-    return $.ajax(apiEndpoint + '/v3/repos?repository.active=true&include=repository.default_branch,build.commit', {
+    return $.ajax(apiEndpoint + '/v3/repos?repository.active=false&include=repository.default_branch,build.commit', {
       headers: {
         Authorization: 'token ' + this.auth.token()
       }

app/styles/app/layouts/dashboard.sass

@@ -47,6 +47,7 @@
       fill: $canary-yellow
 
 .dash-header
+  position: relative
   order: 2
   flex: 0 0 20%
 
@@ -102,9 +103,9 @@
 .dash-last-build
   display: flex
   order: 4
-  flex: 0 0 55%
+  flex: 1 0 30%
   flex-flow: row nowrap
-  justify-content: space-between
+  justify-content: flex-start
 
   @media #{$small-only}
     margin-top: 2em
@@ -114,3 +115,17 @@
 
     > div
       flex: 0 0 33%
+
+.dash-button
+  order: 5
+
+.activate-repo-button
+  @extend %button
+  background-color: $pebble-grey
+  color: $cement-grey
+  font-size: 14px
+  cursor: default
+  &.is-active:hover
+    background-color: $turf-green
+    color: white
+    cursor: pointer

app/styles/app/modules/row.sass

@@ -16,8 +16,9 @@
   display: flex
   flex-flow: column wrap
   margin-bottom: 1rem
-  @each $key, $value in $stateMap
-    +rowColor(#{$key}, map-get($value, color))
+  &.is-active
+    @each $key, $value in $stateMap
+      +rowColor(#{$key}, map-get($value, color))
 
   @media #{$medium-up}
     position: relative

app/styles/app/modules/tooltips.sass

@@ -123,3 +123,51 @@
     white-space: normal
     &:before
       right: .8em
+
+
+// trying to rewrite
+
+$tooltip-spacing: 4em
+$tooltip-arrow-width: 1em
+  
+[data-tooltip]
+  position: relative
+  background-color: pink
+  &:after
+    content: attr(data-tooltip)
+    display: block
+    position: absolute
+    background: $asphalt-grey
+    padding: 0.5em
+    color: white
+    border-radius: 2px
+    bottom: $tooltip-spacing
+    left: 0
+    right: 0
+    white-space: normal
+    margin: auto
+    font-size: 12px
+  &:before
+    content: ""
+    display: block
+    width: $tooltip-arrow-width
+    height: $tooltip-arrow-width
+    transform: rotate(45deg)
+    position: absolute
+    left: 0
+    right: 0
+    bottom: $tooltip-spacing - $tooltip-arrow-width
+    margin: auto
+    background-color: $asphalt-grey
+
+  &:after,
+  &:before
+    display: none
+
+  &:hover,
+  &:active
+    &:after,
+    &:before
+      display: block
+
+       

app/templates/components/dashboard-row.hbs

@@ -24,12 +24,14 @@
         <p class="row-content color">
           {{request-icon event=repo.default_branch.last_build.event_type state=repo.default_branch.last_build.state}}
           {{repo.default_branch.name}}
-          {{#if repo.default_branch.last_build.state}}is {{repo.default_branch.last_build.state}}{{/if}}
+          {{#if repo.active}}is {{repo.default_branch.last_build.state}}{{/if}}
         </p>
       </section>
 
-{{#if repo.default_branch.last_build}}
+    {{#if repo.default_branch.last_build}}
       <section class="dash-last-build">
+
+      {{#if repo.active}}
         <div>
           <h3 class="label">Last build</h3>
           <p class="row-content color">
@@ -39,6 +41,8 @@
             {{/link-to}}
           </p>
         </div>
+      {{/if}}
+
         <div>
           <h3 class="label">Last commit</h3>
           <p class="row-content">
@@ -63,8 +67,10 @@
           </p>
         </div>
       </section>
-{{/if}}
+    {{/if}}
 
+
+    {{#if repo.active}}
       {{#if displayMenuTofu}}
         <div class="dash-menu">
           <div class="dropup {{if dropupIsOpen "is-open"}}">
@@ -87,11 +93,22 @@
           </div>
         </div>
       {{/if}}
+    {{else}}
+      <div class="dash-button">
+        {{#unless displayActivateLink}}
+          <button type="button" class="activate-repo-button is-active" {{action 'activateRepo'}}>Activate repository</button>
+        {{else}}
+          <p class="activate-repo-button" data-tooltip="You need admin rights to activate a repository">Actiavte repository</p>
+        {{/unless}}
+      </div>
+    {{/if}}
     </div>
 
-    <aside class="dash-aside">
-      <ul class="lastbuilds">
-        {{lastbuild-tile repo=repo build=repo.default_branch.last_build}}
-      </ul>
-    </aside>
+    {{#if repo.active}}
+      <aside class="dash-aside">
+        <ul class="lastbuilds">
+          {{lastbuild-tile repo=repo build=repo.default_branch.last_build}}
+        </ul>
+      </aside>
+    {{/if}}
   </div>