Merge pull request #6517 from Ocelot-Social-Community/6400-change-cha…

…t-style-and-lang

feat(webapp): change chat style and lang

webapp/assets/_new/styles/export.scss

@@ -0,0 +1,30 @@
+
+:export {
+    colorPrimary: $color-primary;
+    colorPrimaryActive: $color-primary-active;
+    colorPrimaryLight: $color-primary-light;
+
+    borderColorSoft: $border-color-soft;
+
+    borderRadiusBase: $border-radius-base;
+
+    textColorBase: $text-color-base;
+    textColorSoft: $text-color-soft;
+    textColorInverse: $text-color-inverse;
+
+    boxShadowBase: $box-shadow-base;
+
+    backgroundColorBase: $background-color-base;
+    backgroundColorSoft: $background-color-soft;
+    backgroundColorSoftest: $background-color-softest;
+    backgroundColorPrimary: $background-color-primary;
+
+    colorNeutral30: $color-neutral-30;
+
+    chatMessageColor: $chat-message-color;
+
+    chatMessageBgMe: $chat-message-bg-me;
+    chatMessageBgOthers: $chat-message-bg-others;
+
+    chatNewMessageColor: $chat-new-message-color;
+  }

webapp/assets/_new/styles/tokens.scss

@@ -406,4 +406,14 @@ $color-toast-green: $color-success;
 $color-ribbon-event: $background-color-third;
 $color-ribbon-event-active: $background-color-third-active;
 $color-ribbon-article: $background-color-secondary;
-$color-ribbon-article-active: $background-color-secondary-active;
+$color-ribbon-article-active: $background-color-secondary-active;
+
+/**
+ * @tokens Chat Color
+ */
+
+$chat-message-bg-me: $color-primary-light;
+$chat-message-color: $text-color-base;
+$chat-message-bg-others: $color-neutral-80;
+$chat-sidemenu-bg: $color-secondary-active;
+$chat-new-message-color: $color-secondary-active;

webapp/components/Chat/Chat.vue

@@ -15,20 +15,50 @@
         :rooms-loaded="true"
         show-files="false"
         show-audio="false"
+        :styles="JSON.stringify(computedChatStyle)"
         :show-footer="true"
         @send-message="sendMessage($event.detail[0])"
         @fetch-messages="fetchMessages($event.detail[0])"
         :responsive-breakpoint="responsiveBreakpoint"
         :single-room="singleRoom"
         @show-demo-options="showDemoOptions = $event"
-      />
+      >
+        <div slot="menu-icon" @click.prevent.stop="$emit('close-single-room', true)">
+          <div v-if="singleRoom">
+            <ds-icon name="close"></ds-icon>
+          </div>
+        </div>
+
+        <div slot="room-header-avatar">
+          <div
+            v-if="selectedRoom && selectedRoom.avatar && selectedRoom.avatar !== 'default-avatar'"
+            class="vac-avatar"
+            :style="{ 'background-image': `url('${selectedRoom.avatar}')` }"
+          />
+          <div v-else-if="selectedRoom" class="vac-avatar">
+            <span class="initials">{{ getInitialsName(selectedRoom.roomName) }}</span>
+          </div>
+        </div>
+
+        <div v-for="room in rooms" :slot="'room-list-avatar_' + room.id" :key="room.id">
+          <div
+            v-if="room.avatar && room.avatar !== 'default-avatar'"
+            class="vac-avatar"
+            :style="{ 'background-image': `url('${room.avatar}')` }"
+          />
+          <div v-else class="vac-avatar">
+            <span class="initials">{{ getInitialsName(room.roomName) }}</span>
+          </div>
+        </div>
+      </vue-advanced-chat>
     </client-only>
   </div>
 </template>
 
 <script>
 import { roomQuery, createRoom } from '~/graphql/Rooms'
 import { messageQuery, createMessageMutation } from '~/graphql/Messages'
