added loading into finish button

akaunting · Aug 15, 2022 · 2265809 · 2265809
1 parent c9dd7a9
commit 2265809
Show file tree

Hide file tree

Showing 3 changed files with 98 additions and 3 deletions.
diff --git a/presets.js b/presets.js
@@ -211,14 +211,19 @@ module.exports = {
                 '0%': { boxShadow: '0 28px 0 -28px #ffffff' },
                 '100%': { boxShadow: '0 28px 0 #ffffff' },
               },
+              submit_second: {
+                '0%': { boxShadow: '0 28px 0 -28px #55588b' },
+                '100%': { boxShadow: '0 28px 0 #55588b' },
+              },
           },
 
           animation: {
               vibrate: 'vibrate 2s cubic-bezier(.36, .07, .19, .97) infinite;',
               pulsate_transparent: 'pulsate_transparent 1500ms ease infinite;',
               pulsate: 'pulsate 1500ms ease infinite;',
               spin: 'spin 1000ms infinite',
-              submit: 'submit 0.7s ease alternate infinite'
+              submit: 'submit 0.7s ease alternate infinite',
+              submit_second: 'submit_second 0.7s ease alternate infinite'
           },
 
           transitionProperty: {

diff --git a/public/css/app.css b/public/css/app.css
@@ -9981,6 +9981,34 @@ input[type="date"]::-webkit-inner-spin-button,
   -webkit-animation: submit 0.7s ease alternate infinite;
           animation: submit 0.7s ease alternate infinite;
 }
+@-webkit-keyframes submit_second{
+
+  0%{
+    -webkit-box-shadow: 0 28px 0 -28px #55588b;
+            box-shadow: 0 28px 0 -28px #55588b;
+  }
+
+  100%{
+    -webkit-box-shadow: 0 28px 0 #55588b;
+            box-shadow: 0 28px 0 #55588b;
+  }
+}
+@keyframes submit_second{
+
+  0%{
+    -webkit-box-shadow: 0 28px 0 -28px #55588b;
+            box-shadow: 0 28px 0 -28px #55588b;
+  }
+
+  100%{
+    -webkit-box-shadow: 0 28px 0 #55588b;
+            box-shadow: 0 28px 0 #55588b;
+  }
+}
+.animate-submit_second{
+  -webkit-animation: submit_second 0.7s ease alternate infinite;
+          animation: submit_second 0.7s ease alternate infinite;
+}
 .cursor-auto{
   cursor: auto;
 }
@@ -47306,6 +47334,27 @@ body{
           animation: submit 0.7s ease alternate infinite;
 }
 
+@keyframes submit_second{
+
+  0%{
+    content: var(--tw-content);
+    -webkit-box-shadow: 0 28px 0 -28px #55588b;
+            box-shadow: 0 28px 0 -28px #55588b;
+  }
+
+  100%{
+    content: var(--tw-content);
+    -webkit-box-shadow: 0 28px 0 #55588b;
+            box-shadow: 0 28px 0 #55588b;
+  }
+}
+
+.before\:animate-submit_second::before{
+  content: var(--tw-content);
+  -webkit-animation: submit_second 0.7s ease alternate infinite;
+          animation: submit_second 0.7s ease alternate infinite;
+}
+
 .before\:rounded-full::before{
   content: var(--tw-content);
   border-radius: 9999px;
@@ -47441,6 +47490,27 @@ body{
           animation: submit 0.7s ease alternate infinite;
 }
 
+@keyframes submit_second{
+
+  0%{
+    content: var(--tw-content);
+    -webkit-box-shadow: 0 28px 0 -28px #55588b;
+            box-shadow: 0 28px 0 -28px #55588b;
+  }
+
+  100%{
+    content: var(--tw-content);
+    -webkit-box-shadow: 0 28px 0 #55588b;
+            box-shadow: 0 28px 0 #55588b;
+  }
+}
+
+.after\:animate-submit_second::after{
+  content: var(--tw-content);
+  -webkit-animation: submit_second 0.7s ease alternate infinite;
+          animation: submit_second 0.7s ease alternate infinite;
+}
+
 .after\:rounded-full::after{
   content: var(--tw-content);
   border-radius: 9999px;
@@ -47693,6 +47763,16 @@ body{
   background-color: rgb(197 217 186 / var(--tw-bg-opacity));
 }
 
+.disabled\:bg-gray-300:disabled{
+  --tw-bg-opacity: 1;
+  background-color: rgb(209 213 219 / var(--tw-bg-opacity));
+}
+
+.disabled\:bg-gray-100:disabled{
+  --tw-bg-opacity: 1;
+  background-color: rgb(243 244 246 / var(--tw-bg-opacity));
+}
+
 .disabled\:opacity-50:disabled{
   opacity: 0.5;
 }

diff --git a/resources/assets/js/views/wizard/Finish.vue b/resources/assets/js/views/wizard/Finish.vue
@@ -55,8 +55,16 @@
                         <img :src="image_src" class="absolute top-0 right-2" alt="" />
                     </div>
 
-                    <base-button class="flex items-center justify-center text-base rounded-lg disabled:opacity-50 relative m-auto bottom-48 bg-white hover:bg-gray-100 text-purple rounded-md py-3 px-5 font-semibold btn-default" @click="finish()">
-                        {{ translations.finish.create_first_invoice }}
+                    <base-button
+                        class="relative flex items-center justify-center text-base rounded-lg m-auto bottom-48 bg-white hover:bg-gray-100 text-purple py-3 px-5 font-semibold disabled:bg-gray-100 "
+                        :disabled="anchor_loading"
+                        @click="finish()"
+                    >
+                        <i v-if="anchor_loading" class="animate-submit_second delay-[0.28s] absolute w-2 h-2 rounded-full left-0 right-0 -top-2.5 m-auto before:absolute before:w-2 before:h-2 before:rounded-full before:animate-submit_second before:delay-[0.14s] after:absolute after:w-2 after:h-2 after:rounded-full after:animate-submit_second before:-left-3.5 after:-right-3.5 after:delay-[0.42s]"></i> 
+
+                        <span :class="[{'opacity-0': anchor_loading}]">
+                            {{ translations.finish.create_first_invoice }}
+                        </span>
                     </base-button>
                 </div>
             </div>
@@ -93,6 +101,7 @@ export default {
             active: 3,
             route_url: url,
             image_src: app_url + "/public/img/wizard-modules.png",
+            anchor_loading: false
         };
     },
 
@@ -124,6 +133,7 @@ export default {
 
         finish() {
             window.location.href = url + "/sales/invoices/create";
+            this.anchor_loading = true;
         },
     },
 };