From ee359309d9e04f7bade9bde24cc57314aa9a90ef Mon Sep 17 00:00:00 2001 From: Markus Date: Sat, 8 Jul 2023 16:12:16 +0200 Subject: [PATCH 01/12] [feature] added i18n for chat component --- webapp/components/Chat/Chat.vue | 24 ++++++++++++------------ webapp/locales/de.json | 14 ++++++++++++++ webapp/locales/en.json | 14 ++++++++++++++ 3 files changed, 40 insertions(+), 12 deletions(-) diff --git a/webapp/components/Chat/Chat.vue b/webapp/components/Chat/Chat.vue index c2b02c0af..5bdac4768 100644 --- a/webapp/components/Chat/Chat.vue +++ b/webapp/components/Chat/Chat.vue @@ -79,18 +79,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: [ { diff --git a/webapp/locales/de.json b/webapp/locales/de.json index febb8898c..c482cfff9 100644 --- a/webapp/locales/de.json +++ b/webapp/locales/de.json @@ -77,6 +77,20 @@ } } }, + "chat": { + "roomsEmpty" : "Keine Räume", + "roomEmpty" : "Keinen Raum selektiert", + "newMessages" : "Neue Nachrichten", + "messageDeleted": "Diese Nachricht wuerde gelöscht", + "messagesEmpty": "Keine Nachrichten", + "conversationStarted": "Unterhaltung startete am:", + "typeMessage": "Nachricht schreiben", + "search": "Suche", + "isOnline": "online", + "lastSeen": "zuletzt gesehen ", + "isTyping": "tippt...", + "cancelSelectMessage": "Abbrechen" + }, "client-only": { "loading": "Lade …" }, diff --git a/webapp/locales/en.json b/webapp/locales/en.json index c0fb5c2f6..0e71a2f4f 100644 --- a/webapp/locales/en.json +++ b/webapp/locales/en.json @@ -77,6 +77,20 @@ } } }, + "chat": { + "roomsEmpty" : "No rooms", + "roomEmpty" : "No room selected", + "newMessages" : "New Messages", + "messageDeleted": "This message was deleted", + "messagesEmpty": "No messages", + "conversationStarted": "Conversation started on:", + "typeMessage": "Type message", + "search": "Search", + "isOnline": "is online", + "lastSeen": "last seen ", + "isTyping": "is writing...", + "cancelSelectMessage": "Cancel" + }, "client-only": { "loading": "Loading …" }, From 59828c25d26bd9d9bcdd9d057a970ea81439a70a Mon Sep 17 00:00:00 2001 From: Markus Date: Sat, 8 Jul 2023 16:29:22 +0200 Subject: [PATCH 02/12] [feature] added basic custom styling for chat --- webapp/assets/_new/styles/tokens.scss | 7 +- webapp/components/Chat/Chat.vue | 8 + webapp/constants/chat.js | 302 ++++++++++++++++++++++++++ 3 files changed, 316 insertions(+), 1 deletion(-) create mode 100644 webapp/constants/chat.js diff --git a/webapp/assets/_new/styles/tokens.scss b/webapp/assets/_new/styles/tokens.scss index 22e0214ff..4fd8fd055 100644 --- a/webapp/assets/_new/styles/tokens.scss +++ b/webapp/assets/_new/styles/tokens.scss @@ -406,4 +406,9 @@ $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; \ No newline at end of file +$color-ribbon-article-active: $background-color-secondary-active; + + +:export { + colorYellow: $color-yellow; +} \ No newline at end of file diff --git a/webapp/components/Chat/Chat.vue b/webapp/components/Chat/Chat.vue index 5bdac4768..cb5922660 100644 --- a/webapp/components/Chat/Chat.vue +++ b/webapp/components/Chat/Chat.vue @@ -15,6 +15,7 @@ :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])" @@ -29,6 +30,7 @@ From 91b2961562a780fcf7dc24231de3246cb427e64a Mon Sep 17 00:00:00 2001 From: Markus Date: Tue, 11 Jul 2023 11:31:00 +0200 Subject: [PATCH 05/12] [feature] adjusted avatar style for chat if no image is available --- webapp/components/Chat/Chat.vue | 51 +++++++++++++++++++++++++++++++++ webapp/layouts/default.vue | 1 - 2 files changed, 51 insertions(+), 1 deletion(-) diff --git a/webapp/components/Chat/Chat.vue b/webapp/components/Chat/Chat.vue index ce4d869ee..2f39afd07 100644 --- a/webapp/components/Chat/Chat.vue +++ b/webapp/components/Chat/Chat.vue @@ -28,6 +28,28 @@ + +
+
+
+ {{ getInitialsName(selectedRoom.roomName) }} +
+
+ +
+
+
+ {{ getInitialsName(room.roomName) }} +
+
@@ -122,6 +144,7 @@ export default { showDemoOptions: true, responsiveBreakpoint: 600, singleRoom: !!this.singleRoomId || false, + selectedRoom: null, } }, mounted() { @@ -174,6 +197,8 @@ export default { this.$toast.error(error.message) } this.messagesLoaded = true + + this.selectedRoom = room }) }, @@ -195,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: { @@ -235,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%); + } +} diff --git a/webapp/layouts/default.vue b/webapp/layouts/default.vue index 39a84bf14..0e7420956 100644 --- a/webapp/layouts/default.vue +++ b/webapp/layouts/default.vue @@ -19,7 +19,6 @@
- > From 1a3f11ac1fbc8bac33043a18e64884f62a49e8f6 Mon Sep 17 00:00:00 2001 From: Ulf Gebhardt Date: Tue, 11 Jul 2023 13:23:32 +0200 Subject: [PATCH 08/12] lint locales --- webapp/locales/de.json | 20 ++++++++++---------- webapp/locales/en.json | 20 ++++++++++---------- 2 files changed, 20 insertions(+), 20 deletions(-) diff --git a/webapp/locales/de.json b/webapp/locales/de.json index c482cfff9..09a03a84c 100644 --- a/webapp/locales/de.json +++ b/webapp/locales/de.json @@ -77,19 +77,19 @@ } } }, - "chat": { - "roomsEmpty" : "Keine Räume", - "roomEmpty" : "Keinen Raum selektiert", - "newMessages" : "Neue Nachrichten", + "chat": { + "cancelSelectMessage": "Abbrechen", + "conversationStarted": "Unterhaltung startete am:", + "isOnline": "online", + "isTyping": "tippt...", + "lastSeen": "zuletzt gesehen ", "messageDeleted": "Diese Nachricht wuerde gelöscht", "messagesEmpty": "Keine Nachrichten", - "conversationStarted": "Unterhaltung startete am:", - "typeMessage": "Nachricht schreiben", + "newMessages": "Neue Nachrichten", + "roomEmpty": "Keinen Raum selektiert", + "roomsEmpty": "Keine Räume", "search": "Suche", - "isOnline": "online", - "lastSeen": "zuletzt gesehen ", - "isTyping": "tippt...", - "cancelSelectMessage": "Abbrechen" + "typeMessage": "Nachricht schreiben" }, "client-only": { "loading": "Lade …" diff --git a/webapp/locales/en.json b/webapp/locales/en.json index 0e71a2f4f..1c1136faf 100644 --- a/webapp/locales/en.json +++ b/webapp/locales/en.json @@ -77,19 +77,19 @@ } } }, - "chat": { - "roomsEmpty" : "No rooms", - "roomEmpty" : "No room selected", - "newMessages" : "New Messages", + "chat": { + "cancelSelectMessage": "Cancel", + "conversationStarted": "Conversation started on:", + "isOnline": "is online", + "isTyping": "is writing...", + "lastSeen": "last seen ", "messageDeleted": "This message was deleted", "messagesEmpty": "No messages", - "conversationStarted": "Conversation started on:", - "typeMessage": "Type message", + "newMessages": "New Messages", + "roomEmpty": "No room selected", + "roomsEmpty": "No rooms", "search": "Search", - "isOnline": "is online", - "lastSeen": "last seen ", - "isTyping": "is writing...", - "cancelSelectMessage": "Cancel" + "typeMessage": "Type message" }, "client-only": { "loading": "Loading …" From 86bd4bad5b6921e55bb3cb1dd13029719d2ae10e Mon Sep 17 00:00:00 2001 From: Markus Date: Wed, 12 Jul 2023 09:38:31 +0200 Subject: [PATCH 09/12] fixed intends for token style file --- webapp/assets/_new/styles/tokens.scss | 28 +++++++++++++-------------- 1 file changed, 14 insertions(+), 14 deletions(-) diff --git a/webapp/assets/_new/styles/tokens.scss b/webapp/assets/_new/styles/tokens.scss index 28ebb2abd..d84b92ac9 100644 --- a/webapp/assets/_new/styles/tokens.scss +++ b/webapp/assets/_new/styles/tokens.scss @@ -410,24 +410,24 @@ $color-ribbon-article-active: $background-color-secondary-active; :export { - colorPrimary: $color-primary; - colorPrimaryActive: $color-primary-active; - colorPrimaryLight: $color-primary-light; + colorPrimary: $color-primary; + colorPrimaryActive: $color-primary-active; + colorPrimaryLight: $color-primary-light; - borderColorSoft: $border-color-soft; + borderColorSoft: $border-color-soft; - borderRadiusBase: $border-radius-base; + borderRadiusBase: $border-radius-base; - textColorBase: $text-color-base; - textColorSoft: $text-color-soft; - textColorInverse: $text-color-inverse; + textColorBase: $text-color-base; + textColorSoft: $text-color-soft; + textColorInverse: $text-color-inverse; - boxShadowBase: $box-shadow-base; + boxShadowBase: $box-shadow-base; - backgroundColorBase: $background-color-base; - backgroundColorSoft: $background-color-soft; - backgroundColorSoftest: $background-color-softest; - backgroundColorPrimary: $background-color-primary; + backgroundColorBase: $background-color-base; + backgroundColorSoft: $background-color-soft; + backgroundColorSoftest: $background-color-softest; + backgroundColorPrimary: $background-color-primary; - colorNeutral30: $color-neutral-30; + colorNeutral30: $color-neutral-30; } \ No newline at end of file From c51f7afd9a7f612ba72c7f3cfca2346316c412d1 Mon Sep 17 00:00:00 2001 From: Markus Date: Wed, 12 Jul 2023 10:15:25 +0200 Subject: [PATCH 10/12] fixed syntax error in default layout --- webapp/layouts/default.vue | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/webapp/layouts/default.vue b/webapp/layouts/default.vue index ab8abcbee..bd518b976 100644 --- a/webapp/layouts/default.vue +++ b/webapp/layouts/default.vue @@ -39,9 +39,9 @@ export default { mixins: [seo, mobile()], methods: { closeSingleRoom() { - this.$store.commit('chat/SET_OPEN_CHAT', { showChat: false, roomID: 'u0' }) + this.$store.commit('chat/SET_OPEN_CHAT', { showChat: false, roomID: null }) }, - } + }, beforeCreate() { this.$store.commit('chat/SET_OPEN_CHAT', { showChat: false, roomID: null }) }, From b2976f06eb41568844ed0cc1cac04d559621a5b0 Mon Sep 17 00:00:00 2001 From: Markus Date: Wed, 12 Jul 2023 12:34:12 +0200 Subject: [PATCH 11/12] updated style for chat component --- webapp/assets/_new/styles/tokens.scss | 16 ++++++++++++++++ webapp/constants/chat.js | 8 ++++---- 2 files changed, 20 insertions(+), 4 deletions(-) diff --git a/webapp/assets/_new/styles/tokens.scss b/webapp/assets/_new/styles/tokens.scss index d84b92ac9..372dab0c8 100644 --- a/webapp/assets/_new/styles/tokens.scss +++ b/webapp/assets/_new/styles/tokens.scss @@ -408,6 +408,15 @@ $color-ribbon-event-active: $background-color-third-active; $color-ribbon-article: $background-color-secondary; $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; :export { colorPrimary: $color-primary; @@ -430,4 +439,11 @@ $color-ribbon-article-active: $background-color-secondary-active; 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; } \ No newline at end of file diff --git a/webapp/constants/chat.js b/webapp/constants/chat.js index 79d8f0cd7..a183a3922 100644 --- a/webapp/constants/chat.js +++ b/webapp/constants/chat.js @@ -57,9 +57,9 @@ const STYLE = { }, message: { - background: styleData.backgroundColorBase, - backgroundMe: styleData.colorPrimaryLight, - color: styleData.textColorBase, + background: styleData.chatMessageBgOthers, + backgroundMe: styleData.chatMessageBgMe, + color: styleData.chatMessageColor, colorStarted: '#9ca6af', backgroundDeleted: '#dadfe2', backgroundSelected: '#c2dcf2', @@ -76,7 +76,7 @@ const STYLE = { colorReply: '#6e6e6e', colorTag: '#0d579c', backgroundImage: '#ddd', - colorNewMessages: '#1976d2', + colorNewMessages: styleData.chatNewMessageColor, backgroundScrollCounter: '#0696c7', colorScrollCounter: '#fff', backgroundReaction: '#eee', From 9cca4c9e6fafde38bcb2574ba7c87cee58cac927 Mon Sep 17 00:00:00 2001 From: Markus Date: Thu, 13 Jul 2023 11:00:44 +0200 Subject: [PATCH 12/12] [feature] changed chat style export so rebranding is also working for chat --- webapp/assets/_new/styles/export.scss | 30 +++++++++++++++++++++++++++ webapp/assets/_new/styles/tokens.scss | 30 --------------------------- webapp/nuxt.config.js | 1 + 3 files changed, 31 insertions(+), 30 deletions(-) create mode 100644 webapp/assets/_new/styles/export.scss diff --git a/webapp/assets/_new/styles/export.scss b/webapp/assets/_new/styles/export.scss new file mode 100644 index 000000000..88b42bfc9 --- /dev/null +++ b/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; + } \ No newline at end of file diff --git a/webapp/assets/_new/styles/tokens.scss b/webapp/assets/_new/styles/tokens.scss index 372dab0c8..e001ffa84 100644 --- a/webapp/assets/_new/styles/tokens.scss +++ b/webapp/assets/_new/styles/tokens.scss @@ -417,33 +417,3 @@ $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; - -: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; -} \ No newline at end of file diff --git a/webapp/nuxt.config.js b/webapp/nuxt.config.js index 66a23c191..c9b4db317 100644 --- a/webapp/nuxt.config.js +++ b/webapp/nuxt.config.js @@ -105,6 +105,7 @@ export default { styleguideStyles, '~assets/_new/styles/tokens.scss', '~assets/styles/imports/_branding.scss', + '~assets/_new/styles/export.scss', ], },