From 282ceab17a1982cf591396cdcb2c8624c6a5888e Mon Sep 17 00:00:00 2001
From: Gunther Brunner <gunta85@gmail.com>
Date: Tue, 20 May 2014 19:17:28 +0900
Subject: [PATCH] Screen error message improved.

---
 .../components/stf/screen/screen-directive.js |  4 ++++
 res/app/components/stf/screen/screen.css      | 22 ++++++++++++++-----
 res/app/components/stf/screen/screen.jade     | 12 +++++++++-
 3 files changed, 32 insertions(+), 6 deletions(-)

diff --git a/res/app/components/stf/screen/screen-directive.js b/res/app/components/stf/screen/screen-directive.js
index 9d373ecb..ca4f1b82 100644
--- a/res/app/components/stf/screen/screen-directive.js
+++ b/res/app/components/stf/screen/screen-directive.js
@@ -115,6 +115,10 @@ module.exports = function DeviceScreenDirective($document, ScalingService, Vendo
         scope.control.paste(e.clipboardData.getData('text/plain'))
       }
 
+      scope.retryLoadingScreen = function () {
+        maybeLoadScreen()
+      }
+
       function maybeLoadScreen() {
         if (!loading && scope.$parent.showScreen && scope.device) {
           loading = true
diff --git a/res/app/components/stf/screen/screen.css b/res/app/components/stf/screen/screen.css
index 7cd3cdc8..0bb4cb94 100644
--- a/res/app/components/stf/screen/screen.css
+++ b/res/app/components/stf/screen/screen.css
@@ -1,13 +1,25 @@
 .screen-error {
   width: 100%;
-  background: rgba(0, 0, 0, 0.6);
-  position: relative;
-  top: 50%;
-  transform: translateY(-50%);
+  height: 100%;
+  background: rgba(0, 0, 0, 0.7);
   z-index: 100;
-  pointer-events: none; /* MUST HAVE */
+  position: absolute;
+  /*pointer-events: none; */
 }
 
 .screen-error .nothing-to-show {
   color: #eee;
 }
+
+.screen-error .screen-error-message {
+  position: relative;
+  top: 35%;
+  transform: translateY(-35%);
+  text-align: center;
+}
+
+.screen-error .screen-error-alert {
+  padding: 15px;
+  margin-bottom: 20px;
+  color: #ccc;
+}
diff --git a/res/app/components/stf/screen/screen.jade b/res/app/components/stf/screen/screen.jade
index 2372d888..4c2a7852 100644
--- a/res/app/components/stf/screen/screen.jade
+++ b/res/app/components/stf/screen/screen.jade
@@ -1,5 +1,15 @@
 canvas(ng-show='device')
 div(ng-if='displayError').screen-error
-  nothing-to-show(message='{{"No device screen"|translate}}', icon='fa-eye-slash', ng-show='true')
+  .screen-error-message
+    nothing-to-show(message='{{"No device screen"|translate}}', icon='fa-eye-slash', ng-show='true')
+
+    // TODO: PING here to check for connectivity http://172.19.9.107:7401/api/v1/displays/0
+    .well
+      .screen-error-alert This might be caused by a network error, or you might be trying to access a secure view.
+
+    .well
+      button(ng-click='retryLoadingScreen()', style='text-align: center;').btn.btn-primary.btn-block
+        i.fa.fa-refresh
+        span(translate) Retry
 textarea(tabindex='-1')
 span.finger