diff --git a/README.md b/README.md index 259532a..9fd62fe 100644 --- a/README.md +++ b/README.md @@ -14,20 +14,54 @@ bower i battery-status-icon -S + ``` +__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 + +``` diff --git a/battery-status-icon.html b/battery-status-icon.html index 90ba791..853d9f3 100644 --- a/battery-status-icon.html +++ b/battery-status-icon.html @@ -5,10 +5,10 @@ @@ -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 @@ @@ -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,39 +222,32 @@ 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 + "%"; @@ -255,18 +255,20 @@ /** * 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 index 5515324..5bd8b52 100644 --- 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; } @@ -65,10 +68,10 @@ Manually set to 15% with label - + - 
<battery-status-icon level="15" show-label></battery-status-icon>
+ 
<battery-status-icon level="15" show-label label-position="top"></battery-status-icon>
@@ -119,10 +122,10 @@ This example uses custom styles
Updating the level using JS with colors - + - 
<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>
@@ -132,9 +135,10 @@ + diff --git a/preview.png b/preview.png index 6e68893..c6a3e24 100644 Binary files a/preview.png and b/preview.png differ