feat(chat): wip added typing status

Satellite-im · Sep 13, 2022 · 412329d · 412329d
1 parent 93f2c2b
commit 412329d
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 7 deletions.
diff --git a/components/views/chat/UserList.vue b/components/views/chat/UserList.vue
@@ -1,8 +1,10 @@
 <template>
   <div class="user-list hover-scroll">
-    <TypographyText>Members - {{ userDetails.length }}</TypographyText>
+    <TypographyText>
+      {{ $t('pages.chat.members', { count: userDetails.length }) }}
+    </TypographyText>
     <div v-for="user in userDetails" :key="user.did" class="user">
-      <UiUserState :user="user" />
+      <UiUserState :user="user" :conversation-id="conversationId" />
       <TypographyText class="ellipsis">
         {{ user.name }}
       </TypographyText>
@@ -49,6 +51,7 @@ export default Vue.extend({
   overflow-y: auto;
   background: @foreground-gradient;
   box-shadow: @ui-shadow;
+  user-select: none;
 
   .user {
     display: flex;

diff --git a/locales/en-US.js b/locales/en-US.js
@@ -643,6 +643,7 @@ export default {
         no_more: 'No more messages.',
       },
       add_reaction: 'Add reaction',
+      members: 'Members - {count}',
     },
     newMessage: {
       new_message: 'New Message',

diff --git a/pages/chat/Chat.html b/pages/chat/Chat.html
@@ -5,9 +5,11 @@
     :max-viewable-users="10"
     :fullscreen-max-viewable-users="20"
   />
-  <div class="conversation-wrapper">
-    <Conversation />
+  <div class="outer-wrapper">
+    <div class="inner-wrapper">
+      <Conversation />
+      <Chatbar />
+    </div>
     <UserList v-if="isGroup">asdasd</UserList>
   </div>
-  <Chatbar />
 </div>
diff --git a/pages/chat/_id.vue b/pages/chat/_id.vue
@@ -33,10 +33,17 @@ export default Vue.extend({
   padding: 16px 0 16px 16px;
   min-width: 0;
 
-  .conversation-wrapper {
+  .outer-wrapper {
     display: flex;
     overflow: hidden;
-    flex: 1;
+    flex-grow: 1;
+    gap: 8px;
+
+    .inner-wrapper {
+      display: flex;
+      flex-direction: column;
+      flex-grow: 1;
+    }
   }
 }
 </style>