From 33917bf73cf9e797b188abcaeea1aee969ebb254 Mon Sep 17 00:00:00 2001
From: Lisa P <mail@lislis.de>
Date: Fri, 18 Sep 2015 15:02:07 +0200
Subject: [PATCH] try to refactor coloring mixins

---
 app/styles/app/_mixins/mixins.sass           | 44 ++++++++++++++++++++
 app/styles/app/components/build-tile.sass    |  2 +-
 app/styles/app/layouts/branches.sass         | 11 -----
 app/styles/app/layouts/owner.sass            | 16 ++-----
 app/styles/app/modules/tiles.sass            | 19 ---------
 app/templates/components/owner-repo-tile.hbs |  6 +--
 6 files changed, 50 insertions(+), 48 deletions(-)

diff --git a/app/styles/app/_mixins/mixins.sass b/app/styles/app/_mixins/mixins.sass
index 96a48c7f..9c245cd8 100644
--- a/app/styles/app/_mixins/mixins.sass
+++ b/app/styles/app/_mixins/mixins.sass
@@ -64,3 +64,47 @@
   font-size: $font-size-sm
   color: $grey-medium
   font-weight: 400
+
+
+
+// @todo simplyfiy coloring mixins
+
+@mixin colorStatusIcons($color, $status)
+  .status-icon.#{$status}
+    svg g > *
+      fill: $color
+
+@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-title a
+      color: $color
+    @include colorStatusIcons($color, $status)
+
+@mixin statusColors($color, $status, $color2: $color)
+  &.#{$status}
+    background: linear-gradient(to right, $color2 0%, $color2 9px, white 10px, white 100%) no-repeat
+    .branch-name,
+    .branch-request a
+      color: $color
+      &:hover
+        border-color: $color
+    .branch-name .status-icon g > *,
+    .branch-request .icon-request g > *
+      fill: $color
+      
+    .build a,
+    .repo-title a
+      color: $color
+      &:hover
+        border-color: $color
+    .build-status
+      color: $color
+    @include colorStatusIcons($color, $status)
diff --git a/app/styles/app/components/build-tile.sass b/app/styles/app/components/build-tile.sass
index 5c3315a8..85588c8a 100644
--- a/app/styles/app/components/build-tile.sass
+++ b/app/styles/app/components/build-tile.sass
@@ -6,7 +6,7 @@
       fill: $color
     &:hover
       background-color: $extra-hover
-      .status-icon g > *
+      .status-icon.#{$status} g > *
         fill: $white
       .status-icon .circle
         border-color: $white
diff --git a/app/styles/app/layouts/branches.sass b/app/styles/app/layouts/branches.sass
index 7ff70029..fa0b0f0a 100644
--- a/app/styles/app/layouts/branches.sass
+++ b/app/styles/app/layouts/branches.sass
@@ -1,14 +1,3 @@
-@mixin statusColors($color, $status, $color2: $color)
-  &.#{$status}
-    background: linear-gradient(to right, $color2 0%, $color2 9px, white 10px, white 100%) no-repeat
-    .branch-name,
-    .branch-request a
-      color: $color
-      &:hover
-        border-color: $color
-    .branch-name .status-icon g > *,
-    .branch-request .icon-request g > *
-      fill: $color
 
 .branches
   .small-title
diff --git a/app/styles/app/layouts/owner.sass b/app/styles/app/layouts/owner.sass
index 2c81884c..36cc992c 100644
--- a/app/styles/app/layouts/owner.sass
+++ b/app/styles/app/layouts/owner.sass
@@ -97,18 +97,6 @@
     padding: 0
     line-height: 1
 
-@mixin statusColors($color, $status)
-  &.#{$status}
-    background: linear-gradient(to right, $color 0%, $color 9px, transparent 10px, transparent 100%) no-repeat;
-    .build a,
-    .repo-title a
-      color: $color
-      &:hover
-        border-color: $color
-    .build-status
-      color: $color
-
-
 .owner-tile
   padding: .8em 0 .8em 2em
   margin-bottom: .5em
@@ -122,6 +110,10 @@
   .repo-title a:hover
     text-decoration: underline
 
+  .status-icon
+    width: 1.3em
+    height: 1.1em
+
   .icon--job,
   .icon-push,
   .icon-pull_request,
diff --git a/app/styles/app/modules/tiles.sass b/app/styles/app/modules/tiles.sass
index 924e6087..4b6e2449 100644
--- a/app/styles/app/modules/tiles.sass
+++ b/app/styles/app/modules/tiles.sass
@@ -1,22 +1,3 @@
-@mixin colorStatusIcons($color, $status)
-  .status-icon.#{$status}
-    svg g > *
-      fill: $color
-
-@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-title a
-      color: $color
-
-    @include colorStatusIcons($color, $status)
 
 .tile
   @extend %border-radius-4px
diff --git a/app/templates/components/owner-repo-tile.hbs b/app/templates/components/owner-repo-tile.hbs
index e67440c4..d246a1d5 100644
--- a/app/templates/components/owner-repo-tile.hbs
+++ b/app/templates/components/owner-repo-tile.hbs
@@ -2,11 +2,7 @@
   <div class="tile-lock"><span class="icon icon-lock"></span></div>
 {{/if}} --}}
 <div class="repo">
-  {{#if isAnimating}}
-    <span class="icon-owner-receiving"><i></i><i></i><i></i></span>
-  {{else}}
-    <span class="icon--job {{repo.default_branch.last_build.state}}"></span>
-  {{/if}}
+  {{status-icon status=repo.default_branch.last_build.state}}
   <h2 class="repo-title">{{#link-to "repo" ownerName repoName }}{{repoName}}{{/link-to}}</h2>
 </div>
 {{#if repo.default_branch.last_build}}