From 133a4499563ae8633db344639ba675fde5fff47b Mon Sep 17 00:00:00 2001 From: Jennifer Mourek Date: Tue, 26 Jun 2018 13:28:57 +0200 Subject: [PATCH 1/9] Make the tiles more readable and improve less-style --- public/css/module.less | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/public/css/module.less b/public/css/module.less index d7ff82e..94cfa4f 100644 --- a/public/css/module.less +++ b/public/css/module.less @@ -482,19 +482,19 @@ div.bp .badges { .tiles > div > a { text-decoration: none; - font-size: 0.5em; - color: inherit; - vertical-align: middle; + font-size: 0.7em; text-align: center; padding: 1em; font-weight: bold; word-wrap: break-word; width: 100%; box-sizing: border-box; + text-shadow: 0 0 1px @text-color; + color: @text-color-inverted; } .tiles { - > .critical { background-color: @colorCritical; background-color: @colorCritical; color: white; } + > .critical { background-color: @colorCritical;} > .critical.handled { background-color: @colorCriticalHandled; } > .down { background-color: @colorCritical; } > .down.handled { background-color: @colorCriticalHandled; } @@ -507,7 +507,7 @@ div.bp .badges { > .ok { background-color: @colorOk; } > .up { background-color: @colorOk; } > .pending { background-color: @colorPending; } - > .missing { background-color: #ccc; } + > .missing { background-color: @gray-light; } > .addnew { background-color: @icinga-blue; } } From c5ec84fbc17c22fd81f1b240f9b0ae459e1c0286 Mon Sep 17 00:00:00 2001 From: Jennifer Mourek Date: Tue, 26 Jun 2018 14:24:55 +0200 Subject: [PATCH 2/9] Redo positioning in tiles --- public/css/module.less | 34 +++++++++++++++++++--------------- 1 file changed, 19 insertions(+), 15 deletions(-) diff --git a/public/css/module.less b/public/css/module.less index 94cfa4f..5f52afd 100644 --- a/public/css/module.less +++ b/public/css/module.less @@ -422,8 +422,13 @@ div.bp .badges { margin-bottom: 0.2em; height: 6em; cursor: pointer; + position: relative; .badges { + position: absolute; + bottom: 0; + left: 0; + right: 0;margin: 0.5em; text-align: center; font-size: 0.5em; display: block; @@ -431,6 +436,15 @@ div.bp .badges { > a { display: block; + line-height: 6em; + text-decoration: none; + font-size: 0.7em; + text-align: center; + padding: 1em; + font-weight: bold; + word-wrap: break-word; + text-shadow: 0 0 1px @text-color; + color: @text-color-inverted; } &:hover { @@ -438,9 +452,12 @@ div.bp .badges { } .actions { + position: absolute; + top: 0; + left: 0; + right: 0; + margin: 0.5em 0 0 0.5em; font-size: 0.75em; - margin-left: 0.5em; - padding-top: 0.2em; height: 1.8em; i { @@ -480,19 +497,6 @@ div.bp .badges { height: 2em; } -.tiles > div > a { - text-decoration: none; - font-size: 0.7em; - text-align: center; - padding: 1em; - font-weight: bold; - word-wrap: break-word; - width: 100%; - box-sizing: border-box; - text-shadow: 0 0 1px @text-color; - color: @text-color-inverted; -} - .tiles { > .critical { background-color: @colorCritical;} > .critical.handled { background-color: @colorCriticalHandled; } From 6ecc485e2eaf46992ba6a4e8539dff4f6bf47ede Mon Sep 17 00:00:00 2001 From: Jennifer Mourek Date: Tue, 26 Jun 2018 14:48:13 +0200 Subject: [PATCH 3/9] Fix line break --- public/css/module.less | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/public/css/module.less b/public/css/module.less index 5f52afd..f52e5b5 100644 --- a/public/css/module.less +++ b/public/css/module.less @@ -436,7 +436,7 @@ div.bp .badges { > a { display: block; - line-height: 6em; + position: relative; text-decoration: none; font-size: 0.7em; text-align: center; @@ -445,6 +445,10 @@ div.bp .badges { word-wrap: break-word; text-shadow: 0 0 1px @text-color; color: @text-color-inverted; + top: 50%; + -ms-transform: translateY(-50%); + -webkit-transform: translateY(-50%); + transform: translateY(-50%); } &:hover { From 862bd40d8b47227979946ca09dd910fe9b2e9b53 Mon Sep 17 00:00:00 2001 From: Jennifer Mourek Date: Tue, 26 Jun 2018 16:15:00 +0200 Subject: [PATCH 4/9] Fix badge position and icon opacity --- public/css/module.less | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/public/css/module.less b/public/css/module.less index f52e5b5..93381c0 100644 --- a/public/css/module.less +++ b/public/css/module.less @@ -427,8 +427,8 @@ div.bp .badges { .badges { position: absolute; bottom: 0; - left: 0; - right: 0;margin: 0.5em; + right: 0; + margin: 0.5em; text-align: center; font-size: 0.5em; display: block; @@ -456,6 +456,7 @@ div.bp .badges { } .actions { + opacity: 0.8; position: absolute; top: 0; left: 0; From b9102b21e9a33035841ff8ac65f4c3fdc60c1244 Mon Sep 17 00:00:00 2001 From: Jennifer Mourek Date: Tue, 26 Jun 2018 16:54:19 +0200 Subject: [PATCH 5/9] Calculate text-shadow to reduce the colour noise --- public/css/module.less | 31 +++++++++++++++---------------- 1 file changed, 15 insertions(+), 16 deletions(-) diff --git a/public/css/module.less b/public/css/module.less index 93381c0..98aed9d 100644 --- a/public/css/module.less +++ b/public/css/module.less @@ -443,7 +443,6 @@ div.bp .badges { padding: 1em; font-weight: bold; word-wrap: break-word; - text-shadow: 0 0 1px @text-color; color: @text-color-inverted; top: 50%; -ms-transform: translateY(-50%); @@ -503,21 +502,21 @@ div.bp .badges { } .tiles { - > .critical { background-color: @colorCritical;} - > .critical.handled { background-color: @colorCriticalHandled; } - > .down { background-color: @colorCritical; } - > .down.handled { background-color: @colorCriticalHandled; } - > .unknown { background-color: @colorUnknown; } - > .unknown.handled { background-color: @colorUnknownHandled; } - > .unreachable { background-color: @colorUnknown; } - > .unreachable.handled { background-color: @colorUnknownHandled; } - > .warning { background-color: @colorWarning; } - > .warning.handled { background-color: @colorWarningHandled; } - > .ok { background-color: @colorOk; } - > .up { background-color: @colorOk; } - > .pending { background-color: @colorPending; } - > .missing { background-color: @gray-light; } - > .addnew { background-color: @icinga-blue; } + > .critical { background-color: @colorCritical; > a { text-shadow: 0 0 1px mix(#000, @colorCritical, 40%); }} + > .critical.handled { background-color: @colorCriticalHandled; > a { text-shadow: 0 0 1px mix(#000, @colorCriticalHandled, 40%); }} + > .down { background-color: @colorCritical; > a { text-shadow: 0 0 1px mix(#000, @colorCritical, 40%); }} + > .down.handled { background-color: @colorCriticalHandled; > a { text-shadow: 0 0 1px mix(#000, @colorCriticalHandled, 40%); }} + > .unknown { background-color: @colorUnknown; > a { text-shadow: 0 0 1px mix(#000, @colorUnknown, 40%); }} + > .unknown.handled { background-color: @colorUnknownHandled; > a { text-shadow: 0 0 1px mix(#000, @colorUnknownHandled, 40%); }} + > .unreachable { background-color: @colorUnknown; > a { text-shadow: 0 0 1px mix(#000, @colorUnknown, 40%); }} + > .unreachable.handled { background-color: @colorUnknownHandled; > a { text-shadow: 0 0 1px mix(#000, @colorUnknownHandled, 40%); }} + > .warning { background-color: @colorWarning; > a { text-shadow: 0 0 1px mix(#000, @colorWarning, 40%); }} + > .warning.handled { background-color: @colorWarningHandled; > a { text-shadow: 0 0 1px mix(#000, @colorWarningHandled, 40%); }} + > .ok { background-color: @colorOk; > a { text-shadow: 0 0 1px mix(#000, @colorOk, 40%); }} + > .up { background-color: @colorOk; > a { text-shadow: 0 0 1px mix(#000, @colorOk, 40%); }} + > .pending { background-color: @colorPending; > a { text-shadow: 0 0 1px mix(#000, @colorPending, 40%); }} + > .missing { background-color: @gray-light; > a { text-shadow: 0 0 1px @gray }} + > .addnew { background-color: @icinga-blue; > a { text-shadow: 0 0 1px mix(#000, @icinga-blue, 40%); }} } /* From fffdffbe634f5dfbecd764204fe66ec220430ca5 Mon Sep 17 00:00:00 2001 From: Jennifer Mourek Date: Thu, 28 Jun 2018 13:18:59 +0200 Subject: [PATCH 6/9] Remove badge container, when there is no conent --- library/Businessprocess/Renderer/Renderer.php | 41 +++++++++++-------- 1 file changed, 24 insertions(+), 17 deletions(-) diff --git a/library/Businessprocess/Renderer/Renderer.php b/library/Businessprocess/Renderer/Renderer.php index e5b98db..91f9f4d 100644 --- a/library/Businessprocess/Renderer/Renderer.php +++ b/library/Businessprocess/Renderer/Renderer.php @@ -126,9 +126,7 @@ abstract class Renderer extends Html */ public function renderStateBadges($summary) { - $container = Container::create( - array('class' => 'badges') - )/* ->renderIfEmpty(false) */; + $elements = []; foreach ($summary as $state => $cnt) { if ($cnt === 0 @@ -138,22 +136,31 @@ abstract class Renderer extends Html continue; } - $container->addContent( - Element::create( - 'span', - array( - 'class' => array( - 'badge', - 'badge-' . strtolower($state) - ), - // TODO: We should translate this in this module - 'title' => mt('monitoring', $state) - ) - )->setContent($cnt) - ); + $elements[] = Element::create( + 'span', + array( + 'class' => array( + 'badge', + 'badge-' . strtolower($state) + ), + // TODO: We should translate this in this module + 'title' => mt('monitoring', $state) + ) + )->setContent($cnt); } - return $container; + if (!empty($elements)) { + $container = Container::create( + array('class' => 'badges') + )/* ->renderIfEmpty(false) */; + + foreach ($elements as $element) { + $container->addContent($element); + } + + return $container; + } + return null; } public function getNodeClasses(Node $node) From f7c30d0da3fbf80131e3d9e7e2a8e30ff6f222d6 Mon Sep 17 00:00:00 2001 From: Jennifer Mourek Date: Thu, 28 Jun 2018 13:57:59 +0200 Subject: [PATCH 7/9] Adapt badge background --- public/css/module.less | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/public/css/module.less b/public/css/module.less index 98aed9d..4170c71 100644 --- a/public/css/module.less +++ b/public/css/module.less @@ -383,13 +383,14 @@ div.knightrider table.bp { /** BEGIN Badges **/ .badges { + background-color: fade(@body-bg-color, 50%); + border-radius: 0.4em; display: block; - padding: 0.5em; + padding: 0.3em 0.4em; .badge { border: 1px solid white; margin: 0; - margin-right: 1px; } } @@ -404,7 +405,7 @@ div.bp .badges { .badge-pending { background: @colorPending; } .badge-missing { background: #ccc; } /** END Badges **/ - +.badges /** BEGIN Tiles **/ .tiles:after { content:''; @@ -567,13 +568,14 @@ div.bp .badges { padding: 0; .badges { + background-color: transparent; + border-radius: 0; display: inline-block; padding: 0 0 0 0.5em; .badge { line-height: 1.25em; font-size: 0.8em; border: 1px solid white; - margin: -0.25em 1px 0 0; } } } From 3a71cb6c34c2ed896a73f749a4c701d19f6a6357 Mon Sep 17 00:00:00 2001 From: Jennifer Mourek Date: Thu, 28 Jun 2018 15:55:50 +0200 Subject: [PATCH 8/9] Change border radius of outer badge container --- public/css/module.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/public/css/module.less b/public/css/module.less index 4170c71..9417838 100644 --- a/public/css/module.less +++ b/public/css/module.less @@ -384,7 +384,7 @@ div.knightrider table.bp { /** BEGIN Badges **/ .badges { background-color: fade(@body-bg-color, 50%); - border-radius: 0.4em; + border-radius: 0.45em; display: block; padding: 0.3em 0.4em; From ae1dd8a2a4c84fa4a9b556f6c1d97604dad9163f Mon Sep 17 00:00:00 2001 From: Jennifer Mourek Date: Fri, 29 Jun 2018 09:21:51 +0200 Subject: [PATCH 9/9] Fix badges background in tree view --- public/css/module.less | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/public/css/module.less b/public/css/module.less index 9417838..3b5e480 100644 --- a/public/css/module.less +++ b/public/css/module.less @@ -399,6 +399,12 @@ div.bp .badges { padding-top: 0; } + + +td > a > .badges { + background-color: transparent; +} + .badge-critical, .badge-down { background: @colorCritical; } .badge-unknown, .badge-unreachable { background: @colorUnknown; } .badge-warning { background: @colorWarning; }