From f4c4dcf9b3a89e47bee25474372aec2ebb684614 Mon Sep 17 00:00:00 2001
From: Felix Niklas <mrflix@gmail.com>
Date: Tue, 24 Nov 2015 13:06:02 +0100
Subject: [PATCH] chat designer: add loader to browser input

---
 .../javascripts/app/views/channel/chat.jst.eco     |  2 +-
 app/assets/stylesheets/zammad.scss                 | 14 +++++++++++++-
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/app/assets/javascripts/app/views/channel/chat.jst.eco b/app/assets/javascripts/app/views/channel/chat.jst.eco
index bc5dbee37..c16bdee10 100644
--- a/app/assets/javascripts/app/views/channel/chat.jst.eco
+++ b/app/assets/javascripts/app/views/channel/chat.jst.eco
@@ -63,7 +63,7 @@
     <div class="browser-head">
       <form class="browser-input js-testurl" novalidate>
         <input type="url" class="js-testurl-input" id="preview-iframe" placeholder="zammad.org">
-        <span class="help-block"><%- @T("Because of security reasons some websites can't be displayed (for example google.com).") %></span>
+        <div class="loading icon small"></div>
       </form>
     </div>
     <div class="browser-body js-demo">
diff --git a/app/assets/stylesheets/zammad.scss b/app/assets/stylesheets/zammad.scss
index fd181a115..03aec776d 100644
--- a/app/assets/stylesheets/zammad.scss
+++ b/app/assets/stylesheets/zammad.scss
@@ -7439,10 +7439,22 @@ output {
   
   .browser-input {
     flex: 1;
-    margin-right: 10px;
+    position: relative;
     
     input {
       min-width: 0;
+      padding-right: 40px;
+    }
+
+    .loading.icon {
+      position: absolute;
+      right: 11px;
+      top: 11px;
+      display: none;
+    }
+
+    &.is-loading .loading.icon {
+      display: block;
     }
   }