Resolve "Improve rendering of 'composing a reply'"

2022-02-11 09:58:36 +00:00 · 2022-02-11 09:58:36 +00:00 · dbccfc7d12
commit dbccfc7d12
parent a5e8c51e86
13 changed files with 266 additions and 171 deletions
--- 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;
--- a/src/assets/icons/audio_message.svg
+++ b/src/assets/icons/audio_message.svg
--- a/src/assets/icons/video_message.svg
+++ b/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>
--- 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": "མདོ་འཛིན་པ།",
--- 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",
--- 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",
--- 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",
--- 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",
--- 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": {
--- 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": {
--- 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": {
--- 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": "登录",
--- a/src/components/Chat.vue
+++ b/src/components/Chat.vue
@ -119,176 +119,199 @@
    </div>

    <!-- Input area -->
-    <v-container v-if="room" fluid class="input-area-outer">
-      <!-- "Scroll to end"-button -->
-      <v-btn
-        id="btn-scroll-to-end"
-        class="scroll-to-end"
-        v-show="showScrollToEnd"
-        fab
-        small
-        elevation="0"
-        color="black"
-        @click.stop="scrollToEndOfTimeline"
-      >
-        <v-icon color="white">arrow_downward</v-icon>
-      </v-btn>
-
-      <v-row class="ma-0 pa-0">
-        <div v-if="replyToEvent">
-          {{
-            $t("message.replying_to_event", {
-              message: replyToEvent.getContent().body,
-            })
-          }}
-        </div>
-
-        <!-- CONTACT IS TYPING -->
-        <div class="typing">
-          {{ typingMembersString }}
-        </div>
-      </v-row>
-      <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
-            auto-grow
-            rows="1"
-            v-model="currentInput"
-            no-resize
-            class="input-area-text"
-            :placeholder="$t('message.your_message')"
-            hide-details
-            background-color="white"
-            v-on:keydown.enter.prevent="
-              () => {
-                sendCurrentTextMessage();
-              }
-            "
-          />
-        </v-col>
-
-        <v-col
-          class="input-area-button text-center flex-grow-0 flex-shrink-1"
-          v-if="editedEvent || replyToEvent"
+    <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
+          class="scroll-to-end"
+          v-show="showScrollToEnd"
+          fab
+          small
+          elevation="0"
+          color="black"
+          @click.stop="scrollToEndOfTimeline"
        >
-          <v-btn
-            id="btn-cancel-reply"
-            fab
-            small
-            elevation="0"
-            color="black"
-            @click.stop="cancelEditReply"
-          >
-            <v-icon color="white">cancel</v-icon>
-          </v-btn>
-        </v-col>
+          <v-icon color="white">arrow_downward</v-icon>
+        </v-btn>

-        <v-col
-          class="input-area-button text-center flex-grow-0 flex-shrink-1"
-          v-if="!currentInput || currentInput.length == 0 || showRecorder"
-        >
-          <v-btn
-            id="btn-microphone"
-            v-if="canRecordAudio"
-            class="mic-button"
-            ref="mic_button"
-            fab
-            small
-            elevation="0"
-            v-blur
-            style="z-index: 10"
-            v-longTap:250="[showRecordingUI, startRecording]"
+        <v-row class="ma-0 pa-0">
+          <div v-if="replyToEvent" class="row">
+            <div class="col col-auto">
+              <v-btn
+                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 -->
+          <div class="typing">
+            {{ typingMembersString }}
+          </div>
+        </v-row>
+        <v-row class="input-area-inner align-center">
+          <v-col class="flex-grow-1 flex-shrink-1 ma-0 pa-0">
+            <v-textarea
+              height="undefined"
+              ref="messageInput"
+              full-width
+              auto-grow
+              rows="1"
+              v-model="currentInput"
+              no-resize
+              class="input-area-text"
+              :placeholder="$t('message.your_message')"
+              hide-details
+              background-color="white"
+              v-on:keydown.enter.prevent="
+                () => {
+                  sendCurrentTextMessage();
+                }
+              "
+            />
+          </v-col>
+
+          <v-col
+            class="input-area-button text-center flex-grow-0 flex-shrink-1"
+            v-if="editedEvent"
          >
