From a4a4564f760bb1bcd541366186cd46488d5a569b Mon Sep 17 00:00:00 2001 From: Daniel Beauchamp Date: Tue, 30 Oct 2012 05:16:35 -0400 Subject: Added new widgets, and made them more flexible. Ready for 0.1.3! --- README.md | 191 +- dashing.gemspec | 10 +- javascripts/batman.jquery.js | 52 + javascripts/batman.js | 7170 +++++++++++--------- javascripts/dashing.coffee | 2 +- templates/dashboard/%name%.erb.tt | 1 - templates/project/Gemfile | 2 +- templates/project/README.md | 1 + templates/project/assets/images/logo.png | Bin 0 -> 68147 bytes .../project/assets/javascripts/application.coffee | 12 +- .../project/assets/stylesheets/application.scss | 40 +- templates/project/dashboards/sample.erb | 6 +- templates/project/dashboards/sampletv.erb | 56 + templates/project/jobs/buzzwords.rb | 2 +- templates/project/jobs/convergence.rb | 1 + templates/project/jobs/sample.rb | 4 + templates/project/jobs/twitter.rb | 17 + templates/project/public/.empty_directory | 1 - templates/project/widgets/clock/clock.coffee | 18 + templates/project/widgets/clock/clock.html | 2 + templates/project/widgets/clock/clock.scss | 13 + templates/project/widgets/comments/comments.coffee | 24 + templates/project/widgets/comments/comments.html | 7 + templates/project/widgets/comments/comments.scss | 33 + templates/project/widgets/graph/graph.coffee | 14 +- templates/project/widgets/graph/graph.html | 4 +- templates/project/widgets/graph/graph.scss | 36 +- templates/project/widgets/iframe/iframe.coffee | 9 + templates/project/widgets/iframe/iframe.html | 1 + templates/project/widgets/iframe/iframe.scss | 8 + templates/project/widgets/image/image.coffee | 9 + templates/project/widgets/image/image.html | 1 + templates/project/widgets/image/image.scss | 13 + templates/project/widgets/list/list.coffee | 15 +- templates/project/widgets/list/list.html | 5 +- templates/project/widgets/list/list.scss | 14 +- templates/project/widgets/meter/meter.html | 4 +- templates/project/widgets/meter/meter.scss | 20 +- templates/project/widgets/number/number.coffee | 8 +- templates/project/widgets/number/number.html | 10 +- templates/project/widgets/number/number.scss | 14 +- templates/project/widgets/text/text.html | 6 +- templates/project/widgets/text/text.scss | 17 +- 43 files changed, 4286 insertions(+), 3587 deletions(-) create mode 100644 templates/project/assets/images/logo.png create mode 100644 templates/project/dashboards/sampletv.erb create mode 100644 templates/project/jobs/twitter.rb delete mode 100644 templates/project/public/.empty_directory create mode 100644 templates/project/widgets/clock/clock.coffee create mode 100644 templates/project/widgets/clock/clock.html create mode 100644 templates/project/widgets/clock/clock.scss create mode 100644 templates/project/widgets/comments/comments.coffee create mode 100644 templates/project/widgets/comments/comments.html create mode 100644 templates/project/widgets/comments/comments.scss create mode 100644 templates/project/widgets/iframe/iframe.coffee create mode 100644 templates/project/widgets/iframe/iframe.html create mode 100644 templates/project/widgets/iframe/iframe.scss create mode 100644 templates/project/widgets/image/image.coffee create mode 100644 templates/project/widgets/image/image.html create mode 100644 templates/project/widgets/image/image.scss diff --git a/README.md b/README.md index 13b00c7..cdcc722 100644 --- a/README.md +++ b/README.md @@ -1,190 +1 @@ -# Dashing! - -A handsome dashboard framework solution - -## Introduction - -Dashing is a framework for building web-based dashboards. - -Features: - - - Custom widgets! Built using whatever HTML/Coffeescript wizardry you posses - - Multiple dashboards! You can have many different views all hosted in the same location - - Shared widgets! It's easy to have have the same widget show up on different dashboards - - Push or pull data, you decide! - - Responsive grid layout! Your dashboard will look good on any sized screen - -## Installation and Setup - - 1. Install the gem from the command line: - - ```gem install dashing``` - - 2. Generate a new project: - - ```dashing new sweet_dashboard_project``` - - 3. Change your directory to ```sweet_dashboard_project``` and start Dashing - - ```dashing start``` - - 4. Point your browser at [localhost:3000](http://localhost:3000) - -## Building a dashboard - -```main.erb``` contains the layout for the default dashboard which is accessible at ```/```. -You can add additional dashboards with by running ```dashing COMMAND THINGY new_view``` which creates a ```new_view.erb``` file in ```dashboards/```. -That new view will be accessible at ```localhost:3000/new_view``` - -## Widgets - -Widgets are represented by a ```div``` element with ```data-id``` and ```data-view``` attributes. eg: - -```HTML -
-``` - -The ```data-id``` attribute is used to set the **widget ID** which will be used when to push data to the widget. Two widgets can have the same widget id, allowing you to have the same widget in multiple dashboards. - -```data-view``` specifies the type of widget what will be used. This field is case sensitive and must match the coffeescript class of the widget. See making your own widget section for more details. - -This ```
``` can also be used to configure your widgets. For example, the pre-bundled widgets let you set a title with ```data-title="Widget Title"```. - -### Layout - -Getting the style and layout right when you have multiple widgets is hard, that's why we've done it for you. By default Dashing uses [masonry](http://masonry.desandro.com/) to produce a grid layout. If it can, your dashboard will fill the screen with 5 columns. If there isn't enough room though, widgets will be reorganized to fit into fewer columns until you are left with a single column - -Examples here? - -Masonry requires that your widgets be contained within a ``` \ No newline at end of file + + +

