tyler.durden
/
icingaweb2
mirror of https://github.com/Icinga/icingaweb2.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

CSS: Reduce color mixins to fg-stateful and bg-stateful

This commit is contained in:
Eric Lippmann 2016-11-17 10:58:21 +01:00
parent 1d21597999
commit ec07ef2647
8 changed files with 115 additions and 147 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
modules/monitoring/application/views/scripts/list/servicegrid.phtml
View File

@ -81,7 +81,7 @@ $hostFilter = '(host_name=' . implode('|host_name=', array_keys($pivotData)) . '
$service->service_display_name,
$service->host_display_name
),
'class' => 'bg-color-' . Service::getStateText($service->service_state) . ($service->service_handled ? ' handled' : ''),
'class' => 'service-grid-link state-' . Service::getStateText($service->service_state) . ($service->service_handled ? ' handled' : ''),
'title' => $service->service_output
)
) ?>

4
modules/monitoring/application/views/scripts/show/components/checksource.phtml
View File

@ -8,9 +8,9 @@
<?php if ($object->is_reachable !== null): ?>
<span class="check-source-meta"><?= (bool) $object->is_reachable ? $this->translate('is reachable') : $this->translate('is not reachable') ?></span>
<?php if ((bool) $object->is_reachable) {
echo $this->icon('circle', $this->translate('Is reachable'), array('class' => 'check-source-reachable'));
echo $this->icon('circle', $this->translate('Is reachable'), array('class' => 'icon-stateful state-ok'));
} else {
echo $this->icon('circle', $this->translate('Not reachable'), array('class' => 'check-source-not-reachable'));
echo $this->icon('circle', $this->translate('Not reachable'), array('class' => 'icon-stateful state-critical'));
} ?>
<?php endif ?>
</td>

2
modules/monitoring/application/views/scripts/show/components/checkstatistics.phtml
View File

