improve checkboxes & number counting animation

Basster · Sep 24, 2016 · 416d9ef · 416d9ef
1 parent 8159ec6
commit 416d9ef
Show file tree

Hide file tree

Showing 8 changed files with 69 additions and 13 deletions.
diff --git a/assets/checkboxes.jpg b/assets/checkboxes.jpg
diff --git a/assets/checkboxes.png b/assets/checkboxes.png
diff --git a/index.html b/index.html
@@ -22,7 +22,9 @@
                 </div>
             </div>
             <div class="content">
-                <div class="temp"></div>
+                <div class="temp">
+                    <span id="temp"></span><span class="unit"></span>
+                </div>
                 <hr/>
                 <div class="temp-note"></div>
             </div>
@@ -58,7 +60,7 @@ <h1>
                 <div class="form-item">
                     <label for="city">City</label>
                     <input type="text" name="city" id="city" value="" autofocus/>
-                    <input type="checkbox" name="favorite-city" value="false">
+                    <label class="inline fav"><input type="checkbox" name="favorite-city" value="false"><span></span></label>
                 </div>
                 <div class="form-item">
                     <label for="apikey">API Key</label>
@@ -70,20 +72,20 @@ <h1>
                 <div class="form-item small clear">
                     <div class="label pull-left">Temperature scale</div>
                     <div class="pull-right">
-                        <input type="Radio" name="format" value="metric" checked="checked" /> °C
-                        <input type="Radio" name="format" value="imperial" /> °F
+                        <label class="inline"><input type="Radio" name="format" value="metric" checked="checked" /><span></span>°C </label>
+                        <label class="inline"><input type="Radio" name="format" value="imperial" /><span></span>°F </label>
                     </div>
                 </div>
                 <div class="form-item small">
                     <label class="clear">
                         <div class="pull-left">Show weather in menubar</div>
-                        <div class="pull-right"><input type="checkbox" name="mb-info" value="true"></div>
+                        <div class="pull-right"><input type="checkbox" name="mb-info" value="true"><span></span></div>
                     </label>
                 </div>
                 <div class="form-item small">
                     <label class="clear">
                         <div class="pull-left">Start at login</div>
-                        <div class="pull-right"><input type="checkbox" name="auto-launch" value="true"> </div>
+                        <div class="pull-right"><input type="checkbox" name="auto-launch" value="true"><span></span></div>
                     </label>
                 </div>
                 <div class="form-item">

diff --git a/package.json b/package.json
@@ -56,6 +56,7 @@
     "jquery": "^3.1.1",
     "json-storage": "^2.1.1",
     "localStorage": "^1.0.3",
-    "chart.js": "^2.2.1"
+    "chart.js": "^2.2.1",
+    "countup.js": "^1.7.1"
   }
 }
diff --git a/src/main.js b/src/main.js
@@ -5,6 +5,7 @@ var store = JsonStorage.create(localStorage, 'temps', { stringify: true })
 var $, jQuery = require('jquery')
 var chart = require('chart.js')
 var ipcRenderer = require('electron').ipcRenderer
+var CountUp = require('countup.js')
 
 const config = require('./src/config.json')
 
@@ -13,6 +14,7 @@ var wdata = {}
 var color = null
 var loading = [false, false, false, false]
 var timeoffset = config.timezone.offset
+var numAnim = null
 
 window.onload = function ()
 {
@@ -55,7 +57,6 @@ var loadEventListener = function () {
 
   jQuery('input[type="checkbox"][name="favorite-city"]').change(function () {
     var bool = jQuery('input[type="checkbox"][name="favorite-city"]:checked').length > 0
-    console.log(bool)
     if (bool) {
       setFavoriteCity(jQuery('input#city').val())
     } else {

diff --git a/src/style.css b/src/style.css
@@ -415,6 +415,13 @@ h1:after {
     padding-right: 5px;
 }
 
+#settings .form-item label.inline {
+    color: #000000;
+    font-size: 18px;
+    display: inline-block;
+    padding-left: 10px;
+}
+
 #settings .form-item input[type="text"] {
      display: block;
      width: 100%;
@@ -434,10 +441,11 @@ h1:after {
     padding-right: 20px;
 }
 
-#settings .form-item input[type="checkbox"][name="favorite-city"] {
-    margin-top: -20px;
+#settings .form-item label.fav {
+    margin-top: -22px;
     position: absolute;
-    right: 10px;
+    right: 5px;
+    font-size: 12px;
 }
 
 #settings .form-item input[type="radio"] {
@@ -454,6 +462,41 @@ h1:after {
     color: #000;
 }
 
+input[type="checkbox"], input[type="radio"] {
+    display:none;
+}
+input[type="checkbox"] + span {
+    display:inline-block;
+    width:20px;
+    height:20px;
+    margin:-1px 4px 0 0;
+    vertical-align:middle;
+    background:url(../assets/checkboxes.png) left top no-repeat;
+    cursor:pointer;
+}
+input[type="checkbox"]:checked + span {
+    background:url(../assets/checkboxes.png) -20px top no-repeat;
+}
+input[type="radio"] + span {
+    display:inline-block;
+    width:20px;
+    height:20px;
+    margin:-1px 4px 0 0;
+    vertical-align:middle;
+    background:url(../assets/checkboxes.png) -40px top no-repeat;
+    cursor:pointer;
+}
+input[type="radio"]:checked + span {
+    background:url(../assets/checkboxes.png) -60px top no-repeat;
+}
+
+input[type="checkbox"][name="favorite-city"] + span {
+    background:url(../assets/checkboxes.png) -80px top no-repeat;
+}
+input[type="checkbox"][name="favorite-city"]:checked + span {
+    background:url(../assets/checkboxes.png) -100px top no-repeat;
+}
+
 .clear::after {
     content: "";
     clear: both;

diff --git a/src/utils.js b/src/utils.js
@@ -146,7 +146,9 @@ var showErrorMessage = function (message) {
   jQuery('#details .location').html('')
   jQuery('#details .forecast').html('')
   jQuery('#details .hourly #canvas-holder').html('')
-  jQuery('#main .content .temp').html('=( ')
+  jQuery('#main .content #temp').html('=( ')
+  jQuery('#main .content .temp .unit').html('')
+  numAnim = null
   jQuery('#main .content .temp-note').html(message)
   jQuery('#main .actual-icon svg').html('<image xlink:href="assets/icons/11d.svg" src="assets/icons/11d.svg" width="80" height="80"/>')
 

diff --git a/src/weather.js b/src/weather.js
@@ -54,7 +54,14 @@ var refreshWeather = function () {
 }
 
 var showWeatherData = function () {
-  jQuery('#main .temp').html(roundTemp(wdata[0].main.temp) + '°')
+  //jQuery('#main #temp').html(roundTemp(wdata[0].main.temp))
+  if (numAnim == null) {
+    numAnim = new CountUp("temp", 0, roundTemp(wdata[0].main.temp), 0, 2);
+    numAnim.start();
+  } else {
+    numAnim.update(roundTemp(wdata[0].main.temp))
+  }
+  jQuery('#main .temp .unit').html('°')
   jQuery('#main .temp-note').html(wdata[0].weather[0].description)
   jQuery('#details .location').html(wdata[0].name.toLowerCase() + ', ' + wdata[0].sys.country.toLowerCase())
   jQuery('#main .actual-icon svg').html('<image xlink:href="assets/icons/' + wdata[0].weather[0].icon + '.svg" src="assets/icons/' + wdata[0].weather[0].icon + '.svg" width="80" height="80"/>')