From b1ee9cc197bb027853f49bfe1cefbd8841ccf7f2 Mon Sep 17 00:00:00 2001
From: Rohit Yadav <rohit.yadav@shapeblue.com>
Date: Thu, 11 Jul 2019 01:26:19 +0530
Subject: [PATCH] cleanup, new loader and themeing fixes

Signed-off-by: Rohit Yadav <rohit.yadav@shapeblue.com>
---
 ui/public/index.html                          | 167 +++++++++++++++++-
 ui/public/loading/loading.css                 |   1 -
 ui/public/loading/loading.html                |   1 -
 .../loading/option2/html_code_segment.html    |   5 -
 ui/public/loading/option2/loading.css         |   1 -
 ui/public/loading/option2/loading.svg         |   1 -
 ui/vue.config.js                              |  12 +-
 7 files changed, 169 insertions(+), 19 deletions(-)
 delete mode 100644 ui/public/loading/loading.css
 delete mode 100644 ui/public/loading/loading.html
 delete mode 100644 ui/public/loading/option2/html_code_segment.html
 delete mode 100644 ui/public/loading/option2/loading.css
 delete mode 100644 ui/public/loading/option2/loading.svg

diff --git a/ui/public/index.html b/ui/public/index.html
index fdceaeb7052..e4de38a4836 100644
--- a/ui/public/index.html
+++ b/ui/public/index.html
@@ -6,14 +6,175 @@
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>cloud.ico">
     <title>Apache CloudStack</title>
