Commit e8abe30a authored by Michael Friedrich's avatar Michael Friedrich
Browse files

Refactor Simplemon widget into Simplelist

parent 6d5106fd
class Dashing.Simplelist extends Dashing.Widget
ready: ->
if @get('unordered')
$(@node).find('ol').remove()
else
$(@node).find('ul').remove()
<div class="header" data-bind="title"></div>
<div class="content">
<h2 class="value" data-bind="value"></h2>
<p data-bind="legend"></p>
<div class="content" data-bind-class="color">
<li data-foreach-item="items" data-bind-class="item.color">
<h3><span class="value" data-bind="item.value"></span></h3>
</li>
</div>
<div class="more-info" data-bind="moreinfo | raw"></div>
......
// ----------------------------------------------------------------------------
// Sass declarations
// ----------------------------------------------------------------------------
$title-color: #fff;
$value-color: #fff;
$moreinfo-color: #fff;
//$title-color: rgba(255, 255, 255, 0.7);
$title-color-uns: rgba(0, 0, 0, 0.7);
//$moreinfo-color: rgba(255, 255, 255, 0.7);
$background-color: transparent;
$background-color-green: rgba(68, 187, 119, 0.5);
$background-color-red: rgba(255, 85, 102, 0.5);
$background-color-yellow: rgba(255, 170, 68, 0.5);
$background-color-purple: rgba(170, 68, 255, 0.5);
$background-color-grey: rgba(153, 153, 153, 0.5);
// ----------------------------------------------------------------------------
// Widget-number styles
// ----------------------------------------------------------------------------
.widget-simplelist {
background-color: $background-color;
.value {
margin-top: 40px;
color: $value-color;
}
h3 {
font-size: 40px;
font-weight: 600;
}
.green {
background-color: $background-color-green;
}
.yellow {
background-color: $background-color-yellow;
}
.red {
background-color: $background-color-red;
}
.purple {
background-color: $background-color-purple;
}
}
class Dashing.Simplemon extends Dashing.Widget
@accessor 'current', Dashing.AnimatedValue
ready: ->
#setInterval(@checkUpdate, 100)
onData: (data) ->
if data.color
# clear existing "color-*" classes
$(@get('node')).attr 'class', (i,c) ->
c.replace /\bcolor-\S+/g, ''
# add new class
$(@get('node')).addClass "color-#{data.color}"
checkUpdate: =>
if updatedAt = @get('updatedAt')
timestamp = new Date(updatedAt * 1000)
now = new Date()
diff = now.getTime() - timestamp.getTime()
if diff > 30000
@onData({color:'grey'})
// ----------------------------------------------------------------------------
// Sass declarations
// ----------------------------------------------------------------------------
$background-color: #0095bf;
$title-color: #fff;
$value-color: #fff;
$moreinfo-color: #fff;
$background-color-green: #44bb77;
$background-color-green-1: #44bb77;
$background-color-green-2: #44bb77;
$value-color-green: #fff;
$background-color-red: #ff5566;
$background-color-red-1: #ff5566;
$background-color-red-2: #ff5566;
$value-color-red: #fff;
$background-color-yellow: #ffaa44;
$background-color-yellow-1: #ffaa44;
$background-color-yellow-2: #ffaa44;
$value-color-yellow: #fff;
$background-color-purple: #aa44ff;
$background-color-purple-1: #aa44ff;
$background-color-purple-2: #aa44ff;
$value-color-purple: #fff;
$background-color-grey: #999999;
$value-color-grey: #fff;
$title-color: rgba(255, 255, 255, 0.7);
$title-color-uns: rgba(0, 0, 0, 0.7);
$moreinfo-color: rgba(255, 255, 255, 0.7);
@-webkit-keyframes status-yellow-background {
0% { background-color: $background-color-yellow-1; }
50% { background-color: $background-color-yellow-2; }
100% { background-color: $background-color-yellow-1; }
}
@-webkit-keyframes status-red-background {
0% { background-color: $background-color-red-1; }
50% { background-color: $background-color-red-2; }
100% { background-color: $background-color-red-1; }
}
@-webkit-keyframes status-green-background {
0% { background-color: $background-color-green-1; }
50% { background-color: $background-color-green-2; }
100% { background-color: $background-color-green-1; }
}
@-webkit-keyframes status-purple-background {
0% { background-color: $background-color-purple-1; }
50% { background-color: $background-color-purple-2; }
100% { background-color: $background-color-purple-1; }
}
@mixin animation($animation-name, $duration, $function, $animation-iteration-count:""){
-webkit-animation: $animation-name $duration $function #{$animation-iteration-count};
-moz-animation: $animation-name $duration $function #{$animation-iteration-count};
-ms-animation: $animation-name $duration $function #{$animation-iteration-count};
}
// ----------------------------------------------------------------------------
// Widget-number styles
// ----------------------------------------------------------------------------
.widget-simplemon {
background-color: $background-color;
.value {
margin-top: 40px;
color: $value-color;
}
}
.widget-simplemon.color-green {
background-color: $background-color-green;
.value { color: $value-color-green; }
}
.widget-simplemon.color-green-blink {
background-color: $background-color-green;
@include animation(status-green-background, 2s, ease, infinite);
.value { color: $value-color-green; }
}
.widget-simplemon.color-red {
background-color: $background-color-red;
.value { color: $value-color-red; }
}
.widget-simplemon.color-red-blink {
background-color: $background-color-red;
@include animation(status-red-background, 2s, ease, infinite);
.value { color: $value-color-red; }
}
.widget-simplemon.color-yellow {
background-color: $background-color-yellow;
.value { color: $value-color-yellow; }
}
.widget-simplemon.color-yellow-blink {
@include animation(status-yellow-background, 2s, ease, infinite);
background-color: $background-color-yellow;
.value { color: $value-color-yellow; }
}
.widget-simplemon.color-purple {
background-color: $background-color-purple;
.value { color: $value-color-purple; }
}
.widget-simplemon.color-purple-blink {
@include animation(status-purple-background, 2s, ease, infinite);
background-color: $background-color-purple;
.value { color: $value-color-purple; }
}
.widget-simplemon.color-grey {
background-color: $background-color-grey;
.value { color: $value-color-grey; }
}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment