Merge branch 'dev'

This commit is contained in:
N-Pex 2022-02-11 15:53:21 +01:00
commit d8a50e1ca6
20 changed files with 326 additions and 194 deletions

View file

@ -154,7 +154,7 @@ export default {
document.documentElement.setAttribute("dir", "rtl");
} else {
this.$vuetify.rtl = false;
document.documentElement.removeAttribute("dir");
document.documentElement.setAttribute("dir", "ltr");
}
},
immediate: true,

View file

@ -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;
@ -264,6 +280,7 @@ $admin-fg: white;
display: inline-block;
width: 70%;
max-width: 70%;
cursor: pointer;
}
.bubble.sticker-bubble {
padding: 0px;
@ -358,8 +375,9 @@ $admin-fg: white;
display: inline-block;
width: 70%;
max-width: 70%;
.v-image,
video {
cursor: pointer;
.v-image, video {
border-radius: 10px 10px 0 10px;
[dir="rtl"] & {
border-radius: 10px 10px 10px 0px;

View file

@ -60,16 +60,25 @@
color: $very-very-purple;
font-weight: bold;
}
.inactive {
color: unset;
@media #{map-get($display-breakpoints, 'sm-and-up')} {
&:hover {
color: $very-very-purple;
}
}
}
.language-more {
box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.08);
border-radius: 18px;
border: 1px solid black;
padding: 0px 5px !important;
box-shadow: 0px 4px 4px 0px #00000040;
background-color: #FFFFFF !important;
padding: 0px 5px;
background-color: #FFFFFF;
&:hover {
background-color: black !important;
background-color: black;
color: white;
}
}

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 8.3 KiB

View file

@ -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>

After

Width:  |  Height:  |  Size: 490 B

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

@ -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) {

View file

@ -77,8 +77,11 @@
<div class="join-lang">
<h3 class="mb-2">{{ $t("profile.select_language") }}</h3>
<v-row class="align-center">
<v-col v-for="(lang,key) in getSortedLangByActive.slice(0, 4)" :key="key">
<span :class="$i18n.locale==lang.value?'active':''" > {{lang.text}} </span>
<v-col v-for="lang in activeLanguage" :key="lang.value">
<span class="active">{{ lang.text }}</span>
</v-col>
<v-col v-for="(lang, key) in getDisplayLanguage.slice(0,3)" :key="key">
<button class="inactive" @click="updateLanguage(lang.value)">{{ lang.text }}</button>
</v-col>
<v-col>
<v-btn
@ -202,16 +205,13 @@ export default {
this.$store.commit("setUseLocalStorage", rememberMe);
},
},
getSortedLangByActive() {
const context = this;
return this.getLanguages().sort(function(lang) {
if(lang.value == context.$i18n.locale) {
return -1;
} else {
return 1;
}
});
getDisplayLanguage() {
let displayLanguages = [...this.getLanguages()];
return displayLanguages.filter(lang => lang.display && lang.value !== this.$i18n.locale);
},
activeLanguage() {
let activeLanguages = [...this.getLanguages()]
return activeLanguages.filter(lang => lang.value === this.$i18n.locale);
}
},
watch: {

View file

@ -3,18 +3,25 @@ export default {
return {
languages: [],
activeLang:null,
displayLanguage: ['en','bo','zh_Hans','ug']
}
},
methods: {
getLanguages() {
return this.languages;
},
updateLanguage(lang) {
this.$i18n.locale = lang;
this.$store.commit('setLanguage', lang);
}
},
mounted() {
const context = this
for (const locale of Object.keys(this.$i18n.messages)) {
this.languages.push({
text: this.$i18n.messages[locale].language_display_name || locale,
value: locale,
display: context.displayLanguage.includes(locale)
});
}
}

View file

@ -1,15 +1,22 @@
<template>
<message-incoming v-bind="{...$props, ...$attrs}" v-on="$listeners">
<div class="bubble image-bubble">
<message-incoming v-bind="{...$props, ...$attrs}" v-on="$listeners">
<div class="bubble image-bubble">
<v-img
:aspect-ratio="16 / 9"
ref="image"
:src="src"
:cover="cover"
:contain="contain"
@click.stop="dialog = true"
/>
</div>
</message-incoming>
<v-dialog
v-model="dialog"
:width="$vuetify.breakpoint.smAndUp ? '940px' : '90%'"
>
<v-img :src="src"/>
</v-dialog>
</message-incoming>
</template>
<script>
@ -24,6 +31,7 @@ export default {
src: null,
cover: true,
contain: false,
dialog: false
};
},
mounted() {

View file

@ -7,8 +7,15 @@
:src="src"
:cover="cover"
:contain="contain"
@click.stop="dialog = true"
/>
</div>
<v-dialog
v-model="dialog"
:width="$vuetify.breakpoint.smAndUp ? '940px' : '90%'"
>
<v-img :src="src"/>
</v-dialog>
</message-outgoing>
</template>
@ -24,6 +31,7 @@ export default {
src: null,
cover: true,
contain: false,
dialog: false
};
},
mounted() {

View file

@ -79,6 +79,9 @@ export default {
},
},
methods: {
setRoomJoinRule(ignoredJoinRule) {
// Do nothing in the general mixin, override in RoomInfo.vue
},
getRoomJoinRule() {
return this.$matrix.getRoomJoinRule(this.room);
},