(style) - #84 Prepare component style for button back top page

voxxrin · Apr 10, 2024 · 8d3c0da · 8d3c0da
1 parent 8049dcf
commit 8d3c0da
Show file tree

Hide file tree

Showing 5 changed files with 58 additions and 0 deletions.
diff --git a/mobile/src/components/ui/ButtonBackTop.vue b/mobile/src/components/ui/ButtonBackTop.vue
@@ -0,0 +1,36 @@
+<template>
+  <!-- TODO #84 connect the back button to the top of the page -->
+  <transition name="scaleUp">
+    <ion-fab vertical="bottom" horizontal="start" slot="fixed">
+      <ion-fab-button class="buttonBackTop" @click=""
+                      :aria-label="LL.Go_Back_Screen()">
+        <ion-icon :icon="arrowUpSharp"></ion-icon>
+      </ion-fab-button>
+    </ion-fab>
+  </transition>
+</template>
+
+<script setup lang="ts">
+import { IonFab,IonFabButton } from '@ionic/vue';
+import { typesafeI18n } from "@/i18n/i18n-vue";
+import { arrowUpSharp } from "ionicons/icons";
+
+const { LL } = typesafeI18n()
+</script>
+
+
+<style lang="scss">
+  .buttonBackTop {
+    ion-fab-button {
+      height: 44px;
+      width: 44px;
+      --background: var(--app-primary);
+      --color: var(--app-white);
+
+      @media (prefers-color-scheme: dark) {
+        --background: var(--app-white);
+        --color: var(--app-primary);
+      }
+    }
+  }
+</style>
diff --git a/mobile/src/i18n/en/index.ts b/mobile/src/i18n/en/index.ts
@@ -8,6 +8,7 @@ const en = {
 	Back_User_Dashboard: `Back dashboard`,
 	Avatar_Speaker: `Avatar speaker`,
 	Nav_Back: `Back`,
+	Go_Back_Top_Screen: 'Back to top of page',
 	Conference_Selector: `Conference Selector`,
 	Pinned_events: `Pinned events`,
 	Config_event: `Configuration event`,

diff --git a/mobile/src/styles/utils/_animations.scss b/mobile/src/styles/utils/_animations.scss
@@ -24,3 +24,18 @@
   75% { transform: scale3d(0.95, 1.05, 1);}
   100% { transform: scale3d(1, 1, 1);}
 }
+
+/* ===== Vue Animation Library ====  */
+
+/* Scale Up */
+.scaleUp-enter-active, .scaleUp-leave-active {
+  transition: transform 240ms cubic-bezier(0.250, 0.460, 0.450, 0.940);
+}
+
+.scaleUp-enter-from, .scaleUp-leave-to {
+  transform: scale(0) translateY(100%);
+}
+
+.scaleUp-enter-to, .scaleUp-leave-from {
+  transform: scale(1) translateY(0);
+}
diff --git a/mobile/src/views/event/FavoritesPage.vue b/mobile/src/views/event/FavoritesPage.vue
@@ -56,6 +56,8 @@
           </template>
         </timeslots-iterator>
       </ion-accordion-group>
+      <!-- TODO #84 connect the back button to the top of the page -->
+      <ButtonBackTop v-if="true"></ButtonBackTop>
       <PoweredVoxxrin></PoweredVoxxrin>
     </ion-content>
   </ion-page>
@@ -93,6 +95,7 @@
   import ProvideFeedbackTalkButton from "@/components/talk-card/ProvideFeedbackTalkButton.vue";
   import PoweredVoxxrin from "@/components/ui/PoweredVoxxrin.vue";
   import {useRoomsStats} from "@/state/useRoomsStats";
+  import ButtonBackTop from "@/components/ui/ButtonBackTop.vue";
 
   const { LL } = typesafeI18n()
 

diff --git a/mobile/src/views/event/SchedulePage.vue b/mobile/src/views/event/SchedulePage.vue
@@ -106,6 +106,8 @@
           </div>
         </ion-fab-list>
       </ion-fab>
+      <!-- TODO #84 connect the back button to the top of the page -->
+      <ButtonBackTop v-if="true"></ButtonBackTop>
       <PoweredVoxxrin></PoweredVoxxrin>
     </ion-content>
   </ion-page>
@@ -164,6 +166,7 @@ import {useUserEventTalkNotes} from "@/state/useUserTalkNotes";
 import ProvideFeedbackTalkButton from "@/components/talk-card/ProvideFeedbackTalkButton.vue";
 import PoweredVoxxrin from "@/components/ui/PoweredVoxxrin.vue";
 import {useRoomsStats} from "@/state/useRoomsStats";
+import ButtonBackTop from "@/components/ui/ButtonBackTop.vue";
 
 const LOGGER = Logger.named("SchedulePage");