diff options
Diffstat (limited to 'templates/project/widgets')
19 files changed, 293 insertions, 7 deletions
diff --git a/templates/project/widgets/.empty_directory b/templates/project/widgets/.empty_directory deleted file mode 100644 index 3da7f49..0000000 --- a/templates/project/widgets/.empty_directory +++ /dev/null @@ -1 +0,0 @@ -.empty_directory
\ No newline at end of file diff --git a/templates/project/widgets/list/list.coffee b/templates/project/widgets/list/list.coffee new file mode 100644 index 0000000..6b1cc50 --- /dev/null +++ b/templates/project/widgets/list/list.coffee @@ -0,0 +1,15 @@ +class AllTheThings.List extends AllTheThings.Widget + source: 'list' + + @accessor 'current', Batman.Property.EasingSetter + + @accessor 'arrow', -> + if @get('last') + if parseInt(@get('current')) > parseInt(@get('last')) then 'arrow-up' else 'arrow-down' + + ready: -> + Batman.setImmediate => + if @get('unordered') + $(@node).find('ol').remove() + else + $(@node).find('ul').remove()
\ No newline at end of file diff --git a/templates/project/widgets/list/list.html b/templates/project/widgets/list/list.html new file mode 100644 index 0000000..cc90d42 --- /dev/null +++ b/templates/project/widgets/list/list.html @@ -0,0 +1,15 @@ +<h1 class="title" data-bind="title"></h1> + +<ol> + <li data-foreach-item="items"> + <span class="label" data-bind="item.label"></span> + <span class="value" data-bind="item.value"></span> + </li> +</ol> + +<ul class="list-nostyle"> + <li data-foreach-item="items"> + <span class="label" data-bind="item.label"></span> + <span class="value" data-bind="item.value"></span> + </li> +</ul>
\ No newline at end of file diff --git a/templates/project/widgets/list/list.scss b/templates/project/widgets/list/list.scss new file mode 100644 index 0000000..248cef8 --- /dev/null +++ b/templates/project/widgets/list/list.scss @@ -0,0 +1,50 @@ +// ---------------------------------------------------------------------------- +// 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%); + +// ---------------------------------------------------------------------------- +// Widget-list styles +// ---------------------------------------------------------------------------- +.widget-list { + + background-color: $widget-list_background-color; + + .title { + color: $widget-list_title-color; + } + + ol, ul { + margin: 0 15px; + text-align: left; + color: $widget-list_label-color; + } + + ol { + list-style-position: inside; + } + + li { + margin-bottom: 5px; + } + + .list-nostyle { + list-style: none; + } + + .label { + color: $widget-list_label-color; + } + + .value { + float: right; + margin-left: 12px; + font-weight: 600; + color: $widget-list_value-color; + } + +}
\ No newline at end of file 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 diff --git a/templates/project/widgets/number/number.coffee b/templates/project/widgets/number/number.coffee new file mode 100644 index 0000000..aa7cf8b --- /dev/null +++ b/templates/project/widgets/number/number.coffee @@ -0,0 +1,29 @@ +class AllTheThings.Number extends AllTheThings.Widget + source: 'number' + + @accessor 'current', Batman.Property.EasingSetter + + ready: -> + + @accessor 'difference', -> + if @get('last') + last = parseInt(@get('last')) + current = parseInt(@get('current')) + if last != 0 + diff = Math.abs(Math.round((current - last) / last * 100)) + "#{diff}%" + + @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) -> + super + 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 new file mode 100644 index 0000000..6e9a03e --- /dev/null +++ b/templates/project/widgets/number/number.html @@ -0,0 +1,9 @@ +<h1 class="title"><i data-showif="needsAttention" class="icon-warning-sign"></i><span data-bind="title"></span></h1> + +<h2 class="value" data-bind="current | prettyNumber"></h2> + +<p class="change-rate"> + <i data-bind-class="arrow"></i><span data-bind="difference">50%</span> +</p> + +<p class="text-moreinfo" data-bind="moreinfo">2012-07-26 10:59AM</p>
\ No newline at end of file diff --git a/templates/project/widgets/number/number.scss b/templates/project/widgets/number/number.scss new file mode 100644 index 0000000..6ae7f95 --- /dev/null +++ b/templates/project/widgets/number/number.scss @@ -0,0 +1,35 @@ +// ---------------------------------------------------------------------------- +// Sass declarations +// ---------------------------------------------------------------------------- +$widget-number_background-color: #00b1a4; +$widget-number_value-color: #fff; + +$widget-number_title-color: lighten($widget-number_background-color, 45%); +$widget-number_moreinfo-color: lighten($widget-number_background-color, 45%); + +// ---------------------------------------------------------------------------- +// Widget-number styles +// ---------------------------------------------------------------------------- +.widget-number { + + background-color: $widget-number_background-color; + + .title { + color: $widget-number_title-color; + } + + .value { + color: $widget-number_value-color; + } + + .change-rate { + font-weight: 300; + font-size: 30px; + color: $widget-number_value-color; + } + + .text-moreinfo { + color: $widget-number_moreinfo-color; + } + +}
\ No newline at end of file diff --git a/templates/project/widgets/table/table.coffee b/templates/project/widgets/table/table.coffee new file mode 100644 index 0000000..5735316 --- /dev/null +++ b/templates/project/widgets/table/table.coffee @@ -0,0 +1,2 @@ +class AllTheThings.Table extends AllTheThings.Widget + source: 'table'
\ No newline at end of file diff --git a/templates/project/widgets/table/table.html b/templates/project/widgets/table/table.html new file mode 100644 index 0000000..e5aeb99 --- /dev/null +++ b/templates/project/widgets/table/table.html @@ -0,0 +1,8 @@ +<h1 class="title" data-bind="title"></h1> + +<table> + <tr data-foreach-item="items"> + <td class="label" data-bind="item.label"></td> + <td class="value" data-bind="item.value | shortenedNumber"></td> + </tr> +</table>
\ No newline at end of file diff --git a/templates/project/widgets/table/table.scss b/templates/project/widgets/table/table.scss new file mode 100644 index 0000000..0d38164 --- /dev/null +++ b/templates/project/widgets/table/table.scss @@ -0,0 +1,42 @@ +// ---------------------------------------------------------------------------- +// Sass declarations +// ---------------------------------------------------------------------------- +$widget-table_background-color: #82b53d; +$widget-table_value-color: #fff; + +$widget-table_title-color: lighten($widget-table_background-color, 45%); +$widget-table_label-color: lighten($widget-table_background-color, 45%); + +// ---------------------------------------------------------------------------- +// Widget-table styles +// ---------------------------------------------------------------------------- +.widget-table { + + background-color: $widget-table_background-color; + + th { + font-weight: 400; + font-size: 16px; + } + + td.label { + vertical-align: middle; + text-align: left; + font-size: 23px; + } + + .title { + color: $widget-table_title-color; + } + + .label { + color: $widget-table_label-color; + } + + .value { + font-weight: 700; + font-size: 54px; + color: $widget-table_value-color; + } + +}
\ No newline at end of file diff --git a/templates/project/widgets/text/text.coffee b/templates/project/widgets/text/text.coffee new file mode 100644 index 0000000..754644e --- /dev/null +++ b/templates/project/widgets/text/text.coffee @@ -0,0 +1,2 @@ +class AllTheThings.Text extends AllTheThings.Widget + source: 'text'
\ No newline at end of file diff --git a/templates/project/widgets/text/text.html b/templates/project/widgets/text/text.html new file mode 100644 index 0000000..02bd0f7 --- /dev/null +++ b/templates/project/widgets/text/text.html @@ -0,0 +1,5 @@ +<h1 class="title" data-bind="title"></h1> + +<h3 data-bind="text"></h3> + +<p class="text-moreinfo" data-bind="moreinfo">2012-07-26 10:59AM</p>
\ No newline at end of file diff --git a/templates/project/widgets/text/text.scss b/templates/project/widgets/text/text.scss new file mode 100644 index 0000000..591c32e --- /dev/null +++ b/templates/project/widgets/text/text.scss @@ -0,0 +1,25 @@ +// ---------------------------------------------------------------------------- +// Sass declarations +// ---------------------------------------------------------------------------- +$widget-text_background-color: #ec663c; +$widget-text_value-color: #fff; + +$widget-text_title-color: lighten($widget-text_background-color, 30%); +$widget-text_moreinfo-color: lighten($widget-text_background-color, 30%); + +// ---------------------------------------------------------------------------- +// Widget-text styles +// ---------------------------------------------------------------------------- +.widget-text { + + background-color: $widget-text_background-color; + + .title { + color: $widget-text_title-color; + } + + .text-moreinfo { + color: $widget-text_moreinfo-color; + } + +}
\ No newline at end of file diff --git a/templates/project/widgets/widget_sample/widget_sample.coffee b/templates/project/widgets/widget_sample/widget_sample.coffee deleted file mode 100644 index a1458df..0000000 --- a/templates/project/widgets/widget_sample/widget_sample.coffee +++ /dev/null @@ -1,2 +0,0 @@ -class AllTheThings.WidgetSample extends AllTheThings.Widget - source: 'widget_sample'
\ No newline at end of file diff --git a/templates/project/widgets/widget_sample/widget_sample.html b/templates/project/widgets/widget_sample/widget_sample.html deleted file mode 100644 index eea0f1c..0000000 --- a/templates/project/widgets/widget_sample/widget_sample.html +++ /dev/null @@ -1,4 +0,0 @@ -<p>w00t! w00t! You've setup your first dashboard!</p> -<p>To celebrate, enjoy some of these fun Batman quotes!</p> -<span data-bind="quote"></span> - diff --git a/templates/project/widgets/widget_sample/widget_sample.scss b/templates/project/widgets/widget_sample/widget_sample.scss deleted file mode 100644 index e69de29..0000000 --- a/templates/project/widgets/widget_sample/widget_sample.scss +++ /dev/null |