Add ADB Keys UI.

res/app/components/stf/common-ui/nothing-to-show/nothing-to-show-directive.js

@@ -1,6 +1,7 @@
 module.exports = function () {
   return {
     restrict: 'EA',
+    transclude: true,
     scope: {
       icon: '@',
       message: '@'

res/app/components/stf/common-ui/nothing-to-show/nothing-to-show.html

@@ -1,4 +1,5 @@
 <div class="nothing-to-show vertical-center">
+    <span ng-transclude></span>
     <i class="fa fa-4x" ng-class="icon"></i>
     <p ng-bind="message"></p>
-</div>
+</div>

res/app/settings/adb-keys/adb-keys-controller.js

@@ -1,3 +1,57 @@
-module.exports = function AdbKeysCtrl($scope) {
+module.exports = function AdbKeysCtrl($scope, BrowserInfo) {
+
+  $scope.adbKeys = [
+    {
+      title: 'PC1264',
+      key: 'bb:86:60:39:d7:a2:e3:09:93:09:cc:f6:e8:37:99:3f'
+    },
+    {
+      title: 'Mobile mac',
+      key: '97:ca:ae:fa:09:0b:c4:fe:22:94:7d:b2:be:77:66:a1'
+    }
+  ]
+
+  $scope.removeKey = function (key) {
+    console.log('Remove key', key)
+    $scope.adbKeys.splice($scope.adbKeys.indexOf(key), 1)
+  }
+
+  $scope.addKey = function () {
+    if ($scope.title && $scope.key) {
+
+      $scope.adbKeys.push({
+        title: $scope.title,
+        key: $scope.key
+      })
+
+      $scope.closeAddKey()
+    }
+  }
+
+  var clientOS = 'PC'
+  if (BrowserInfo.ua.match(/Mac/i)) {
+    clientOS = 'Mac'
+  }
+
+  var addKeyDefaults = {
+    title: 'My ' + clientOS,
+    key: ''
+  }
+
+  $scope.title = addKeyDefaults.title
+  $scope.key = addKeyDefaults.key
+
+  $scope.closeAddKey = function () {
+    $scope.title = addKeyDefaults.title
+    $scope.key = addKeyDefaults.key
+    $scope.adbkeyform.$setPristine()
+    $scope.showAdd = false
+  }
+
+  $scope.toggleAddKey = function () {
+    $scope.showAdd = !$scope.showAdd
+    $scope.focusAddTitle = true
+  }
+
 
 }

res/app/settings/adb-keys/adb-keys.css

@@ -1,3 +1,32 @@
-.stf-adb-keys {
+.stf-adb-keys .key-list-icon {
+
+}
+
+.stf-adb-keys .key-list a {
+  padding: 10px;
+  border-bottom: 1px solid #dddddd;
+}
+
+.stf-adb-keys .key-list-details {
+  display: inline-block;
+}
+
+.stf-adb-keys .key-list-title {
+  color: #007aff;
+  font-size: 14px;
+  font-weight: 300;
+  margin: 2px 0 6px;
+}
+
+.stf-adb-keys .key-list-key {
+  font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
+  font-size: 10px;
+  margin-bottom: 2px;
+  color: #999999;
+  font-weight: 300;
+}
+
+.stf-adb-keys .key-list-remove {
+  display: inline-block;
+}
 
-}

res/app/settings/adb-keys/adb-keys.jade

@@ -1,10 +1,56 @@
-.row
-  .col-md-12
+.row(ng-controller='AdbKeysCtrl')
+  .col-md-6
     .widget-container.fluid-height.stf-adb-keys
       .heading
-        i.fa.fa-key
+        i.fa.fa-android
         span(translate) ADB Keys
+
+        button.btn.btn-primary-outline.pull-right.btn-sm(
+        ng-click='toggleAddKey()',
+        ng-class='')
+          //(tooltip='{{ "Add ADB Key" | translate }}')
+          i.fa.fa-plus.fa-fw
+          //span(translate) Add
+
       .widget-content.padded
-        div
 
 
+        nothing-to-show(icon='fa-key', message='{{"No ADB keys" | translate}}',
+        ng-if='!adbKeys.length && !showAdd')
+
+
+        .panel.panel-default(ng-show='showAdd')
+          .panel-heading
+            h3.panel-title(translate) Add ADB Key
+          .panel-body
+            form.form-horizontal(name='adbkeyform', ng-submit='addKey(key)')
+
+              .form-group
+                label.control-label.col-md-1(translate) Title
+                .col-md-11
+                  input(type='text', ng-model='title', ng-required='true',
+                  text-focus-select, focus-element='focusAddTitle').form-control
+              .form-group
+                label.control-label.col-md-1(translate) Key
+                .col-md-11
+                  textarea(rows='4', ng-model='key', ng-required='true').form-control
+
+              .alert.alert-warning.selectable This key can be obtained by doing: ...
+
+              br
+
+              button.btn.btn-primary-outline.btn-sm.pull-right(type='submit')
+                i.fa.fa-plus.fa-fw
+                span(translate) Add Key
+
+        ul.list-group.key-list
+          li.list-group-item(ng-repeat='key in adbKeys')
+            a
+              i.fa.fa-key.fa-2x.fa-fw.key-list-icon
+              .key-list-details.selectable
+                .key-list-title(ng-bind='key.title')
+                .key-list-key(ng-bind='key.key')
+
+              button.btn.btn-xs.btn-danger-outline.pull-right.key-list-remove(ng-click='removeKey(key)')
+                i.fa.fa-trash-o
+                span(translate) Remove

res/app/settings/adb-keys/index.js

@@ -1,7 +1,8 @@
 require('./adb-keys.css')
 
 module.exports = angular.module('stf.settings.adb-keys', [
-
+  require('stf/common-ui/nothing-to-show').name,
+  require('stf/browser-info').name
 ])
   .run(["$templateCache", function ($templateCache) {
     $templateCache.put(

res/app/settings/settings-controller.js

@@ -1,15 +1,20 @@
 module.exports = function SettingsCtrl($scope, gettext) {
 
   $scope.settingTabs = [
+    {
+      title: gettext('Keys'),
+      icon: 'fa-key fa-fw',
+      templateUrl: 'settings/adb-keys/adb-keys.jade'
+    },
     {
       title: gettext('General'),
       icon: 'fa-gears fa-fw',
       templateUrl: 'settings/general/general.jade'
     },
-    {
-      title: gettext('ADB Keys'),
-      icon: 'fa-key fa-fw',
-      templateUrl: 'settings/adb-keys/adb-keys.jade'
-    }
+    //{
+    //  title: gettext('Keys'),
+    //  icon: 'fa-key fa-fw',
+    //  templateUrl: 'settings/adb-keys/adb-keys.jade'
+    //}
   ]
 }