Improve Device Disconnected UI.

res/app/components/stf/common-ui/modals/fatal-message/fatal-message-service.js

@@ -1,70 +1,75 @@
-module.exports = function FatalMessageServiceFactory($modal, $location, $route, $interval) {
-  var FatalMessageService = {}
+module.exports =
+  function FatalMessageServiceFactory($modal, $location, $route, $interval,
+    StateClassesService) {
+    var FatalMessageService = {}
 
-  var intervalDeviceInfo
+    var intervalDeviceInfo
 
-  var ModalInstanceCtrl = function ($scope, $modalInstance, device, tryToReconnect) {
-    $scope.ok = function () {
-      $modalInstance.close(true)
-      $route.reload()
-      //$location.path('/control/' + device.serial)
-    }
-
-    if (tryToReconnect) {
-      // TODO: this is ugly, find why its not updated correctly (also on the device list)
-      intervalDeviceInfo = $interval(function () {
-        $scope.device = device
-
-        if (device.usable) {
-          // Try to reconnect
-          $scope.ok()
-        }
-      }, 1000, 500)
-    }
-
-    $scope.device = device
-
-    $scope.second = function () {
-      $modalInstance.dismiss()
-      $location.path('/devices/')
-    }
-
-    $scope.cancel = function () {
-      $modalInstance.dismiss('cancel')
-    }
-
-    var destroyInterval = function () {
-      if (angular.isDefined(intervalDeviceInfo)) {
-        $interval.cancel(intervalDeviceInfo)
-        intervalDeviceInfo = undefined
+    var ModalInstanceCtrl = function ($scope, $modalInstance, device,
+      tryToReconnect) {
+      $scope.ok = function () {
+        $modalInstance.close(true)
+        $route.reload()
+        //$location.path('/control/' + device.serial)
       }
-    }
 
-    $scope.$on('$destroy', function () {
-      destroyInterval()
-    })
-  }
+      if (tryToReconnect) {
+        // TODO: this is ugly, find why its not updated correctly (also on the device list)
+        intervalDeviceInfo = $interval(function () {
+          $scope.device = device
 
-  FatalMessageService.open = function (device, tryToReconnect) {
-    var modalInstance = $modal.open({
-      template: require('./fatal-message.jade'),
-      controller: ModalInstanceCtrl,
-      resolve: {
-        device: function () {
-          return device
-        },
-        tryToReconnect: function () {
-          return tryToReconnect
+          $scope.stateColor = StateClassesService.stateColor(device.state)
+
+          if (device.usable) {
+            // Try to reconnect
+            $scope.ok()
+          }
+        }, 1000, 500)
+      }
+
+      $scope.device = device
+
+      $scope.second = function () {
+        $modalInstance.dismiss()
+        $location.path('/devices/')
+      }
+
+      $scope.cancel = function () {
+        $modalInstance.dismiss('cancel')
+      }
+
+      var destroyInterval = function () {
+        if (angular.isDefined(intervalDeviceInfo)) {
+          $interval.cancel(intervalDeviceInfo)
+          intervalDeviceInfo = undefined
         }
       }
-    })
 
-    modalInstance.result.then(function () {
-    }, function () {
+      $scope.$on('$destroy', function () {
+        destroyInterval()
+      })
+    }
 
-    })
+    FatalMessageService.open = function (device, tryToReconnect) {
+      var modalInstance = $modal.open({
+        template: require('./fatal-message.jade'),
+        controller: ModalInstanceCtrl,
+        resolve: {
+          device: function () {
+            return device
+          },
+          tryToReconnect: function () {
+            return tryToReconnect
+          }
+        }
+      })
+
+      modalInstance.result.then(function () {
+      }, function () {
+
+      })
+    }
+
+
+    return FatalMessageService
   }
-
-
-  return FatalMessageService
-}

res/app/components/stf/common-ui/modals/fatal-message/fatal-message.jade

@@ -1,25 +1,24 @@
 .stf-fatal-message.stf-modal
-  .modal-header.dialog-header-error
+  .modal-header.dialog-header-errorX
     button(type='button', ng-click='cancel()').close ×
     h4.modal-title.text-danger
       i.fa.fa-warning
       .button-spacer
-      span(translate) {{ device.enhancedName }} was disconnected
+      span(translate) Device was disconnected
   .modal-body
-    .text-danger(translate) You are no longer controlling the device.
+    h4(translate, ng-bind='device.likelyLeaveReason | likelyLeaveReason')
     br
-    h3(translate, ng-bind='device.likelyLeaveReason | likelyLeaveReason')
-    br
-    h4(translate).pull-right  {{ device.enhancedName }} current status:
-    br
-    br
-    h4(ng-bind='device.enhancedStatePassive | translate').pull-right
-
+    .big-thumbnail
+      .device-photo-small
+        img(ng-src='/static/app/devices/icon/x120/{{ device.image || "E30HT.jpg" }}')
+      .device-name(ng-bind='device.enhancedName')
+      h3.device-status(ng-class='stateColor')
+        span(ng-bind='device.enhancedStatePassive | translate')
 
   .modal-footer
-    button.btn.btn-primary(type='button', ng-click='ok()')
+    button.btn.btn-primary-outline(type='button', ng-click='ok()')
       i.fa.fa-refresh
       span(translate) Try to reconnect
-    button.btn.btn-success(ng-click='second()')
+    button.btn.btn-success-outline(ng-click='second()')
       i.fa.fa-sitemap
       span(translate) Go to Device List