From 516410a6496a8268c0a964312d4fd6f31c460286 Mon Sep 17 00:00:00 2001
From: James Collins <james.collins@outlook.com.au>
Date: Tue, 21 Feb 2023 14:09:13 +1000
Subject: [PATCH] update loaders

---
 resources/js/components/SMLoader.vue          | 12 +++-
 resources/js/components/SMLoadingIcon.vue     | 66 ------------------
 .../js/components/SMLoadingIconBalls.vue      | 67 +++++++++++++++++++
 .../js/components/SMLoadingIconToolbox.vue    | 49 ++++++++++++++
 4 files changed, 126 insertions(+), 68 deletions(-)
 delete mode 100644 resources/js/components/SMLoadingIcon.vue
 create mode 100644 resources/js/components/SMLoadingIconBalls.vue
 create mode 100644 resources/js/components/SMLoadingIconToolbox.vue

diff --git a/resources/js/components/SMLoader.vue b/resources/js/components/SMLoader.vue
index e029ae9..6fb6b43 100644
--- a/resources/js/components/SMLoader.vue
+++ b/resources/js/components/SMLoader.vue
@@ -2,7 +2,8 @@
     <template v-if="loading">
         <transition name="fade">
             <div v-if="loading" class="sm-loader">
-                <SMLoadingIcon />
+                <SMLoadingIconToolbox v-if="type.toLowerCase() == 'toolbox'" />
+                <SMLoadingIconBalls v-else />
             </div>
         </transition>
     </template>
@@ -10,12 +11,19 @@
 </template>
 
 <script setup lang="ts">
-import SMLoadingIcon from "./SMLoadingIcon.vue";
+import SMLoadingIconToolbox from "./SMLoadingIconToolbox.vue";
+import SMLoadingIconBalls from "./SMLoadingIconBalls.vue";
 
 defineProps({
     loading: {
         type: Boolean,
         default: false,
+        required: true,
+    },
+    type: {
+        type: String,
+        default: "",
+        required: false,
     },
 });
 </script>
diff --git a/resources/js/components/SMLoadingIcon.vue b/resources/js/components/SMLoadingIcon.vue
deleted file mode 100644
index 1bfad1d..0000000
--- a/resources/js/components/SMLoadingIcon.vue
+++ /dev/null
@@ -1,66 +0,0 @@
-<template>
-    <div class="sm-loading-icon">
-        <div></div>
-        <div></div>
-        <div></div>
-        <div></div>
-    </div>
-</template>
-
-<style lang="scss">
-.sm-loading-icon {
-    display: inline-block;
-    position: relative;
-    width: 80px;
-    height: 80px;
-}
-.sm-loading-icon div {
-    position: absolute;
-    top: 33px;
-    width: 13px;
-    height: 13px;
-    border-radius: 50%;
-    background: #000;
-    animation-timing-function: cubic-bezier(0, 1, 1, 0);
-}
-.sm-loading-icon div:nth-child(1) {
-    left: 8px;
-    animation: sm-loading-icon1 0.6s infinite;
-}
-.sm-loading-icon div:nth-child(2) {
-    left: 8px;
-    animation: sm-loading-icon2 0.6s infinite;
-}
-.sm-loading-icon div:nth-child(3) {
-    left: 32px;
-    animation: sm-loading-icon2 0.6s infinite;
-}
-.sm-loading-icon div:nth-child(4) {
-    left: 56px;
-    animation: sm-loading-icon3 0.6s infinite;
-}
-@keyframes sm-loading-icon1 {
-    0% {
-        transform: scale(0);
-    }
-    100% {
-        transform: scale(1);
-    }
-}
-@keyframes sm-loading-icon3 {
-    0% {
-        transform: scale(1);
-    }
-    100% {
-        transform: scale(0);
-    }
-}
-@keyframes sm-loading-icon2 {
-    0% {
-        transform: translate(0, 0);
-    }
-    100% {
-        transform: translate(24px, 0);
-    }
-}
-</style>
diff --git a/resources/js/components/SMLoadingIconBalls.vue b/resources/js/components/SMLoadingIconBalls.vue
new file mode 100644
index 0000000..73acde3
--- /dev/null
+++ b/resources/js/components/SMLoadingIconBalls.vue
@@ -0,0 +1,67 @@
+<template>
+    <div class="sm-loading-icon-balls">
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+    </div>
+</template>
+
+<style lang="scss">
+.sm-loading-icon-balls {
+    display: inline-block;
+    position: relative;
+    width: 80px;
+    height: 80px;
+
+    div {
+        position: absolute;
+        top: 33px;
+        width: 13px;
+        height: 13px;
+        border-radius: 50%;
+        background: #000;
+        animation-timing-function: cubic-bezier(0, 1, 1, 0);
+    }
+    div:nth-child(1) {
+        left: 8px;
+        animation: sm-loading-icon1 0.6s infinite;
+    }
+    div:nth-child(2) {
+        left: 8px;
+        animation: sm-loading-icon2 0.6s infinite;
+    }
+    div:nth-child(3) {
+        left: 32px;
+        animation: sm-loading-icon2 0.6s infinite;
+    }
+    div:nth-child(4) {
+        left: 56px;
+        animation: sm-loading-icon3 0.6s infinite;
+    }
+    @keyframes sm-loading-icon1 {
+        0% {
+            transform: scale(0);
+        }
+        100% {
+            transform: scale(1);
+        }
+    }
+    @keyframes sm-loading-icon3 {
+        0% {
+            transform: scale(1);
+        }
+        100% {
+            transform: scale(0);
+        }
+    }
+    @keyframes sm-loading-icon2 {
+        0% {
+            transform: translate(0, 0);
+        }
+        100% {
+            transform: translate(24px, 0);
+        }
+    }
+}
+</style>
diff --git a/resources/js/components/SMLoadingIconToolbox.vue b/resources/js/components/SMLoadingIconToolbox.vue
new file mode 100644
index 0000000..28a2252
--- /dev/null
+++ b/resources/js/components/SMLoadingIconToolbox.vue
@@ -0,0 +1,49 @@
+<template>
+    <div class="sm-loading-icon-toolbox">
+        <div class="loading-logo"></div>
+        <div class="loading-bar"></div>
+    </div>
+</template>
+
+<style lang="scss">
+.sm-loading-icon-toolbox {
+    display: inline-block;
+    position: relative;
+    width: 80px;
+    height: 80px;
+
+    .loading-logo {
+        background-image: url("/img/logo-small.png");
+        background-size: contain;
+        background-repeat: no-repeat;
+        background-position: center;
+        height: 130px;
+        width: 130px;
+    }
+
+    .loading-bar {
+        width: 130px;
+        height: 10px;
+        background: #cfcfcf;
+        position: relative;
+        overflow: hidden;
+        border: 1px solid #aaa;
+    }
+
+    .loading-bar::before {
+        content: "";
+        width: 68px;
+        height: 10px;
+        background: $primary-color;
+        position: absolute;
+        left: -34px;
+        animation: bluebar 1.5s infinite ease;
+    }
+}
+
+@keyframes bluebar {
+    50% {
+        left: 96px;
+    }
+}
+</style>