From 5a35f0c1b7e7d865b8ab40732926b0f0e11b5332 Mon Sep 17 00:00:00 2001
From: Lisa P <mail@lislis.de>
Date: Thu, 17 Sep 2015 15:51:58 +0200
Subject: [PATCH] refactor coloring styles and work on trigger build workflow

---
 app/components/branch-row.coffee        |   5 +-
 app/styles/app/layouts/branches.sass    |  12 +-
 app/styles/app/layouts/sidebar.sass     |  20 ---
 app/styles/app/modules/tiles.sass       |   5 +-
 app/templates/components/branch-row.hbs | 180 ++++++++++++++----------
 5 files changed, 120 insertions(+), 102 deletions(-)

diff --git a/app/components/branch-row.coffee b/app/components/branch-row.coffee
index 1066723f..46ee17a0 100644
--- a/app/components/branch-row.coffee
+++ b/app/components/branch-row.coffee
@@ -51,6 +51,10 @@ BranchRowComponent = Ember.Component.extend
     lastBuilds
   ).property()
 
+  canTrigger: (->
+    @get('auth.signedIn')
+  ).property()
+
   triggerBuild: (->
     apiEndpoint = config.apiEndpoint
     repoId = @get('build.repository.id')
@@ -71,7 +75,6 @@ BranchRowComponent = Ember.Component.extend
 
   actions:
     tiggerBuild: (branch) ->
-      console.log('trigger build')
       @.set('isTriggering', true)
       @triggerBuild()
 
diff --git a/app/styles/app/layouts/branches.sass b/app/styles/app/layouts/branches.sass
index b8809ff4..3cea43a5 100644
--- a/app/styles/app/layouts/branches.sass
+++ b/app/styles/app/layouts/branches.sass
@@ -94,7 +94,7 @@
 
 .two-line
   @extend %row-element
-  padding: .6em 0
+  padding: .4em 0
   margin-left: 2em
   text-align: left
 
@@ -269,7 +269,8 @@
 .is-relative
   position: relative
 
-.nobuilds-tigger
+span.nobuilds-tigger,
+a.nobuilds-tigger
   position: absolute
   top: 0
   left: 0
@@ -284,11 +285,14 @@
   border: 1px solid #E4E6E6
   border-radius: 2px
   background-color: #fff
+  .icon-trigger
+    height: 1.4em !important
+
+a.nobuilds-tigger
   &:hover
     background: #A6ADAD
     color: white
     .icon-trigger svg path
       fill: #fff
-  .icon-trigger
-    height: 1.4em !important
+
 
diff --git a/app/styles/app/layouts/sidebar.sass b/app/styles/app/layouts/sidebar.sass
index 2cf87020..1b77a76e 100644
--- a/app/styles/app/layouts/sidebar.sass
+++ b/app/styles/app/layouts/sidebar.sass
@@ -1,11 +1,6 @@
 $sb-grey: #f2f2f2
 $sb-font-size: 14px
 
-@mixin colorSidebarTiles($color)
-  border-color: $color
-  a
-    color: $color
-
 .tile--sidebar
   height: auto
   padding: 0.6em 0.5em
@@ -16,17 +11,6 @@ $sb-font-size: 14px
   li:last-child &
     margin-bottom: 0
 
-  &.failed,
-  &.errored
-    @include colorSidebarTiles($fail-color)
-  &.passed
-    @include colorSidebarTiles($pass-color)
-  &.started,
-  &.created,
-  &.received,
-  &.queued
-    @include colorSidebarTiles($created-color)
-
   h2, p
     margin: 0
     font-size: $sb-font-size
@@ -55,10 +39,6 @@ $sb-font-size: 14px
     width: 1.3em
     height: 1.4em
     margin-right: .1em
-  // .icon--hash
-  //   width: 1.1em
-  //   height: 1.3em
-
 
 .tabnav--sidebar
   font-size: $sb-font-size
diff --git a/app/styles/app/modules/tiles.sass b/app/styles/app/modules/tiles.sass
index 47bd5af9..e6e1207c 100644
--- a/app/styles/app/modules/tiles.sass
+++ b/app/styles/app/modules/tiles.sass
@@ -5,14 +5,17 @@
 
 @mixin colorTiles($color, $status, $extra-bg: $color)
   &.#{$status}
+    border-color: $extra-bg
     .tile-status
       background-color: $color
     .repo-header-title a,
     .repo-build-status a,
     .build-status a,
     .tile-header,
-    .tile-header a
+    .tile-header a,
+    a
       color: $color
+
     @include colorStatusIcons($color, $status)
 
 .tile
diff --git a/app/templates/components/branch-row.hbs b/app/templates/components/branch-row.hbs
index 2a90f88d..44ca0036 100644
--- a/app/templates/components/branch-row.hbs
+++ b/app/templates/components/branch-row.hbs
@@ -1,6 +1,7 @@
 <div class="two-line">
   <div class="branch-name"> 
-    <h2 class="row-item">{{status-icon status=build.last_build.state}}{{build.name}}</h2>
+    <h2 class="row-item">{{status-icon status=build.last_build.state}}
+    <span class="label-align">{{build.name}}</span></h2>
   </div>
   <div class="branch-builds">
     <div class="row-item">
@@ -123,72 +124,76 @@
 </div>
 <div class="one-line is-relative">
 {{#unless inactive}}
-  {{#if build.last_build}}
-    <div class="branch-nav dropup-trigger">
-      <div class="row-item">
-        <a href="#"><span class="icon icon-tofu">
-          <svg x="0px" y="0px" viewBox="0 0 20 20" xml:space="preserve">
-            <g id="Tofuburger">
-              <path fill="#A7AEAE" d="M17.9,6.2H2.1C1.8,6.2,1.5,6,1.5,5.6C1.5,5.3,1.8,5,2.1,5h15.7c0.4,0,0.6,0.3,0.6,0.6
-                C18.5,6,18.2,6.2,17.9,6.2z"/>
-              <path fill="#A7AEAE" d="M17.9,10.6H2.1c-0.4,0-0.6-0.3-0.6-0.6s0.3-0.6,0.6-0.6h15.7c0.4,0,0.6,0.3,0.6,0.6S18.2,10.6,17.9,10.6z
-                "/>
-              <path fill="#A7AEAE" d="M17.9,15H2.1c-0.4,0-0.6-0.3-0.6-0.6c0-0.3,0.3-0.6,0.6-0.6h15.7c0.4,0,0.6,0.3,0.6,0.6
-                C18.5,14.7,18.2,15,17.9,15z"/>
-            </g>
-          </svg>
-        </span></a></div>
-    </div>
-    <div class="dropup--blue">
-      <ul>
-        <li>
-          {{#if hasTriggered}}
-            <span class="icon">
-              <svg version="1.1" id="Layer_1"  x="0px" y="0px"
-                 viewBox="0 0 20 20" enable-background="new 0 0 20 20" xml:space="preserve">
-                <g id="Passed">
-                  <path fill="#A7AEAE" d="M9.6,14.4c-0.1,0-0.3-0.1-0.4-0.1l-4-3.3c-0.3-0.2-0.3-0.6-0.1-0.9S5.8,9.8,6.1,10l3.4,2.8l4.9-7.5
-                    C14.6,5,15,4.9,15.3,5.1c0.3,0.2,0.4,0.6,0.2,0.9l-5.3,8.1C10.1,14.3,9.9,14.4,9.6,14.4C9.7,14.4,9.7,14.4,9.6,14.4z"/>
+  {{#if canTrigger}}
+
+    {{#if build.last_build}}
+      <div class="branch-nav dropup-trigger">
+        <div class="row-item">
+          <a href="#"><span class="icon icon-tofu">
+            <svg x="0px" y="0px" viewBox="0 0 20 20" xml:space="preserve">
+              <g id="Tofuburger">
+                <path fill="#A7AEAE" d="M17.9,6.2H2.1C1.8,6.2,1.5,6,1.5,5.6C1.5,5.3,1.8,5,2.1,5h15.7c0.4,0,0.6,0.3,0.6,0.6
+                  C18.5,6,18.2,6.2,17.9,6.2z"/>
+                <path fill="#A7AEAE" d="M17.9,10.6H2.1c-0.4,0-0.6-0.3-0.6-0.6s0.3-0.6,0.6-0.6h15.7c0.4,0,0.6,0.3,0.6,0.6S18.2,10.6,17.9,10.6z
+                  "/>
+                <path fill="#A7AEAE" d="M17.9,15H2.1c-0.4,0-0.6-0.3-0.6-0.6c0-0.3,0.3-0.6,0.6-0.6h15.7c0.4,0,0.6,0.3,0.6,0.6
+                  C18.5,14.7,18.2,15,17.9,15z"/>
+              </g>
+            </svg>
+          </span></a></div>
+      </div>
+      <div class="dropup--blue">
+        <ul>
+          <li>
+            {{#if hasTriggered}}
+              <span class="icon">
+                <svg version="1.1" id="Layer_1"  x="0px" y="0px"
+                   viewBox="0 0 20 20" enable-background="new 0 0 20 20" xml:space="preserve">
+                  <g id="Passed">
+                    <path fill="#A7AEAE" d="M9.6,14.4c-0.1,0-0.3-0.1-0.4-0.1l-4-3.3c-0.3-0.2-0.3-0.6-0.1-0.9S5.8,9.8,6.1,10l3.4,2.8l4.9-7.5
+                      C14.6,5,15,4.9,15.3,5.1c0.3,0.2,0.4,0.6,0.2,0.9l-5.3,8.1C10.1,14.3,9.9,14.4,9.6,14.4C9.7,14.4,9.7,14.4,9.6,14.4z"/>
+                  </g>
+                </svg>
+              </span>
+              <span class="dropup-item no-link">Build triggered</span>
+            {{else}}
+              {{#if isTriggering}}
+                {{loading-indicator}}
+              {{else}}
+                <a {{action 'tiggerBuild'}}>
+                  <span class="icon icon-trigger">
+                    <svg x="0px" y="0px" viewBox="0 0 20 20" xml:space="preserve">
+                      <g id="Trigger">
+                        <path fill="#A7AEAE" d="M17.2,7.9C17,7.6,16.6,7.7,16.3,8l-1,1.2C14.9,6,12.2,3.6,9,3.6c-3.6,0-6.4,2.9-6.4,6.4s2.9,6.4,6.4,6.4
+                          c1.8,0,3.6-0.8,4.8-2.2c0.2-0.3,0.2-0.7-0.1-0.9c-0.3-0.2-0.7-0.2-0.9,0.1c-1,1.1-2.4,1.7-3.9,1.7c-2.8,0-5.1-2.3-5.1-5.1
+                          S6.1,4.9,9,4.9c2.7,0,4.9,2.1,5.1,4.7l-1.7-1.1c-0.3-0.2-0.7-0.1-0.9,0.2s-0.1,0.7,0.2,0.9l2.8,1.8c0,0,0,0,0,0
+                          c0.1,0.1,0.2,0.1,0.3,0.1c0.1,0,0.2,0,0.3-0.1c0,0,0.1,0,0.1-0.1c0,0,0.1-0.1,0.1-0.1l2-2.4C17.6,8.5,17.5,8.1,17.2,7.9z"/>
+                      </g>
+                    </svg>
+                  </span>
+                  <span class="dropup-item">Trigger a build</span>
+                </a>
+              {{/if}}
+            {{/if}}
+          </li>
+          <li><a {{action 'viewAllBuilds'}}>
+            <span class="icon icon-eye">
+              <svg x="0px" y="0px" viewBox="0 0 20 20" xml:space="preserve">
+                <g id="View">
+                  <path fill="#A7AEAE" d="M17.4,9.6c-0.1-0.2-3.3-4.1-7.4-4.1s-7.3,4-7.4,4.1c-0.2,0.2-0.2,0.6,0,0.8c0.1,0.2,3.3,4.1,7.4,4.1
+                    s7.3-4,7.4-4.1C17.6,10.2,17.6,9.8,17.4,9.6z M10,13.2c-2.8,0-5.2-2.3-6.1-3.2C4.8,9.1,7.2,6.8,10,6.8c2.8,0,5.2,2.3,6.1,3.2
+                    C15.2,10.9,12.8,13.2,10,13.2z"/>
+                  <path fill="#A7AEAE" d="M10,7c-1.5,0-2.6,1.3-2.6,3s1.2,3,2.6,3s2.6-1.3,2.6-3S11.5,7,10,7z M10,11.7c-0.7,0-1.3-0.7-1.3-1.7
+                    S9.3,8.3,10,8.3s1.3,0.7,1.3,1.7S10.7,11.7,10,11.7z"/>
                 </g>
               </svg>
             </span>
-            <span class="dropup-item no-link">Build triggered</span>
-          {{else}}
-            {{#if isTriggering}}
-              {{loading-indicator}}
-            {{else}}
-              <a {{action 'tiggerBuild'}}>
-                <span class="icon icon-trigger">
-                  <svg x="0px" y="0px" viewBox="0 0 20 20" xml:space="preserve">
-                    <g id="Trigger">
-                      <path fill="#A7AEAE" d="M17.2,7.9C17,7.6,16.6,7.7,16.3,8l-1,1.2C14.9,6,12.2,3.6,9,3.6c-3.6,0-6.4,2.9-6.4,6.4s2.9,6.4,6.4,6.4
-                        c1.8,0,3.6-0.8,4.8-2.2c0.2-0.3,0.2-0.7-0.1-0.9c-0.3-0.2-0.7-0.2-0.9,0.1c-1,1.1-2.4,1.7-3.9,1.7c-2.8,0-5.1-2.3-5.1-5.1
-                        S6.1,4.9,9,4.9c2.7,0,4.9,2.1,5.1,4.7l-1.7-1.1c-0.3-0.2-0.7-0.1-0.9,0.2s-0.1,0.7,0.2,0.9l2.8,1.8c0,0,0,0,0,0
-                        c0.1,0.1,0.2,0.1,0.3,0.1c0.1,0,0.2,0,0.3-0.1c0,0,0.1,0,0.1-0.1c0,0,0.1-0.1,0.1-0.1l2-2.4C17.6,8.5,17.5,8.1,17.2,7.9z"/>
-                    </g>
-                  </svg>
-                </span>
-                <span class="dropup-item">Trigger a build</span>
-              </a>
-            {{/if}}
-          {{/if}}
-        </li>
-        <li><a {{action 'viewAllBuilds'}}>
-          <span class="icon icon-eye">
-            <svg x="0px" y="0px" viewBox="0 0 20 20" xml:space="preserve">
-              <g id="View">
-                <path fill="#A7AEAE" d="M17.4,9.6c-0.1-0.2-3.3-4.1-7.4-4.1s-7.3,4-7.4,4.1c-0.2,0.2-0.2,0.6,0,0.8c0.1,0.2,3.3,4.1,7.4,4.1
-                  s7.3-4,7.4-4.1C17.6,10.2,17.6,9.8,17.4,9.6z M10,13.2c-2.8,0-5.2-2.3-6.1-3.2C4.8,9.1,7.2,6.8,10,6.8c2.8,0,5.2,2.3,6.1,3.2
-                  C15.2,10.9,12.8,13.2,10,13.2z"/>
-                <path fill="#A7AEAE" d="M10,7c-1.5,0-2.6,1.3-2.6,3s1.2,3,2.6,3s2.6-1.3,2.6-3S11.5,7,10,7z M10,11.7c-0.7,0-1.3-0.7-1.3-1.7
-                  S9.3,8.3,10,8.3s1.3,0.7,1.3,1.7S10.7,11.7,10,11.7z"/>
-              </g>
-            </svg>
-          </span>
-          <span class="dropup-item">View all builds</span></a>
-        </li>
-      </ul>
-    </div>
+            <span class="dropup-item">View all builds</span></a>
+          </li>
+        </ul>
+      </div>
+    {{/if}}
+
   {{/if}}
 {{/unless}}
 </div>
@@ -203,17 +208,40 @@
   {{/if}}
   </ul>
   {{#unless build.last_build}}
-    <a {{action 'tiggerBuild'}} class="nobuilds-tigger">
-      <span class="icon icon-trigger">
-        <svg x="0px" y="0px" viewBox="0 0 20 20" xml:space="preserve">
-          <g id="Trigger">
-            <path fill="#A7AEAE" d="M17.2,7.9C17,7.6,16.6,7.7,16.3,8l-1,1.2C14.9,6,12.2,3.6,9,3.6c-3.6,0-6.4,2.9-6.4,6.4s2.9,6.4,6.4,6.4
-              c1.8,0,3.6-0.8,4.8-2.2c0.2-0.3,0.2-0.7-0.1-0.9c-0.3-0.2-0.7-0.2-0.9,0.1c-1,1.1-2.4,1.7-3.9,1.7c-2.8,0-5.1-2.3-5.1-5.1
-              S6.1,4.9,9,4.9c2.7,0,4.9,2.1,5.1,4.7l-1.7-1.1c-0.3-0.2-0.7-0.1-0.9,0.2s-0.1,0.7,0.2,0.9l2.8,1.8c0,0,0,0,0,0
-              c0.1,0.1,0.2,0.1,0.3,0.1c0.1,0,0.2,0,0.3-0.1c0,0,0.1,0,0.1-0.1c0,0,0.1-0.1,0.1-0.1l2-2.4C17.6,8.5,17.5,8.1,17.2,7.9z"/>
-          </g>
-        </svg>
-      </span>
-      Trigger a build</a>
+    {{#unless inactive}}
+      {{#if canTrigger}}
+
+        {{#if hasTriggered}}
+          <span class="nobuilds-tigger">
+            <span class="icon icon-trigger">
+              <svg version="1.1" id="Layer_1"  x="0px" y="0px"
+                 viewBox="0 0 20 20" enable-background="new 0 0 20 20" xml:space="preserve">
+                <g id="Passed">
+                  <path fill="#A7AEAE" d="M9.6,14.4c-0.1,0-0.3-0.1-0.4-0.1l-4-3.3c-0.3-0.2-0.3-0.6-0.1-0.9S5.8,9.8,6.1,10l3.4,2.8l4.9-7.5
+                    C14.6,5,15,4.9,15.3,5.1c0.3,0.2,0.4,0.6,0.2,0.9l-5.3,8.1C10.1,14.3,9.9,14.4,9.6,14.4C9.7,14.4,9.7,14.4,9.6,14.4z"/>
+                </g>
+              </svg>
+            </span>
+            Build triggered</span>
+        {{else}}
+          {{#if isTriggering}}
+            <span class="nobuilds-tigger">{{loading-indicator inline=true}}</span>
+          {{else}}
+            <a {{action 'tiggerBuild'}} class="nobuilds-tigger">
+              <span class="icon icon-trigger">
+                <svg x="0px" y="0px" viewBox="0 0 20 20" xml:space="preserve">
+                  <g id="Trigger">
+                    <path fill="#A7AEAE" d="M17.2,7.9C17,7.6,16.6,7.7,16.3,8l-1,1.2C14.9,6,12.2,3.6,9,3.6c-3.6,0-6.4,2.9-6.4,6.4s2.9,6.4,6.4,6.4
+                      c1.8,0,3.6-0.8,4.8-2.2c0.2-0.3,0.2-0.7-0.1-0.9c-0.3-0.2-0.7-0.2-0.9,0.1c-1,1.1-2.4,1.7-3.9,1.7c-2.8,0-5.1-2.3-5.1-5.1
+                      S6.1,4.9,9,4.9c2.7,0,4.9,2.1,5.1,4.7l-1.7-1.1c-0.3-0.2-0.7-0.1-0.9,0.2s-0.1,0.7,0.2,0.9l2.8,1.8c0,0,0,0,0,0
+                      c0.1,0.1,0.2,0.1,0.3,0.1c0.1,0,0.2,0,0.3-0.1c0,0,0.1,0,0.1-0.1c0,0,0.1-0.1,0.1-0.1l2-2.4C17.6,8.5,17.5,8.1,17.2,7.9z"/>
+                  </g>
+                </svg>
+              </span>
+              Trigger a build</a>
+          {{/if}}
+        {{/if}}
+      {{/if}}
+    {{/unless}}
   {{/unless}}
 </div>