diff options
Diffstat (limited to 'templates/project/widgets')
| -rw-r--r-- | templates/project/widgets/graph/graph.coffee | 26 | ||||
| -rw-r--r-- | templates/project/widgets/graph/graph.html | 5 | ||||
| -rw-r--r-- | templates/project/widgets/graph/graph.scss | 51 | ||||
| -rw-r--r-- | templates/project/widgets/list/list.scss | 20 | ||||
| -rw-r--r-- | templates/project/widgets/meter/meter.html | 2 | ||||
| -rw-r--r-- | templates/project/widgets/meter/meter.scss | 22 | ||||
| -rw-r--r-- | templates/project/widgets/number/number.scss | 18 | ||||
| -rw-r--r-- | templates/project/widgets/text/text.scss | 14 |
8 files changed, 122 insertions, 36 deletions
diff --git a/templates/project/widgets/graph/graph.coffee b/templates/project/widgets/graph/graph.coffee new file mode 100644 index 0000000..3a149db --- /dev/null +++ b/templates/project/widgets/graph/graph.coffee @@ -0,0 +1,26 @@ +class Dashing.Graph extends Dashing.Widget + + @accessor 'current', -> + points = @get('points') + if points + points[points.length - 1].y + + ready: -> + @graph = new Rickshaw.Graph( + element: @node + width: $(@node).parent().width() + series: [ + { + color: "#fff", + data: [{ x: 0, y: 0}] + } + ] + ) + x_axis = new Rickshaw.Graph.Axis.Time(graph: @graph) + @graph.render() + + onData: (data) -> + super + if @graph + @graph.series[0].data = data.points + @graph.render() diff --git a/templates/project/widgets/graph/graph.html b/templates/project/widgets/graph/graph.html new file mode 100644 index 0000000..8680efb --- /dev/null +++ b/templates/project/widgets/graph/graph.html @@ -0,0 +1,5 @@ +<h1 class="title" data-bind="title"></h1> + +<h2 class="value" data-bind="current | prettyNumber"></h2> + +<p class="text-moreinfo" data-bind="moreinfo"></p>
\ No newline at end of file diff --git a/templates/project/widgets/graph/graph.scss b/templates/project/widgets/graph/graph.scss new file mode 100644 index 0000000..f2a1e21 --- /dev/null +++ b/templates/project/widgets/graph/graph.scss @@ -0,0 +1,51 @@ +// ---------------------------------------------------------------------------- +// Sass declarations +// ---------------------------------------------------------------------------- +$background-color: #2e864f; +$value-color: #fff; + +$title-color: lighten($background-color, 75%); +$moreinfo-color: lighten($background-color, 45%); + +$graph_color: lighten($background-color, 75%); + +// ---------------------------------------------------------------------------- +// Widget-graph styles +// ---------------------------------------------------------------------------- +.widget-graph { + + background-color: $background-color; + position: relative; + + svg { + color: $graph_color; + opacity: 0.4; + fill-opacity: 0.4; + position: absolute; + bottom: 0; + left: 0; + right: 0; + } + + .title, .value { + position: relative; + z-index: 99; + } + + .title { + color: $title-color; + } + + .text-moreinfo { + color: $moreinfo-color; + font-weight: 600; + font-size: 20px; + margin-top: 0; + } + + .x_tick { + position: absolute; + bottom: 0; + } + +}
\ No newline at end of file diff --git a/templates/project/widgets/list/list.scss b/templates/project/widgets/list/list.scss index 248cef8..098200d 100644 --- a/templates/project/widgets/list/list.scss +++ b/templates/project/widgets/list/list.scss @@ -1,27 +1,29 @@ // ---------------------------------------------------------------------------- // Sass declarations // ---------------------------------------------------------------------------- -$widget-list_background-color: #12b0c5; -$widget-list_value-color: #fff; -$widget-list_title-color: lighten($widget-list_background-color, 45%); -$widget-list_label-color: lighten($widget-list_background-color, 45%); +$background-color: #12b0c5; +$value-color: #fff; + +$title-color: lighten($background-color, 45%); +$label-color: lighten($background-color, 45%); // ---------------------------------------------------------------------------- // Widget-list styles // ---------------------------------------------------------------------------- .widget-list { - background-color: $widget-list_background-color; + background-color: $background-color; + vertical-align: top; .title { - color: $widget-list_title-color; + color: $title-color; } ol, ul { margin: 0 15px; text-align: left; - color: $widget-list_label-color; + color: $label-color; } ol { @@ -37,14 +39,14 @@ $widget-list_label-color: lighten($widget-list_background-color, 45%); } .label { - color: $widget-list_label-color; + color: $label-color; } .value { float: right; margin-left: 12px; font-weight: 600; - color: $widget-list_value-color; + color: $value-color; } }
\ No newline at end of file diff --git a/templates/project/widgets/meter/meter.html b/templates/project/widgets/meter/meter.html index 1476ba1..6051d2f 100644 --- a/templates/project/widgets/meter/meter.html +++ b/templates/project/widgets/meter/meter.html @@ -1,5 +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"> +<input class="meter" data-angleOffset=-125 data-angleArc=250 data-width=200 data-readOnly=true data-bind-value="value | shortenedNumber" 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 index b134361..dec0cc6 100644 --- a/templates/project/widgets/meter/meter.scss +++ b/templates/project/widgets/meter/meter.scss @@ -1,32 +1,34 @@ // ---------------------------------------------------------------------------- // 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%); +$background-color: #9c4274; +$value-color: #fff; -$widget-meter-bg: darken($widget-meter_background-color, 15%); -$widget-meter-fg: lighten($widget-meter_background-color, 75%); +$title-color: lighten($background-color, 75%); +$moreinfo-color: lighten($background-color, 45%); + +$meter-background: darken($background-color, 10%); +$meter-foreground: lighten($background-color, 75%); // ---------------------------------------------------------------------------- // Widget-meter styles // ---------------------------------------------------------------------------- .widget-meter { - background-color: $widget-meter_background-color; + background-color: $background-color; input.meter { - background-color: $widget-meter-bg; - color: $widget-meter-fg; + background-color: $meter-background; + color: $meter-foreground; } .title { - color: $widget-meter_title-color; + color: $title-color; } .text-moreinfo { + color: $moreinfo-color; font-weight: 600; font-size: 20px; margin-top: 0; diff --git a/templates/project/widgets/number/number.scss b/templates/project/widgets/number/number.scss index 6ae7f95..d134561 100644 --- a/templates/project/widgets/number/number.scss +++ b/templates/project/widgets/number/number.scss @@ -1,35 +1,35 @@ // ---------------------------------------------------------------------------- // Sass declarations // ---------------------------------------------------------------------------- -$widget-number_background-color: #00b1a4; -$widget-number_value-color: #fff; +$background-color: #00b1a4; +$value-color: #fff; -$widget-number_title-color: lighten($widget-number_background-color, 45%); -$widget-number_moreinfo-color: lighten($widget-number_background-color, 45%); +$title-color: lighten($background-color, 75%); +$moreinfo-color: lighten($background-color, 45%); // ---------------------------------------------------------------------------- // Widget-number styles // ---------------------------------------------------------------------------- .widget-number { - background-color: $widget-number_background-color; + background-color: $background-color; .title { - color: $widget-number_title-color; + color: $title-color; } .value { - color: $widget-number_value-color; + color: $value-color; } .change-rate { font-weight: 300; font-size: 30px; - color: $widget-number_value-color; + color: $value-color; } .text-moreinfo { - color: $widget-number_moreinfo-color; + color: $moreinfo-color; } }
\ No newline at end of file diff --git a/templates/project/widgets/text/text.scss b/templates/project/widgets/text/text.scss index 591c32e..4293602 100644 --- a/templates/project/widgets/text/text.scss +++ b/templates/project/widgets/text/text.scss @@ -1,25 +1,25 @@ // ---------------------------------------------------------------------------- // Sass declarations // ---------------------------------------------------------------------------- -$widget-text_background-color: #ec663c; -$widget-text_value-color: #fff; +$background-color: #ec663c;; +$value-color: #fff; -$widget-text_title-color: lighten($widget-text_background-color, 30%); -$widget-text_moreinfo-color: lighten($widget-text_background-color, 30%); +$title-color: lighten($background-color, 40%); +$moreinfo-color: lighten($background-color, 30%); // ---------------------------------------------------------------------------- // Widget-text styles // ---------------------------------------------------------------------------- .widget-text { - background-color: $widget-text_background-color; + background-color: $background-color; .title { - color: $widget-text_title-color; + color: $title-color; } .text-moreinfo { - color: $widget-text_moreinfo-color; + color: $moreinfo-color; } }
\ No newline at end of file |