From cf4247321cf82e72ee06c9171d695602d5f12be8 Mon Sep 17 00:00:00 2001
From: Taras Machyshyn <taras@espocrm.com>
Date: Tue, 30 Jan 2018 17:26:03 +0200
Subject: [PATCH] Installer: changed loading icon

---
 install/core/tpl/errors.tpl            |   6 +++-
 install/core/tpl/setupConfirmation.tpl |  11 +++----
 install/core/tpl/step2.tpl             |  26 ++++++++--------
 install/core/tpl/step3.tpl             |   6 +++-
 install/core/tpl/step4.tpl             |   6 +++-
 install/core/tpl/step5.tpl             |   6 +++-
 install/css/install.css                |  40 ++++++++++++++++++-------
 install/img/loading-icon.gif           | Bin 2608 -> 0 bytes
 install/js/install.js                  |   4 +--
 9 files changed, 71 insertions(+), 34 deletions(-)
 delete mode 100644 install/img/loading-icon.gif

diff --git a/install/core/tpl/errors.tpl b/install/core/tpl/errors.tpl
index 3a43db3eeb..981e94782c 100644
--- a/install/core/tpl/errors.tpl
+++ b/install/core/tpl/errors.tpl
@@ -1,6 +1,5 @@
 <div class="panel-body body">
     <div id="msg-box" class="alert alert-danger">{$errors}</div>
-    <div class="loading-icon hide"></div>
     <form id="nav">
         <div class="row">
             <div class=" col-md-13">
@@ -10,6 +9,11 @@
         </div>
     </form>
 </div>
+<div class="loading-panel hide">
+    <div class="text-right">
+        <span class="glyphicon glyphicon-refresh glyphicon-refresh-animate"></span>
+    </div>
+</div>
 <footer class="modal-footer">
     <button class="btn btn-warning" type="button" id="re-check">{$langs['labels']['Re-check']}</button>
 </footer>
diff --git a/install/core/tpl/setupConfirmation.tpl b/install/core/tpl/setupConfirmation.tpl
index 2387d691c6..99f1c92c88 100644
--- a/install/core/tpl/setupConfirmation.tpl
+++ b/install/core/tpl/setupConfirmation.tpl
@@ -88,13 +88,14 @@
             <div class="cell cell-website pull-right" align="right">
                 <a target="_blank" href="https://www.espocrm.com/documentation/administration/server-configuration/" style="font-weight:bold;">{$langs['labels']['Configuration Instructions']}</a>
             </div>
-
-            <br>
-
-            <div class="loading-icon hide"></div>
-
         </div>
     </form>
+    <div class="space"></div>
+</div>
+<div class="loading-panel hide">
+    <div class="text-right">
+        <span class="glyphicon glyphicon-refresh glyphicon-refresh-animate"></span>
+    </div>
 </div>
 <footer class="modal-footer">
     <button class="btn btn-default" type="button" id="back">{$langs['labels']['Back']}</button>
diff --git a/install/core/tpl/step2.tpl b/install/core/tpl/step2.tpl
index e4483247e1..e90aa6263a 100644
--- a/install/core/tpl/step2.tpl
+++ b/install/core/tpl/step2.tpl
@@ -35,9 +35,9 @@
             <div class=" col-md-6">
                 <div class="row">
                     <div class="cell cell-website col-sm-12 form-group">
-                                <div class="label-description">
-                                    {$langs['labels']['Database Settings Description']}
-                                </div>
+                        <div class="label-description">
+                            {$langs['labels']['Database Settings Description']}
+                        </div>
                     </div>
                 </div>
             </div>
@@ -45,21 +45,23 @@
 
     </form>
 
-    <div class="loading-icon hide"></div>
-
     <div class="row">
-            <div class=" col-md-6">
-                <div class="row">
-                    <div class="cell cell-website col-sm-12 form-group">
-                        <div class="btn-panel">
-                            <button class="btn btn-default" type="button" id="test-connection">{$langs['labels']['Test settings']}</button>
-                        </div>
+        <div class=" col-md-6">
+            <div class="row">
+                <div class="cell cell-website col-sm-12 form-group">
+                    <div class="btn-panel">
+                        <button class="btn btn-default" type="button" id="test-connection">{$langs['labels']['Test settings']}</button>
                     </div>
                 </div>
             </div>
         </div>
+     </div>
+</div>
+<div class="loading-panel hide">
+    <div class="text-right">
+        <span class="glyphicon glyphicon-refresh glyphicon-refresh-animate"></span>
+    </div>
 </div>
-
 <footer class="modal-footer">
     <button class="btn btn-default" type="button" id="back">{$langs['labels']['Back']}</button>
     <button class="btn btn-primary" type="button" id="next">{$langs['labels']['Next']}</button>
diff --git a/install/core/tpl/step3.tpl b/install/core/tpl/step3.tpl
index 1648a134a5..23231f1b9a 100644
--- a/install/core/tpl/step3.tpl
+++ b/install/core/tpl/step3.tpl
@@ -1,6 +1,5 @@
 <div class="panel-body body">
     <div id="msg-box" class="alert hide"></div>
-    <div class="loading-icon hide"></div>
     <form id="nav">
         <div class="row">
 
