Show battery status indicator in navigation

src/directives.ts

@@ -21,6 +21,7 @@ import autofocus from './directives/autofocus';
 import avatar from './directives/avatar';
 import avatarArea from './directives/avatar_area';
 import avatarEditor from './directives/avatar_editor';
+import batteryStatus from './directives/battery';
 import composeArea from './directives/compose_area';
 import contactBadge from './directives/contact_badge';
 import distributionListBadge from './directives/distribution_list_badge';
@@ -50,6 +51,7 @@ import verificationLevel from './directives/verification_level';
 angular.module('3ema.directives').directive('autofocus', autofocus);
 angular.module('3ema.directives').directive('avatarArea', avatarArea);
 angular.module('3ema.directives').directive('avatarEditor', avatarEditor);
+angular.module('3ema.directives').directive('batteryStatus', batteryStatus);
 angular.module('3ema.directives').directive('composeArea', composeArea);
 angular.module('3ema.directives').directive('eeeAvatar', avatar);
 angular.module('3ema.directives').directive('eeeContactBadge', contactBadge);

src/directives/battery.ts

@@ -0,0 +1,56 @@
+/**
+ * This file is part of Threema Web.
+ *
+ * Threema Web is free software: you can redistribute it and/or modify it
+ * under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or (at
+ * your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful, but
+ * WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero
+ * General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with Threema Web. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import {BatteryStatusService} from '../services/battery';
+
+export default [
+    '$rootScope',
+    'BatteryStatusService',
+    function($rootScope: ng.IRootScopeService,
+             batteryStatusService: BatteryStatusService) {
+        return {
+            restrict: 'E',
+            scope: {},
+            bindToController: {},
+            controllerAs: 'ctrl',
+            controller: [function() {
+                this.available = () => batteryStatusService.dataAvailable;
+                this.percent = () => batteryStatusService.percent;
+                this.isCharging = () => batteryStatusService.isCharging;
+                this.alert = () => batteryStatusService.percent < 20;
+                this.showPercent = () => !this.alert() && !this.isCharging();
+            }],
+            template: `
+                <div class="battery-status" ng-if="ctrl.available()" ng-class="{'with-percent': ctrl.showPercent()}">
+                    <md-icon ng-if="ctrl.isCharging()"
+                             aria-label="Battery status: Charging"
+                             title="Charging: {{ ctrl.percent() }}%"
+                             class="material-icons md-light md-24">battery_charging_full</md-icon>
+                    <md-icon ng-if="!ctrl.isCharging() && !ctrl.alert()"
+                             aria-label="Battery status: Discharging"
+                             title="Discharging: {{ ctrl.percent() }}%"
+                             class="material-icons md-light md-24">battery_std</md-icon>
+                    <span ng-if="ctrl.showPercent()" class="battery-percent">{{ ctrl.percent() }}%</span>
+                    <md-icon ng-if="!ctrl.isCharging() && ctrl.alert()"
+                             aria-label="Battery status: Alert"
+                             title="Discharging: {{ ctrl.percent() }}%"
+                             class="material-icons md-light md-24">battery_alert</md-icon>
+                </div>
+            `,
+        };
+    },
+];

src/partials/messenger.navigation.html

@@ -3,6 +3,8 @@
     <div class="my-identity-content" eee-my-identity
             eee-identity="ctrl.getMyIdentity()"></div>
 
+    <battery-status></battery-status>
+
     <md-menu md-position-mode="target-right target" md-offset="0 45">
         <md-button aria-label="Open menu" class="md-icon-button" ng-click="$mdOpenMenu($event)">
             <i class="material-icons md-light md-24">more_vert</i>

src/sass/app.scss

@@ -45,6 +45,7 @@
 @import "components/mediabox";
 @import "components/backbutton";
 @import "components/emoji";
+@import "components/battery";
 
 // Sections: Styles specific to individual pages or sections.
 @import "sections/header";

src/sass/components/_battery.scss

@@ -0,0 +1,24 @@
+.battery-status {
+    position: relative;
+    top: -12px;
+    right: 24px;
+
+    &.with-percent {
+        top: -18px;
+    }
+
+    md-icon, span {
+        width: 24px;
+        height: 24px;
+        line-height: 24px;
+        position: absolute;
+    }
+
+    .battery-percent {
+        font-size: 0.8em;
+        font-family: monospace;
+        text-align: center;
+        top: 20px;
+        left: 1px;
+    }
+}

src/services/battery.ts

@@ -26,6 +26,13 @@ export class BatteryStatusService {
         this.batteryStatus = batteryStatus;
     }
 
+    /**
+     * Is battery status information available?
+     */
+    public get dataAvailable(): boolean {
+        return this.batteryStatus !== null;
+    }
+
     /**
      * Return the charge level in percent.
      */