Merge pull request #12 from Link2Twenty/master

Documentation and code tidy
Protoss78 · Mar 17, 2016 · da433fa · da433fa
2 parents c8cbd74 + 0f03f6a
commit da433fa
Show file tree

Hide file tree

Showing 4 changed files with 79 additions and 39 deletions.
diff --git a/README.md b/README.md
@@ -14,20 +14,54 @@ bower i battery-status-icon -S
 <battery-status-icon></battery-status-icon>
 <battery-status-icon level="33" charging></battery-status-icon>
 <battery-status-icon level="15" show-label></battery-status-icon>
+<battery-status-icon level="50" show-label label-position="top"></battery-status-icon>
 <battery-status-icon level="66" color-levels></battery-status-icon>
 <battery-status-icon autodetect show-label color-levels></battery-status-icon>
 ```
 
+__Attributes:__
+
+Attribute | Description | Default
+  ----------------|-------------|----------
+  `autodetect` | Auto detect battery level, rather than static input | `false`
+  `charging` | Detects if device is charging (Can be set manually) | `false`
+  `color-levels` | Change color depending on remaining battery level | `false`
+  `label-position` | Where the label should render (top, right, bottom, left) | `right`
+  `level` | Container for battery level value(Can be set manually) | `NULL`
+  `show-label` | Shows label on mouse over if true. | `false`
+
 ![Preview](https://raw.githubusercontent.com/Protoss78/battery-status-icon/master/preview.png)
 
 ### Styling
 
-The following custom properties are available for styling:
+  The following custom properties are available for styling:
+
+  Custom property | Description | Default
+  ----------------|-------------|----------
+  `--battery-icon-size` | Size of battery icon displayed. | `24px`
+  `--battery-default-color` | Color of battery when colorLevels is false. | `#323`
+  `--battery-high-color` | Color of battery when above 80%. | `Green`
+  `--battery-mid-color` | Color of battery when between 80% >< 20%. | `Orange`
+  `--battery-low-color` | Color battery when below 20%. | `Red`
+  `--battery-label-background` | Background color of tooltip label. | `#616161`
+  `--battery-label-opacity` | Opacity level of tooltip label. | `0.9`
+  `--battery-label-text-color` | Text color of tooltip label | `White`
 
-Custom property | Description | Default
-----------------|-------------|----------
-`--battery-icon-size` | Size of battery icon displayed. | `24px`
-`--battery-default-color` | Color of battery when colorLevels is false. | `#323`
-`--battery-high-color` | Color of battery when above 80%. | `Green`
-`--battery-mid-color` | Color of battery when between 80% >< 20%. | `Orange`
-`--battery-low-color` | Color battery when below 20%. | `Red`
+  __Style example:__
+
+  This part of the code needs to be within your head tags, or imported as part of your app-theme.html
+
+  ```html
+  <style is="custom-style">
+    :root {
+      --battery-default-color: #455A64;
+      --battery-low-color: #D32F2F;
+      --battery-mid-color: #F57C00;
+      --battery-high-color: #388E3C;
+      --battery-icon-size: 48px;
+      --battery-label-background: #455A64;
+      --battery-label-opacity: 1;
+      --battery-label-text-color: #CFD8DC;
+    }
+  </style>
+```
diff --git a/battery-status-icon.html b/battery-status-icon.html
@@ -5,10 +5,10 @@
 <link rel="import" href="../paper-tooltip/paper-tooltip.html">
 <!--
   ### Example:
-
       <battery-status-icon></battery-status-icon>
       <battery-status-icon level="33" charging></battery-status-icon>
       <battery-status-icon level="15" show-label></battery-status-icon>
+      <battery-status-icon level="50" show-label label-position="top"></battery-status-icon>
       <battery-status-icon level="66" color-levels></battery-status-icon>
       <battery-status-icon autodetect show-label color-levels></battery-status-icon>
       
@@ -23,6 +23,9 @@
   `--battery-high-color` | Color of battery when above 80%. | `Green`
   `--battery-mid-color` | Color of battery when between 80% >< 20%. | `Orange`
   `--battery-low-color` | Color battery when below 20%. | `Red`
+  `--battery-label-background` | Background color of tooltip label. | `#616161`
+  `--battery-label-opacity` | Opacity level of tooltip label. | `0.9`
+  `--battery-label-text-color` | Text color of tooltip label | `White`
   
   __Style example:__
   
@@ -35,9 +38,11 @@
           --battery-mid-color: #F57C00;
           --battery-high-color: #388E3C;
           --battery-icon-size: 48px;
+          --battery-label-background: #455A64;
+          --battery-label-opacity: 1;
+          --battery-label-text-color: #CFD8DC;
         }
       </style>
-
   @element battery-status-icon
   @demo demo/index.html
 -->
@@ -58,10 +63,6 @@
     #battery-container {
       width: var(--battery-icon-size, 24px);
     }
