From 8304dc1a0ea97b3c8220d0c58407f1001e5c5a30 Mon Sep 17 00:00:00 2001
From: HardiReady <hardi@noarch.de>
Date: Fri, 15 Feb 2019 20:12:54 +0100
Subject: [PATCH] Add OPT branded load indicator (CC-87)

---
 package.json                                  |  2 +-
 static/src/app/app.component.css              |  2 +-
 static/src/app/app.component.html             |  6 ++-
 static/src/app/app.component.ts               |  2 +-
 static/src/app/style/load-indicator.css       | 53 +++++++++++--------
 .../assets/icon/general/loading-arrows.svg    |  4 --
 .../src/assets/icon/general/opt-logo-core.svg |  1 +
 7 files changed, 41 insertions(+), 29 deletions(-)
 delete mode 100644 static/src/assets/icon/general/loading-arrows.svg
 create mode 100644 static/src/assets/icon/general/opt-logo-core.svg

diff --git a/package.json b/package.json
index f709fa8..c77239e 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "opt-cc",
-  "version": "1.9.1",
+  "version": "1.9.2",
   "author": "Florian Hartwich <hardi@noarch.de>",
   "private": true,
   "scripts": {
diff --git a/static/src/app/app.component.css b/static/src/app/app.component.css
index f14bb88..06d0950 100644
--- a/static/src/app/app.component.css
+++ b/static/src/app/app.component.css
@@ -43,7 +43,7 @@ li {
 }
 
 #scrollTopBtn:hover {
-  background: rgba(16, 16, 16);
+  background: #101010;
 }
 
 .unprocessed {
diff --git a/static/src/app/app.component.html b/static/src/app/app.component.html
index 1a309f5..8e11193 100644
--- a/static/src/app/app.component.html
+++ b/static/src/app/app.component.html
@@ -137,7 +137,11 @@
   </div>
 </div>
 
-<span *ngIf="loading" class="load-indicator load-arrow glyphicon-refresh-animate"></span>
+<div *ngIf="loading" class="load-indicator">
+  <div class="opt-loader"></div>
+  <mat-icon svgIcon="opt-logo-core" class="opt-logo-core"></mat-icon>
+</div>
+
 
 <button mat-icon-button
         mat-mini-fab
diff --git a/static/src/app/app.component.ts b/static/src/app/app.component.ts
index 9832c71..7c70c77 100644
--- a/static/src/app/app.component.ts
+++ b/static/src/app/app.component.ts
@@ -36,7 +36,7 @@ export class AppComponent implements OnInit {
   // to load from assets/icon folder
   svgIcons = {
     'opt-logo': 'general/opt-logo',
-    'loading-arrows': 'general/loading-arrows',
+    'opt-logo-core': 'general/opt-logo-core',
     'add': 'outline-add_box-24px',
     'add-user': 'twotone-person_add-24px',
     'award': 'award',
diff --git a/static/src/app/style/load-indicator.css b/static/src/app/style/load-indicator.css
index 4090c6c..a9abf65 100644
--- a/static/src/app/style/load-indicator.css
+++ b/static/src/app/style/load-indicator.css
@@ -3,47 +3,58 @@
   top: 50%;
   z-index: 10000;
   left: 46%;
-  filter: drop-shadow(3px 1px 2px #dadada);
+  width: 100px;
+  height: 100px;
+  filter: drop-shadow(3px 1px 2px #666666);
 }
 
+.opt-loader {
+  border: 3px solid #666666;
+  border-top: 3px solid #dadada;
+  border-radius: 50%;
+  display: inline-block;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  animation: spin 2s linear infinite, fade 2s linear infinite;
+}
+
+.opt-logo-core {
+  width: 85px;
+  height: 85px;
+  margin: 6px 8px;
+  stroke: #666666;
+  color: #dadada;
+}
+
+
 @media only screen and (min-width: 1200px) {
   .load-indicator {
-    left: 47.4%;
+    left: 46.1%;
   }
 }
 @media only screen and (min-width: 1376px) {
   .load-indicator {
-    left: 48%;
+    left: 46.55%;
   }
 }
 @media only screen and (min-width: 1600px) {
   .load-indicator {
-    left: 48.2%;
+    left: 47.45%;
   }
 }
 @media only screen and (min-width: 1925px) {
   .load-indicator {
-    left: 48.7%;
+    left: 48.1%;
   }
 }
 
-.load-arrow {
-  background: url(../../assets/icon/general/loading-arrows.svg) no-repeat;
-  display: block;
-  width: 70px;
-  height: 70px;
-}
-
-/* Loading Animation */
-.glyphicon-refresh-animate {
-  animation: spin 1.5s linear infinite;
+@keyframes fade {
+  0%, 100% { opacity: 0.5; }
+  50%  { opacity: 1; }
 }
 
 @keyframes spin {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
+  0% { transform: rotate(0deg) }
+  100% { transform: rotate(360deg) }
 }
diff --git a/static/src/assets/icon/general/loading-arrows.svg b/static/src/assets/icon/general/loading-arrows.svg
deleted file mode 100644
index be1b82b..0000000
--- a/static/src/assets/icon/general/loading-arrows.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="70px" height="70px" version="1.1" viewBox="0 0 70 70" xmlns="http://www.w3.org/2000/svg">
- <path d="m0.25 34.88c0-3.06 0.25-6.77 0.94-9.69 2.43-10.28 12.69-20.77 22.75-23.75 3.65-1.09 5.7-0.92 11.12-1.19 3.64 0.02 10.15 0.2 16.63 3.81 2.22 1.24 8 5.32 10.31 7.44 1.69-1.38 6.06-6.12 8-7.5l-0.06 21.75s-22.13 0.37-22.13 0.37 7.13-7.31 7.13-7.31c-5.69-4.69-10.77-8.5-17.94-9.33-3.4-0.4-8.56-1.04-15 2.96-5.63 3.87-7.5 5.87-10.38 10.87-2.75 6.88-2.18 8.94-2.62 11.69l-8.75-0.12zm-0.25 8.12m69.75-7.88c0 3.06-0.25 6.77-0.94 9.69-2.43 10.28-12.69 20.77-22.75 23.75-3.65 1.09-5.7 0.92-11.12 1.19-3.64-0.02-10.15-0.2-16.63-3.81-2.22-1.24-8-5.32-10.31-7.44-1.69 1.38-6.06 6.12-8 7.5l0.06-21.75s22.13-0.37 22.13-0.37-7.13 7.31-7.13 7.31c5.69 4.69 10.77 8.5 17.94 9.33 3.4 0.4 8.56 1.04 15-2.96 5.62-3.87 7.5-5.87 10.38-10.87 2.74-6.88 2.18-8.94 2.62-11.69l8.75 0.12zm0.25-8.12"/>
-</svg>
diff --git a/static/src/assets/icon/general/opt-logo-core.svg b/static/src/assets/icon/general/opt-logo-core.svg
new file mode 100644
index 0000000..9832983
--- /dev/null
+++ b/static/src/assets/icon/general/opt-logo-core.svg
@@ -0,0 +1 @@
+<svg width="2.3in" height="2.2in" version="1.1" viewBox="0 0 168 160" xmlns="http://www.w3.org/2000/svg"><path id="Selection" d="m85 4c5.5 42 15 65 26 104 5-1.7 9.1-2.7 13-7 4.1-5.2 3.1-12 2.1-18-1.8-11-14-34-20-44-3-4.8-6.6-9.5-8.3-15 0 0-0.39-1.6 1-1 6.8 3.5 16 17 21 23 13 18 28 44 28 66-0.13 7.5-1.5 9-3 11-2.5 2.6-3.3 2.6-11 1.7l-20-4.7c0 6.8 0.47 12-2.3 18-7.6 18-28 23-41 8.8-7.8-7.7-10-18-10-29-4.8 2.2-9.8 4.2-15 5.3-8 1.8-21 3.4-24-6.3-0.81-2.3-0.76-5.6-0.71-8 0.48-21 18-50 31-66 4.8-6.2 12-17 19-19-1.7 5.4-5.3 10-8.3 15l-6.5 11c-6.5 11-14 27-15 40-0.56 7.9 3.2 14 11 17 3.3 1.1 5.6 1.2 9 1.2 0-8.2 0.04-13 3.1-21 0.76-2 2.3-5.8 4.3-6.8 4.2-2.1 5 9.4 5.5 12 3 15 7.8 30 16 43l-8.6-31c-6.2-22-11-51-7.2-73 1.7-9.8 3.9-19 9.8-27 0.19-0.31 2.6-2.9 3 0z"/></svg>