From 54c6a04b722663b518bf99b4d98a1c2e86ee5103 Mon Sep 17 00:00:00 2001
From: Daniel Beauchamp <daniel.beauchamp@shopify.com>
Date: Tue, 14 Aug 2012 05:23:57 -0400
Subject: Updated the sample project.

---
 templates/project/widgets/graph/graph.coffee | 26 ++++++++++++++
 templates/project/widgets/graph/graph.html   |  5 +++
 templates/project/widgets/graph/graph.scss   | 51 ++++++++++++++++++++++++++++
 templates/project/widgets/list/list.scss     | 20 ++++++-----
 templates/project/widgets/meter/meter.html   |  2 +-
 templates/project/widgets/meter/meter.scss   | 22 ++++++------
 templates/project/widgets/number/number.scss | 18 +++++-----
 templates/project/widgets/text/text.scss     | 14 ++++----
 8 files changed, 122 insertions(+), 36 deletions(-)
 create mode 100644 templates/project/widgets/graph/graph.coffee
 create mode 100644 templates/project/widgets/graph/graph.html
 create mode 100644 templates/project/widgets/graph/graph.scss

(limited to 'templates/project/widgets')

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
-- 
cgit v1.2.3