* partial work on app-loading

cioraneanu · Jun 14, 2024 · 6fa762f · 6fa762f
1 parent f60e378
commit 6fa762f
Show file tree

Hide file tree

Showing 5 changed files with 67 additions and 47 deletions.
diff --git a/front/assets/styles/animations.css b/front/assets/styles/animations.css
@@ -22,7 +22,7 @@
 
 .zoom-fade-enter-active,
 .zoom-fade-leave-active {
-    animation-duration: 0.2s;
+    animation-duration: 0.6s;
     /*animation-timing-function: ease-in-out;*/
     transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
     animation-fill-mode: both;
@@ -58,7 +58,7 @@
 
 .fade-enter-active,
 .fade-leave-active {
-    animation-duration: 2.2s;
+    animation-duration: 0.25s;
     /*animation-timing-function: ease-in-out;*/
     transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
     animation-fill-mode: both;
@@ -71,3 +71,51 @@
 .fade-leave-active {
     animation-name: fade-out;
 }
+
+/*--------------*/
+
+.animate-rotate-infinite {
+    animation: apply-rotation 1s infinite linear;
+}
+
+@keyframes apply-rotation {
+    100% {
+        transform: rotate(-1turn);
+    }
+}
+
+
+/*-----------------*/
+
+@keyframes jump {
+    0%, 100% {
+        transform: translate(-50%, -50%) translateY(0);
+    }
+    50% {
+        transform: translate(-50%, -50%) translateY(-20px); /* Adjust this value for jump height */
+    }
+}
+
+.jump {
+    animation: jump 2s ease-in-out infinite;
+}
+
+
+/*------------------*/
+
+
+.fade-slide-enter-active, .fade-slide-leave-active {
+    transition: all 0.5s ease;
+}
+
+.fade-slide-enter, .fade-slide-leave-to /* .fade-slide-leave-active in <2.1.8 */ {
+    opacity: 0;
+}
+
+.fade-slide-enter {
+    transform: translateY(-30px);
+}
+
+.fade-slide-leave-to {
+    transform: translateY(30px);
+}
diff --git a/front/assets/styles/theme.css b/front/assets/styles/theme.css
@@ -963,10 +963,10 @@ img, svg {
 
 
 .app-loading {
-    background: #f7f7f7;
+    background: #fff;
     border-radius: 10px;
-    border: 5px solid #fff;
-    padding: 30px;
+    /*border: 5px solid #fff;*/
+    padding: 35px;
     position: fixed;
     top: 50%;
     left: 50%;

diff --git a/front/components/ui-kit/app-loading.vue b/front/components/ui-kit/app-loading.vue
@@ -1,12 +1,12 @@
 <template>
-  <div v-if="appStore.isLoading" class="app-loading-background">
-    <div class="app-loading flex-column flex-center">
-      <div class="app-loading-content flex-column flex-center">
-        <icon-rotate :size="30" :stroke="1.4" class="animate-rotate-infinite" />
-        <div class="text-size-16">Loading...</div>
-      </div>
+  <transition name="fade">
+    <div v-if="appStore.isLoading" class="app-loading-background">
+        <div class="app-loading flex-column flex-center">
+          <icon-rotate :size="30" :stroke="1.4" class="animate-rotate-infinite" />
+          <div class="text-size-16">Loading...</div>
+        </div>
     </div>
-  </div>
+  </transition>
 </template>
 
 <script setup>
@@ -15,38 +15,9 @@ import anime from 'animejs'
 
 const appStore = useAppStore()
 
-watch(
-  () => appStore.isLoading,
-  async (newValue) => {
-    await nextTick()
-
-    anime({
-      targets: '.app-loading-content',
-      translateY: [-2, 2],
-      // scale: [1.0, 0.98],
-      // left: '10px',
-      direction: 'alternate',
-      loop: true,
-      easing: 'easeInOutSine',
-      duration: 500,
-    })
-  },
-  { immediate: true },
-)
-
-onMounted(async () => {
-  await nextTick()
-})
+// onMounted(async () => {
+//   await nextTick()
+// })
 </script>
 
-<style>
-.animate-rotate-infinite {
-  animation: apply-rotation 1s infinite linear;
-}
-
-@keyframes apply-rotation {
-  100% {
-    transform: rotate(-1turn);
-  }
-}
-</style>
+<style></style>
diff --git a/front/stores/appStore.js b/front/stores/appStore.js
@@ -17,7 +17,7 @@ export const useAppStore = defineStore('app', {
     // const appVersion = runtimeConfig.public.version
 
     return {
-      isLoading: true,
+      isLoading: false,
 
       currentAppVersion: runtimeConfig.public.version,
       queryTimeout: runtimeConfig.public.queryTimeout,

diff --git a/front/stores/dataStore.js b/front/stores/dataStore.js
@@ -292,7 +292,8 @@ export const useDataStore = defineStore('data', {
 
       let filtersParts = [
         `date_after:${startDate}`,
-        `date_before:${endDate}`,
+        `date_after:${startDate}`,
+        `type:withdrawal`,
         ...getExcludedTransactionFilters()
       ]
       let filters = [{ field: 'query', value: filtersParts.join(' ')}]