diff options
Diffstat (limited to 'templates/project/widgets/meter')
-rw-r--r-- | templates/project/widgets/meter/meter.coffee | 16 | ||||
-rw-r--r-- | templates/project/widgets/meter/meter.html | 5 | ||||
-rw-r--r-- | templates/project/widgets/meter/meter.scss | 35 |
3 files changed, 56 insertions, 0 deletions
diff --git a/templates/project/widgets/meter/meter.coffee b/templates/project/widgets/meter/meter.coffee new file mode 100644 index 0000000..4dbc2da --- /dev/null +++ b/templates/project/widgets/meter/meter.coffee @@ -0,0 +1,16 @@ +class AllTheThings.Meter extends AllTheThings.Widget + source: 'meter' + + @accessor 'value', Batman.Property.EasingSetter + + constructor: -> + super + @observe 'value', (value) -> + $(@node).find(".meter").val(value).trigger('change') + + ready: -> + Batman.setImmediate => + meter = $(@node).find(".meter") + meter.attr("data-bgcolor", meter.css("background-color")) + meter.attr("data-fgcolor", meter.css("color")) + meter.knob()
\ No newline at end of file diff --git a/templates/project/widgets/meter/meter.html b/templates/project/widgets/meter/meter.html new file mode 100644 index 0000000..1476ba1 --- /dev/null +++ b/templates/project/widgets/meter/meter.html @@ -0,0 +1,5 @@ +<h1 class="title" data-bind="title"></h1> + +<input class="meter" data-angleOffset=-125 data-angleArc=250 data-width=200 data-readOnly=true data-bind-value="value" data-bind-data-min="min" data-bind-data-max="max"> + +<p class="text-moreinfo" data-bind="moreinfo"></p>
\ No newline at end of file diff --git a/templates/project/widgets/meter/meter.scss b/templates/project/widgets/meter/meter.scss new file mode 100644 index 0000000..b134361 --- /dev/null +++ b/templates/project/widgets/meter/meter.scss @@ -0,0 +1,35 @@ +// ---------------------------------------------------------------------------- +// Sass declarations +// ---------------------------------------------------------------------------- +$widget-meter_background-color: #9c4274; +$widget-meter_value-color: #fff; + +$widget-meter_title-color: lighten($widget-meter_background-color, 45%); +$widget-text_moreinfo-color: lighten($widget-meter_background-color, 45%); + +$widget-meter-bg: darken($widget-meter_background-color, 15%); +$widget-meter-fg: lighten($widget-meter_background-color, 75%); + +// ---------------------------------------------------------------------------- +// Widget-meter styles +// ---------------------------------------------------------------------------- +.widget-meter { + + background-color: $widget-meter_background-color; + + input.meter { + background-color: $widget-meter-bg; + color: $widget-meter-fg; + } + + .title { + color: $widget-meter_title-color; + } + + .text-moreinfo { + font-weight: 600; + font-size: 20px; + margin-top: 0; + } + +}
\ No newline at end of file |