@@ -36,6 +35,11 @@
         </div>
     </form>
 </div>
+<div class="loading-panel hide">
+    <div class="text-right">
+        <span class="glyphicon glyphicon-refresh glyphicon-refresh-animate"></span>
+    </div>
+</div>
 <footer class="modal-footer">
     <button class="btn btn-primary" type="button" id="next">{$langs['labels']['Next']}</button>
 </footer>
diff --git a/install/core/tpl/step4.tpl b/install/core/tpl/step4.tpl
index 11716cccd3..7959cbdbb4 100644
--- a/install/core/tpl/step4.tpl
+++ b/install/core/tpl/step4.tpl
@@ -1,6 +1,5 @@
 <div class="panel-body body">
     <div id="msg-box" class="alert hide"></div>
-    <div class="loading-icon hide"></div>
     <form id="nav">
         <div class="row">
             <div class="col-md-8" style="width:100%" >
@@ -136,6 +135,11 @@
         </div>
     </form>
 </div>
+<div class="loading-panel hide">
+    <div class="text-right">
+        <span class="glyphicon glyphicon-refresh glyphicon-refresh-animate"></span>
+    </div>
+</div>
 <footer class="modal-footer">
     <button class="btn btn-default" type="button" id="back">{$langs['labels']['Back']}</button>
     <button class="btn btn-primary" type="button" id="next">{$langs['labels']['Next']}</button>
diff --git a/install/core/tpl/step5.tpl b/install/core/tpl/step5.tpl
index 9181c78c60..f4e537247b 100644
--- a/install/core/tpl/step5.tpl
+++ b/install/core/tpl/step5.tpl
@@ -1,6 +1,5 @@
 <div class="panel-body body">
     <div id="msg-box" class="alert hide"></div>
-    <div class="loading-icon hide"></div>
     <form id="nav" autocomplete="off">
         <div class="row">
             <div class="col-md-8" style="width:100%" >
@@ -108,6 +107,11 @@
         </div>
     </form>
 </div>
+<div class="loading-panel hide">
+    <div class="text-right">
+        <span class="glyphicon glyphicon-refresh glyphicon-refresh-animate"></span>
+    </div>
+</div>
 <footer class="modal-footer">
     <button class="btn btn-default" type="button" id="back">{$langs['labels']['Back']}</button>
     <button class="btn btn-primary" type="button" id="next">{$langs['labels']['Next']}</button>
diff --git a/install/css/install.css b/install/css/install.css
index 5b7cca6d8f..6c10977abc 100644
--- a/install/css/install.css
+++ b/install/css/install.css
@@ -26,14 +26,6 @@ select[name="user-lang"] {
 	margin-left: 16.6667%;
 }
 
-.loading-icon {
-    background-image: url("../img/loading-icon.gif");
-    background-repeat: no-repeat;
-    height: 31px;
-    width: 31px;
-	float: right;
-}
-
 .devices {
 	width: 50%;
 	height: 50%;
@@ -68,7 +60,6 @@ select[name="user-lang"] {
 	text-align: center;
 	width: 4%;
 	float: left;
-
 }
 
 .semicolon-sign {
@@ -109,8 +100,13 @@ input[type=checkbox].btn-default {
 	margin-right: 10px;
 }
 
-.setup-confirmation .loading-icon {
-	margin-top: 10px;
+.loading-panel {
+    padding: 0 14px 10px 0;
+    margin-top: -29px;
+}
+
+.space {
+    padding: 14px;
 }
 
 span.remark {
@@ -152,4 +148,26 @@ span.ok {
 .main-header.panel-heading {
     background-color: #546e7a !important;
     padding: 0px 2px;
+}
+
+.glyphicon-refresh-animate {
+    -animation: front .5s infinite linear;
+    -ms-animation: front .5s infinite linear;
+    -webkit-animation: right .5s infinite linear;
+    -moz-animation: left .5s infinite linear;
+}
+
+@keyframes front {
+    from { transform: scale(1) rotate(0deg);}
+    to { transform: scale(1) rotate(360deg);}
+}
+
+@-webkit-keyframes right {
+    from { -webkit-transform: rotate(0deg);}
+    to { -webkit-transform: rotate(360deg);}
+}
+
+@-moz-keyframes left {
+    from { -moz-transform: rotate(0deg);}
+    to { -moz-transform: rotate(360deg);}
 }
\ No newline at end of file
diff --git a/install/img/loading-icon.gif b/install/img/loading-icon.gif
deleted file mode 100644
index 7c12c21fcb05ccbc90eb90202c96fb4578f8066d..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 2608
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

diff --git a/install/js/install.js b/install/js/install.js
index 769b2eba69..e75f46dca8 100644
--- a/install/js/install.js
+++ b/install/js/install.js
@@ -566,11 +566,11 @@ InstallScript.prototype.hideMsg = function() {
 }
 
 InstallScript.prototype.showLoading = function() {
-	$('.loading-icon').removeClass('hide');
+	$('.loading-panel').removeClass('hide');
 }
 
 InstallScript.prototype.hideLoading = function() {
-	$('.loading-icon').addClass('hide');
+	$('.loading-panel').addClass('hide');
 }
 
 InstallScript.prototype.checkPass = function(opt) {