[icinga-checkins] icinga.org: dashing-icinga2/master: Widgets: Enhance meter widget

git at icinga.org git at icinga.org
Sat Jun 25 18:57:27 CEST 2016


Module: dashing-icinga2
Branch: master
Commit: d8b1f80ab0c905f3c4c41de4c51f6a8a745d7d97
URL:    https://git.icinga.org/?p=dashing-icinga2.git;a=commit;h=d8b1f80ab0c905f3c4c41de4c51f6a8a745d7d97

Author: Michael Friedrich <michael.friedrich at netways.de>
Date:   Sat Jun 25 18:25:58 2016 +0200

Widgets: Enhance meter widget

* Dynamically adjust 'max' value (i.e. when creating objects through
the Icinga 2 API)
* Adjust colors to Icinga style

---

 widgets/meter/meter.coffee |    4 ++++
 widgets/meter/meter.scss   |    7 +++++--
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/widgets/meter/meter.coffee b/widgets/meter/meter.coffee
index b823ec7..447cbb0 100644
--- a/widgets/meter/meter.coffee
+++ b/widgets/meter/meter.coffee
@@ -7,8 +7,12 @@ class Dashing.Meter extends Dashing.Widget
     @observe 'value', (value) ->
       $(@node).find(".meter").val(value).trigger('change')
 
+    @observe 'max', (max) ->
+      $(@node).find(".meter").trigger('configure', {'max': max})
+
   ready: ->
     meter = $(@node).find(".meter")
+    $(@node).fadeOut().css('background-color', at get('bgColor')).fadeIn()
     meter.attr("data-bgcolor", meter.css("background-color"))
     meter.attr("data-fgcolor", meter.css("color"))
     meter.knob()
diff --git a/widgets/meter/meter.scss b/widgets/meter/meter.scss
index da9ff0b..688d17a 100644
--- a/widgets/meter/meter.scss
+++ b/widgets/meter/meter.scss
@@ -1,12 +1,14 @@
 // ----------------------------------------------------------------------------
 // Sass declarations
 // ----------------------------------------------------------------------------
-$background-color:  #9c4274;
+$background-color:  #0095bf;
 
 $title-color:       rgba(255, 255, 255, 0.7);
-$moreinfo-color:    rgba(255, 255, 255, 0.3);
+//$moreinfo-color:    rgba(255, 255, 255, 0.3);
+$moreinfo-color: #fff;
 
 $meter-background:  darken($background-color, 15%);
+//$meter-background: #fff;
 
 // ----------------------------------------------------------------------------
 // Widget-meter styles
@@ -26,6 +28,7 @@ $meter-background:  darken($background-color, 15%);
 
   .more-info {
     color: $moreinfo-color;
+    font-size: 30px;
   }
 
   .updated-at {



More information about the icinga-checkins mailing list