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

New room list and chat header design

Browse source
This commit is contained in:
N Pex 2023-03-03 14:43:53 +00:00
parent 7396fbc959
commit baf0120eee
23 changed files with 651 additions and 287 deletions
Download patch file Download diff file Expand all files Collapse all files

117
src/components/ProfileInfoPopup.vue
View file

@ -1,51 +1,38 @@
<template>
<v-dialog
v-model="showDialog"
content-class="profile-info-popup"
class="ma-0 pa-0"
>
<v-dialog v-model="showDialog" content-class="profile-info-popup" class="ma-0 pa-0">
<v-card flat>
<v-card-text>
<div class="you-are">{{ $t("profile_info_popup.you_are") }}</div>
<v-container fluid>
<v-row>
<v-col :class="['username',{'editable': editDisplayName }]" cols="pa-2" ref="username">
<v-col :class="['username', { 'editable': editDisplayName }]" cols="pa-2" ref="username">
<div v-if="$matrix.currentUser.is_guest">
<i18n path="profile_info_popup.identity_temporary" tag="span">
<template v-slot:displayName>
<input
v-model="displayName"
@blur="
updateDisplayName($event.target.value);
editDisplayName = !editDisplayName;
"
@focus="editDisplayName = !editDisplayName"
/>
<input v-model="displayName"
@keyup.enter="$event => $event.target.blur()"
@blur="
updateDisplayName($event.target.value);
editDisplayName = !editDisplayName;
" @focus="editDisplayName = !editDisplayName" />
</template>
</i18n>
</div>
<div v-else>
<i18n path="profile_info_popup.identity" tag="span">
<template v-slot:displayName>
<input
<input
v-model="displayName"
@blur="
updateDisplayName($event.target.value);
editDisplayName = !editDisplayName;
"
@focus="editDisplayName = !editDisplayName"
/>
@keyup.enter="$event => $event.target.blur()"
@blur="updateDisplayName($event.target.value);editDisplayName = !editDisplayName;"
@focus="editDisplayName = !editDisplayName"
/>
</template>
</i18n>
</div>
</v-col>
<v-col cols="auto" class="pa-2">
<v-avatar
class="avatar-32"
size="32"
color="#e0e0e0"
@click.stop="viewProfile"
>
<v-avatar class="avatar-32" size="32" color="#e0e0e0" @click.stop="viewProfile">
<img v-if="userAvatar" :src="userAvatar" />
<span v-else class="white--text">{{ userAvatarLetter }}</span>
</v-avatar>
@ -53,24 +40,6 @@
</v-row>
</v-container>
<v-container class="mt-4 pa-0">
<ActionRow
@click="viewProfile"
:icon="'account_circle'"
:text="$t('profile_info_popup.edit_profile')"
/>
<ActionRow
@click.stop="showLogoutPopup=true"
:icon="'logout'"
:text="$t('profile_info_popup.logout')"
/>
<LogoutRoomDialog
:showLogoutPopup="showLogoutPopup"
@onOutsideLogoutPopupClicked="showLogoutPopup=false"
@onCancelLogoutClicked="showLogoutPopup=false"
/>
</v-container>
<div class="more-container">
<div class="want_more">
🙌 {{ $t("profile_info_popup.want_more") }}
@ -78,7 +47,7 @@
<i18n path="profile_info_popup.powered_by" tag="div">
<template v-slot:product>{{ product }}</template>
<template v-slot:productLink>
<a :href="'//'+productLink">{{ productLink }}</a>
<a :href="'//' + productLink">{{ productLink }}</a>
</template>
</i18n>
<div class="text-end">
@ -93,16 +62,10 @@
</template>
<script>
import profileInfoMixin from "./profileInfoMixin";
import ActionRow from "./ActionRow.vue";
import LogoutRoomDialog from './LogoutRoomDialog.vue';
export default {
name: "ProfileInfoPopup",
mixins: [profileInfoMixin],
components: {
ActionRow,
LogoutRoomDialog
},
props: {
show: {
type: Boolean,
@ -115,7 +78,6 @@ export default {
return {
showDialog: false,
editDisplayName: false,
showLogoutPopup: false
};
},
computed: {
@ -163,28 +125,20 @@ export default {
margin: 0px;
top: 70px;
right: 10px;
[dir="rtl"] & {
right: inherit;
left: 10px;
}
border-radius: 40px;
width: 95%;
&::before {
content: "▲";
position: fixed;
top: 57px;
right: 22px;
[dir="rtl"] & {
left: 22px;
right: inherit;
}
color: white;
}
.you-are {
padding-top: 20px;
font-size: 12px;
}
.username {
border-radius: 4px;
background-color: #f5f5f5;
@ -202,19 +156,45 @@ export default {
}
}
}
.more-container {
border-radius: 10px;
background-color: #f5f5f5;
padding: 20px;
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-size: 14 * $chat-text-size;
line-height: 117%;
letter-spacing: 0.4px;
color: #000B16;
margin-top: 18px;
a {
color: #000B16 !important;
}
.want_more {
font-family: "Poppins", sans-serif;
font-weight: 700;
font-size: 13 * $chat-text-size;
color: #0e252d;
margin-bottom: 9px;
}
.new_room {
margin-top: 16px;
height: 27px;
border-radius: 13.5px;
border: 1px solid #000000;
}
.new_room .v-btn__content {
font-family: "Poppins", sans-serif !important;
font-weight: 700 !important;
font-size: 13 * $chat-text-size !important;
font-family: 'Inter', sans-serif;
font-style: normal;
font-weight: 700;
font-size: 10 * $chat-text-size !important;
line-height: 133%;
letter-spacing: 0.34px;
text-transform: uppercase;
color: #181719;
}
}
@ -224,7 +204,8 @@ export default {
@media #{map-get($display-breakpoints, 'lg-and-up')} {
overflow: unset;
width: $main-desktop-width;;
width: $main-desktop-width;
;
position: absolute;
top: 70px;
right: unset;