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

Vuetify updates

Browse source
This commit is contained in:
N-Pex 2025-05-06 10:53:34 +02:00
parent c913a40e18
commit c47b975723
43 changed files with 197 additions and 150 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/App.vue
View file

@ -22,7 +22,7 @@
</v-container>
<v-skeleton-loader
type="list-item-avatar-two-line, divider, list-item-three-line, card-heading"
type="list-item-avatar-two-line,divider,list-item-three-line,heading"
v-if="showLoadingScreen"
></v-skeleton-loader>
<unsupported-browser-alert />
@ -227,7 +227,7 @@ export default {
</script>
<style lang="scss">
@import '~vuetify/src/styles/settings/_variables.scss';
@import 'vuetify/settings';
@import '@/assets/css/variables';
.copyright {

2
src/assets/css/chat.scss
View file

@ -1,4 +1,4 @@
@import "~vuetify/src/styles/settings/_variables.scss";
@import "vuetify/settings";
@import "@/assets/css/main.scss";
@import "@/assets/css/vendors/v-emoji-picker";
@import "@/assets/css/filedrop.scss";

2
src/assets/css/join.scss
View file

@ -1,4 +1,4 @@
@import "~vuetify/src/styles/settings/_variables.scss";
@import "vuetify/settings";
@import "@/assets/css/main.scss";
.v-btn.btn-light {

6
src/components/AudioLayout.vue
View file

@ -9,7 +9,7 @@
<transition-group name="list" tag="div">
<v-avatar v-for="(member) in recordingMembersExceptMe" :key="member.userId" class="typing-user" size="32" color="grey">
<AuthedImage v-if="memberAvatar(member)" :src="memberAvatar(member)" />
<span v-else class="white--text headline">{{
<span v-else class="text-white headline">{{
member.name.substring(0, 1).toUpperCase()
}}</span>
</v-avatar>
@ -23,7 +23,7 @@
<v-avatar v-if="currentAudioEvent" class="avatar" ref="avatar" size="32" color="#ededed"
@click.stop="otherAvatarClicked($refs.avatar.$el)">
<img v-if="messageEventAvatar(currentAudioEvent)" :src="messageEventAvatar(currentAudioEvent)" />
<span v-else class="white--text headline">{{
<span v-else class="text-white headline">{{
eventSenderDisplayName(currentAudioEvent).substring(0, 1).toUpperCase()
}}</span>
</v-avatar>
@ -34,7 +34,7 @@
<transition-group name="list" tag="div">
<v-avatar v-for="reaction in reactions" :key="reaction.member.userId" class="typing-user" size="32" color="grey">
<AuthedImage v-if="memberAvatar(reaction.member)" :src="memberAvatar(reaction.member)" />
<span v-else class="white--text headline">{{
<span v-else class="text-white headline">{{
reaction.member.name.substring(0, 1).toUpperCase()
}}</span>
<div class="reaction-emoji">{{ reaction.emoji }}</div>

2
src/components/BottomSheet.vue
View file

@ -163,7 +163,7 @@ export default {
</script>
<style lang="scss" scoped>
@import '~vuetify/src/styles/settings/_variables.scss';
@import 'vuetify/settings';
@import '@/assets/css/variables';
.sheetContent {
position:absolute;

4
src/components/Chat.vue
View file

@ -238,7 +238,7 @@
accept="image/*,audio/*,video/*,.mp3,.mp4,.wav,.m4a,.pdf,application/pdf,.apk,application/vnd.android.package-archive,.ipa,.zip,application/zip,application/x-zip-compressed,multipart/x-zip" class="d-none" multiple/>
<div v-if="currentFileInputsDialog && !useFileModeNonAdmin">
<v-dialog v-model="currentFileInputsDialog" class="ma-0 pa-0" :width="$vuetify.breakpoint.smAndUp ? '50%' : '85%'" persistent scrollable>
<v-dialog v-model="currentFileInputsDialog" class="ma-0 pa-0" :width="$vuetify.display.smAndUp ? '50%' : '85%'" persistent scrollable>
<v-card class="ma-0 pa-0">
<v-card-text v-if="!currentFileInputs.length">
{{ this.$t("message.preparing_to_upload")}}
@ -249,7 +249,7 @@
</v-card-text>
<template v-else>
<v-card-title>
<div v-if="currentSendErrorExceededFile" class="red--text">{{ currentSendErrorExceededFile }}</div>
<div v-if="currentSendErrorExceededFile" class="text-red">{{ currentSendErrorExceededFile }}</div>
<span v-else> {{ $t('message.send_attachements_dialog_title') }} </span>
</v-card-title>
<v-divider></v-divider>

4
src/components/ChatHeader.vue
View file

@ -7,7 +7,7 @@
>
<v-avatar size="48" class="clickable me-2 chat-header-avatar" color="grey" @click.stop="onAvatarClicked">
<AuthedImage v-if="roomAvatar" :src="roomAvatar" />
<span v-else class="white--text headline">{{
<span v-else class="text-white headline">{{
room.name.substring(0, 1).toUpperCase()
}}</span>
</v-avatar>
@ -34,7 +34,7 @@
<v-avatar :class="{ 'avatar-32': true, 'clickable': true, 'popup-open': showProfileInfo }" size="26"
color="#e0e0e0" @click.stop="showProfileInfo = true">
<AuthedImage v-if="userAvatar" :src="userAvatar" />
<span v-else class="white--text">{{ userAvatarLetter }}</span>
<span v-else class="text-white">{{ userAvatarLetter }}</span>
</v-avatar>
</v-col>
<v-col cols="auto" class="text-end ma-0 pa-0 ms-1">

4
src/components/ChatHeaderPrivate.vue
View file

@ -7,7 +7,7 @@
>
<v-avatar size="48" class="clickable me-2 chat-header-avatar rounded-circle" color="grey" @click.stop="onAvatarClicked">
<v-img v-if="privatePartyAvatar(40)" :src="privatePartyAvatar(40)" />
<span v-else class="white--text headline">{{
<span v-else class="text-white headline">{{
privateParty.name.substring(0, 1).toUpperCase()
}}</span>
</v-avatar>
@ -38,7 +38,7 @@
<v-avatar :class="{ 'avatar-32': true, 'clickable': true, 'popup-open': showProfileInfo }" size="26"
color="#e0e0e0" @click.stop="showProfileInfo = true">
<AuthedImage v-if="userAvatar" :src="userAvatar" />
<span v-else class="white--text">{{ userAvatarLetter }}</span>
<span v-else class="text-white">{{ userAvatarLetter }}</span>
</v-avatar>
</v-col>

2
src/components/CreateChannel.vue
View file

@ -18,7 +18,7 @@
<v-text-field v-model="roomTopic" :label="$t('createchannel.channel_topic')"
v-bind="{ ...roomTopicInputFields }" v-on="{ ...roomTopicInputListeners }"></v-text-field>
<div class="caption-2 text-center mt-2 mb-8">{{ $t('createchannel.channel_topic_label') }}</div>
<div class="error--text" v-if="errorMessage != null">{{ this.errorMessage }}</div>
<div class="text-red" v-if="errorMessage != null">{{ this.errorMessage }}</div>
<interactive-auth ref="interactiveAuth" />

2
src/components/CreateFileDrop.vue
View file

@ -16,7 +16,7 @@
<v-text-field v-model="roomName" :label="$t('createfiledrop.filedrop_name')"
v-bind="{ ...roomNameInputFields }" v-on="{ ...roomNameInputListeners }"></v-text-field>
<div class="error--text" v-if="errorMessage != null">{{ this.errorMessage }}</div>
<div class="text-red" v-if="errorMessage != null">{{ this.errorMessage }}</div>
<interactive-auth ref="interactiveAuth" />

2
src/components/CreatePollDialog.vue
View file

@ -4,7 +4,7 @@
v-show="room"
scrollable
class="ma-0 pa-0"
:width="$vuetify.breakpoint.smAndUp ? '940px' : '95%'"
:width="$vuetify.display.smAndUp ? '940px' : '95%'"
>
<v-card>
<v-card-title>

4
src/components/CreateRoom.vue
View file

@ -48,7 +48,7 @@
</v-card>
<div class="error--text" v-if="errorMessage != null">{{ this.errorMessage }}</div>
<div class="text-red" v-if="errorMessage != null">{{ this.errorMessage }}</div>
<!-- Create button -->
<v-btn :disabled="!formIsValid || creatingRoom" color="#6360F0" depressed @click.stop="onCreate"
@ -70,7 +70,7 @@
<input id="user-avatar-picker" ref="useravatar" type="file" name="user-avatar"
@change="handlePickedUserAvatar($event)" accept="image/*" class="d-none" />
<v-dialog v-model="enterRoomDialog" :width="$vuetify.breakpoint.smAndUp ? '50%' : '90%'">
<v-dialog v-model="enterRoomDialog" :width="$vuetify.display.smAndUp ? '50%' : '90%'">
<v-card>
<v-container v-if="canEditProfile" class="pa-10">
<v-row class="align-center">

4
src/components/DeviceList.vue
View file

@ -1,6 +1,5 @@
<template>
<v-list dense @click.native.stop="nullEvent">
<v-list-item-group color="primary">
<v-list dense @click.stop="nullEvent" color="primary">
<v-list-item
v-for="device in devices"
:key="device.deviceId"
@ -27,7 +26,6 @@
</v-list-item-action>
</template>
</v-list-item>
</v-list-item-group>
</v-list>
</template>

4
src/components/GetLink.vue
View file

@ -11,9 +11,9 @@
:error-messages="userErrorMessage" required v-on:keyup.enter="onUsernameEnter"
v-on:keydown="hasError = false"></v-text-field>
<!-- <div class="error--text" v-if="loadingLoginFlows">Loading login flows...</div> -->
<!-- <div class="text-red" v-if="loadingLoginFlows">Loading login flows...</div> -->
<div class="error--text" v-if="hasError">{{ this.message }}</div>
<div class="text-red" v-if="hasError">{{ this.message }}</div>
<interactive-auth ref="interactiveAuth" />

14
src/components/Invite.vue
View file

@ -29,20 +29,21 @@
</div>
<div class="flex-grow-1 flex-shrink-1">
<v-list class="member ma-2">
<v-list-item-group multiple v-model="selectedMembers">
<v-list class="member ma-2" v-model:selected="selectedMembers">
<v-list-item
v-for="member in $matrix.getAllFriends()"
:key="member.userId"
:value="member"
>
<template v-slot:default="{ active }">
<v-list-item-avatar color="grey">
<template v-slot:prepend>
<v-avatar color="grey">
<AuthedImage v-if="memberAvatar(member)" :src="memberAvatar(member)" />
<span v-else class="white--text headline">{{
<span v-else class="text-white headline">{{
member.name.substring(0, 1).toUpperCase()
}}</span>
</v-list-item-avatar>
</v-avatar>
</template>
<template v-slot:default="{ active }">
<v-list-item-title>{{ memberName(member) }}</v-list-item-title>
<v-list-item-subtitle
v-text="member.userId"
@ -54,7 +55,6 @@
</v-list-item-action>
</template>
</v-list-item>
</v-list-item-group>
</v-list>
</div>
</div>

4
src/components/Join.vue
View file

@ -5,7 +5,7 @@
<div class="text-center">
<v-avatar class="join-avatar">
<AuthedImage v-if="roomAvatar" :src="roomAvatar" />
<span v-else class="white--text headline">
<span v-else class="text-white headline">
{{ roomName.substring(0, 1).toUpperCase() }}
</span>
</v-avatar>
@ -51,7 +51,7 @@
<div class="d-inline-block">
<v-avatar color="#e0e0e0">
<AuthedImage v-if="userAvatar" :src="userAvatar" />
<span v-else class="white--text headline">{{ userAvatarLetter }}</span>
<span v-else class="text-white headline">{{ userAvatarLetter }}</span>
</v-avatar>
</div>
{{ userDisplayName }}

2
src/components/LeaveRoomDialog.vue
View file

@ -3,7 +3,7 @@
v-model="showDialog"
v-show="room"
class="ma-0 pa-0"
:width="$vuetify.breakpoint.smAndUp ? '688px' : '95%'"
:width="$vuetify.display.smAndUp ? '688px' : '95%'"
>
<div class="dialog-content text-center">
<template v-if="roomJoinRule == 'public'">

4
src/components/Login.vue
View file

@ -42,7 +42,7 @@
v-on:blur="onUsernameBlur"
></v-text-field>
<div class="error--text" v-if="loadingLoginFlows">Loading login flows...</div>
<div class="text-red" v-if="loadingLoginFlows">Loading login flows...</div>
<v-text-field
v-show="showPasswordField"
@ -67,7 +67,7 @@
}
"
></v-text-field>
<div class="error--text" v-if="hasError">{{ this.message }}</div>
<div class="text-red" v-if="hasError">{{ this.message }}</div>
<v-checkbox
id="chk-remember-me"
class="mt-0"

2
src/components/LogoutRoomDialog.vue
View file

@ -2,7 +2,7 @@
<v-dialog
:value="showLogoutPopup"
class="ma-0 pa-0"
:width="$vuetify.breakpoint.smAndUp ? '688px' : '95%'"
:width="$vuetify.display.smAndUp ? '688px' : '95%'"
@click:outside="$emit('onOutsideLogoutPopupClicked')"
>
<div class="dialog-content text-center">

2
src/components/MessageRetentionDialog.vue
View file

@ -1,5 +1,5 @@
<template>
<v-dialog v-model="showDialog" v-show="room" class="ma-0 pa-0" :width="$vuetify.breakpoint.smAndUp ? '688px' : '95%'">
<v-dialog v-model="showDialog" v-show="room" class="ma-0 pa-0" :width="$vuetify.display.smAndUp ? '688px' : '95%'">
<div class="dialog-content text-center">
<template>
<h2>{{ $t("room_info.message_retention") }}</h2>

4
src/components/MoreMenuPopup.vue
View file

@ -11,7 +11,7 @@
<v-col cols="auto" class="me-2">
<v-avatar class="avatar-32" size="32" color="#e0e0e0" @click.stop="viewProfile">
<AuthedImage v-if="userAvatar" :src="userAvatar" />
<span v-else class="white--text">{{ userAvatarLetter }}</span>
<span v-else class="text-white">{{ userAvatarLetter }}</span>
</v-avatar>
</v-col>
<v-col>
@ -84,7 +84,7 @@ export default {
<style lang="scss">
@import "@/assets/css/chat.scss";
@import '~vuetify/src/styles/settings/_variables.scss';
@import 'vuetify/settings';
.popup-wrapper {
width: fit-content;

10
src/components/Profile.vue
View file

@ -26,7 +26,7 @@
v-if="isAvatarLoaded"
>
<AuthedImage v-if="userAvatar" :src="userAvatar" />
<span v-else class="white--text">{{ userAvatarLetter }}</span>
<span v-else class="text-white">{{ userAvatarLetter }}</span>
<input
id="avatar-picker"
ref="avatar"
@ -111,7 +111,7 @@
<v-dialog
v-model="showEditPasswordDialog"
class="ma-0 pa-0"
:width="$vuetify.breakpoint.smAndUp ? '940px' : '80%'"
:width="$vuetify.display.smAndUp ? '940px' : '80%'"
>
<v-card :disabled="settingPassword">
<v-card-title>{{ $matrix.currentUser.is_guest ? $t("profile.set_password") : $t("profile.change_password") }}</v-card-title>
@ -144,7 +144,7 @@
:type="showPassword2 ? 'text' : 'password'"
@click:append="showPassword2 = !showPassword2"
/>
<div class="red--text" v-if="passwordErrorMessage">
<div class="text-red" v-if="passwordErrorMessage">
{{ passwordErrorMessage }}
</div>
</v-card-text>
@ -177,7 +177,7 @@
<v-dialog
v-model="showEditDisplaynameDialog"
class="ma-0 pa-0"
:width="$vuetify.breakpoint.smAndUp ? '940px' : '80%'"
:width="$vuetify.display.smAndUp ? '940px' : '80%'"
>
<v-card>
<v-card-title>{{ $t("profile.display_name") }}</v-card-title>
@ -218,7 +218,7 @@
v-model="notificationDialog"
persistent
class="ma-0 pa-0"
:width="$vuetify.breakpoint.smAndUp ? '688px' : '95%'"
:width="$vuetify.display.smAndUp ? '688px' : '95%'"
>
<div class="dialog-content text-center">
<v-icon size="30">notifications_active</v-icon>

4
src/components/ProfileInfoPopup.vue
View file

@ -34,7 +34,7 @@
<v-col cols="auto" class="pa-2">
<v-avatar class="avatar-32" size="32" color="#e0e0e0" @click.stop="viewProfile">
<AuthedImage v-if="userAvatar" :src="userAvatar" />
<span v-else class="white--text">{{ userAvatarLetter }}</span>
<span v-else class="text-white">{{ userAvatarLetter }}</span>
</v-avatar>
</v-col>
</v-row>
@ -120,7 +120,7 @@ export default {
<style lang="scss">
@import "@/assets/css/chat.scss";
@import '~vuetify/src/styles/settings/_variables.scss';
@import 'vuetify/settings';
.profile-info-popup {
font-family: "Inter", sans-serif !important;

2
src/components/PurgeRoomDialog.vue
View file

@ -3,7 +3,7 @@
persistent
v-model="showDialog"
v-show="room" class="ma-0 pa-0"
:width="$vuetify.breakpoint.smAndUp ? '688px' : '95%'"
:width="$vuetify.display.smAndUp ? '688px' : '95%'"
>
<div v-if="timeout == -1" class="dialog-content text-center">
<template>

2
src/components/QRCodePopup.vue
View file

@ -2,7 +2,7 @@
<v-dialog
v-model="showDialog"
class="ma-0 pa-0"
:width="$vuetify.breakpoint.smAndUp ? '940px' : '95%'"
:width="$vuetify.display.smAndUp ? '940px' : '95%'"
>
<div class="dialog-content text-center" ref="qrContainer">
<div class="d-flex justify-center">

14
src/components/QuoteView.vue
View file

@ -8,11 +8,11 @@
<div v-if="roomWasPurged">
<v-img src="@/assets/icons/trash.svg" />
</div>
<h2 v-if="roomWasPurged" class="white--text mt-2 mb-8">
<h2 v-if="roomWasPurged" class="text-white mt-2 mb-8">
{{ $t("goodbye.room_deleted") }}
</h2>
<div class="quote white--text">{{ quote }}</div>
<div class="author white--text mt-4">- {{ author }}</div>
<div class="quote text-white">{{ quote }}</div>
<div class="author text-white mt-4">- {{ author }}</div>
<v-btn
v-if="joinedToAnyRoom"
@ -42,13 +42,13 @@
class="goodbye-profile clickable"
@click.stop="viewOtherRooms"
>
<div class="d-inline-block me-2 white--text">
<div class="d-inline-block me-2 text-white">
{{ $t("profile_info_popup.you_are") }}
</div>
<div
v-if="$matrix.currentUser.is_guest"
class="d-inline-block me-2 white--text"
class="d-inline-block me-2 text-white"
>
<i18n-t keypath="profile_info_popup.identity_temporary" tag="span">
<template v-slot:displayName>
@ -56,7 +56,7 @@
</template>
</i18n-t>
</div>
<div v-else class="d-inline-block me-2 white--text">
<div v-else class="d-inline-block me-2 text-white">
<i18n-t keypath="profile_info_popup.identity" tag="span">
<template v-slot:displayName>
<b>{{ displayName }}</b>
@ -69,7 +69,7 @@
color="#e0e0e0"
>
<AuthedImage v-if="userAvatar" :src="userAvatar" />
<span v-else class="white--text">{{ userAvatarLetter }}</span>
<span v-else class="text-white">{{ userAvatarLetter }}</span>
</v-avatar>
</div>
</transition>

2
src/components/ReportRoomDialog.vue
View file

@ -3,7 +3,7 @@
v-model="showDialog"
v-show="room"
class="ma-0 pa-0"
:width="$vuetify.breakpoint.smAndUp ? '688px' : '95%'"
:width="$vuetify.display.smAndUp ? '688px' : '95%'"
>
<div class="dialog-content text-center">
<h2 class="dialog-title">{{ $t("room_info.report") }}</h2>

2
src/components/RoomAvatarPicker.vue
View file

@ -1,7 +1,7 @@
<template>
<v-avatar :class="{'room-avatar':true, 'cursor-pointer':userCanPurgeRoom}" @click="userCanPurgeRoom?showRoomAvatarPicker():null" v-if="isRoomAvatarLoaded">
<AuthedImage v-if="roomAvatar" :src="roomAvatar"/>
<span v-else class="white--text headline">{{
<span v-else class="text-white headline">{{
roomName.substring(0, 1).toUpperCase()
}}</span>
<input

34
src/components/RoomInfo.vue
View file

@ -109,9 +109,11 @@
</template>
<template v-slot:item="{ item, attrs, on }">
<v-list-item v-on="on" v-bind="attrs" #default="{ active }">
<v-list-item-avatar>
<v-icon color="black">{{ item.icon }}</v-icon>
</v-list-item-avatar>
<template v-slot:prepend>
<v-avatar color="grey">
<v-icon color="black">{{ item.icon }}</v-icon>
</v-avatar>
</template>
<v-list-item-title v-text="item.text"></v-list-item-title>
<v-list-item-action>
<v-btn icon v-if="active">
@ -141,14 +143,17 @@
<v-card-text v-if="canViewRetentionPolicy">
<v-list v-if="canChangeRetentionPolicy">
<v-list-item link v-on:click="showMessageRetentionDialog = true" class="px-0 pb-0">
<v-list-item-avatar class="mr-0 pb-0 mb-0">
<v-img
contain
width="24"
height="24"
src="@/assets/icons/timer.svg"
/>
</v-list-item-avatar>
<template v-slot:prepend>
<v-avatar class="mr-0 pb-0 mb-0">
<v-img
contain
width="24"
height="24"
src="@/assets/icons/timer.svg"
/>
</v-avatar>
</template>
{{ messageRetentionDisplay }}
<v-list-item-action class="pb-0 mb-0">
@ -197,10 +202,8 @@
<div>{{ members.length }}</div></v-card-title
>
<v-list>
<v-list-item-group>
<template v-for="(member, index) in members" >
<template v-for="(member, index) in members" :key="member.userId">
<v-list-item
:key="member.userId"
class="member"
v-show="showAllMembers || index < SHOW_MEMBER_LIMIT"
@click="onListItemClick(member)"
@ -209,7 +212,7 @@
<div class="user-icon-with-badge">
<v-avatar class="avatar" size="32" color="grey">
<AuthedImage v-if="memberAvatar(member)" :src="memberAvatar(member)" />
<span v-else class="white--text headline">{{
<span v-else class="text-white headline">{{
member.name.substring(0, 1).toUpperCase()
}}</span>
</v-avatar>
@ -241,7 +244,6 @@
:key="index"
></v-divider>
</template>
</v-list-item-group>
</v-list>
<div class="show-all p-2" @click="showAllMembers = !showAllMembers" v-if="members.length > SHOW_MEMBER_LIMIT">
{{ showAllMembers ? $t("room_info.hide_all") : $t("room_info.show_all") }}

101
src/components/RoomList.vue
View file

@ -1,54 +1,61 @@
<template>
<v-list dense class="room-list">
<v-list-item-group @change="roomChange" color="primary">
<v-list-item v-if="showCreate" @click.stop="$emit('newroom')" class="room-list-room" :value="null">
<v-list-item-avatar class="round" size="42" color="#d9d9d9">
<v-list-item v-if="showCreate" @click.stop="$emit('newroom')" class="room-list-room" :value="null">
<template v-slot:prepend>
<v-avatar class="round" size="42" color="#d9d9d9">
<v-icon size="11">$vuetify.icons.ic_new_room</v-icon>
</v-list-item-avatar>
<v-list-item-title class="room-list-new-room">{{
$t("menu.new_room")
}}</v-list-item-title>
</v-list-item>
</v-avatar>
</template>
<!-- invites -->
<v-list-item :disabled="roomsProcessing[room.roomId]" v-for="room in invitedRooms" :key="room.roomId"
:value="room" class="room-list-room">
<v-list-item-avatar size="42" color="#d9d9d9">
<v-list-item-title class="room-list-new-room">{{
$t("menu.new_room")
}}</v-list-item-title>
</v-list-item>
<!-- invites -->
<v-list-item :disabled="roomsProcessing[room.roomId]" v-for="room in invitedRooms" :key="room.roomId"
:value="room.roomId" class="room-list-room">
<template v-slot:prepend>
<v-avatar size="42" color="#d9d9d9">
<AuthedImage v-if="roomAvatar(room)" :src="roomAvatar(room)" />
<span v-else class="white--text headline">{{
<span v-else class="text-white headline">{{
room.name.substring(0, 1).toUpperCase()
}}</span>
</v-list-item-avatar>
<v-list-item-title class="room-list-name">{{ room.name }}</v-list-item-title>
<v-list-item-subtitle>{{ room.topic }}</v-list-item-subtitle>
<v-list-item-action>
<v-btn id="btn-accept" class="filled-button" depressed color="black" @click.stop="acceptInvitation(room)">{{
$t("menu.join") }}</v-btn>
<v-btn v-if="!room.isServiceNoticeRoom" id="btn-reject" class="filled-button" color="black" @click.stop="rejectInvitation(room)" text>{{
</v-avatar>
</template>
<v-list-item-title class="room-list-name">{{ room.name }}</v-list-item-title>
<v-list-item-subtitle>{{ room.topic }}</v-list-item-subtitle>
<v-list-item-action>
<v-btn id="btn-accept" class="filled-button" depressed color="black" @click.stop="acceptInvitation(room)">{{
$t("menu.join") }}</v-btn>
<v-btn v-if="!room.isServiceNoticeRoom" id="btn-reject" class="filled-button" color="black"
@click.stop="rejectInvitation(room)" text>{{
$t("menu.ignore") }}</v-btn>
</v-list-item-action>
</v-list-item>
</v-list-item-action>
</v-list-item>
<v-list-item v-for="room in joinedRooms" :key="room.roomId" :value="room" class="room-list-room">
<v-list-item-avatar size="42" color="#d9d9d9" :class="[{'rounded-circle': isDirect(room)}]">
<v-list-item v-for="room in joinedRooms" :key="room.roomId" :value="room.roomId"
@click="currentRoomId = room.roomId" class="room-list-room">
<template v-slot:prepend>
<v-avatar size="42" color="#d9d9d9" :class="[{ 'rounded-circle': isDirect(room) }]">
<AuthedImage v-if="roomAvatar(room)" :src="roomAvatar(room)" />
<span v-else class="white--text headline">{{
<span v-else class="text-white headline">{{
room.name.substring(0, 1).toUpperCase()
}}</span>
</v-list-item-avatar>
<v-list-item-title class="room-list-name">{{ room.name }}
<!-- <v-icon class="ml-2 mb-1" size="10" v-if="isPublic(room)">$vuetify.icons.ic_public</v-icon> -->
</v-list-item-title>
<v-list-item-subtitle class="room-list-new-messages" v-if="notificationCount(room) > 0">
{{ $t("room.room_list_new_messages", { count: notificationCount(room) }) }}
</v-list-item-subtitle>
<v-list-item-action>
<v-icon size="16" v-if="room.roomId == $matrix.currentRoomId">$vuetify.icons.ic_circle_filled</v-icon>
<v-icon size="16" v-else>$vuetify.icons.ic_circle</v-icon>
</v-list-item-action>
</v-list-item>
</v-list-item-group>
</v-avatar>
</template>
<v-list-item-title class="room-list-name">{{ room.name }}
<!-- <v-icon class="ml-2 mb-1" size="10" v-if="isPublic(room)">$vuetify.icons.ic_public</v-icon> -->
</v-list-item-title>
<v-list-item-subtitle class="room-list-new-messages" v-if="notificationCount(room) > 0">
{{ $t("room.room_list_new_messages", { count: notificationCount(room) }) }}
</v-list-item-subtitle>
<v-list-item-action>
<v-icon size="16" v-if="room.roomId == $matrix.currentRoomId">$vuetify.icons.ic_circle_filled</v-icon>
<v-icon size="16" v-else>$vuetify.icons.ic_circle</v-icon>
</v-list-item-action>
</v-list-item>
</v-list>
</template>
@ -75,6 +82,8 @@ export default {
},
data: () => ({
currentRoomId: null,
/** A list of rooms currently processing some operation, like "join" or "reject" */
roomsProcessing: {},
}),
@ -181,25 +190,25 @@ export default {
isDirect(room) {
return this.$matrix.isDirectRoom(room);
},
},
roomChange(room) {
if (room == null || room == undefined || room == 0) {
watch: {
currentRoomId() {
if (this.currentRoomId == null || this.currentRoomId == undefined) {
// Ignore, this is caused by "new room" etc.
return;
}
if (room.isServiceNoticeRoom && room.selfMembership === "invite") {
return; // Nothing should happen when click on invite to server notices room, just the "join" button is enabled.
}
this.$emit("close");
this.$navigation.push(
{
name: "Chat",
params: { roomId: util.sanitizeRoomId(room.roomId) },
params: { roomId: util.sanitizeRoomId(this.currentRoomId) },
},
-1
);
}
},
},
};
</script>

2
src/components/SelectLanguageDialog.vue
View file

@ -3,7 +3,7 @@
class="ma-0 pa-0"
v-bind="{ ...$props, ...$attrs }"
v-on="$listeners"
:width="$vuetify.breakpoint.smAndUp ? '940px' : '90%'"
:width="$vuetify.display.smAndUp ? '940px' : '90%'"
>
<v-card class="dialog-card">
<v-card-title class="dialog-title d-block">

2
src/components/UnsupportedBrowserAlert.vue
View file

@ -3,7 +3,7 @@
class="ma-0 pa-0"
v-model="isUnSupportedBrowser"
persistent
:width="$vuetify.breakpoint.smAndUp ? '50%' : '90%'"
:width="$vuetify.display.smAndUp ? '50%' : '90%'"
>
<div class="dialog-content text-center">
<h2 class="dialog-title">{{ $t("global.different_browser_title") }}</h2>

4
src/components/UserProfileDialog.vue
View file

@ -4,13 +4,13 @@
v-model="showDialog"
v-show="room"
class="ma-0 pa-0"
:width="$vuetify.breakpoint.smAndUp ? '688px' : '95%'"
:width="$vuetify.display.smAndUp ? '688px' : '95%'"
>
<div class="dialog-content text-center member-action-dialog">
<div class="pt-4">
<v-avatar class="avatar" size="56" color="grey">
<AuthedImage v-if="memberAvatarComp" :src="memberAvatarComp" />
<span v-else class="white--text headline">{{ firstLetterUserName }}</span>
<span v-else class="text-white headline">{{ firstLetterUserName }}</span>
</v-avatar>
<div>
<span class="user-name">

2
src/components/YouAre.vue
View file

@ -23,7 +23,7 @@
</span>
<v-avatar color="#e0e0e0" right @click.stop="viewProfile">
<AuthedImage v-if="userAvatar" :src="userAvatar" />
<span v-else class="white--text">{{ userAvatarLetter }}</span>
<span v-else class="text-white">{{ userAvatarLetter }}</span>
</v-avatar>
</v-chip>
</div>

2
src/components/messages/MessageIncoming.vue
View file

@ -9,7 +9,7 @@
</div>
<v-avatar class="avatar" ref="avatar" size="32" color="#ededed" @click.stop="otherAvatarClicked($refs.avatar.$el)">
<img v-if="messageEventAvatar(event)" :src="messageEventAvatar(event)" onerror="this.style.display='none'" />
<span v-else class="white--text headline">{{
<span v-else class="text-white headline">{{
eventSenderDisplayName(event).substring(0, 1).toUpperCase()
}}</span>
</v-avatar>

2
src/components/messages/MessageIncomingImage.vue
View file

@ -11,7 +11,7 @@
</div>
<v-dialog
v-model="dialog"
:width="$vuetify.breakpoint.smAndUp ? '940px' : '90%'"
:width="$vuetify.display.smAndUp ? '940px' : '90%'"
>
<v-img :src="src"/>
</v-dialog>

2
src/components/messages/MessageOutgoing.vue
View file

@ -27,7 +27,7 @@
@click.stop="ownAvatarClicked"
>
<AuthedImage v-if="userAvatar" :src="userAvatar" />
<span v-else class="white--text headline">{{ userAvatarLetter }}</span>
<span v-else class="text-white headline">{{ userAvatarLetter }}</span>
</v-avatar>
<QuickReactionsChannel v-if="room.displayType == ROOM_TYPE_CHANNEL" :event="eventForReactions" :timelineSet="timelineSet" v-on="$listeners"/>
<QuickReactions v-else :event="eventForReactions" :timelineSet="timelineSet" v-on="$listeners"/>

2
src/components/messages/MessageOutgoingImage.vue
View file

@ -11,7 +11,7 @@
</div>
<v-dialog
v-model="dialog"
:width="$vuetify.breakpoint.smAndUp ? '940px' : '90%'"
:width="$vuetify.display.smAndUp ? '940px' : '90%'"
>
<v-img :src="src"/>
</v-dialog>

4
src/components/messages/SeenBy.vue
View file

@ -9,7 +9,7 @@
<v-avatar v-for="(member, index) in seenBy" :key="member.roomMember.userId" class="seen-by-user" size="16" color="grey"
v-show="index < SHOW_LIMIT" @click="open">
<AuthedImage v-if="memberAvatar(member.roomMember)" :src="memberAvatar(member.roomMember)" />
<span v-else class="white--text headline">{{
<span v-else class="text-white headline">{{
member.roomMember.name.substring(0, 1).toUpperCase()
}}</span>
</v-avatar>
@ -29,7 +29,7 @@
<v-list-item-icon>
<v-avatar size="40" color="grey">
<AuthedImage v-if="memberAvatar(member.roomMember)" :src="memberAvatar(member.roomMember)" />
<span v-else class="white--text headline">{{
<span v-else class="text-white headline">{{
member.roomMember.name.substring(0, 1).toUpperCase()
}}</span>
</v-avatar>

4
src/main.js
View file

@ -13,7 +13,7 @@ import VueResize from 'vue3-resize';
import 'vue3-resize/dist/vue3-resize.css';
import VueClipboard from 'vue-clipboard2'
import Vue3Sanitize from "vue-3-sanitize";
import createVuetify from './plugins/vuetify';
import vuetify from './plugins/vuetify';
import { Buffer } from 'buffer/'
import { createApp, h } from 'vue';
globalThis.Buffer = Buffer;
@ -41,8 +41,6 @@ app.use(analytics);
app.use(VueClipboard);
app.use(audioPlayer);
const vuetify = createVuetify(config);
// Add bubble functionality to custom events.
// From here: https://stackoverflow.com/questions/41993508/vuejs-bubbling-custom-events
app.use((instance) => {

67
src/plugins/vuetify.js
View file

@ -1,30 +1,69 @@
import {createVuetify } from "vuetify";
import { createVuetify } from "vuetify";
import * as components from "vuetify/components";
import * as directives from "vuetify/directives";
import { aliases, md } from "vuetify/iconsets/md";
import { h } from "vue";
// Import all .vue icons and process them, so they can be used
// as $vuetify.icons.<iconname>
var icons = {}
const modules = import.meta.glob('@/assets/icons/*.vue', {eager: true});
Object.keys(modules).map(path => {
var icons = {};
var customAliases = {};
const modules = import.meta.glob("@/assets/icons/*.vue", { eager: true });
Object.keys(modules).map((path) => {
// Remove"./"
const parts = path.split("/");
const iconName = parts[parts.length - 1].split(".")[0];
icons[iconName] = { component: modules[path].default }
icons[iconName] = { component: modules[path].default };
customAliases["vuetify.icons." + iconName] = "custom:" + iconName;
});
export default function(ignoredconfig) {
return createVuetify({
const custom = {
component: (props) => {
const {
icon,
...rest
} = props;
const stringIcon = icon;
if (icons[stringIcon]) {
return h(props.tag, rest, [h(icons[stringIcon].component)]);
}
return md.component(props);
}
}
export default {
install(app, ignoredOptions) {
const options = {
components,
directives,
icons: {
iconfont: 'md',
values: icons,
defaultSet: "md",
aliases: {
...aliases,
...customAliases,
},
sets: {
md, custom,
},
},
options: {
customProperties: true
defaults: {
global: {
density: "comfortable",
},
VBtn: {
variant: "flat",
},
},
theme: {
options: {
customProperties: true,
},
dark: false,
}
});
}
},
};
const vuetify = createVuetify(options);
app.use(vuetify);
app.config.globalProperties.$vuetify = vuetify;
app.$vuetify = vuetify;
},
};

2
src/services/matrix.service.js
View file

@ -251,6 +251,8 @@ export default {
// if (user.is_guest) {
// this.matrixClient.setGuest(true);
// }
console.log("MATRIX CLIENT", this.matrixClient);
return this.matrixClient
.initCrypto()
.then(() => {

3
vite.config.mjs
View file

@ -15,7 +15,7 @@ function VuetifyResolver() {
resolve: (name) => {
console.log("rESOLVE", name);
if (name.match(/^V[A-Z]/) && !name.includes("VEmojiPicker"))
return { name, from: './node_modules/vuetify/lib/components' }
return { name, from: './node_modules/vuetify/components' }
},
}
}
@ -59,7 +59,6 @@ export default defineConfig(({mode}) => ({
alias: [
{ find: "@", replacement: fileURLToPath(new URL("./src", import.meta.url)) },
{ find: "~@", replacement: fileURLToPath(new URL("./src", import.meta.url)) },
{ find: "~vuetify/src", replacement: fileURLToPath(new URL("./node_modules/vuetify/lib", import.meta.url)) },
{ find: "vue", replacement: fileURLToPath(new URL("./node_modules/vue/dist/vue.esm-bundler.js", import.meta.url)) },
],
},