-            <v-icon :color="showRecorder ? 'white' : 'black'">mic</v-icon>
-          </v-btn>
-          <v-btn
+            <v-btn
+              fab
+              small
+              elevation="0"
+              color="black"
+              @click.stop="cancelEditReply"
+            >
+              <v-icon color="white">cancel</v-icon>
+            </v-btn>
+          </v-col>
+
+          <v-col
+            class="input-area-button text-center flex-grow-0 flex-shrink-1"
+            v-if="!currentInput || currentInput.length == 0 || showRecorder"
+          >
+            <v-btn
+              v-if="canRecordAudio"
+              class="mic-button"
+              ref="mic_button"
+              fab
+              small
+              elevation="0"
+              v-blur
+              style="z-index: 10"
+              v-longTap:250="[showRecordingUI, startRecording]"
+            >
+              <v-icon :color="showRecorder ? 'white' : 'black'">mic</v-icon>
+            </v-btn>
+            <v-btn
+              v-else
+              class="mic-button"
+              ref="mic_button"
+              fab
+              small
+              elevation="0"
+              v-blur
+              style="z-index: 10"
+              @click.stop="showNoRecordingAvailableDialog = true"
+            >
+              <v-icon :color="showRecorder ? 'white' : 'black'">mic</v-icon>
+            </v-btn>
+          </v-col>
+
+          <v-col
+            class="input-area-button text-center flex-grow-0 flex-shrink-1"
            v-else
-            id="btn-microphone"
-            class="mic-button"
-            ref="mic_button"
-            fab
-            small
-            elevation="0"
-            v-blur
-            style="z-index: 10"
-            @click.stop="showNoRecordingAvailableDialog = true"
          >
-            <v-icon :color="showRecorder ? 'white' : 'black'">mic</v-icon>
-          </v-btn>
-        </v-col>
+            <v-btn
+              fab
+              small
+              elevation="0"
+              color="black"
+              @click.stop="sendCurrentTextMessage"
+              :disabled="sendButtonDisabled"
+            >
+              <v-icon color="white">{{
+                editedEvent ? "save" : "arrow_upward"
+              }}</v-icon>
+            </v-btn>
+          </v-col>

-        <v-col
-          class="input-area-button text-center flex-grow-0 flex-shrink-1"
-          v-else
-        >
-          <v-btn
-            id="btn-send"
-            fab
-            small
-            elevation="0"
-            color="black"
-            @click.stop="sendCurrentTextMessage"
-            :disabled="sendButtonDisabled"
+          <v-col
+            v-if="$config.shortCodeStickers"
+            class="input-area-button text-center flex-grow-0 flex-shrink-1"
          >
-            <v-icon color="white">{{
-              editedEvent ? "save" : "arrow_upward"
-            }}</v-icon>
-          </v-btn>
-        </v-col>
-
-        <v-col
-          v-if="$config.shortCodeStickers"
-          class="input-area-button text-center flex-grow-0 flex-shrink-1"
-        >
-          <v-btn
-            id="btn-stickers"
-            v-if="!showRecorder"
-            icon
-            large
-            color="black"
-            @click="showStickerPicker"
-            :disabled="attachButtonDisabled"
-          >
-            <v-icon large>face</v-icon>
-          </v-btn>
-        </v-col>
-
-        <v-col class="input-area-button text-center flex-grow-0 flex-shrink-1">
-          <label icon flat ref="attachmentLabel">
            <v-btn
              v-if="!showRecorder"
              id="btn-attach"
              icon
              large
              color="black"
-              @click="showAttachmentPicker"
+              @click="showStickerPicker"
              :disabled="attachButtonDisabled"
            >
-              <v-icon x-large>add_circle_outline</v-icon>
+              <v-icon large>face</v-icon>
            </v-btn>
-            <input
-              id="attachment-picker"
-              ref="attachment"
-              type="file"
-              name="attachment"
-              @change="handlePickedAttachment($event)"
-              accept="image/*|audio/*|video/*|application/pdf"
-              style="display: none"
-            />
-          </label>
-        </v-col>
-      </v-row>
-      <VoiceRecorder
-        :micButtonRef="$refs.mic_button"
-        :ptt="showRecorderPTT"
-        :show="showRecorder"
-        v-on:close="showRecorder = false"
-        v-on:file="onVoiceRecording"
-      />
+          </v-col>
+
+          <v-col class="input-area-button text-center flex-grow-0 flex-shrink-1">
+            <label icon flat ref="attachmentLabel">
+              <v-btn
+                v-if="!showRecorder"
+                icon
+                large
+                color="black"
+                @click="showAttachmentPicker"
+                :disabled="attachButtonDisabled"
+              >
+                <v-icon x-large>add_circle_outline</v-icon>
+              </v-btn>
+              <input
+                ref="attachment"
+                type="file"
+                name="attachment"
+                @change="handlePickedAttachment($event)"
+                accept="image/*|audio/*|video/*|application/pdf"
+                style="display: none"
+              />
+            </label>
+          </v-col>
+        </v-row>
+        <VoiceRecorder
+          :micButtonRef="$refs.mic_button"
+          :ptt="showRecorderPTT"
+          :show="showRecorder"
+          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) {