initial commit, import from pixelated_dashboard

3 files changed, 60 insertions, 0 deletions

diff --git a/widgets/ccmenu/ccmenu.coffee b/widgets/ccmenu/ccmenu.coffee
new file mode 100644
index 0000000..7c22cd6
--- /dev/null
+++ b/widgets/ccmenu/ccmenu.coffee
@@ -0,0 +1,9 @@
+class Dashing.Ccmenu extends Dashing.Widget
+
+  onData: (data) ->
+    if data.color
+      # clear existing "status-*" classes
+      $(@get('node')).attr 'class', (i,c) ->
+        c.replace /\bstatus-\S+/g, ''
+      # add new class
+      $(@get('node')).addClass "status-#{data.color}"
diff --git a/widgets/ccmenu/ccmenu.html b/widgets/ccmenu/ccmenu.html
new file mode 100644
index 0000000..0508028
--- /dev/null
+++ b/widgets/ccmenu/ccmenu.html
@@ -0,0 +1,7 @@
+<a class="title-link" data-bind="title" data-bind-href="job_url" target="_blank"></a>
+<ul>
+	<li data-foreach-item="items">
+		<p data-bind="item"></p>
+	</li>
+</ul>
+<p class="updated-at" data-bind="updatedAtMessage"></p>
diff --git a/widgets/ccmenu/ccmenu.scss b/widgets/ccmenu/ccmenu.scss
new file mode 100644
index 0000000..fe3d3a3
--- /dev/null
+++ b/widgets/ccmenu/ccmenu.scss
@@ -0,0 +1,44 @@
+// ----------------------------------------------------------------------------
+// Sass declarations
+// ----------------------------------------------------------------------------
+$title-color:       rgba(255, 255, 255, 0.7);
+$green-color:       #50BA5B;
+$red-color:         #D93C38;
+$orange-color:      #F6A41C;
+
+// ----------------------------------------------------------------------------
+// Widget-ccmenu styles
+// ----------------------------------------------------------------------------
+.widget-ccmenu {
+  vertical-align: top;
+
+  .title {
+    color: $title-color;
+  }
+
+  .title-link {
+    font-size: 30px;
+
+    &:hover {
+      color: rgba(255, 255, 255, 0.7);
+    }
+  }
+
+  li {
+    margin-bottom: 5px;
+  }
+  .updated-at {
+    color: rgba(0, 0, 0, 0.3);
+  }
+}
+
+.status-green {
+  background-color: $green-color;
+}
+.status-red {
+  background-color: $red-color;
+}
+
+.status-orange {
+  background-color: $orange-color;
+}