@ -9,7 +9,7 @@ $activeChecksEnabled = (bool) $object->active_checks_enabled;
<?php if ((int) $object->state !== 99): ?>
<?= $this->timeAgo($object->last_check) ?>
<?php if ($object->next_update < time()): ?>
<?= $this->icon('circle', $this->translate('Check result is late'), array('class' => 'check-result-late')) ?>
<?= $this->icon('circle', $this->translate('Check result is late'), array('class' => 'icon-stateful state-critical')) ?>
<?php endif ?>
<?php endif ?>
<?php if (isset($checkNowForm)) { // Form is unset if the current user lacks the respective permission

12
modules/monitoring/public/css/module.less
View File

@ -1,19 +1,7 @@
/*! Icinga Web 2 | (c) 2014 Icinga Development Team | GPLv2+ */
// Styles for the icon displayed if a check source is reachable
.check-source-reachable {
color: @color-ok;
}
// Styles for the icon displayed if a check source is not reachable
.check-source-not-reachable {
color: @color-critical;
}
// Styles for the icon displayed if a check result is late
.check-result-late {
color: @color-critical;
&:before {
// Remove right margin because the check now form may be displayed right next to the icon and we already have a gap
// because of inline-blocks

44
modules/monitoring/public/css/service-grid.less
View File

@ -5,24 +5,10 @@
white-space: nowrap;
td {
color: @gray-light;
padding: 0.2em;
text-align: center;
width: 1.0em;
color: @gray-lighter;
padding: 1px 2px;
a {
.rounded-corners(0.4em);
display: block;
height: 1.5em;
width: 1.5em;
}
i {
.rounded-corners(0.4em);
display: block;
height: 1.5em;
width: 1.5em;
}
width: 1em;
}
.rotate-45 {
@ -42,6 +28,26 @@
}
}
.joystick-pagination a {
color: @text-color;
.joystick-pagination {
margin: 0 auto;
a {
color: @text-color;
}
i {
display: block;
height: 1.5em;
width: 1.5em;
}
}
.service-grid-link {
.bg-stateful();
.rounded-corners();
display: inline-block;
height: 1.5em;
vertical-align: middle;
width: 1.5em;
}

34
public/css/icinga/badges.less
View File

@ -5,7 +5,9 @@
@badge-padding: 0.25em;
.badge {
.bg-stateful();
.rounded-corners();
background-color: @gray-light;
color: @badge-color;
display: inline-block;
@ -17,36 +19,4 @@
text-align: center;
vertical-align: middle;
white-space: nowrap;
&.state-ok {
.bg-color-ok();
}
&.state-up {
.bg-color-up();
}
&.state-warning {
.bg-color-warning();
}
&.state-critical {
.bg-color-critical();
}
&.state-down {
.bg-color-down();
}
&.state-unreachable {
.bg-color-unreachable();
}
&.state-unknown {
.bg-color-unknown();
}
&.state-pending {
.bg-color-pending();
}
}

4
public/css/icinga/main.less
View File

@ -65,6 +65,10 @@ a:hover > .icon-cancel {
color: @color-critical;
}
.icon-stateful {
.fg-stateful();
}
// Link styles
.button-link {

160
public/css/icinga/mixins.less
View File

@ -114,88 +114,88 @@
animation-fill-mode: forwards;
}
// Color mixins
.bg-color-ok,
.bg-color-up {
background-color: @color-ok;
}
.bg-color-warning {
background-color: @color-warning;
&.handled {
background-color: @color-warning-handled;
// Mixin for stateful foreground colors, e.g. text or icons
.fg-stateful {
&.state-ok {
color: @color-ok;
}
&.state-up {
color: @color-up;
}
&.state-warning {
color: @color-warning;
&.handled {
color: @color-warning-handled;
}
}
&.state-critical {
color: @color-critical;
&.handled {
color: @color-critical-handled;
}
}
&.state-down {
color: @color-down;
&.handled {
color: @color-down-handled;
}
}
&.state-unreachable {
color: @color-unreachable;
&.handled {
color: @color-unreachable-handled;
}
}
&.state-unknown {
color: @color-unknown;
&.handled {
color: @color-unknown-handled;
}
}
&.state-pending {
color: @color-pending;
}
}
.bg-color-critical,
.bg-color-down {
background-color: @color-critical;
&.handled {
background-color: @color-critical-handled;
// Mixin for stateful background colors
.bg-stateful {
&.state-ok {
background-color: @color-ok;
}
&.state-up {
background-color: @color-up;
}
&.state-warning {
background-color: @color-warning;
&.handled {
background-color: @color-warning-handled;
}
}
&.state-critical {
background-color: @color-critical;
&.handled {
background-color: @color-critical-handled;
}
}
&.state-down {
background-color: @color-down;
&.handled {
background-color: @color-down-handled;
}
}
&.state-unreachable {
background-color: @color-unreachable;
&.handled {
background-color: @color-unreachable-handled;
}
}
&.state-unknown {
background-color: @color-unknown;
&.handled {
background-color: @color-unknown-handled;
}
}
&.state-pending {
background-color: @color-pending;
}
}
.bg-color-unreachable {
background-color: @color-unreachable;
&.handled {
background-color: @color-unreachable-handled;
}
}
.bg-color-unknown {
background-color: @color-unknown;
&.handled {
background-color: @color-unknown-handled;
}
}
.bg-color-pending {
background-color: @color-pending;
}
.fg-color-ok,
.fg-color-up {
color: @color-ok;
}
.fg-color-warning {
color: @color-warning;
&.handled {
color: @color-warning-handled;
}
}
.fg-color-critical,
.fg-color-down {
color: @color-critical;
&.handled {
color: @color-critical-handled;
}
}
.fg-color-unreachable {
color: @color-unreachable;
&.handled {
color: @color-unreachable-handled;
}
}
.fg-color-unknown {
color: @color-unknown;
&.handled {
color: @color-unknown-handled;
}
}
.fg-color-pending {
color: @color-pending;
}