diff options
Diffstat (limited to 'widgets')
39 files changed, 884 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; +} diff --git a/widgets/clock/clock.coffee b/widgets/clock/clock.coffee new file mode 100644 index 0000000..cd6b116 --- /dev/null +++ b/widgets/clock/clock.coffee @@ -0,0 +1,18 @@ +class Dashing.Clock extends Dashing.Widget + + ready: -> + setInterval(@startTime, 500) + + startTime: => + today = new Date() + + h = today.getHours() + m = today.getMinutes() + s = today.getSeconds() + m = @formatTime(m) + s = @formatTime(s) + @set('time', h + ":" + m + ":" + s) + @set('date', today.toDateString()) + + formatTime: (i) -> + if i < 10 then "0" + i else i
\ No newline at end of file diff --git a/widgets/clock/clock.html b/widgets/clock/clock.html new file mode 100644 index 0000000..06759d4 --- /dev/null +++ b/widgets/clock/clock.html @@ -0,0 +1,2 @@ +<h1 data-bind="date"></h1> +<h2 data-bind="time"></h2>
\ No newline at end of file diff --git a/widgets/clock/clock.scss b/widgets/clock/clock.scss new file mode 100644 index 0000000..19e91bf --- /dev/null +++ b/widgets/clock/clock.scss @@ -0,0 +1,13 @@ +// ---------------------------------------------------------------------------- +// Sass declarations +// ---------------------------------------------------------------------------- +$background-color: #dc5945; + +// ---------------------------------------------------------------------------- +// Widget-clock styles +// ---------------------------------------------------------------------------- +.widget-clock { + + background-color: $background-color; + +} diff --git a/widgets/comments/comments.coffee b/widgets/comments/comments.coffee new file mode 100644 index 0000000..ff659ec --- /dev/null +++ b/widgets/comments/comments.coffee @@ -0,0 +1,24 @@ +class Dashing.Comments extends Dashing.Widget + + @accessor 'quote', -> + "“#{@get('current_comment')?.body}”" + + ready: -> + @currentIndex = 0 + @commentElem = $(@node).find('.comment-container') + @nextComment() + @startCarousel() + + onData: (data) -> + @currentIndex = 0 + + startCarousel: -> + setInterval(@nextComment, 8000) + + nextComment: => + comments = @get('comments') + if comments + @commentElem.fadeOut => + @currentIndex = (@currentIndex + 1) % comments.length + @set 'current_comment', comments[@currentIndex] + @commentElem.fadeIn() diff --git a/widgets/comments/comments.html b/widgets/comments/comments.html new file mode 100644 index 0000000..7c580be --- /dev/null +++ b/widgets/comments/comments.html @@ -0,0 +1,7 @@ +<h1 class="title" data-bind="title"></h1> +<div class="comment-container"> + <h3><img data-bind-src='current_comment.avatar'/><span data-bind='current_comment.name' class="name"></span></h3> + <p class="comment" data-bind='quote'></p> +</div> + +<p class="more-info" data-bind="moreinfo"></p> diff --git a/widgets/comments/comments.scss b/widgets/comments/comments.scss new file mode 100644 index 0000000..2ace30e --- /dev/null +++ b/widgets/comments/comments.scss @@ -0,0 +1,33 @@ +// ---------------------------------------------------------------------------- +// Sass declarations +// ---------------------------------------------------------------------------- +$background-color: #eb9c3c; + +$title-color: rgba(255, 255, 255, 0.7); +$moreinfo-color: rgba(255, 255, 255, 0.7); + +// ---------------------------------------------------------------------------- +// Widget-comment styles +// ---------------------------------------------------------------------------- +.widget-comments { + + background-color: $background-color; + + .title { + color: $title-color; + margin-bottom: 15px; + } + + .name { + padding-left: 5px; + } + + .comment-container { + display: none; + } + + .more-info { + color: $moreinfo-color; + } + +} diff --git a/widgets/github_pr/github_pr.coffee b/widgets/github_pr/github_pr.coffee new file mode 100644 index 0000000..43f4fc4 --- /dev/null +++ b/widgets/github_pr/github_pr.coffee @@ -0,0 +1,6 @@ +class Dashing.Github_pr extends Dashing.Widget + ready: -> + if @get('unordered') + $(@node).find('ol').remove() + else + $(@node).find('ul').remove() diff --git a/widgets/github_pr/github_pr.html b/widgets/github_pr/github_pr.html new file mode 100644 index 0000000..5d4d8d8 --- /dev/null +++ b/widgets/github_pr/github_pr.html @@ -0,0 +1,10 @@ +<h1 class="title" data-bind="title"></h1> + +<ul class="github_pr-nostyle"> + <li data-foreach-item="items"> + <a class="label-link" data-bind="item.label | truncate 30" data-bind-href="item.pr_url" target="_blank"></a> + </li> +</ul> + +<p class="more-info" data-bind="moreinfo"></p> +<p class="updated-at" data-bind="updatedAtMessage"></p> diff --git a/widgets/github_pr/github_pr.scss b/widgets/github_pr/github_pr.scss new file mode 100644 index 0000000..e4ad010 --- /dev/null +++ b/widgets/github_pr/github_pr.scss @@ -0,0 +1,57 @@ +// ---------------------------------------------------------------------------- +// Sass declarations +// ---------------------------------------------------------------------------- +$background-color: #178CA6; +$value-color: #fff; + +$title-color: #fff; +$label-color: rgba(255, 255, 255, 0.7); +$moreinfo-color: rgba(255, 255, 255, 0.7); + +// ---------------------------------------------------------------------------- +// Widget-github_pr styles +// ---------------------------------------------------------------------------- +.widget-github-pr { + + background-color: $background-color; + vertical-align: top; + + .title { + color: $title-color; + } + + ol, ul { + margin: 0 15px; + text-align: left; + color: $label-color; + } + + ol { + list-style-position: inside; + } + + li { + margin-bottom: 5px; + } + + .github_pr-nostyle { + list-style: none; + } + + .label-link { + color: $value-color; + + &:hover { + color: rgba(255, 255, 255, 0.7); + } + } + + .updated-at { + color: rgba(0, 0, 0, 0.3); + } + + .more-info { + color: $moreinfo-color; + } + +} diff --git a/widgets/graph/graph.coffee b/widgets/graph/graph.coffee new file mode 100644 index 0000000..a54de08 --- /dev/null +++ b/widgets/graph/graph.coffee @@ -0,0 +1,36 @@ +class Dashing.Graph extends Dashing.Widget + + @accessor 'current', -> + return @get('displayedValue') if @get('displayedValue') + points = @get('points') + if points + points[points.length - 1].y + + ready: -> + container = $(@node).parent() + # Gross hacks. Let's fix this. + width = (Dashing.widget_base_dimensions[0] * container.data("sizex")) + Dashing.widget_margins[0] * 2 * (container.data("sizex") - 1) + height = (Dashing.widget_base_dimensions[1] * container.data("sizey")) + @graph = new Rickshaw.Graph( + element: @node + width: width + height: height + renderer: @get("graphtype") + series: [ + { + color: "#fff", + data: [{x:0, y:0}] + } + ] + ) + + @graph.series[0].data = @get('points') if @get('points') + + x_axis = new Rickshaw.Graph.Axis.X(graph: @graph) + y_axis = new Rickshaw.Graph.Axis.Y(graph: @graph, tickFormat: Rickshaw.Fixtures.Number.formatKMBT) + @graph.render() + + onData: (data) -> + if @graph + @graph.series[0].data = data.points + @graph.render() diff --git a/widgets/graph/graph.html b/widgets/graph/graph.html new file mode 100644 index 0000000..456dd0f --- /dev/null +++ b/widgets/graph/graph.html @@ -0,0 +1,5 @@ +<h1 class="title" data-bind="title"></h1> + +<h2 class="value" data-bind="current | prettyNumber | prepend prefix"></h2> + +<p class="more-info" data-bind="moreinfo"></p> diff --git a/widgets/graph/graph.scss b/widgets/graph/graph.scss new file mode 100644 index 0000000..d1d7534 --- /dev/null +++ b/widgets/graph/graph.scss @@ -0,0 +1,65 @@ +// ---------------------------------------------------------------------------- +// Sass declarations +// ---------------------------------------------------------------------------- +$background-color: #178CA6; + +$title-color: rgba(255, 255, 255, 0.7); +$moreinfo-color: rgba(255, 255, 255, 0.3); +$tick-color: rgba(0, 0, 0, 0.4); + + +// ---------------------------------------------------------------------------- +// Widget-graph styles +// ---------------------------------------------------------------------------- +.widget-graph { + + background-color: $background-color; + position: relative; + + + svg { + position: absolute; + opacity: 0.4; + fill-opacity: 0.4; + left: 0px; + top: 0px; + } + + .title, .value { + position: relative; + z-index: 99; + } + + .title { + color: $title-color; + } + + .more-info { + color: $moreinfo-color; + font-weight: 600; + font-size: 20px; + margin-top: 0; + } + + .x_tick { + position: absolute; + bottom: 0; + .title { + font-size: 20px; + color: $tick-color; + opacity: 0.5; + padding-bottom: 3px; + } + } + + .y_ticks { + font-size: 20px; + fill: $tick-color; + fill-opacity: 1; + } + + .domain { + display: none; + } + +} diff --git a/widgets/iframe/iframe.coffee b/widgets/iframe/iframe.coffee new file mode 100644 index 0000000..e674e6b --- /dev/null +++ b/widgets/iframe/iframe.coffee @@ -0,0 +1,7 @@ +class Dashing.Iframe extends Dashing.Widget + +ready: -> + $(@node).find(".iframe").attr('src', @get('src')) + +onData: (data) -> + $(@node).find(".iframe").attr('src', data.src) diff --git a/widgets/iframe/iframe.html b/widgets/iframe/iframe.html new file mode 100644 index 0000000..c626d10 --- /dev/null +++ b/widgets/iframe/iframe.html @@ -0,0 +1 @@ +<iframe class="iframe" data-bind-src="src" frameborder=0></iframe> diff --git a/widgets/iframe/iframe.scss b/widgets/iframe/iframe.scss new file mode 100644 index 0000000..6827a1b --- /dev/null +++ b/widgets/iframe/iframe.scss @@ -0,0 +1,8 @@ +.widget-iframe { + padding: 3px 0px 0px 0px !important; + + iframe { + width: 100%; + height: 100%; + } +} diff --git a/widgets/image/image.coffee b/widgets/image/image.coffee new file mode 100644 index 0000000..c3892c0 --- /dev/null +++ b/widgets/image/image.coffee @@ -0,0 +1,9 @@ +class Dashing.Image extends Dashing.Widget + + ready: -> + # This is fired when the widget is done being rendered + + onData: (data) -> + # Handle incoming data + # You can access the html node of this widget with `@node` + # Example: $(@node).fadeOut().fadeIn() will make the node flash each time data comes in. diff --git a/widgets/image/image.html b/widgets/image/image.html new file mode 100644 index 0000000..41a88eb --- /dev/null +++ b/widgets/image/image.html @@ -0,0 +1 @@ +<img data-bind-src="image | prepend '/assets'" data-bind-width="width"/> diff --git a/widgets/image/image.scss b/widgets/image/image.scss new file mode 100644 index 0000000..0b1a316 --- /dev/null +++ b/widgets/image/image.scss @@ -0,0 +1,13 @@ +// ---------------------------------------------------------------------------- +// Sass declarations +// ---------------------------------------------------------------------------- +$background-color: #4b4b4b; + +// ---------------------------------------------------------------------------- +// Widget-image styles +// ---------------------------------------------------------------------------- +.widget-image { + + background-color: $background-color; + +} diff --git a/widgets/jenkins_build_status/jenkins_build_status.coffee b/widgets/jenkins_build_status/jenkins_build_status.coffee new file mode 100644 index 0000000..d7d8630 --- /dev/null +++ b/widgets/jenkins_build_status/jenkins_build_status.coffee @@ -0,0 +1,28 @@ +class Dashing.JenkinsBuildStatus extends Dashing.Widget + + lastPlayed: 0 + timeBetweenSounds: 300000 + + onData: (data) -> + if data.failed + $(@node).find('div.build-failed').show() + $(@node).find('div.build-succeeded').hide() + $(@node).css("background-color", "red") + + if 'speechSynthesis' of window + @playSoundForUser data.failedJobs[0].value if Date.now() - @lastPlayed > @timeBetweenSounds + else + $(@node).find('div.build-failed').hide() + $(@node).find('div.build-succeeded').show() + $(@node).css("background-color", "#12b0c5") + + playSoundForUser: (user) -> + @lastPlayed = Date.now() + texts = ["#{user} has broken the build.", "The build is broken by #{user}", "#{user} is great, but lacks some programming skills", "Oops, I did it again."] + textNr = Math.floor((Math.random() * texts.length)); + @playSound texts[textNr] + + playSound: (text) -> + msg = new SpeechSynthesisUtterance(text) + msg.voice = speechSynthesis.getVoices()[0] + speechSynthesis.speak msg
\ No newline at end of file diff --git a/widgets/jenkins_build_status/jenkins_build_status.html b/widgets/jenkins_build_status/jenkins_build_status.html new file mode 100644 index 0000000..472bc73 --- /dev/null +++ b/widgets/jenkins_build_status/jenkins_build_status.html @@ -0,0 +1,16 @@ +<div class="build-failed"> + <h1 class="jenkins-status"><span data-bind="title"></span> FAILED</h1> + <ul class="list-nostyle list-failed"> + <li data-foreach-item="failedJobs"> + <div class="label" data-bind="item.label"></div> + <div class="value" data-bind="item.value"></div> + </li> + </ul> +</div> + +<div class="build-succeeded"> + <h1 class="jenkins-status">All <span data-bind="title"></span> builds are successful</h1> + <i class="fa fa-thumbs-o-up"></i> +</div> + +<p class="updated-at" data-bind="updatedAtMessage"></p> diff --git a/widgets/jenkins_build_status/jenkins_build_status.scss b/widgets/jenkins_build_status/jenkins_build_status.scss new file mode 100644 index 0000000..5e1eff1 --- /dev/null +++ b/widgets/jenkins_build_status/jenkins_build_status.scss @@ -0,0 +1,56 @@ +// ---------------------------------------------------------------------------- +// Sass declarations +// ---------------------------------------------------------------------------- +$background-color: #ec663c; +$title-color: rgba(255, 255, 255, 0.7); +$label-color: rgba(255, 255, 255, 0.7); +$value-color: #fff; + +// ---------------------------------------------------------------------------- +// Widget-text styles +// ---------------------------------------------------------------------------- +.widget-jenkins-build-status { + + background-color: $background-color; + + .title { + color: $title-color; + } + .updated-at { + color: rgba(255, 255, 255, 0.7); + } + + ol, ul { + margin: 0 15px; + text-align: left; + color: $label-color; + } + + li { + margin-bottom: 5px; + font-size: 40px; + } + + .label { + color: $label-color; + } + + .value { + margin-left: 12px; + font-weight: 600; + color: $value-color; + } + + .updated-at { + color: rgba(0, 0, 0, 0.3); + } + + .build-failed { + display: none; + } + + .fa { + font-size: 10em; + color: $label-color; + } +} diff --git a/widgets/list/list.coffee b/widgets/list/list.coffee new file mode 100644 index 0000000..0028073 --- /dev/null +++ b/widgets/list/list.coffee @@ -0,0 +1,6 @@ +class Dashing.List extends Dashing.Widget + ready: -> + if @get('unordered') + $(@node).find('ol').remove() + else + $(@node).find('ul').remove() diff --git a/widgets/list/list.html b/widgets/list/list.html new file mode 100644 index 0000000..07e0471 --- /dev/null +++ b/widgets/list/list.html @@ -0,0 +1,18 @@ +<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> + +<p class="more-info" data-bind="moreinfo"></p> +<p class="updated-at" data-bind="updatedAtMessage"></p> diff --git a/widgets/list/list.scss b/widgets/list/list.scss new file mode 100644 index 0000000..1d2bdb0 --- /dev/null +++ b/widgets/list/list.scss @@ -0,0 +1,60 @@ +// ---------------------------------------------------------------------------- +// Sass declarations +// ---------------------------------------------------------------------------- +$background-color: #178CA6; +$value-color: #fff; + +$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 +// ---------------------------------------------------------------------------- +.widget-list { + + background-color: $background-color; + vertical-align: top; + + .title { + color: $title-color; + } + + ol, ul { + margin: 0 15px; + text-align: left; + color: $label-color; + } + + ol { + list-style-position: inside; + } + + li { + margin-bottom: 5px; + } + + .list-nostyle { + list-style: none; + } + + .label { + color: $label-color; + } + + .value { + float: right; + margin-left: 12px; + font-weight: 600; + color: $value-color; + } + + .updated-at { + color: rgba(0, 0, 0, 0.3); + } + + .more-info { + color: $moreinfo-color; + } + +} diff --git a/widgets/meter/meter.coffee b/widgets/meter/meter.coffee new file mode 100644 index 0000000..b7b3aa8 --- /dev/null +++ b/widgets/meter/meter.coffee @@ -0,0 +1,16 @@ +class Dashing.Meter extends Dashing.Widget + + @accessor 'value', Dashing.AnimatedValue + + constructor: -> + super + @observe 'max', (max) -> + $(@node).find(".meter").trigger('configure', {'max': max}) + @observe 'min', (min) -> + $(@node).find(".meter").trigger('configure', {'min': min}) + + ready: -> + meter = $(@node).find(".meter") + meter.attr("data-bgcolor", meter.css("background-color")) + meter.attr("data-fgcolor", meter.css("color")) + meter.knob() diff --git a/widgets/meter/meter.html b/widgets/meter/meter.html new file mode 100644 index 0000000..16f1f06 --- /dev/null +++ b/widgets/meter/meter.html @@ -0,0 +1,7 @@ +<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 | shortenedNumber" data-bind-data-min="min" data-bind-data-max="max"> + +<p class="more-info" data-bind="moreinfo"></p> + +<p class="updated-at" data-bind="updatedAtMessage"></p> diff --git a/widgets/meter/meter.scss b/widgets/meter/meter.scss new file mode 100644 index 0000000..da9ff0b --- /dev/null +++ b/widgets/meter/meter.scss @@ -0,0 +1,35 @@ +// ---------------------------------------------------------------------------- +// Sass declarations +// ---------------------------------------------------------------------------- +$background-color: #9c4274; + +$title-color: rgba(255, 255, 255, 0.7); +$moreinfo-color: rgba(255, 255, 255, 0.3); + +$meter-background: darken($background-color, 15%); + +// ---------------------------------------------------------------------------- +// Widget-meter styles +// ---------------------------------------------------------------------------- +.widget-meter { + + background-color: $background-color; + + input.meter { + background-color: $meter-background; + color: #fff; + } + + .title { + color: $title-color; + } + + .more-info { + color: $moreinfo-color; + } + + .updated-at { + color: rgba(0, 0, 0, 0.3); + } + +} diff --git a/widgets/nagios/nagios.coffee b/widgets/nagios/nagios.coffee new file mode 100644 index 0000000..72f47e5 --- /dev/null +++ b/widgets/nagios/nagios.coffee @@ -0,0 +1,9 @@ +class Dashing.Nagios extends Dashing.Widget + + ready: -> + # This is fired when the widget is done being rendered + + onData: (data) -> + # Handle incoming data + # You can access the html node of this widget with `@node` + # Example: $(@node).fadeOut().fadeIn() will make the node flash each time data comes in.
\ No newline at end of file diff --git a/widgets/nagios/nagios.html b/widgets/nagios/nagios.html new file mode 100644 index 0000000..cbc4e43 --- /dev/null +++ b/widgets/nagios/nagios.html @@ -0,0 +1,42 @@ +<ul> +<li data-bind-class="status"> + +<a class="title-link" data-bind-href="nagios_url" target="_blank" data-bind="title"></a> + +<div data-showif="status | equals 'error'"> <!-- error --> + <h4>Error querying Nagios</h4> +</div> <!-- /no error --> +<div data-hideif="status | equals 'error'"> <!-- no error --> +<div data-hideif="criticals | equals 0"> +<h4 data-bind="criticals"></h4> +<h4 data-showif="criticals | equals 1">critical</h4> +<h4 data-hideif="criticals | equals 1">criticals</h4> +</div> +<ul> + <li class="alert" data-foreach-item="critical_services"> + <p class="widget-content" data-bind="item"></p> + </li> +</ul> +<div data-hideif="warnings | equals 0"> +<h4 data-bind="warnings"></h3> +<h4 data-showif="warnings | equals 1">warning</h4> +<h4 data-hideif="warnings | equals 1">warnings</h4> +</div> +<ul> + <li class="alert" data-foreach-item="warning_services"> + <p class="widget-content" data-bind="item"></p> + </li> +</ul> +<div data-hideif="unknown | equals 0"> +<h4 data-bind="unknown"></h3> +<h4>unkown</h4> +</div> +<ul> + <li class="alert" data-foreach-item="unknown_services"> + <p class="widget-content" data-bind="item"></p> + </li> +</ul> +<p class="updated-at" data-bind="updatedAtMessage"></p> +</div> <!-- /no error --> +</li> +</ul> diff --git a/widgets/nagios/nagios.scss b/widgets/nagios/nagios.scss new file mode 100644 index 0000000..26e57cf --- /dev/null +++ b/widgets/nagios/nagios.scss @@ -0,0 +1,102 @@ +$background: #444; +$text: #fff; +$success: #50BA5B; +$warning: #F6A41C; +$failure: #D93C38; +$neutral: #888; + +$error: #000; + +.widget-nagios { + li { + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + padding-top: 25px; + + .alert { + position: relative; + padding: 2px 0 0 0; + } + + .title-link { + font-size: 30px; + + &:hover { + color: rgba(255, 255, 255, 0.7); + } + } + + h3 { + font-size: 60px; + font-weight: bold; + } + + h4 { + font-size: 20px; + font-weight: bold; + text-transform: uppercase; + display: inline; + } + + p { + &.widget-content { + text-align: left; + margin-left: 20px; + font-size: 16px; + } + } + + &.green { + background-color: $success; + + p { + &.updated-at { + color: lighten($success, 20%); + } + } + } + + &.yellow { + background-color: $warning; + + p { + &.updated-at { + color: lighten($warning, 20%); + } + } + } + + &.red { + background-color: $failure; + + p { + &.updated-at { + color: lighten($failure, 20%); + } + } + } + + &.gray { + background-color: $neutral; + + p { + &.updated-at { + color: lighten($neutral, 20%); + } + } + } + + &.error { + background-color: $error; + + p { + &.updated-at { + color: lighten($error, 20%); + } + } + } + } +} diff --git a/widgets/number/number.coffee b/widgets/number/number.coffee new file mode 100644 index 0000000..645ee7f --- /dev/null +++ b/widgets/number/number.coffee @@ -0,0 +1,24 @@ +class Dashing.Number extends Dashing.Widget + @accessor 'current', Dashing.AnimatedValue + + @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}%" + else + "" + + @accessor 'arrow', -> + if @get('last') + if parseInt(@get('current')) > parseInt(@get('last')) then 'icon-arrow-up' else 'icon-arrow-down' + + onData: (data) -> + if data.status + # clear existing "status-*" classes + $(@get('node')).attr 'class', (i,c) -> + c.replace /\bstatus-\S+/g, '' + # add new class + $(@get('node')).addClass "status-#{data.status}" diff --git a/widgets/number/number.html b/widgets/number/number.html new file mode 100644 index 0000000..c82e5f4 --- /dev/null +++ b/widgets/number/number.html @@ -0,0 +1,11 @@ +<h1 class="title" data-bind="title"></h1> + +<h2 class="value" data-bind="current | shortenedNumber | prepend prefix | append suffix"></h2> + +<p class="change-rate"> + <i data-bind-class="arrow"></i><span data-bind="difference"></span> +</p> + +<p class="more-info" data-bind="moreinfo"></p> + +<p class="updated-at" data-bind="updatedAtMessage"></p> diff --git a/widgets/number/number.scss b/widgets/number/number.scss new file mode 100644 index 0000000..9e36c5a --- /dev/null +++ b/widgets/number/number.scss @@ -0,0 +1,39 @@ +// ---------------------------------------------------------------------------- +// Sass declarations +// ---------------------------------------------------------------------------- +$background-color: #178CA6; +$value-color: #fff; + +$title-color: rgba(255, 255, 255, 0.7); +$moreinfo-color: rgba(255, 255, 255, 0.7); + +// ---------------------------------------------------------------------------- +// Widget-number styles +// ---------------------------------------------------------------------------- +.widget-number { + + background-color: $background-color; + + .title { + color: $title-color; + } + + .value { + color: $value-color; + } + + .change-rate { + font-weight: 500; + font-size: 30px; + color: $value-color; + } + + .more-info { + color: $moreinfo-color; + } + + .updated-at { + color: rgba(0, 0, 0, 0.3); + } + +} diff --git a/widgets/text/text.coffee b/widgets/text/text.coffee new file mode 100644 index 0000000..1741d8b --- /dev/null +++ b/widgets/text/text.coffee @@ -0,0 +1 @@ +class Dashing.Text extends Dashing.Widget diff --git a/widgets/text/text.html b/widgets/text/text.html new file mode 100644 index 0000000..decd109 --- /dev/null +++ b/widgets/text/text.html @@ -0,0 +1,7 @@ +<h1 class="title" data-bind="title"></h1> + +<h3 data-bind="text"></h3> + +<p class="more-info" data-bind="moreinfo"></p> + +<p class="updated-at" data-bind="updatedAtMessage"></p> diff --git a/widgets/text/text.scss b/widgets/text/text.scss new file mode 100644 index 0000000..45d790e --- /dev/null +++ b/widgets/text/text.scss @@ -0,0 +1,32 @@ +// ---------------------------------------------------------------------------- +// Sass declarations +// ---------------------------------------------------------------------------- +$background-color: #ec663c; + +$title-color: rgba(255, 255, 255, 0.7); +$moreinfo-color: rgba(255, 255, 255, 0.7); + +// ---------------------------------------------------------------------------- +// Widget-text styles +// ---------------------------------------------------------------------------- +.widget-text { + + background-color: $background-color; + + .title { + color: $title-color; + } + + .more-info { + color: $moreinfo-color; + } + + .updated-at { + color: rgba(255, 255, 255, 0.7); + } + + + &.large h3 { + font-size: 65px; + } +} |