From dbccfc7d127b6ea4628fdaf7ab2d588e39ca2bd0 Mon Sep 17 00:00:00 2001 From: 10G Meow <10gmeow@gmail.com> Date: Fri, 11 Feb 2022 09:58:36 +0000 Subject: [PATCH] Resolve "Improve rendering of 'composing a reply'" --- src/assets/css/chat.scss | 18 +- src/assets/icons/audio_message.svg | 10 + src/assets/icons/video_message.svg | 5 + src/assets/translations/bo.json | 7 +- src/assets/translations/en.json | 7 +- src/assets/translations/es.json | 7 +- src/assets/translations/nb_NO.json | 5 +- src/assets/translations/pt_BR.json | 7 +- src/assets/translations/ro.json | 7 +- src/assets/translations/si.json | 3 + src/assets/translations/ug.json | 7 +- src/assets/translations/zh_Hans.json | 7 +- src/components/Chat.vue | 347 +++++++++++++++------------ 13 files changed, 266 insertions(+), 171 deletions(-) create mode 100644 src/assets/icons/audio_message.svg create mode 100644 src/assets/icons/video_message.svg diff --git a/src/assets/css/chat.scss b/src/assets/css/chat.scss index a875487..22c5785 100644 --- a/src/assets/css/chat.scss +++ b/src/assets/css/chat.scss @@ -152,7 +152,23 @@ $admin-fg: white; margin: 0; padding-left: 2 * $chat-standard-padding-s; padding-right: 2 * $chat-standard-padding-s; - padding-top: 0px; + padding-top: 0; + + &.reply-to { + padding: 0; + } + .iput-area-inner-box { + box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.1); + border-radius: 27px; + margin: 0px 20px; + padding: 20px; + + @media #{map-get($display-breakpoints, 'sm-and-down')} { + margin: 0px 5px; + padding: 15px; + } + } + .typing { font-family: "Inter", sans-serif; font-weight: 300; diff --git a/src/assets/icons/audio_message.svg b/src/assets/icons/audio_message.svg new file mode 100644 index 0000000..fc15311 --- /dev/null +++ b/src/assets/icons/audio_message.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/assets/icons/video_message.svg b/src/assets/icons/video_message.svg new file mode 100644 index 0000000..d4aff6c --- /dev/null +++ b/src/assets/icons/video_message.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/assets/translations/bo.json b/src/assets/translations/bo.json index 91bafdf..1d8a48e 100644 --- a/src/assets/translations/bo.json +++ b/src/assets/translations/bo.json @@ -138,7 +138,7 @@ "user_is_typing": "{user}གཏགས་བཞིན་འདུག", "scale_image": "པར་རིས་རྐྱོང་སྐུམ།", "your_message": "ཁྱེད་ཀྱི་བརྡ་ལན...", - "replying_to_event": "དོན་རྐྱེན་ལ་ལན་འདེབས།: {message}", + "replying_to": "{user}", "unread_messages": "བཀླགས་མེད་པའི་འཕྲིན་ཐུང་ཁག", "user_changed_room_topic": "{user} ཁ་བརྡ་ཁང་གི་བརྗོད་གཞི་{topic} ལ་བརྗེ་སོང་།", "user_changed_room_name": "{user} ཁ་བརྡ་ཁང་གི་མིང་ {name} ལ་བརྗེས་སོང་།", @@ -169,7 +169,10 @@ "user_powerlevel_change_from_to": "{powerOld} ཡི{user} ནས {powerNew}་ལ།", "room_powerlevel_change": "{user} {changes} ཡི་སྟོབས་ཤུགས་གནས་རིམ་བརྗེས་སོང་།", "user_changed_guest_access_open": "{user} མགྲོན་པོ་ཁ་བརྡ་ཁང་དུ་འཛུལ་བཅུག་སོང་།", - "user_changed_guest_access_closed": "{user} མགྲོན་པོ་ཁ་བརྡ་ཁང་དུ་འཛུལ་བཅུག་མ་སོང་།" + "user_changed_guest_access_closed": "{user} མགྲོན་པོ་ཁ་བརྡ་ཁང་དུ་འཛུལ་བཅུག་མ་སོང་།", + "reply_image": "", + "reply_audio_message": "", + "reply_video": "" }, "power_level": { "moderator": "མདོ་འཛིན་པ།", diff --git a/src/assets/translations/en.json b/src/assets/translations/en.json index a58777f..c2da38e 100644 --- a/src/assets/translations/en.json +++ b/src/assets/translations/en.json @@ -51,7 +51,7 @@ "user_changed_room_name": "{user} changed room name to {name}", "user_changed_room_topic": "{user} changed room topic to {topic}", "unread_messages": "Unread messages", - "replying_to_event": "REPLYING TO EVENT: {message}", + "replying_to": "Replying to {user}", "your_message": "Your message...", "scale_image": "Scale image", "user_is_typing": "{user} is typing", @@ -59,7 +59,10 @@ "room_powerlevel_change": "{user} changed powerlevel of {changes}", "user_powerlevel_change_from_to": "{user} from {powerOld} to {powerNew}", "user_changed_guest_access_closed": "{user} disallowed guests to join the room", - "user_changed_guest_access_open": "{user} allowed guests to join the room" + "user_changed_guest_access_open": "{user} allowed guests to join the room", + "reply_image": "Image", + "reply_audio_message": "Audio message", + "reply_video": "Video" }, "room": { "members": "no members | 1 member | {count} members", diff --git a/src/assets/translations/es.json b/src/assets/translations/es.json index 8e7d9de..a86a495 100644 --- a/src/assets/translations/es.json +++ b/src/assets/translations/es.json @@ -123,7 +123,7 @@ "user_is_typing": "{user} esta escribiendo", "scale_image": "Escala de imagen", "your_message": "Tu mensaje...", - "replying_to_event": "RESPONDIENDO A UN EVENTO: {message}", + "replying_to": "{user}", "unread_messages": "Mensajes no leídos", "user_changed_room_name": "{user} cambió el nombre de la sala {name}", "user_changed_room_topic": "{user} cambió el tema de la sala a {topic}", @@ -150,7 +150,10 @@ "user_created_room": "{user} creo la sala", "user_aliased_room": "{user} hizo el alias de la sala {alias}", "user_changed_display_name": "{user}cambio su nombre para mostrar a {displayName}", - "you": "Tú" + "you": "Tú", + "reply_image": "", + "reply_audio_message": "", + "reply_video": "" }, "menu": { "login": "Iniciar sesión", diff --git a/src/assets/translations/nb_NO.json b/src/assets/translations/nb_NO.json index afddc9b..a182382 100644 --- a/src/assets/translations/nb_NO.json +++ b/src/assets/translations/nb_NO.json @@ -28,7 +28,10 @@ "file_prefix": "Fil: ", "user_said": "{user} sa:", "user_created_room": "{user} opprettet rommet", - "you": "Deg" + "you": "Deg", + "reply_image": "", + "reply_audio_message": "", + "reply_video": "" }, "device_list": { "title": "Enheter", diff --git a/src/assets/translations/pt_BR.json b/src/assets/translations/pt_BR.json index 0077600..dca5476 100644 --- a/src/assets/translations/pt_BR.json +++ b/src/assets/translations/pt_BR.json @@ -64,7 +64,7 @@ "user_changed_room_name": "{user} alterou o nome da sala para {name}", "user_changed_room_topic": "{user} alterou o assunto da sala para {topic}", "unread_messages": "Mensagens não lidas", - "replying_to_event": "RESPONDENDO AO EVENTO: {message}", + "replying_to": "{user}", "your_message": "A sua mensagem...", "scale_image": "Escala da imagem", "user_is_typing": "{user} está digitando", @@ -72,7 +72,10 @@ "room_powerlevel_change": "{user} alterou o nível de {changes}", "user_powerlevel_change_from_to": "{user} de {powerOld} para {powerNew}", "user_changed_guest_access_closed": "{user} não permitiu que os convidados entrassem na sala", - "user_changed_guest_access_open": "{user} permitiu que convidados entrassem na sala" + "user_changed_guest_access_open": "{user} permitiu que convidados entrassem na sala", + "reply_image": "", + "reply_audio_message": "", + "reply_video": "" }, "room": { "members": "sem membros | 1 membro | {count} membros", diff --git a/src/assets/translations/ro.json b/src/assets/translations/ro.json index 4ab741e..93ae1a9 100644 --- a/src/assets/translations/ro.json +++ b/src/assets/translations/ro.json @@ -193,7 +193,7 @@ "user_is_typing": "{user} tastează", "scale_image": "Imagine la scară", "your_message": "Mesajul dumneavoastră...", - "replying_to_event": "RĂSPUNS LA EVENIMENT: {message}", + "replying_to": "{user}", "unread_messages": "Mesaje necitite", "user_changed_room_topic": "{user} a schimbat subiectul camerei în {topic}", "user_changed_room_name": "{user} a schimbat numele camerei în {name}", @@ -220,7 +220,10 @@ "user_changed_display_name": "{user} a schimbat numele de afișare în {displayName}", "user_aliased_room": "{user} a creat aliasul camerei {alias}", "user_created_room": "{user} a creat camera", - "you": "Tu" + "you": "Tu", + "reply_image": "", + "reply_audio_message": "", + "reply_video": "" }, "language_display_name": "Engleză", "fallbacks": { diff --git a/src/assets/translations/si.json b/src/assets/translations/si.json index 817bbdc..98e4e89 100644 --- a/src/assets/translations/si.json +++ b/src/assets/translations/si.json @@ -22,6 +22,9 @@ "message": { "download_progress": "{percentage}% බාගත වී ඇත", "file_prefix": "ගොනුව: ", + "reply_image": "", + "reply_audio_message": "", + "reply_video": "", "you": "ඔබ" }, "login": { diff --git a/src/assets/translations/ug.json b/src/assets/translations/ug.json index 7c78103..37aab23 100644 --- a/src/assets/translations/ug.json +++ b/src/assets/translations/ug.json @@ -48,7 +48,7 @@ "users_are_typing": "ئەزالىرى يېزىۋاتىدۇ {نەپەر}", "user_is_typing": "قوللانغۇچى يېزىۋاتىدۇ", "your_message": "ئۇچۇرىڭىز ...", - "replying_to_event": "پائالىيەتكە جاۋاب: {ئۇچۇر}", + "replying_to": "{user}", "unread_messages": "ئوقۇلمىغان ئۇچۇرلار", "user_changed_room_topic": "قوللانغۇچى مۇنازىرەخانىنىڭ تېمىسىنى ئۆزگەرتتى", "user_changed_room_name": "قوللانغۇچى مۇنازىرەخانىنىڭ ئىسمىنى ئۆزگەرتتى", @@ -59,7 +59,10 @@ "room_history_invited": "ئەزالار تەكلىپ قىلىنغان ۋاقىتتىن باشلاپ ئوقۇغىلى بولىدۇ", "room_history_shared": "مۇنازىرەخانىدىكى ھەركىم ئوقۇيالايدۇ", "room_history_world_readable": "ھەركىم ئوقۇيالايدۇ", - "user_changed_room_history": "قوللانغۇچى» مۇنازىرەخانىنىڭ تارىخىنى قۇردى»" + "user_changed_room_history": "قوللانغۇچى» مۇنازىرەخانىنىڭ تارىخىنى قۇردى»", + "reply_image": "", + "reply_audio_message": "", + "reply_video": "" }, "language_display_name": "ئىنگىلزچە", "new_room": { diff --git a/src/assets/translations/zh_Hans.json b/src/assets/translations/zh_Hans.json index e7f5dbe..83e9ae7 100644 --- a/src/assets/translations/zh_Hans.json +++ b/src/assets/translations/zh_Hans.json @@ -103,9 +103,12 @@ "user_is_typing": "{user} 正在输入", "scale_image": "缩放图像", "your_message": "你的信息...", - "replying_to_event": "回复事件：{message}", + "replying_to": "{user}", "user_changed_guest_access_open": "{user} 允许客人加入聊天室", - "user_changed_guest_access_closed": "{user} 不允许客人加入聊天室" + "user_changed_guest_access_closed": "{user} 不允许客人加入聊天室", + "reply_image": "", + "reply_audio_message": "", + "reply_video": "" }, "menu": { "login": "登录", diff --git a/src/components/Chat.vue b/src/components/Chat.vue index 4b06a3f..cb14560 100644 --- a/src/components/Chat.vue +++ b/src/components/Chat.vue @@ -119,176 +119,199 @@ - - - - arrow_downward - - - -
- {{ - $t("message.replying_to_event", { - message: replyToEvent.getContent().body, - }) - }} -
- - -
- {{ typingMembersString }} -
- - - - - - - +
+ + - - cancel - - + arrow_downward + - - +
+
+ + cancel + +
+
+
{{ $t("message.replying_to", { user: replyToEvent.sender.name }) }}
+
{{ replyToEvent.getContent().body }}
+
{{ $t("message.reply_image") }}
+
{{ $t("message.reply_audio_message") }}
+
{{ $t("message.reply_video") }}
+
+
+ + + +
+
+ + +
+ {{ typingMembersString }} +
+ + + + + + + - mic - - + cancel + + + + + + mic + + + mic + + + + - mic - - + + {{ + editedEvent ? "save" : "arrow_upward" + }} + + - - - {{ - editedEvent ? "save" : "arrow_upward" - }} - - - - - - face - - - - - - - - + + + + + + + +
@@ -521,7 +544,6 @@ ScrollPosition.prototype.prepareFor = function (direction) { export default { name: "Chat", - components: { ChatHeader, MessageIncomingText, @@ -585,6 +607,8 @@ export default { selectedEvent: null, editedEvent: null, replyToEvent: null, + replyToImg: null, + replyToContentType: null, showNoRecordingAvailableDialog: false, showContextMenu: false, showContextMenuAnchor: null, @@ -1460,9 +1484,22 @@ export default { this.sendQuickReaction({ reaction: e.emoji, event: e.event }); }, + setReplyToImage(event) { + util + .getThumbnail(this.$matrix.matrixClient, event) + .then((url) => { + this.replyToImg = url; + }) + .catch((err) => { + console.log("Failed to fetch thumbnail: ", err); + }); + }, + addReply(event) { this.replyToEvent = event; this.$refs.messageInput.focus(); + this.replyToContentType= event.getContent().msgtype; + this.setReplyToImage(event); }, edit(event) {