Resolve "Improve rendering of 'composing a reply'"

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;

src/assets/icons/video_message.svg

@@ -0,0 +1,5 @@
+<svg width="70" height="70" viewBox="0 0 70 70" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="70" height="70" rx="12" fill="#242424"/>
+<circle cx="35" cy="35" r="14" fill="white" fill-opacity="0.8"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M32.6875 30.1891C32.2879 29.9393 31.7695 30.2266 31.7695 30.6979V39.302C31.7695 39.7733 32.2879 40.0606 32.6875 39.8108L39.5708 35.5088C39.9468 35.2738 39.9468 34.7262 39.5708 34.4912L32.6875 30.1891Z" fill="#242424"/>
+</svg>

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": "མདོ་འཛིན་པ།",

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",

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",

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",

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",

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": {

src/assets/translations/si.json

@@ -22,6 +22,9 @@
     "message": {
         "download_progress": "{percentage}% බාගත වී ඇත",
         "file_prefix": "ගොනුව: ",
+        "reply_image": "",
+        "reply_audio_message": "",
+        "reply_video": "",
         "you": "ඔබ"
     },
     "login": {

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": {

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": "登录",

src/components/Chat.vue

@@ -119,10 +119,10 @@
     </div>
 
     <!-- Input area -->
-    <v-container v-if="room" fluid class="input-area-outer">
+    <v-container v-if="room" fluid :class="['input-area-outer', replyToEvent ? 'reply-to':'']">
+      <div :class="[replyToEvent ? 'iput-area-inner-box':'']">
         <!-- "Scroll to end"-button -->
         <v-btn
-        id="btn-scroll-to-end"
           class="scroll-to-end"
           v-show="showScrollToEnd"
           fab
@@ -135,12 +135,41 @@
         </v-btn>
 
         <v-row class="ma-0 pa-0">
-        <div v-if="replyToEvent">
+          <div v-if="replyToEvent" class="row">
-          {{
+            <div class="col col-auto">
-            $t("message.replying_to_event", {
+              <v-btn
-              message: replyToEvent.getContent().body,
+                fab
-            })
+                small
-          }}
+                elevation="0"
+                color="black"
+                @click.stop="cancelEditReply"
+              >
+                <v-icon color="white">cancel</v-icon>
+              </v-btn>
+            </div>
+            <div class="col">
+              <div class="font-weight-medium">{{ $t("message.replying_to", { user: replyToEvent.sender.name }) }}</div>
+              <div v-if="replyToContentType === 'm.text'"> {{ replyToEvent.getContent().body }} </div>
+              <div v-if="replyToContentType === 'm.image'"> {{ $t("message.reply_image") }} </div>
+              <div v-if="replyToContentType === 'm.audio'"> {{ $t("message.reply_audio_message") }} </div>
+              <div v-if="replyToContentType === 'm.video'"> {{ $t("message.reply_video") }} </div>
+            </div>
+            <div class="col col-auto" v-if="replyToContentType !== 'm.text'">
+              <img
+                v-if="replyToContentType === 'm.image'"
+                width="150px"
+                :src="replyToImg"
+                class="rounded"
+              />
+              <v-img
+                v-if="replyToContentType === 'm.audio'"
+                src="@/assets/icons/audio_message.svg"
+              />
+              <v-img
+                v-if="replyToContentType === 'm.video'"
+                src="@/assets/icons/video_message.svg"
+              />
+            </div>
           </div>
 
           <!-- CONTACT IS TYPING -->
@@ -151,7 +180,6 @@
         <v-row class="input-area-inner align-center">
           <v-col class="flex-grow-1 flex-shrink-1 ma-0 pa-0">
             <v-textarea
-            id="message-input"
               height="undefined"
               ref="messageInput"
               full-width
@@ -173,10 +201,9 @@
 
           <v-col
             class="input-area-button text-center flex-grow-0 flex-shrink-1"
-          v-if="editedEvent || replyToEvent"
+            v-if="editedEvent"
           >
             <v-btn
-            id="btn-cancel-reply"
               fab
               small
               elevation="0"
@@ -192,7 +219,6 @@
             v-if="!currentInput || currentInput.length == 0 || showRecorder"
           >
             <v-btn
-            id="btn-microphone"
               v-if="canRecordAudio"
               class="mic-button"
               ref="mic_button"
@@ -207,7 +233,6 @@
             </v-btn>
             <v-btn
               v-else
-            id="btn-microphone"
               class="mic-button"
               ref="mic_button"
               fab
@@ -226,7 +251,6 @@
             v-else
           >
             <v-btn
-            id="btn-send"
               fab
               small
               elevation="0"
@@ -245,8 +269,8 @@
             class="input-area-button text-center flex-grow-0 flex-shrink-1"
           >
             <v-btn
-            id="btn-stickers"
               v-if="!showRecorder"
+              id="btn-attach"
               icon
               large
               color="black"
@@ -261,7 +285,6 @@
             <label icon flat ref="attachmentLabel">
               <v-btn
                 v-if="!showRecorder"
-              id="btn-attach"
                 icon
                 large
                 color="black"
@@ -271,7 +294,6 @@
                 <v-icon x-large>add_circle_outline</v-icon>
               </v-btn>
               <input
-              id="attachment-picker"
                 ref="attachment"
                 type="file"
                 name="attachment"
@@ -289,6 +311,7 @@
           v-on:close="showRecorder = false"
           v-on:file="onVoiceRecording"
         />
+      </div>
     </v-container>
 
     <div v-if="currentImageInputPath">
@@ -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) {