-    <style>#preloadingAnimation{position:fixed;left:0;top:0;height:100%;width:100%;background:#ffffff;user-select:none;z-index: 9999;overflow: hidden}.lds-roller{display:inline-block;position:relative;left:50%;top:50%;transform:translate(-50%,-50%);width:64px;height:64px;}.lds-roller div{animation:lds-roller 1.2s cubic-bezier(0.5,0,0.5,1) infinite;transform-origin:32px 32px;}.lds-roller div:after{content:" ";display:block;position:absolute;width:6px;height:6px;border-radius:50%;background:#39a7de;margin:-3px 0 0 -3px;}.lds-roller div:nth-child(1){animation-delay:-0.036s;}.lds-roller div:nth-child(1):after{top:50px;left:50px;}.lds-roller div:nth-child(2){animation-delay:-0.072s;}.lds-roller div:nth-child(2):after{top:54px;left:45px;}.lds-roller div:nth-child(3){animation-delay:-0.108s;}.lds-roller div:nth-child(3):after{top:57px;left:39px;}.lds-roller div:nth-child(4){animation-delay:-0.144s;}.lds-roller div:nth-child(4):after{top:58px;left:32px;}.lds-roller div:nth-child(5){animation-delay:-0.18s;}.lds-roller div:nth-child(5):after{top:57px;left:25px;}.lds-roller div:nth-child(6){animation-delay:-0.216s;}.lds-roller div:nth-child(6):after{top:54px;left:19px;}.lds-roller div:nth-child(7){animation-delay:-0.252s;}.lds-roller div:nth-child(7):after{top:50px;left:14px;}.lds-roller div:nth-child(8){animation-delay:-0.288s;}.lds-roller div:nth-child(8):after{top:45px;left:10px;}#preloadingAnimation .load-tips{color: #39a7de;font-size:2rem;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);margin-top:80px;text-align:center;width:400px;height:64px;}  @keyframes lds-roller{0%{transform:rotate(0deg);} 100%{transform:rotate(360deg);}}</style>
+    <style>
+    /*!
+     * Load Awesome v1.1.0 (http://github.danielcardoso.net/load-awesome/)
+     * Copyright 2015 Daniel Cardoso <@DanielCardoso>
+     * Licensed under MIT
+     */
+    .la-ball-scale-ripple-multiple,
+    .la-ball-scale-ripple-multiple > div {
+        position: relative;
+        -webkit-box-sizing: border-box;
+           -moz-box-sizing: border-box;
+                box-sizing: border-box;
+    }
+    .la-ball-scale-ripple-multiple {
+        font-size: 0;
+        color: #fff;
+        display: block;
+        margin-left: auto;
+        margin-right: auto;
+        margin-top: 250px;
+    }
+    .la-ball-scale-ripple-multiple.la-dark {
+        color: #333;
+    }
+    .la-ball-scale-ripple-multiple > div {
+        display: inline-block;
+        float: none;
+        background-color: currentColor;
+        border: 0 solid currentColor;
+    }
+    .la-ball-scale-ripple-multiple {
+        width: 32px;
+        height: 32px;
+    }
+    .la-ball-scale-ripple-multiple > div {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 32px;
+        height: 32px;
+        background: transparent;
+        border-width: 2px;
+        border-radius: 100%;
+        opacity: 0;
+        -webkit-animation: ball-scale-ripple-multiple 1.25s 0s infinite cubic-bezier(.21, .53, .56, .8);
+           -moz-animation: ball-scale-ripple-multiple 1.25s 0s infinite cubic-bezier(.21, .53, .56, .8);
+             -o-animation: ball-scale-ripple-multiple 1.25s 0s infinite cubic-bezier(.21, .53, .56, .8);
+                animation: ball-scale-ripple-multiple 1.25s 0s infinite cubic-bezier(.21, .53, .56, .8);
+    }
+    .la-ball-scale-ripple-multiple > div:nth-child(1) {
+        -webkit-animation-delay: 0s;
+           -moz-animation-delay: 0s;
+             -o-animation-delay: 0s;
+                animation-delay: 0s;
+    }
+    .la-ball-scale-ripple-multiple > div:nth-child(2) {
+        -webkit-animation-delay: .25s;
+           -moz-animation-delay: .25s;
+             -o-animation-delay: .25s;
+                animation-delay: .25s;
+    }
+    .la-ball-scale-ripple-multiple > div:nth-child(3) {
+        -webkit-animation-delay: .5s;
+           -moz-animation-delay: .5s;
+             -o-animation-delay: .5s;
+                animation-delay: .5s;
+    }
+    .la-ball-scale-ripple-multiple.la-sm {
+        width: 16px;
+        height: 16px;
+    }
+    .la-ball-scale-ripple-multiple.la-sm > div {
+        width: 16px;
+        height: 16px;
+        border-width: 1px;
+    }
+    .la-ball-scale-ripple-multiple.la-2x {
+        width: 64px;
+        height: 64px;
+    }
+    .la-ball-scale-ripple-multiple.la-2x > div {
+        width: 64px;
+        height: 64px;
+        border-width: 4px;
+    }
+    .la-ball-scale-ripple-multiple.la-3x {
+        width: 96px;
+        height: 96px;
+    }
+    .la-ball-scale-ripple-multiple.la-3x > div {
+        width: 96px;
+        height: 96px;
+        border-width: 6px;
+    }
+    /*
+     * Animation
+     */
+    @-webkit-keyframes ball-scale-ripple-multiple {
+        0% {
+            opacity: 1;
+            -webkit-transform: scale(.1);
+                    transform: scale(.1);
+        }
+        70% {
+            opacity: .5;
+            -webkit-transform: scale(1);
+                    transform: scale(1);
+        }
+        95% {
+            opacity: 0;
+        }
+    }
+    @-moz-keyframes ball-scale-ripple-multiple {
+        0% {
+            opacity: 1;
+            -moz-transform: scale(.1);
+                 transform: scale(.1);
+        }
+        70% {
+            opacity: .5;
+            -moz-transform: scale(1);
+                 transform: scale(1);
+        }
+        95% {
+            opacity: 0;
+        }
+    }
+    @-o-keyframes ball-scale-ripple-multiple {
+        0% {
+            opacity: 1;
+            -o-transform: scale(.1);
+               transform: scale(.1);
+        }
+        70% {
+            opacity: .5;
+            -o-transform: scale(1);
+               transform: scale(1);
+        }
+        95% {
+            opacity: 0;
+        }
+    }
+    @keyframes ball-scale-ripple-multiple {
+        0% {
+            opacity: 1;
+            -webkit-transform: scale(.1);
+               -moz-transform: scale(.1);
+                 -o-transform: scale(.1);
+                    transform: scale(.1);
+        }
+        70% {
+            opacity: .5;
+            -webkit-transform: scale(1);
+               -moz-transform: scale(1);
+                 -o-transform: scale(1);
+                    transform: scale(1);
+        }
+        95% {
+            opacity: 0;
+        }
+    }
+    </style>
   </head>
   <body>
     <noscript>
-      <strong>We're sorry but CloudStack Primate UI doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+      <strong>We're sorry but CloudStack Primate needs JavaScript enabled. Please enable it to continue.</strong>
     </noscript>
     <div id="app">
-      <div id="preloadingAnimation"><div class=lds-roller><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div><div class=load-tips>Loading</div></div>
+        <div style="color: #39A7DE" class="la-ball-scale-ripple-multiple la-3x"><div></div><div></div><div></div></div>
     </div>
   </body>
 </html>
