From 9d5e4c0d1211724f6d5627faff24ebe1015cc2ec Mon Sep 17 00:00:00 2001
From: Felix Niklas <mrflix@gmail.com>
Date: Wed, 24 Jun 2015 14:29:29 +0200
Subject: [PATCH] sla list: simplify, make deactivated state more obvious

---
 .../app/controllers/layout_ref.js.coffee      |  4 +-
 .../app/views/layout_ref/sla.jst.eco          | 55 +++----------------
 app/assets/stylesheets/zammad.css.scss        | 41 +++++++-------
 3 files changed, 29 insertions(+), 71 deletions(-)

diff --git a/app/assets/javascripts/app/controllers/layout_ref.js.coffee b/app/assets/javascripts/app/controllers/layout_ref.js.coffee
index 040def5c9..02b1f3edc 100644
--- a/app/assets/javascripts/app/controllers/layout_ref.js.coffee
+++ b/app/assets/javascripts/app/controllers/layout_ref.js.coffee
@@ -1303,7 +1303,9 @@ class slaRef extends App.ControllerContent
     isInactive = sla.hasClass('is-inactive')
     sla.toggleClass('is-inactive')
     isInactive = !isInactive
-    sla.find('.js-toggle').text(if isInactive then 'Enable' else 'Disable')
+    sla.find('.js-toggle')
+      .toggleClass('btn--danger btn--secondary')
+      .text(if isInactive then 'Enable' else 'Disable')
 
   activateColumn: (event) =>
     checkbox = @$(event.currentTarget)
diff --git a/app/assets/javascripts/app/views/layout_ref/sla.jst.eco b/app/assets/javascripts/app/views/layout_ref/sla.jst.eco
index b770c07be..39c5cf4cb 100644
--- a/app/assets/javascripts/app/views/layout_ref/sla.jst.eco
+++ b/app/assets/javascripts/app/views/layout_ref/sla.jst.eco
@@ -87,36 +87,16 @@
     </div>
     <div class="sla-times">
       <h3>Repsonse Times</h3>
-      <div class="response-times">
-        <div class="response-times-entry">
-          <div class="response-time">00:30 Stunden</div>
-          <div class="response-name">
-            <svg class="icon icon-reply"><use xlink:href="#icon-reply" /></svg>
-            First Response Time
-          </div>
-        </div>
-        <div class="response-times-entry">
-          <div class="response-time">01:00 Stunden</div>
-          <div class="response-name">
-            <svg class="icon icon-reply-all"><use xlink:href="#icon-reply-all" /></svg>
-            Update Time
-          </div>
-        </div>
-        <div class="response-times-entry">
-          <div class="response-time">48:00 Stunden</div>
-          <div class="response-name">
-            <svg class="icon icon-checkmark"><use xlink:href="#icon-checkmark" /></svg>
-            Solution Time
-          </div>
-        </div>
-      </div>
+      00:30 Stunden First Response Time<br>
+      02:00 Stunden Update Time<br>
+      48:00 Stunden Solution Time
     </div>
     <div class="sla-businessHours">
       <h3>Business Hours <span class="subtitle">in European Central Time</span></h3>
       Mo-Tu 7am - 5pm, Fr 7am - 1pm
     </div>
     <div class="sla-controls">
-      <div class="sla-toggle btn js-toggle">Disable</div>
+      <div class="sla-toggle btn btn--danger btn--secondary js-toggle">Disable</div>
       <div class="sla-edit btn js-edit">Edit</div>
     </div>
   </div>
@@ -132,33 +112,12 @@
     </div>
     <div class="sla-times">
       <h3>Repsonse Times</h3>
-      <div class="response-times">
-        <div class="response-times-entry">
-          <div class="response-time">00:30 Stunden</div>
-          <div class="response-name">
-            <svg class="icon icon-reply"><use xlink:href="#icon-reply" /></svg>
-            First Response Time
-          </div>
-        </div>
-        <div class="response-times-entry">
-          <div class="response-time">01:00 Stunden</div>
-          <div class="response-name">
-            <svg class="icon icon-reply-all"><use xlink:href="#icon-reply-all" /></svg>
-            Update Time
-          </div>
-        </div>
-        <div class="response-times-entry">
-          <div class="response-time">48:00 Stunden</div>
-          <div class="response-name">
-            <svg class="icon icon-checkmark"><use xlink:href="#icon-checkmark" /></svg>
-            Solution Time
-          </div>
-        </div>
-      </div>
+      00:30 Stunden First Response Time<br>
+      01:00 Stunden Update Time
     </div>
     <div class="sla-businessHours">
       <h3>Business Hours <span class="subtitle">in European Central Time</span></h3>
-      Mo-Tu 7am - 5pm, Fr 7am - 1pm
+      Mo-Fr 8 Uhr - 18 Uhr
     </div>
     <div class="sla-controls">
       <div class="sla-toggle btn js-toggle">Enable</div>
diff --git a/app/assets/stylesheets/zammad.css.scss b/app/assets/stylesheets/zammad.css.scss
index 0be48048a..46dba6f0c 100644
--- a/app/assets/stylesheets/zammad.css.scss
+++ b/app/assets/stylesheets/zammad.css.scss
@@ -337,12 +337,19 @@ span[data-tooltip]:hover:before {
     }
   }
 
+  &.btn--positive,
   &.btn--success {
     color: white;
     background: hsl(145,51%,45%);
     &:active {
       background: hsl(145,51%,35%);
     }
+
+    &.btn--secondary,
+    &.btn--secondary:active {
+      background: white;
+      color: hsl(145,51%,45%);
+    }
   }
 
   &.btn--danger {
@@ -351,6 +358,12 @@ span[data-tooltip]:hover:before {
     &:active {
       background: hsl(0,65%,45%);
     }
+
+    &.btn--secondary,
+    &.btn--secondary:active {
+      background: white;
+      color: hsl(0,65%,55%);
+    }
   }
 
   &.btn--text {
@@ -5525,10 +5538,15 @@ output {
     box-shadow: none;
     position: relative;
     top: 2px;
+    background: none;
 
     & > *:not(.sla-controls) {
       opacity: 0.33;
     }
+
+    .sla-controls .btn {
+      background: none;
+    }
   }
   
   h3 {
@@ -5538,7 +5556,7 @@ output {
   
   .arrow {
     align-self: center;
-    margin: 25px 50px 0;
+    margin: 22px 50px 0;
     
     .icon {
       width: 15px;
@@ -5547,27 +5565,6 @@ output {
     }
   }
 
-  .response-times-entry {
-    display: flex;
-    
-    .icon {
-      display: none;
-      vertical-align: middle;
-      margin-right: 3px;
-
-      &:not(.icon-checkmark) {
-      }
-    }
-    
-    .response-time {
-      margin-right: 5px;
-    }
-  }
-
-  .response-times-entry:not(:last-child) {
-    margin: 0 0 2px;
-  }
-
   .sla-businessHours {
     flex-basis: 100%;
     margin: 20px 0;