butter/keanu-weblite
5
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

Dialogs and Vuetify styling changes

Browse source
This commit is contained in:
N-Pex 2025-05-08 11:52:39 +02:00
parent 2ba0d57aa8
commit a97211afdf
45 changed files with 320 additions and 346 deletions
Download patch file Download diff file Expand all files Collapse all files

75
src/components/Chat.vue
View file

@ -117,9 +117,8 @@
<NoHistoryRoomWelcomeHeader v-if="showNoHistoryRoomWelcomeHeader" />
<!-- "Scroll to end"-button -->
<v-btn v-if="!useVoiceMode" :class="{'scroll-to-end': true, 'reversed': reverseOrder}" v-show="showScrollToEnd" fab x-small elevation="0" color="black"
<v-btn v-if="!useVoiceMode" icon="arrow_downward" :class="{'scroll-to-end': true, 'reversed': reverseOrder}" v-show="showScrollToEnd" theme="dark" size="x-small" elevation="0" color="black"
@click.stop="scrollToEndOfTimeline">
<v-icon color="white">arrow_downward</v-icon>
</v-btn>
@ -133,7 +132,7 @@
<div class="col">
<div class="font-weight-medium">{{ $t("message.replying_to", { user: senderDisplayName }) }}</div>
<div v-if="replyToContentType === 'm.text'" class="reply-text" :title="replyToEvent.getContent().body">
{{ replyToEvent.getContent().body | latestReply }}
{{ latestReply }}
</div>
<div v-if="replyToContentType === 'm.thread' || replyToContentType === 'io.element.thread'">{{ replyToThreadMessage }}</div>
<div v-if="replyToContentType === 'm.image'">{{ $t("message.reply_image") }}</div>
@ -146,11 +145,10 @@
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" />
<v-icon v-if="replyToContentType === 'm.poll'" light>$vuetify.icons.poll</v-icon>
<v-icon v-if="replyToContentType === 'm.poll'" theme="light">$vuetify.icons.poll</v-icon>
</div>
<div class="col col-auto">
<v-btn fab x-small elevation="0" color="black" @click.stop="cancelEditReply">
<v-icon color="white">cancel</v-icon>
<v-btn icon="cancel" size="default" elevation="0" color="black" @click.stop="cancelEditReply">
</v-btn>
</div>
</div>
@ -163,7 +161,7 @@
<v-row class="input-area-inner align-center" v-show="!showRecorder" v-if="$matrix.userCanSendMessageInCurrentRoom">
<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
no-resize class="input-area-text input-plain" :placeholder="$t('message.your_message')" hide-details
background-color="white" v-on:keydown.enter.prevent="
() => {
sendCurrentTextMessage();
@ -172,58 +170,52 @@
</v-col>
<v-col class="input-area-button text-center flex-grow-0 flex-shrink-1" v-if="editedEvent">
<v-btn fab small elevation="0" color="black" @click.stop="cancelEditReply">
<v-icon color="white">cancel</v-icon>
<v-btn icon="cancel" elevation="0" color="black" @click.stop="cancelEditReply">
</v-btn>
</v-col>
<v-col v-if="(!currentInput || currentInput.length == 0) && canCreatePoll && !replyToEvent"
class="input-area-button text-center flex-grow-0 flex-shrink-1">
<v-btn icon large color="black" @click="showCreatePollDialog = true">
<v-icon dark>$vuetify.icons.poll</v-icon>
<v-btn icon @click="showCreatePollDialog = true">
<v-icon size="24">$vuetify.icons.poll</v-icon>
</v-btn>
</v-col>
<v-col class="input-area-button text-center flex-grow-0 flex-shrink-1"
v-if="!$config.disableMediaSharing && (!currentInput || currentInput.length == 0 || showRecorder)">
<v-btn v-if="canRecordAudio" class="mic-button" ref="mic_button" fab small elevation="0" v-blur
<v-btn icon="mic" :color="showRecorder ? 'black' : 'white'" v-if="canRecordAudio" class="mic-button" ref="mic_button" elevation="0" v-blur
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
<v-btn icon="mic" :color="showRecorder ? 'black' : 'white'" v-else class="mic-button" ref="mic_button" elevation="0" v-blur
@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-if="currentInput && currentInput.length > 0">
<v-btn fab small elevation="0" color="black" @click.stop="sendCurrentTextMessage"
<v-btn :icon="editedEvent ? 'save' : 'arrow_upward'" size="default" 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 input-more-icon">
<v-btn fab small elevation="0" v-blur @click.stop="
<v-btn size="small" elevation="0" v-blur @click.stop="
isEmojiQuickReaction = false;
showMoreMessageOperations($event)
">
<v-icon>$vuetify.icons.addReaction</v-icon>
" icon="$vuetify.icons.addReaction">
</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-attach" icon large color="black" @click="showStickerPicker"
<v-btn id="btn-stickers" icon="face" @click="showStickerPicker"
:disabled="attachButtonDisabled">
<v-icon large>face</v-icon>
</v-btn>
</v-col>
<v-col v-if="!$config.disableMediaSharing" class="input-area-button text-center flex-grow-0 flex-shrink-1">
<label icon flat ref="attachmentLabel">
<v-btn icon large color="black" @click="showAttachmentPicker"
<v-btn icon @click="showAttachmentPicker"
:disabled="attachButtonDisabled">
<v-icon x-large>add_circle_outline</v-icon>
<v-icon size="36">add_circle_outline</v-icon>
</v-btn>
</label>
</v-col>
@ -296,7 +288,7 @@
</template>
<v-divider></v-divider>
<v-textarea v-if="showAttachmentCaptionInput" v-model="attachmentCaption" ref="attachmentCaption" color="black" background-color="transparent"
solo full-width auto-grow rows="1" no-resize hide-details :placeholder="$t('file_mode.add_a_message')"></v-textarea>
variant="solo" full-width auto-grow rows="1" no-resize hide-details :placeholder="$t('file_mode.add_a_message')"></v-textarea>
<v-card-actions>
<v-spacer>
<div v-if="currentSendError">{{ currentSendError }}</div>
@ -347,14 +339,13 @@
<CreatePollDialog :show="showCreatePollDialog" @close="showCreatePollDialog = false" />
<UserProfileDialog
:show="showProfileDialog"
v-model="showProfileDialog"
:activeMember="compActiveMember"
:room="room"
@close="showProfileDialog = false"
/>
<!-- PURGE ROOM POPUP -->
<PurgeRoomDialog :show="showPurgeConfirmation" :room="room" @close="showPurgeConfirmation = false" />
<PurgeRoomDialog v-model="showPurgeConfirmation" :room="room" />
<RoomExport :room="room" v-if="downloadingChat" v-on:close="downloadingChat = false" />
@ -552,16 +543,6 @@ export default {
};
},
filters: {
latestReply(contents) {
const contentArr = contents.split("\n").reverse();
if (contentArr[0] === "") {
contentArr.shift();
}
return (contentArr && contentArr.length > 0) ? contentArr[0].replace(/^> (<.*> )?/g, "") : "";
},
},
mounted() {
emitter.on('audio-playback-ended', this.audioPlaybackEnded);
const container = this.chatContainer;
@ -589,6 +570,14 @@ export default {
},
computed: {
latestReply() {
const contents = this.replyToEvent ? this.replyToEvent.getContent().body : "";
const contentArr = contents.split("\n").reverse();
if (contentArr[0] === "") {
contentArr.shift();
}
return (contentArr && contentArr.length > 0) ? contentArr[0].replace(/^> (<.*> )?/g, "") : "";
},
heartEmoji() {
return this.$refs.emojiPicker.mapEmojis["Symbols"].find(({ aliases }) => aliases.includes('heart')).data;
},
@ -800,20 +789,20 @@ export default {
roomWelcomeHeader() {
if (!this.hideRoomWelcomeHeader && this.roomCreatedByUsRecently) {
if (this.roomDisplayType == ROOM_TYPE_CHANNEL) {
return WelcomeHeaderChannel;
return markRaw(WelcomeHeaderChannel);
}
if (this.isDirectRoom) {
return WelcomeHeaderDirectChat;
return markRaw(WelcomeHeaderDirectChat);
}
return WelcomeHeaderRoom;
return markRaw(WelcomeHeaderRoom);
}
return null;
},
messageOperationsComponent() {
if (this.room.displayType == ROOM_TYPE_CHANNEL) {
return MessageOperationsChannel;
return markRaw(MessageOperationsChannel);
}
return MessageOperations;
return markRaw(MessageOperations);
},
chatContainerStyle() {
if (this.$config.chat_backgrounds && this.room && this.roomId) {