+

\ No newline at end of file diff --git a/templates/project/widgets/list/list.scss b/templates/project/widgets/list/list.scss index 098200d..90b6c84 100644 --- a/templates/project/widgets/list/list.scss +++ b/templates/project/widgets/list/list.scss @@ -1,12 +1,12 @@ // ---------------------------------------------------------------------------- // Sass declarations // ---------------------------------------------------------------------------- - $background-color: #12b0c5; $value-color: #fff; -$title-color: lighten($background-color, 45%); -$label-color: lighten($background-color, 45%); +$title-color: rgba(255, 255, 255, 0.7); +$label-color: rgba(255, 255, 255, 0.7); +$moreinfo-color: rgba(255, 255, 255, 0.7); // ---------------------------------------------------------------------------- // Widget-list styles @@ -49,4 +49,12 @@ $label-color: lighten($background-color, 45%); color: $value-color; } + .updated-at { + color: rgba(0, 0, 0, 0.3); + } + + .more-info { + color: $moreinfo-color; + } + } \ No newline at end of file diff --git a/templates/project/widgets/meter/meter.html b/templates/project/widgets/meter/meter.html index 6051d2f..7d51b15 100644 --- a/templates/project/widgets/meter/meter.html +++ b/templates/project/widgets/meter/meter.html @@ -2,4 +2,6 @@ -

\ No newline at end of file +

+ +