+import chatStyle from '~/constants/chat.js'
 import { mapGetters } from 'vuex'
 
 export default {
@@ -45,6 +75,11 @@ export default {
   data() {
     return {
       menuActions: [
+        // NOTE: if menuActions is empty, the related slot is not shown
+        {
+          name: 'dummyItem',
+          title: 'Just a dummy item',
+        },
         /* {
           name: 'inviteUser',
           title: 'Invite User',
@@ -79,18 +114,18 @@ export default {
         },
       ],
       textMessages: {
-        ROOMS_EMPTY: 'Aucune conversation',
-        ROOM_EMPTY: 'Aucune conversation sélectionnée',
-        NEW_MESSAGES: 'Nouveaux messages',
-        MESSAGE_DELETED: 'Ce message a été supprimé',
-        MESSAGES_EMPTY: 'Aucun message',
-        CONVERSATION_STARTED: 'La conversation a commencée le :',
-        TYPE_MESSAGE: 'Tapez votre message',
-        SEARCH: 'Rechercher',
-        IS_ONLINE: 'est en ligne',
-        LAST_SEEN: 'dernière connexion ',
-        IS_TYPING: 'est en train de taper...',
-        CANCEL_SELECT_MESSAGE: 'Annuler Sélection',
+        ROOMS_EMPTY: this.$t('chat.roomsEmpty'),
+        ROOM_EMPTY: this.$t('chat.roomEmpty'),
+        NEW_MESSAGES: this.$t('chat.newMessages'),
+        MESSAGE_DELETED: this.$t('chat.messageDeleted'),
+        MESSAGES_EMPTY: this.$t('chat.messagesEmpty'),
+        CONVERSATION_STARTED: this.$t('chat.conversationStarted'),
+        TYPE_MESSAGE: this.$t('chat.typeMessage'),
+        SEARCH: this.$t('chat.search'),
+        IS_ONLINE: this.$t('chat.isOnline'),
+        LAST_SEEN: this.$t('chat.lastSeen'),
+        IS_TYPING: this.$t('chat.isTyping'),
+        CANCEL_SELECT_MESSAGE: this.$t('chat.cancelSelectMessage'),
       },
       roomActions: [
         /*
@@ -109,6 +144,7 @@ export default {
       showDemoOptions: true,
       responsiveBreakpoint: 600,
       singleRoom: !!this.singleRoomId || false,
+      selectedRoom: null,
     }
   },
   mounted() {
@@ -135,6 +171,11 @@ export default {
     ...mapGetters({
       currentUser: 'auth/user',
     }),
+    computedChatStyle() {
+      // TODO light/dark theme still needed?
+      // return this.theme === 'light' ? chatStyle.STYLE.light : chatStyle.STYLE.dark
+      return chatStyle.STYLE.light
+    },
   },
   methods: {
     fetchMessages({ room, options = {} }) {
@@ -156,6 +197,8 @@ export default {
           this.$toast.error(error.message)
         }
         this.messagesLoaded = true
+
+        this.selectedRoom = room
       })
     },
 
@@ -177,6 +220,11 @@ export default {
       }
       this.refetchMessage(message.roomId)
     },
+
+    getInitialsName(fullname) {
+      if (!fullname) return
+      return fullname.match(/\b\w/g).join('').substring(0, 3).toUpperCase()
+    },
   },
   apollo: {
     Rooms: {
@@ -217,4 +265,25 @@ export default {
 body {
   font-family: 'Quicksand', sans-serif;
 }
+.vac-avatar {
+  background-size: cover;
+  background-position: center center;
+  background-repeat: no-repeat;
+  background-color: $color-primary-dark;
+  color: $text-color-primary-inverse;
+  height: 42px;
+  width: 42px;
+  min-height: 42px;
+  min-width: 42px;
+  margin-right: 15px;
+  border-radius: 50%;
+  position: relative;
+
+  > .initials {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+}
 </style>