Permalink
Browse files

- Added charge indicator

- Combined battery updates into a single handler
  • Loading branch information...
1 parent 57f29e9 commit e25456ffa6fa80cad150f2e32a6f4ad6651731f5 @robhawkes committed Mar 20, 2012
@@ -0,0 +1,50 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 15.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+ width="30.824px" height="56.595px" viewBox="0 0 30.824 56.595" enable-background="new 0 0 30.824 56.595" xml:space="preserve">
+<polygon fill="#454444" points="8.904,42.288 23.09,21.638 16.004,22.424 20.873,8.396 6.887,27.973 13.758,27.199 "/>
+<circle fill="#E8C42D" cx="15.412" cy="7" r="1.959"/>
+<circle fill="#E8C42D" cx="15.412" cy="2" r="0.934"/>
+<circle fill="#E8C42D" cx="16.412" cy="10" r="0.934"/>
+<circle fill="#E8C42D" cx="14.412" cy="15" r="0.934"/>
+<circle fill="#E8C42D" cx="8.412" cy="22" r="0.934"/>
+<circle fill="#E8C42D" cx="24.412" cy="28" r="0.934"/>
+<circle fill="#E8C42D" cx="16.412" cy="33" r="0.934"/>
+<circle fill="#E8C42D" cx="16.412" cy="39" r="0.934"/>
+<circle fill="#E8C42D" cx="7.412" cy="37" r="0.934"/>
+<circle fill="#E8C42D" cx="15.412" cy="0" r="1.959"/>
+<circle fill="#E8C42D" cx="15.412" cy="20" r="1.959"/>
+<circle fill="#E8C42D" cx="15.412" cy="40" r="1.959"/>
+<circle fill="#E8C42D" cx="18.412" cy="41" r="1.959"/>
+<circle fill="#E8C42D" cx="25.412" cy="38" r="1.959"/>
+<circle fill="#E8C42D" cx="3.412" cy="40" r="1.959"/>
+<g>
+ <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="24.4434" y1="37.9336" x2="26.3799" y2="37.9336">
+ <stop offset="0" style="stop-color:#353335"/>
+ <stop offset="1" style="stop-color:#000000"/>
+ </linearGradient>
+ <path fill="url(#SVGID_1_)" d="M26.38,37.68v0.508h-1.937V37.68H26.38z"/>
+</g>
+<g>
+ <linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="14.5107" y1="20" x2="16.4473" y2="20">
+ <stop offset="0" style="stop-color:#353335"/>
+ <stop offset="1" style="stop-color:#000000"/>
+ </linearGradient>
+ <path fill="url(#SVGID_2_)" d="M16.447,19.747v0.507h-1.937v-0.507H16.447z"/>
+</g>
+<g>
+ <linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="14.5107" y1="7" x2="16.4473" y2="7">
+ <stop offset="0" style="stop-color:#353335"/>
+ <stop offset="1" style="stop-color:#000000"/>
+ </linearGradient>
+ <path fill="url(#SVGID_3_)" d="M16.447,6.746v0.507h-1.937V6.746H16.447z"/>
+</g>
+<g>
+ <linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="2.4434" y1="39.748" x2="4.3799" y2="39.748">
+ <stop offset="0" style="stop-color:#353335"/>
+ <stop offset="1" style="stop-color:#000000"/>
+ </linearGradient>
+ <path fill="url(#SVGID_4_)" d="M4.38,39.494v0.508H2.443v-0.508H4.38z"/>
+</g>
+</svg>
@@ -1,11 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 15.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
- width="28.734px" height="44.369px" viewBox="0 0 28.734 44.369" enable-background="new 0 0 28.734 44.369" xml:space="preserve">
-<circle fill="#FFFFFF" cx="5.565" cy="25.459" r="1.688"/>
-<circle fill="#FFFFFF" cx="23.427" cy="25.459" r="1.688"/>
-<path fill="#FFFFFF" d="M9.521,16.629c0.363,1.008,1.462,0.759,2.471,0.396c0.008-0.003,0.885-0.534,2.622-0.534
- s2.614,0.531,2.622,0.534c1.01,0.363,2.107,0.612,2.473-0.396c0.259-0.718-0.365-2.031-0.611-2.391
- c-0.246-0.361-2.032-1.943-4.579-1.943c-2.468,0-4.007,1.379-4.422,1.813C9.5,14.62,9.238,15.85,9.521,16.629z"/>
-</svg>
@@ -2,10 +2,10 @@
<!-- Generator: Adobe Illustrator 15.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
- width="28.734px" height="44.369px" viewBox="0 0 28.734 44.369" enable-background="new 0 0 28.734 44.369" xml:space="preserve">
-<circle fill="#020202" cx="5.565" cy="25.459" r="1.688"/>
-<circle fill="#020202" cx="23.427" cy="25.459" r="1.688"/>
-<path fill="#020202" d="M9.521,16.629c0.363,1.008,1.462,0.759,2.471,0.396c0.008-0.003,0.885-0.534,2.622-0.534
+ width="28.734px" height="53.383px" viewBox="0 0 28.734 53.383" enable-background="new 0 0 28.734 53.383" xml:space="preserve">
+<circle fill="#020202" cx="5.565" cy="34.473" r="1.688"/>
+<circle fill="#020202" cx="23.427" cy="34.473" r="1.688"/>
+<path fill="#020202" d="M9.521,25.643c0.363,1.008,1.462,0.759,2.471,0.396c0.008-0.003,0.885-0.534,2.622-0.534
s2.614,0.531,2.622,0.534c1.01,0.363,2.107,0.612,2.473-0.396c0.259-0.718-0.365-2.031-0.611-2.391
- c-0.246-0.361-2.032-1.943-4.579-1.943c-2.468,0-4.007,1.379-4.422,1.813C9.5,14.62,9.238,15.85,9.521,16.629z"/>
+ c-0.246-0.361-2.032-1.943-4.579-1.943c-2.468,0-4.007,1.379-4.422,1.813C9.5,23.634,9.238,24.863,9.521,25.643z"/>
</svg>
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 15.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+ width="30.824px" height="56.595px" viewBox="0 0 30.824 56.595" enable-background="new 0 0 30.824 56.595" xml:space="preserve">
+<circle opacity="0.87" fill="#FFFFFF" cx="5.971" cy="36.311" r="1.811"/>
+<circle opacity="0.87" fill="#FFFFFF" cx="25.131" cy="36.311" r="1.811"/>
+<path opacity="0.87" fill="#FFFFFF" d="M21.086,22.956c-0.391-1.082-1.568-0.814-2.65-0.424c-0.01,0.003-0.95,0.573-2.813,0.573
+ c-1.862,0-2.804-0.569-2.813-0.573c-1.083-0.39-2.26-0.657-2.65,0.424c-0.279,0.77,0.391,2.178,0.654,2.565
+ c0.265,0.387,2.18,2.083,4.912,2.083c2.646,0,4.299-1.479,4.744-1.945C21.108,25.11,21.389,23.792,21.086,22.956z"/>
+</svg>
View
@@ -11,7 +11,7 @@ body.night {
/* line 14, modai-avatar.scss */
.avatar {
- margin: 0 auto;
+ margin: 0 50px;
width: 321px;
}
/* line 18, modai-avatar.scss */
@@ -29,11 +29,28 @@ body.night {
-khtml-border-bottom-right-radius: 107px;
border-bottom-right-radius: 107px;
background-color: #E8C42D;
- border-top: 20px solid #000;
- height: 180px;
+ height: 200px;
+ width: 107px;
+}
+/* line 24, modai-avatar.scss */
+.avatar .avatar-body .avatar-charge {
+ -moz-transition-property: all;
+ -webkit-transition-property: all;
+ -o-transition-property: all;
+ transition-property: all;
+ -moz-transition-duration: 0.4s;
+ -webkit-transition-duration: 0.4s;
+ -o-transition-duration: 0.4s;
+ transition-duration: 0.4s;
+ background-color: #000;
+ height: 147px;
+ display: none;
+ overflow: hidden;
+ position: absolute;
+ top: 0;
width: 107px;
}
-/* line 25, modai-avatar.scss */
+/* line 36, modai-avatar.scss */
.avatar .avatar-body .avatar-energy-mask {
-moz-transition-property: all;
-webkit-transition-property: all;
@@ -45,23 +62,24 @@ body.night {
transition-duration: 0.4s;
background-color: #000;
height: 0px;
- margin: 20px 0 0;
overflow: hidden;
position: absolute;
top: 0;
width: 107px;
}
-/* line 37, modai-avatar.scss */
+/* line 47, modai-avatar.scss */
.avatar .avatar-body .avatar-face {
- height: 180px;
+ height: 200px;
+ position: absolute;
+ top: 0;
width: 107px;
}
-/* line 41, modai-avatar.scss */
+/* line 53, modai-avatar.scss */
.avatar .avatar-body .avatar-face img {
display: block;
margin: 0 auto;
}
-/* line 48, modai-avatar.scss */
+/* line 60, modai-avatar.scss */
.avatar .avatar-notice {
-moz-border-radius-topright: 20px;
-webkit-border-top-right-radius: 20px;
@@ -83,11 +101,11 @@ body.night {
border-bottom-right-radius: 20px;
background-color: #E8C42D;
display: none;
- height: 600px;
+ height: 200px;
position: relative;
width: 400px;
}
-/* line 57, modai-avatar.scss */
+/* line 69, modai-avatar.scss */
.avatar .avatar-notice .avatar-notice-top {
background-color: #E8C42D;
height: 20px;
@@ -96,7 +114,7 @@ body.night {
top: -20px;
width: 293px;
}
-/* line 65, modai-avatar.scss */
+/* line 77, modai-avatar.scss */
.avatar .avatar-notice .avatar-notice-top span {
-moz-border-radius-bottomleft: 20px;
-webkit-border-bottom-left-radius: 20px;
@@ -108,7 +126,7 @@ body.night {
display: block;
height: 100%;
}
-/* line 75, modai-avatar.scss */
+/* line 87, modai-avatar.scss */
.avatar.active .avatar-body {
-moz-border-radius-bottomleft: 0;
-webkit-border-bottom-left-radius: 0;
@@ -123,11 +141,19 @@ body.night {
-khtml-border-bottom-right-radius: 0;
border-bottom-right-radius: 0;
}
-/* line 79, modai-avatar.scss */
+/* line 91, modai-avatar.scss */
.avatar.active .avatar-notice {
display: block;
}
-/* line 84, modai-avatar.scss */
+/* line 97, modai-avatar.scss */
+.avatar.charge .avatar-energy-mask {
+ display: none;
+}
+/* line 101, modai-avatar.scss */
+.avatar.charge .avatar-charge {
+ display: block;
+}
+/* line 106, modai-avatar.scss */
.avatar:hover {
cursor: pointer;
}
View
@@ -9,11 +9,14 @@
<section class="avatar">
<div class="avatar-body">
<div class="avatar-face">
- <img src="images/fundai-face-happy.svg" width="107" height="180">
+ <img src="images/fundai-face-happy.svg" width="107" height="200">
<div class="avatar-energy-mask">
- <img src="images/fundai-face-happy-white.svg" width="107" height="180">
+ <img src="images/fundai-face-unhappy-white.svg" width="107" height="200">
</div>
</div>
+ <div class="avatar-charge">
+ <img src="images/fundai-body-charge.svg" width="107" height="200">
+ </div>
</div>
<div class="avatar-notice">
<!-- Horrible 'divitus' hack to get inverted border-radius -->
View
@@ -20,22 +20,31 @@ function initAvatar() {
if (battery) {
// Device battery level changed
- battery.addEventListener("levelchange", onBatteryLevelChange, false);
+ battery.addEventListener("levelchange", updateBattery);
// Device connected to power, or unplugged
- battery.addEventListener("chargingchange", onBatteryChargingChange, false);
+ battery.addEventListener("chargingchange", updateBattery);
// Update battery first time around
- updateEnergy(battery.level);
+ updateBattery();
}
}
-function updateEnergy(energy) {
- avatarState.energy = energy;
+function updateBattery() {
+ avatarState.energy = battery.level;
for (var i = 0; i < avatars.length; i++) {
var avatar = avatars[i];
var energyMask = avatar.getElementsByClassName("avatar-energy-mask")[0];
+ var charge = avatar.getElementsByClassName("avatar-charge")[0];
+
energyMask.style.height = avatarState.maxHeight-(avatarState.maxHeight*avatarState.energy);
+ charge.style.height = avatarState.maxHeight-(avatarState.maxHeight*avatarState.energy);
+
+ if (battery.charging) {
+ avatar.classList.add("charge");
+ } else {
+ avatar.classList.remove("charge");
+ }
}
}
@@ -46,12 +55,4 @@ function onClick(e) {
this.classList.toggle("active");
}
-function onBatteryLevelChange(e) {
- updateEnergy(battery.level);
-}
-
-function onBatteryChargingChange(e) {
- // battery.charging;
-}
-
initAvatar();
View
@@ -12,30 +12,42 @@ body {
}
.avatar {
- margin: 0 auto;
+ margin: 0 50px;
width: 321px;
.avatar-body {
@include border-bottom-radius(107px);
background-color: #E8C42D;
- border-top: 20px solid #000;
- height: 180px;
+ height: 200px;
width: 107px;
+ .avatar-charge {
+ @include transition-property(all);
+ @include transition-duration(0.4s);
+ background-color: #000;
+ height: 147px; // Full height is 147px
+ display: none;
+ overflow: hidden;
+ position: absolute;
+ top: 0;
+ width: 107px;
+ }
+
.avatar-energy-mask {
@include transition-property(all);
@include transition-duration(0.4s);
background-color: #000;
- height: 0px; // Full height is 127px
- margin: 20px 0 0;
+ height: 0px; // Full height is 147px
overflow: hidden;
position: absolute;
top: 0;
width: 107px;
}
.avatar-face {
- height: 180px;
+ height: 200px;
+ position: absolute;
+ top: 0;
width: 107px;
img {
@@ -50,7 +62,7 @@ body {
@include border-bottom-radius(20px);
background-color: #E8C42D;
display: none;
- height: 600px;
+ height: 200px;
position: relative;
width: 400px;
@@ -81,6 +93,16 @@ body {
}
}
+ &.charge {
+ .avatar-energy-mask {
+ display: none;
+ }
+
+ .avatar-charge {
+ display: block;
+ }
+ }
+
&:hover {
cursor: pointer;
}

0 comments on commit e25456f

Please sign in to comment.