\ No newline at end of file diff --git a/templates/project/widgets/meter/meter.scss b/templates/project/widgets/meter/meter.scss index dec0cc6..98cf638 100644 --- a/templates/project/widgets/meter/meter.scss +++ b/templates/project/widgets/meter/meter.scss @@ -1,15 +1,12 @@ // ---------------------------------------------------------------------------- // Sass declarations // ---------------------------------------------------------------------------- - $background-color: #9c4274; -$value-color: #fff; -$title-color: lighten($background-color, 75%); -$moreinfo-color: lighten($background-color, 45%); +$title-color: rgba(255, 255, 255, 0.7); +$moreinfo-color: rgba(255, 255, 255, 0.3); -$meter-background: darken($background-color, 10%); -$meter-foreground: lighten($background-color, 75%); +$meter-background: darken($background-color, 15%); // ---------------------------------------------------------------------------- // Widget-meter styles @@ -20,18 +17,19 @@ $meter-foreground: lighten($background-color, 75%); input.meter { background-color: $meter-background; - color: $meter-foreground; + color: #fff; } .title { color: $title-color; } - .text-moreinfo { + .more-info { color: $moreinfo-color; - font-weight: 600; - font-size: 20px; - margin-top: 0; + } + + .updated-at { + color: rgba(0, 0, 0, 0.3); } } \ No newline at end of file diff --git a/templates/project/widgets/number/number.coffee b/templates/project/widgets/number/number.coffee index 78e7523..46cd6c2 100644 --- a/templates/project/widgets/number/number.coffee +++ b/templates/project/widgets/number/number.coffee @@ -8,17 +8,13 @@ class Dashing.Number extends Dashing.Widget if last != 0 diff = Math.abs(Math.round((current - last) / last * 100)) "#{diff}%" + else + "" @accessor 'arrow', -> if @get('last') if parseInt(@get('current')) > parseInt(@get('last')) then 'icon-arrow-up' else 'icon-arrow-down' - @accessor 'statusStyle', -> - "status-#{@get('status')}" - - @accessor 'needsAttention', -> - @get('status') == 'warning' || @get('status') == 'danger' - onData: (data) -> if data.status $(@get('node')).addClass("status-#{data.status}") \ No newline at end of file diff --git a/templates/project/widgets/number/number.html b/templates/project/widgets/number/number.html index 6e9a03e..d7eeab9 100644 --- a/templates/project/widgets/number/number.html +++ b/templates/project/widgets/number/number.html @@ -1,9 +1,11 @@ -

+

-

+

- 50% +

-

2012-07-26 10:59AM

\ No newline at end of file +

+ +

diff --git a/templates/project/widgets/number/number.scss b/templates/project/widgets/number/number.scss index d134561..608624b 100644 --- a/templates/project/widgets/number/number.scss +++ b/templates/project/widgets/number/number.scss @@ -1,11 +1,11 @@ // ---------------------------------------------------------------------------- // Sass declarations // ---------------------------------------------------------------------------- -$background-color: #00b1a4; +$background-color: #47bbb3; $value-color: #fff; -$title-color: lighten($background-color, 75%); -$moreinfo-color: lighten($background-color, 45%); +$title-color: rgba(255, 255, 255, 0.7);; +$moreinfo-color: rgba(255, 255, 255, 0.7);; // ---------------------------------------------------------------------------- // Widget-number styles @@ -23,13 +23,17 @@ $moreinfo-color: lighten($background-color, 45%); } .change-rate { - font-weight: 300; + font-weight: 500; font-size: 30px; color: $value-color; } - .text-moreinfo { + .more-info { color: $moreinfo-color; } + + .updated-at { + color: rgba(0, 0, 0, 0.3); + } } \ No newline at end of file diff --git a/templates/project/widgets/text/text.html b/templates/project/widgets/text/text.html index 02bd0f7..45322ca 100644 --- a/templates/project/widgets/text/text.html +++ b/templates/project/widgets/text/text.html @@ -1,5 +1,7 @@

-

+

-

2012-07-26 10:59AM

\ No newline at end of file +

+ +

\ No newline at end of file diff --git a/templates/project/widgets/text/text.scss b/templates/project/widgets/text/text.scss index 4293602..4e6c6e3 100644 --- a/templates/project/widgets/text/text.scss +++ b/templates/project/widgets/text/text.scss @@ -1,11 +1,10 @@ // ---------------------------------------------------------------------------- // Sass declarations // ---------------------------------------------------------------------------- -$background-color: #ec663c;; -$value-color: #fff; +$background-color: #ec663c; -$title-color: lighten($background-color, 40%); -$moreinfo-color: lighten($background-color, 30%); +$title-color: rgba(255, 255, 255, 0.7); +$moreinfo-color: rgba(255, 255, 255, 0.7); // ---------------------------------------------------------------------------- // Widget-text styles @@ -18,8 +17,16 @@ $moreinfo-color: lighten($background-color, 30%); color: $title-color; } - .text-moreinfo { + .more-info { color: $moreinfo-color; } + + .updated-at { + color: rgba(255, 255, 255, 0.7); + } + + &.large h3 { + font-size: 65px; + } } \ No newline at end of file -- cgit v1.2.3