CSS: Use handled as separate class again

refs #5543
Icinga · Sep 28, 2015 · f3b928d · f3b928d
1 parent ca45522
commit f3b928d
Show file tree

Hide file tree

Showing 6 changed files with 47 additions and 31 deletions.
diff --git a/modules/monitoring/application/views/scripts/list/hosts.phtml b/modules/monitoring/application/views/scripts/list/hosts.phtml
@@ -31,7 +31,7 @@ if (! $this->compact): ?>
         $hostStateName = Host::getStateText($host->host_state);
         $hostLink = $this->href('monitoring/host/show', array('host' => $host->host_name)); ?>
         <tr>
-            <td class="state-col state-<?= $hostStateName ?><?= $host->host_handled ? '-handled' : '' ?>">
+            <td class="state-col state-<?= $hostStateName ?><?= $host->host_handled ? ' handled' : '' ?>">
                 <p>
                     <span class="state-label"><?= Host::getStateText($host->host_state, true) ?></span>
                 <?php if ((int) $host->host_state !== 99): ?>

diff --git a/modules/monitoring/application/views/scripts/list/services.phtml b/modules/monitoring/application/views/scripts/list/services.phtml
@@ -44,7 +44,7 @@ if (! $this->compact): ?>
         );
         $serviceStateName = Service::getStateText($service->service_state); ?>
         <tr>
-            <td class="state-col state-<?= $serviceStateName ?><?= $service->service_handled ? '-handled' : '' ?>">
+            <td class="state-col state-<?= $serviceStateName ?><?= $service->service_handled ? ' handled' : '' ?>">
                 <p>
                     <span class="state-label"><?= Service::getStateText($service->service_state, true) ?></span>
                 <?php if ((int) $service->service_state !== 99): ?>

diff --git a/modules/monitoring/application/views/scripts/partials/object/host-header.phtml b/modules/monitoring/application/views/scripts/partials/object/host-header.phtml
@@ -4,7 +4,7 @@ use Icinga\Module\Monitoring\Object\Host;
 ?>
 <table>
     <tr>
-        <td class="state-col state <?= Host::getStateText($object->host_state) ?><?= $object->host_handled ? '-handled' : '' ?>">
+        <td class="state-col state-<?= Host::getStateText($object->host_state) ?><?= $object->host_handled ? ' handled' : '' ?>">
             <p>
                 <?= Host::getStateText($object->host_state, true) ?>
                 <br>

diff --git a/modules/monitoring/application/views/scripts/partials/object/service-header.phtml b/modules/monitoring/application/views/scripts/partials/object/service-header.phtml
@@ -5,7 +5,7 @@ use Icinga\Module\Monitoring\Object\Service;
 ?>
 <table>
     <tr>
-        <td class="state-col state-<?= Host::getStateText($object->host_state) ?><?= $object->host_handled ? '-handled' : '' ?>">
+        <td class="state-col state-<?= Host::getStateText($object->host_state) ?><?= $object->host_handled ? ' handled' : '' ?>">
             <p>
                 <?= Host::getStateText($object->host_state, true) ?>
                 <br>

diff --git a/modules/monitoring/public/css/tables.less b/modules/monitoring/public/css/tables.less
@@ -3,58 +3,62 @@
 @border-left-width: 6px;
 
 .state-col {
-  &.state-critical-handled,
-  &.state-down-handled {
-    border-left: @border-left-width solid @color-critical-handled;
-  }
-
   &.state-ok,
-  &.state-ok-handled,
-  &.state-up,
-  &.state-up-handled {
+  &.state-up {
     border-left: @border-left-width solid @color-ok;
 
     .state-label {
-      color: @color-ok;
+      .fg-color-ok();
     }
   }
 
-  &.state-pending,
-  &.state-pending-handled {
+  &.state-pending {
     border-left: @border-left-width solid @color-pending;
   }
 
-  &.state-warning-handled {
-    border-left: @border-left-width solid @color-warning-handled;
-  }
-
-  &.state-unknown-handled {
-    border-left: @border-left-width solid @color-unknown-handled;
-  }
-
-  &.state-unreachable-handled {
-    border-left: @border-left-width solid @color-unreachable-handled;
-  }
-
   &.state-critical,
   &.state-down {
     .bg-color-critical();
-    color: @text-color-inverted;
+    .fg-color-inverted();
+
+    &.handled {
+      .bg-color-default();
+      .fg-color-default();
+      border-left: @border-left-width solid @color-critical-handled;
+    }
   }
 
   &.state-warning {
     .bg-color-warning();
-    color: @text-color-inverted;
+    .fg-color-inverted();
+
+    &.handled {
+      .bg-color-default();
+      .fg-color-default();
+      border-left: @border-left-width solid @color-warning-handled;
+    }
   }
 
   &.state-unknown {
     .bg-color-unknown();
-    color: @text-color-inverted;
+    .fg-color-inverted();
+
+    &.handled {
+      .bg-color-default();
+      .fg-color-default();
+      border-left: @border-left-width solid @color-unknown-handled;
+    }
   }
 
   &.state-unreachable {
     .bg-color-unreachable();
-    color: @text-color-inverted;
+    .fg-color-inverted();
+
+    &.handled {
+      .bg-color-default();
+      .fg-color-default();
+      border-left: @border-left-width solid @color-unreachable-handled;
+    }
   }
 
   * {

diff --git a/public/css/icinga/colors.less b/public/css/icinga/colors.less
@@ -1,5 +1,9 @@
 /*! Icinga Web 2 | (c) 2013-2015 Icinga Development Team | GPLv2+ */
 
+.bg-color-default() {
+  background-color: @body-bg-color;
+}
+
 .bg-color-ok,
 .bg-color-up {
   background-color: @color-ok;
@@ -83,3 +87,11 @@
 .fg-color-pending {
   color: @color-pending;
 }
+
+.fg-color-default {
+  color: @text-color;
+}
+
+.fg-color-inverted() {
+  color: @text-color-inverted;
+}