idk

luckspt · Dec 9, 2021 · 99783c5 · 99783c5
1 parent cc1d506
commit 99783c5
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 25 deletions.
diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
@@ -50,12 +50,6 @@
   </div>
 </template>
 
-<style lang="scss" scoped>
-.vs-switch {
-  height: 34px !important;
-}
-</style>
-
 <script lang="ts">
 import Vue from 'vue';
 import ConfirmarSaida from './dialogs/ConfirmarSaida.vue';

diff --git a/src/containers/ChatContainer.vue b/src/containers/ChatContainer.vue
@@ -5,7 +5,10 @@
     <div class="grid px-3" style="height:100%;">
       <vs-row justify="center" align="center" >
         <!-- Recentes (contactos) -->
-        <vs-col w="2" class="mr-5" style="min-height:600px;">
+        <vs-col
+          w="2"
+          class="mr-5"
+          style="min-height:600px;">
           <!-- Barra pesquisa e star -->
           <div class="grid">
             <vs-row justify="center" align="center" class="mb-1" >
@@ -130,10 +133,14 @@
         </vs-col>
 
         <!-- Parte Chat/Chamada -->
-        <vs-col w="9" v-if="recenteSeleccionado" class="pb-0" style="height:600px">
+        <vs-col
+          w="9"
+          v-if="recenteSeleccionado"
+          class="pb-0"
+          style="height:600px">
           <div style="width:100%;">
             <!-- Header -->
-            <div id="chatCallHeader" class="grid mb-2">
+            <div class="grid mb-2 rounded-corners border-bottom-darker">
               <vs-row align="center">
                 <vs-col w="6">
                   <div class="ml-3">
@@ -281,8 +288,8 @@
         <!-- Nada Selecionado -->
         <vs-col v-else w="9">
           <div class="grid" style="width:970px;height:100%">
-            <vs-row align="center">
-              <vs-col w="5">
+            <vs-row align="center" style="height:100%;">
+              <vs-col w="4">
                 <i id="leftArrow" class="fa-solid fa-share" data-fa-transform="rotate-220"></i>
               </vs-col>
               <vs-col w="5">
@@ -320,11 +327,6 @@
   color: rgb(var(--vs-danger));
 }
 
-#chatCallHeader {
-  border-bottom: 3px rgb(var(--vs-darker)) solid;
-  border-radius: 20px;
-}
-
 #leftArrow {
   font-size: 10em;
   margin-top: 200px;

diff --git a/src/scss/helpers.scss b/src/scss/helpers.scss
@@ -21,6 +21,18 @@ h1,h2,h3,h4,h5,h6,p,th,td,tr,div {
 .bg-darker {
   background-color: rgb(var(--vs-darker));
 }
+.border-top-darker {
+  border-top: 3px rgb(var(--vs-darker)) solid;
+}
+.border-bottom-darker {
+  border-bottom: 3px rgb(var(--vs-darker)) solid;
+}
+.border-left-darker {
+  border-left: 3px rgb(var(--vs-darker)) solid;
+}
+.border-right-darker {
+  border-right: 3px rgb(var(--vs-darker)) solid;
+}
 
 .vs-tooltip {
   color: rgb(var(--vs-text));
@@ -29,8 +41,11 @@ h1,h2,h3,h4,h5,h6,p,th,td,tr,div {
 .rounded-corners {
   border-radius: 12px;
 }
+
 .vs-switch {
-  // coerencia
+  margin: var(--vs-button-margin);
+  // TODO isto funciona com zoom a 100% mas se mudar o zoom os botões mudam mas este não
+  height: 34px !important;
   border-radius: 12px !important;
 }
 

diff --git a/src/store/modules/contactos.ts b/src/store/modules/contactos.ts
@@ -163,19 +163,19 @@ const state = {
         { autor: 'Twix', texto: 'pois', momento: new Date('2021/10/19 11:50:00') },
       ],
     },
+    // Hidden
     {
       nome: 'Carla',
       email: '[email protected]',
       hidden: true,
-      mensagens: [{ autor: 'Carla', texto: 'what you know about rolling down in ', momento: new Date(2013, 13, 2) }],
     },
     {
       nome: 'Zé',
       email: '[email protected]',
       hidden: true,
     },
     {
-      nome: 'Carlos',
+      nome: 'Carlos Pipocas',
       email: '[email protected]',
       hidden: true,
     },

diff --git a/src/views/Chat.vue b/src/views/Chat.vue
@@ -18,8 +18,8 @@
         v-else>
         <div class="p-grid p-jc-center p-ai-center vertical-container" style="width:100%;height:465px">
           <div class="grid" style="width:970px;height:100%">
-            <vs-row align="center">
-              <vs-col w="4">
+            <vs-row align="center" justify="center" style="height:100%;">
+              <vs-col w="4" v-show="!search">
                 <i id="leftArrow" class="fa-solid fa-share fa-flip-vertical" data-fa-transform="rotate--90"></i>
               </vs-col>
               <vs-col w="5">
@@ -28,12 +28,16 @@
                     <h1>Sem mensagens...</h1>
                   </template>
 
-                  <p>Envie uma mensagem ou inicie uma ligação de vídeo para começar!
-                    <i
-                    class="fa-solid fa-face-smile-wink twemoji ml-2"
-                    data-fa-transform="grow-16" /></p>
+                  <p v-show="!search">
+                    Envie uma mensagem ou inicie uma ligação de vídeo para começar!
+                    <i class="fa-solid fa-face-smile-wink twemoji ml-2" data-fa-transform="grow-16" />
+                  </p>
+                  <p v-show="search">
+                    Sem mensagens encontradas para <i>"<strong>{{ search }}</strong>"</i>.
+                  </p>
                 </vs-alert>
               </vs-col>
+              <vs-col w="1"></vs-col>
             </vs-row>
           </div>
         </div>