diff --git a/ui/public/loading/loading.css b/ui/public/loading/loading.css
deleted file mode 100644
index a899eac7906..00000000000
--- a/ui/public/loading/loading.css
+++ /dev/null
@@ -1 +0,0 @@
-#preloadingAnimation{position:fixed;left:0;top:0;height:100%;width:100%;background:#ffffff;user-select:none;z-index: 9999;overflow: hidden}.lds-roller{display:inline-block;position:relative;left:50%;top:50%;transform:translate(-50%,-50%);width:64px;height:64px;}.lds-roller div{animation:lds-roller 1.2s cubic-bezier(0.5,0,0.5,1) infinite;transform-origin:32px 32px;}.lds-roller div:after{content:" ";display:block;position:absolute;width:6px;height:6px;border-radius:50%;background:#13c2c2;margin:-3px 0 0 -3px;}.lds-roller div:nth-child(1){animation-delay:-0.036s;}.lds-roller div:nth-child(1):after{top:50px;left:50px;}.lds-roller div:nth-child(2){animation-delay:-0.072s;}.lds-roller div:nth-child(2):after{top:54px;left:45px;}.lds-roller div:nth-child(3){animation-delay:-0.108s;}.lds-roller div:nth-child(3):after{top:57px;left:39px;}.lds-roller div:nth-child(4){animation-delay:-0.144s;}.lds-roller div:nth-child(4):after{top:58px;left:32px;}.lds-roller div:nth-child(5){animation-delay:-0.18s;}.lds-roller div:nth-child(5):after{top:57px;left:25px;}.lds-roller div:nth-child(6){animation-delay:-0.216s;}.lds-roller div:nth-child(6):after{top:54px;left:19px;}.lds-roller div:nth-child(7){animation-delay:-0.252s;}.lds-roller div:nth-child(7):after{top:50px;left:14px;}.lds-roller div:nth-child(8){animation-delay:-0.288s;}.lds-roller div:nth-child(8):after{top:45px;left:10px;}#preloadingAnimation .load-tips{color: #13c2c2;font-size:2rem;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);margin-top:80px;text-align:center;width:400px;height:64px;}  @keyframes lds-roller{0%{transform:rotate(0deg);} 100%{transform:rotate(360deg);}}
\ No newline at end of file
diff --git a/ui/public/loading/loading.html b/ui/public/loading/loading.html
deleted file mode 100644
index 9b9319650f0..00000000000
--- a/ui/public/loading/loading.html
+++ /dev/null
@@ -1 +0,0 @@
-<div id="preloadingAnimation"><div class=lds-roller><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div><div class=load-tips>Loading</div></div>
\ No newline at end of file
diff --git a/ui/public/loading/option2/html_code_segment.html b/ui/public/loading/option2/html_code_segment.html
deleted file mode 100644
index df81b262b35..00000000000
--- a/ui/public/loading/option2/html_code_segment.html
+++ /dev/null
@@ -1,5 +0,0 @@
-<div class="preloading-animate">
-  <div class="preloading-wrapper">
-    <svg class="preloading-balls" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid"><circle cx="67.802" cy="59.907" r="6" fill="#51CACC"><animate attributeName="cx" values="75;57.72542485937369" keyTimes="0;1" dur="1s" repeatCount="indefinite"/><animate attributeName="cy" values="50;73.77641290737884" keyTimes="0;1" dur="1s" repeatCount="indefinite"/><animate attributeName="fill" values="#51CACC;#9DF871" keyTimes="0;1" dur="1s" repeatCount="indefinite"/></circle><circle cx="46.079" cy="69.992" r="6" fill="#9DF871"><animate attributeName="cx" values="57.72542485937369;29.774575140626318" keyTimes="0;1" dur="1s" repeatCount="indefinite"/><animate attributeName="cy" values="73.77641290737884;64.69463130731182" keyTimes="0;1" dur="1s" repeatCount="indefinite"/><animate attributeName="fill" values="#9DF871;#E0FF77" keyTimes="0;1" dur="1s" repeatCount="indefinite"/></circle><circle cx="29.775" cy="52.449" r="6" fill="#E0FF77"><animate attributeName="cx" values="29.774575140626318;29.774575140626315" keyTimes="0;1" dur="1s" repeatCount="indefinite"/><animate attributeName="cy" values="64.69463130731182;35.30536869268818" keyTimes="0;1" dur="1s" repeatCount="indefinite"/><animate attributeName="fill" values="#E0FF77;#DE9DD6" keyTimes="0;1" dur="1s" repeatCount="indefinite"/></circle><circle cx="41.421" cy="31.521" r="6" fill="#DE9DD6"><animate attributeName="cx" values="29.774575140626315;57.72542485937368" keyTimes="0;1" dur="1s" repeatCount="indefinite"/><animate attributeName="cy" values="35.30536869268818;26.22358709262116" keyTimes="0;1" dur="1s" repeatCount="indefinite"/><animate attributeName="fill" values="#DE9DD6;#FF708E" keyTimes="0;1" dur="1s" repeatCount="indefinite"/></circle><circle cx="64.923" cy="36.13" r="6" fill="#FF708E"><animate attributeName="cx" values="57.72542485937368;75" keyTimes="0;1" dur="1s" repeatCount="indefinite"/><animate attributeName="cy" values="26.22358709262116;49.99999999999999" keyTimes="0;1" dur="1s" repeatCount="indefinite"/><animate attributeName="fill" values="#FF708E;#51CACC" keyTimes="0;1" dur="1s" repeatCount="indefinite"/></circle></svg>
-  </div>
-</div>
\ No newline at end of file
diff --git a/ui/public/loading/option2/loading.css b/ui/public/loading/option2/loading.css
deleted file mode 100644
index c35cd73ad58..00000000000
--- a/ui/public/loading/option2/loading.css
+++ /dev/null
@@ -1 +0,0 @@
-.preloading-animate{background:#ffffff;width:100%;height:100%;position:fixed;left:0;top:0;z-index:299;}.preloading-animate .preloading-wrapper{position:absolute;width:5rem;height:5rem;left:50%;top:50%;transform:translate(-50%,-50%);}.preloading-animate .preloading-wrapper .preloading-balls{font-size:5rem;}
\ No newline at end of file
diff --git a/ui/public/loading/option2/loading.svg b/ui/public/loading/option2/loading.svg
deleted file mode 100644
index 7ff7322d7f9..00000000000
--- a/ui/public/loading/option2/loading.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg class="preloading-balls" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid"><circle cx="67.802" cy="59.907" r="6" fill="#51CACC"><animate attributeName="cx" values="75;57.72542485937369" keyTimes="0;1" dur="1s" repeatCount="indefinite"/><animate attributeName="cy" values="50;73.77641290737884" keyTimes="0;1" dur="1s" repeatCount="indefinite"/><animate attributeName="fill" values="#51CACC;#9DF871" keyTimes="0;1" dur="1s" repeatCount="indefinite"/></circle><circle cx="46.079" cy="69.992" r="6" fill="#9DF871"><animate attributeName="cx" values="57.72542485937369;29.774575140626318" keyTimes="0;1" dur="1s" repeatCount="indefinite"/><animate attributeName="cy" values="73.77641290737884;64.69463130731182" keyTimes="0;1" dur="1s" repeatCount="indefinite"/><animate attributeName="fill" values="#9DF871;#E0FF77" keyTimes="0;1" dur="1s" repeatCount="indefinite"/></circle><circle cx="29.775" cy="52.449" r="6" fill="#E0FF77"><animate attributeName="cx" values="29.774575140626318;29.774575140626315" keyTimes="0;1" dur="1s" repeatCount="indefinite"/><animate attributeName="cy" values="64.69463130731182;35.30536869268818" keyTimes="0;1" dur="1s" repeatCount="indefinite"/><animate attributeName="fill" values="#E0FF77;#DE9DD6" keyTimes="0;1" dur="1s" repeatCount="indefinite"/></circle><circle cx="41.421" cy="31.521" r="6" fill="#DE9DD6"><animate attributeName="cx" values="29.774575140626315;57.72542485937368" keyTimes="0;1" dur="1s" repeatCount="indefinite"/><animate attributeName="cy" values="35.30536869268818;26.22358709262116" keyTimes="0;1" dur="1s" repeatCount="indefinite"/><animate attributeName="fill" values="#DE9DD6;#FF708E" keyTimes="0;1" dur="1s" repeatCount="indefinite"/></circle><circle cx="64.923" cy="36.13" r="6" fill="#FF708E"><animate attributeName="cx" values="57.72542485937368;75" keyTimes="0;1" dur="1s" repeatCount="indefinite"/><animate attributeName="cy" values="26.22358709262116;49.99999999999999" keyTimes="0;1" dur="1s" repeatCount="indefinite"/><animate attributeName="fill" values="#FF708E;#51CACC" keyTimes="0;1" dur="1s" repeatCount="indefinite"/></circle></svg>
\ No newline at end of file
diff --git a/ui/vue.config.js b/ui/vue.config.js
index 1b020480f8f..be948187bda 100644
--- a/ui/vue.config.js
+++ b/ui/vue.config.js
@@ -72,13 +72,11 @@ module.exports = {
     loaderOptions: {
       less: {
         modifyVars: {
-          /* less 变量覆盖，用于自定义 ant design 主题 */
-
-          /*
-          'primary-color': '#F5222D',
-          'link-color': '#F5222D',
-          'border-radius-base': '4px',
-          */
+          // Refer:
+          // https://ant.design/docs/spec/colors
+          // https://vue.ant.design/docs/vue/customize-theme/
+          'primary-color': '#1890ff',
+          'link-color': '#1890ff'
         },
         javascriptEnabled: true
       }