v3

src/components/admin/account-page/qtyChatCard.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="qty-card glossy text-white flex column items-center q-ma-xs"
+    class="qty-card glossy text-white flex column items-center"
     :style="{ backgroundColor: bgColor }"
     >
     <div class="qty-card-title q-pa-none text-caption col-grow">

src/components/admin/accountHelper.vue

@@ -81,7 +81,6 @@
   const password = ref<string>('')
 
   async function goProjects() {
-    console.log('go to projects')
     await router.push({ name: 'projects' })
   }
 </script>

src/components/admin/project-page/ProjectPageChats.vue

@@ -64,49 +64,59 @@
       </q-list>
 
     </pn-scroll-list>
-    <q-page-sticky
+
+
+  </div>
+
+  <q-page-sticky
+      :style="{ zIndex: !showOverlay ? 'inherit' : '5100 !important' }"
       position="bottom-right"
       :offset="[18, 18]"
-      :style="{ zIndex: !showOverlay ? 'inherit' : '5100 !important' }"
       >
+      <transition
+        appear
+        enter-active-class="animated slideInUp"
+        >
         <q-fab
-          v-if="showFab"
-          icon="add"
-          color="brand"
-          direction="up"
-          vertical-actions-align="right"
-          @click="showOverlay = !showOverlay"
-          >
-          <q-fab-action
-            v-for="item in fabMenu"
-            :key="item.id"
-            square
-            clickable
-            v-ripple
-            class="bg-white change-fab-action"
+            v-if="fixShowFab"
+            icon="add"
+            color="brand"
+            direction="up"
+            vertical-actions-align="right"
+            @click="showOverlay = !showOverlay"
             >
-            <template #icon>
-              <q-item class="q-pa-xs w100">
-                <q-item-section avatar class="items-center">
-                  <q-avatar color="brand" rounded text-color="white" :icon="item.icon" />
-                </q-item-section>
+            <q-fab-action
+              v-for="item in fabMenu"
+              :key="item.id"
+              square
+              clickable
+              v-ripple
+              class="bg-white change-fab-action"
+              >
+              <template #icon>
+                <q-item class="q-pa-xs w100">
+                  <q-item-section avatar class="items-center">
+                    <q-avatar color="brand" rounded text-color="white" :icon="item.icon" />
+                  </q-item-section>
 
-                <q-item-section class="items-start">
-                    <q-item-label class="fab-action-item">
-                      {{ $t(item.name) }}
-                    </q-item-label>
-                    <q-item-label caption class="fab-action-item">
-                      {{ $t(item.description) }}
-                    </q-item-label>
+                  <q-item-section class="items-start">
+                      <q-item-label class="fab-action-item">
+                        {{ $t(item.name) }}
+                      </q-item-label>
+                      <q-item-label caption class="fab-action-item">
+                        {{ $t(item.description) }}
+                      </q-item-label>
 
-                </q-item-section>
-              </q-item>
-            </template>
-          </q-fab-action>
+                  </q-item-section>
+                </q-item>
+              </template>
+            </q-fab-action>
+      
         </q-fab>
+      </transition>
     </q-page-sticky>
+
     <pn-overlay  v-if="showOverlay"/>
-  </div>
   <q-dialog v-model="showDialogDeleteChat" @before-hide="onDialogBeforeHide()">
     <q-card class="q-pa-none q-ma-none">
       <q-card-section align="center">
@@ -138,9 +148,13 @@
 </template>
 
 <script setup lang="ts">
-  import { ref, computed, onMounted, onUnmounted } from 'vue'
+  import { ref, computed, watch } from 'vue'
   import { useChatsStore } from 'stores/chats'
 
+  const props = defineProps<{
+    showFab: boolean
+  }>()
+
   const search = ref('')
   const showOverlay = ref<boolean>(false)
   const chatsStore = useChatsStore()
@@ -200,15 +214,17 @@
     currentSlideEvent.value = null
   }
 
-  const showFab = ref(false)
+  // fix fab jumping
+  const fixShowFab = ref(true)
+  const showFabFixTrue = () => fixShowFab.value = true
 
-  onMounted(() => {
-    setTimeout(() => showFab.value = true, 500) 
-  })
-
-  onUnmounted(() => {
-    showFab.value = false
-  })
+  watch(() => props.showFab, (newVal) => {
+    const timerId = setTimeout(showFabFixTrue, 700)
+    if (newVal === false) {
+      clearTimeout(timerId)
+      fixShowFab.value = false
+    }
+  }, {immediate: true})
 </script>
 
 <style scoped>
@@ -231,4 +247,10 @@
     align-self: center;
     height: 98%;
   }
+
+  .fix-fab {
+    top: calc(100vh - 92px);
+    left: calc(100vw - 92px);
+    padding: 18px;
+  }
 </style>

src/components/admin/project-page/ProjectPageCompanies.vue

@@ -58,13 +58,18 @@
       position="bottom-right"
       :offset="[18, 18]"
       >
+      <transition
+        appear
+        enter-active-class="animated slideInUp"
+        >
         <q-btn
+          v-if="fixShowFab"
           fab 
           icon="add"
           color="brand"
           @click="createCompany()"
-          v-if="showFab"
         />
+      </transition>
     </q-page-sticky>
   </div>
   <q-dialog v-model="showDialogDeleteCompany" @before-hide="onDialogBeforeHide()">
@@ -98,11 +103,15 @@
 </template>
     
 <script setup lang="ts">
-  import { ref, computed, onMounted, onUnmounted } from 'vue'
+  import { ref, computed, watch } from 'vue'
   import { useRouter, useRoute  } from 'vue-router'
   import { useCompaniesStore } from 'stores/companies'
   import { parseIntString } from 'boot/helpers'
 
+  const props = defineProps<{
+    showFab: boolean
+  }>()
+  
   const router = useRouter()
   const route = useRoute()
   const companiesStore = useCompaniesStore()
@@ -159,15 +168,17 @@
     currentSlideEvent.value = null
   }
 
-  const showFab = ref(false)
+  // fix fab jumping
+  const fixShowFab = ref(false)
+  const showFabFixTrue = () => fixShowFab.value = true
 
-  onMounted(() => {
-    setTimeout(() => showFab.value = true, 500) 
-  })
-
-  onUnmounted(() => {
-    showFab.value = false
-  })
+  watch(() => props.showFab, (newVal) => {
+    const timerId = setTimeout(showFabFixTrue, 500)
+    if (newVal === false) {
+      clearTimeout(timerId)
+      fixShowFab.value = false
+    }
+  }, {immediate: true})
 
 </script>
 

src/components/admin/project-page/ProjectPagePersons.vue

@@ -53,6 +53,7 @@
 <script setup lang="ts">
   import { ref, computed } from 'vue'
   import { useRouter } from 'vue-router'
+  defineOptions({ inheritAttrs: false })
 
   const router = useRouter()
   const search = ref('')