-    .tooltip-icon {
-      float:left;
-      margin:-3px 0 0 -6px;
-    }
     .label {
       top: 2px;
       position: relative;
@@ -83,14 +84,20 @@
   <template>
     <div id="battery-container"><iron-icon id="[[_batteryLevel]]" icon="[[_iconName]]"></iron-icon></div>
     <paper-tooltip offset="1" position="{{labelPosition}}" hidden$="[[!showLabel]]" for="battery-container">
-      <span class="tooltip-icon">
-        <iron-icon id="tooltip" hidden$="[[!charging]]" icon="icons:trending-up"></iron-icon>
-        <iron-icon id="tooltip" hidden$="[[charging]]" icon="icons:trending-down"></iron-icon>
-      </span>
-      {{getLabel(level)}}
-      <br>
-      <span hidden$="[[!charging]]">{{convertTime(chargingtime)}}	&nbsp;</span>
-      <span hidden$="[[charging]]">{{convertTime(dischargingtime)}}	&nbsp;</span>
+    <table>
+        <tr>
+          <td>
+            <iron-icon id="tooltip" hidden$="[[!charging]]" icon="icons:trending-up"></iron-icon>
+            <iron-icon id="tooltip" hidden$="[[charging]]" icon="icons:trending-down"></iron-icon>
+          </td>
+          <td>
+            {{_getLabel(level)}}
+            <br>
+            <span hidden$="[[!charging]]">{{_convertTime(chargingtime)}}</span>
+            <span hidden$="[[charging]]">{{_convertTime(dischargingtime)}}</span>
+          </td>
+        <tr>
+      </table>
     </paper-tooltip>  
     <span class="label" hidden$="[[!showLabel]]"></span>
   </template>
@@ -196,7 +203,7 @@
       _iconName: {
         type: String,
         value: "device:battery-unknown",
-        computed: "calculateIcon(level, charging)"
+        computed: "_calculateIcon(level, charging)"
       },
       /**
       * Container for battery level status (high,mid,low)
@@ -215,58 +222,53 @@
         console.log('Battery Status API not supported.');
         return;
       }
-
       if (!this.autodetect) {
         return;
       }
-
       navigator.getBattery().then(function (battery) {
         this.set('charging', battery.charging);
         this.set('level', parseInt(battery.level * 100));
         this.set('chargingtime', battery.chargingTime);
         this.set('dischargingtime', battery.dischargingTime);
-
         battery.addEventListener('chargingchange', function () {
           this.set('charging', battery.charging);
         }.bind(this));
-
         battery.addEventListener('levelchange', function () {
           this.set('level', parseInt(battery.level * 100));
         }.bind(this));
-
         battery.addEventListener('chargingtimechange', function () {
           this.set('chargingtime', battery.chargingTime);
         }.bind(this));
-
         battery.addEventListener('dischargingtimechange', function () {
           this.set('dischargingtime', battery.dischargingTime);
         }.bind(this));
-
       }.bind(this));
     },
     /**
     * Adds percent sign to end of level value
     */
-    getLabel: function (level) {
+    _getLabel: function (level) {
       if (level === undefined || level === null)
       return "";
       return level + "%";
     },
     /**
     * Converts to human readable time
     */
-    convertTime: function (totalSeconds) {
+    _convertTime: function (totalSeconds) {
       if ((!totalSeconds) || (totalSeconds == "Infinity") || (totalSeconds == 0)) {
-        return '...';
+        return '';
       }
       var hours   = Math.floor(totalSeconds / 3600);
       var minutes = Math.floor((totalSeconds % 3600) / 60);
+      hours = hours < 10 ? "0" + hours : hours;
+      minutes = minutes < 10 ? "0" + minutes : minutes;
       return hours + ':' + minutes;
     },
     /**
     * Calculate which icon suits needs best
     */
-    calculateIcon: function (level, charging) {
+    _calculateIcon: function (level, charging) {
     $this = this;
     var value = "device:battery-";
       if (this.charging)

diff --git a/demo/index.html b/demo/index.html
@@ -30,6 +30,9 @@
         --battery-mid-color: #F57C00;
         --battery-high-color: #388E3C;
         --battery-icon-size: 48px;
+        --battery-label-background: #455A64;
+        --battery-label-opacity: 1;
+        --battery-label-text-color: #CFD8DC;
       }
     </style>
   </head>
@@ -65,10 +68,10 @@
             <tr>
               <td>Manually set to 15% with label</td>
               <td>
-                <battery-status-icon level="15" show-label></battery-status-icon>
+                <battery-status-icon level="15" show-label label-position="top"></battery-status-icon>
               </td>
               <td>
-                <pre>&lt;battery-status-icon level="15" show-label&gt;&lt;/battery-status-icon&gt;</pre>
+                <pre>&lt;battery-status-icon level="15" show-label label-position="top"&gt;&lt;/battery-status-icon&gt;</pre>
               </td>
             </tr>
             <tr>
@@ -119,10 +122,10 @@
             <tr>
               <td>This example uses custom styles<br>Updating the level using JS with colors</td>
               <td>
-                <battery-status-icon class="changing-example" level="100" color-levels></battery-status-icon>
+                <battery-status-icon label-position="bottom" class="changing-example" level="0" color-levels charging show-label></battery-status-icon>
               </td>
               <td>
-                <pre>&lt;battery-status-icon class="changing-example" level="100" color-levels&gt;&lt;/battery-status-icon&gt;</pre>
+                <pre>&lt;battery-status-icon label-position="bottom" class="changing-example" level="0" color-levels charging show-label&gt;<br>&lt;/battery-status-icon&gt;</pre>
               </td>
             </tr>
           </tbody>
@@ -132,9 +135,10 @@
     <script>
       setInterval(function() {
         curLevel = document.querySelector(".changing-example").getAttribute("level");
-        nexLevel = curLevel > 0 ? curLevel - 10 : 100;
+        nexLevel = curLevel < 100 ? parseInt(curLevel) + 10 : 0;
         document.querySelector(".changing-example").setAttribute("level",nexLevel);
       }, 300);
     </script>
   </body>
+
 </html>
diff --git a/preview.png b/preview.png