Merge branch '195-review-use-of-inline-resources' into 'dev'
Changed all static inline style to CSS classes See merge request keanuapp/keanuapp-weblite!47
This commit is contained in:
N Pex
commit
c1e2f77724
27 changed files with 179 additions and 112 deletions
20
src/assets/css/_utilities.scss
Normal file
20
src/assets/css/_utilities.scss
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
.cursor-pointer {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.text-transform-0 {
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
.mt-40 {
|
||||
margin-top: 40px;
|
||||
}
|
||||
.w-100 {
|
||||
width: 100%;
|
||||
}
|
||||
.h-100 {
|
||||
width: 100%;
|
||||
}
|
||||
.white-space-pre {
|
||||
white-space: pre;
|
||||
}
|
||||
|
|
@ -1,5 +1,6 @@
|
|||
@import '~vuetify/src/styles/settings/_variables.scss';
|
||||
@import "@/assets/css/main.scss";
|
||||
@import "@/assets/css/vendors/v-emoji-picker";
|
||||
|
||||
$admin-bg: black;
|
||||
$admin-fg: white;
|
||||
|
|
@ -37,6 +38,10 @@ $admin-fg: white;
|
|||
align-items: center;
|
||||
height: 100%;
|
||||
}
|
||||
.chat-header-members, .chat-header-name {
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
}
|
||||
.num-members {
|
||||
font-family: "Inter", sans-serif;
|
||||
font-weight: 400;
|
||||
|
|
@ -116,6 +121,8 @@ $admin-fg: white;
|
|||
padding-left: $chat-standard-padding-s;
|
||||
padding-bottom: $chat-standard-padding-s;
|
||||
padding-right: $chat-standard-padding-s;
|
||||
overflow: hidden auto;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
}
|
||||
|
|
@ -246,6 +253,10 @@ $admin-fg: white;
|
|||
user-select: text;
|
||||
}
|
||||
|
||||
.message-wrapper {
|
||||
position: relative; user-select: none
|
||||
}
|
||||
|
||||
.messageIn {
|
||||
margin: 8px;
|
||||
text-align: left;
|
||||
|
|
@ -544,9 +555,13 @@ $admin-fg: white;
|
|||
font-family: "Inter", sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 13 * $chat-text-size;
|
||||
flex: 1 0 80px;
|
||||
}
|
||||
.play-progress {
|
||||
padding: 0px 10px;
|
||||
flex: 1 1 100%;
|
||||
height: 30px;
|
||||
|
||||
.v-slider__thumb {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -794,6 +809,10 @@ $admin-fg: white;
|
|||
color: #3d6eff;
|
||||
}
|
||||
|
||||
.filled-button {
|
||||
min-width: 180px !important;
|
||||
}
|
||||
|
||||
.v-card {
|
||||
background-color: white;
|
||||
border-radius: 20px;
|
||||
|
|
@ -909,6 +928,7 @@ $admin-fg: white;
|
|||
}
|
||||
|
||||
.mic-button {
|
||||
z-index: 10;
|
||||
background-color: transparent !important;
|
||||
&.waiting-for-long-tap {
|
||||
transition: background-color 0.5s;
|
||||
|
|
@ -931,6 +951,14 @@ $admin-fg: white;
|
|||
border-radius: 10px;
|
||||
background-color: black;
|
||||
overflow: hidden;
|
||||
|
||||
.will-cancel, .locked, .error {
|
||||
position: absolute !important;
|
||||
top: 0 ;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0
|
||||
}
|
||||
.will-cancel {
|
||||
background-color: #ff3300;
|
||||
}
|
||||
|
|
@ -1080,3 +1108,13 @@ $admin-fg: white;
|
|||
.recent-emoji {
|
||||
color: black;
|
||||
}
|
||||
|
||||
.current-image-input-path {
|
||||
max-height: 50vh;
|
||||
background-color: #e2e2e2
|
||||
}
|
||||
|
||||
.loading-indicator {
|
||||
position: absolute;
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
|
@ -1,4 +1,5 @@
|
|||
@import './variables';
|
||||
@import './utilities';
|
||||
|
||||
@font-face {
|
||||
font-family: "Inter";
|
||||
|
|
|
|||
4
src/assets/css/vendors/_v-emoji-picker.scss
vendored
Normal file
4
src/assets/css/vendors/_v-emoji-picker.scss
vendored
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
#EmojiPicker {
|
||||
width: 100%;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
|
@ -18,7 +18,7 @@
|
|||
:style="{ top: `${isMove ? y : calcY()}px` }"
|
||||
>
|
||||
<div class="bottom-sheet-handle"><div class="bottom-sheet-handle-decoration" /></div>
|
||||
<div ref="sheetContent" style="position:absolute;top:20px;left:0;right:0;bottom:0;overflow-y:auto;padding:20px">
|
||||
<div ref="sheetContent" class="sheetContent">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -143,6 +143,14 @@ export default {
|
|||
<style lang="scss" scoped>
|
||||
@import '~vuetify/src/styles/settings/_variables.scss';
|
||||
@import '@/assets/css/variables';
|
||||
.sheetContent {
|
||||
position:absolute;
|
||||
top:20px;left:0;
|
||||
right:0;
|
||||
bottom:0;
|
||||
overflow-y:auto;
|
||||
padding:20px;
|
||||
}
|
||||
|
||||
.bottom-sheet {
|
||||
position: fixed;
|
||||
|
|
|
|||
|
|
@ -7,7 +7,6 @@
|
|||
<div
|
||||
class="chat-content flex-grow-1 flex-shrink-1"
|
||||
ref="chatContainer"
|
||||
style="overflow: hidden auto;"
|
||||
v-on:scroll="onScroll"
|
||||
@click="closeContextMenusIfOpen"
|
||||
>
|
||||
|
|
@ -77,7 +76,7 @@
|
|||
:ref="event.getId()"
|
||||
>
|
||||
<div
|
||||
style="position: relative; user-select: none"
|
||||
class="message-wrapper"
|
||||
v-on:touchstart="
|
||||
(e) => {
|
||||
touchStart(e, event);
|
||||
|
|
@ -226,7 +225,6 @@
|
|||
small
|
||||
elevation="0"
|
||||
v-blur
|
||||
style="z-index: 10"
|
||||
v-longTap:250="[showRecordingUI, startRecording]"
|
||||
>
|
||||
<v-icon :color="showRecorder ? 'white' : 'black'">mic</v-icon>
|
||||
|
|
@ -239,7 +237,6 @@
|
|||
small
|
||||
elevation="0"
|
||||
v-blur
|
||||
style="z-index: 10"
|
||||
@click.stop="showNoRecordingAvailableDialog = true"
|
||||
>
|
||||
<v-icon :color="showRecorder ? 'white' : 'black'">mic</v-icon>
|
||||
|
|
@ -299,7 +296,7 @@
|
|||
name="attachment"
|
||||
@change="handlePickedAttachment($event)"
|
||||
accept="image/*|audio/*|video/*|application/pdf"
|
||||
style="display: none"
|
||||
class="d-none"
|
||||
/>
|
||||
</label>
|
||||
</v-col>
|
||||
|
|
@ -327,7 +324,7 @@
|
|||
:aspect-ratio="1"
|
||||
:src="currentImageInput.image"
|
||||
contain
|
||||
style="max-height: 50vh; background-color: #e2e2e2"
|
||||
class="current-image-input-path"
|
||||
/>
|
||||
<div>
|
||||
file: {{ currentImageInputPath.name }}
|
||||
|
|
@ -390,7 +387,6 @@
|
|||
|
||||
<MessageOperationsBottomSheet
|
||||
ref="messageOperationsSheet"
|
||||
style="background-color: #f776777"
|
||||
>
|
||||
<MessageOperationsPicker
|
||||
v-on:close="showEmojiPicker = false"
|
||||
|
|
@ -405,22 +401,20 @@
|
|||
/>
|
||||
<VEmojiPicker
|
||||
ref="emojiPicker"
|
||||
style="width: 100%; background-color: #ffffff"
|
||||
@select="emojiSelected"
|
||||
/>
|
||||
</MessageOperationsBottomSheet>
|
||||
|
||||
<StickerPickerBottomSheet
|
||||
ref="stickerPickerSheet"
|
||||
style="z-index: 10"
|
||||
v-on:selectSticker="sendSticker"
|
||||
/>
|
||||
|
||||
<!-- Loading indicator -->
|
||||
<v-container
|
||||
fluid
|
||||
class="loading-indicator"
|
||||
fill-height
|
||||
style="position: absolute; background-color: rgba(0, 0, 0, 0.2)"
|
||||
v-if="!initialLoadDone || loading"
|
||||
>
|
||||
<v-row align="center" justify="center">
|
||||
|
|
|
|||
|
|
@ -4,7 +4,6 @@
|
|||
<v-col
|
||||
cols="auto"
|
||||
class="chat-header-members text-start ma-0 pa-0"
|
||||
style="overflow: hidden; cursor: pointer"
|
||||
@click.stop="onHeaderClicked"
|
||||
>
|
||||
<v-avatar size="40" class="me-2">
|
||||
|
|
@ -13,8 +12,7 @@
|
|||
</v-col>
|
||||
|
||||
<v-col
|
||||
class="ma-0 pa-0 flex-shrink-1 flex-nowrap"
|
||||
style="overflow: hidden; cursor: pointer"
|
||||
class="chat-header-name ma-0 pa-0 flex-shrink-1 flex-nowrap"
|
||||
@click.stop="onHeaderClicked"
|
||||
>
|
||||
<div class="room-name-inline text-truncate" :title="room.name">
|
||||
|
|
|
|||
|
|
@ -77,7 +77,7 @@
|
|||
</v-row>
|
||||
</v-container>
|
||||
|
||||
<v-container fluid style="margin-top: 40px">
|
||||
<v-container fluid class="mt-40">
|
||||
<v-row align="center">
|
||||
<v-col align="center">
|
||||
<v-avatar size="50" color="#ededed" @click.stop="showAvatarPicker">
|
||||
|
|
@ -210,7 +210,7 @@
|
|||
name="avatar"
|
||||
@change="handlePickedAvatar($event)"
|
||||
accept="image/*"
|
||||
style="display: none"
|
||||
class="d-none"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -19,9 +19,9 @@
|
|||
{{ roomHistoryDescription }}
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<v-btn id="btn-got-it" text @click.stop="$emit('close')" style="text-transform: none">{{
|
||||
$t("room_welcome.got_it")
|
||||
}}</v-btn>
|
||||
<v-btn id="btn-got-it" text @click.stop="$emit('close')" class="text-transform-0">
|
||||
{{ $t("room_welcome.got_it") }}
|
||||
</v-btn>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div class="home">
|
||||
<YouAre class="mt-4" v-if="!loading" />
|
||||
<YouAre class="mt-4" />
|
||||
<v-container fluid class="text-center mt-8">
|
||||
<v-row align="center" justify="center">
|
||||
<v-col class="text-center" cols="auto">
|
||||
|
|
@ -26,8 +26,8 @@
|
|||
<v-container
|
||||
fluid
|
||||
fill-height
|
||||
style="position: absolute; background-color: rgba(0, 0, 0, 0.2)"
|
||||
v-if="loading"
|
||||
class="loading-indicator"
|
||||
>
|
||||
<v-row align="center" justify="center">
|
||||
<v-col class="text-center">
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="d-flex flex-column pa-4" style="overflow: hidden">
|
||||
<div class="d-flex flex-column pa-4 overflow-hidden invite">
|
||||
<div class="flex-grow-0 flex-shrink-0">
|
||||
<div class="room-name">{{$t('invite.title')}}</div>
|
||||
<v-btn
|
||||
|
|
@ -13,10 +13,7 @@
|
|||
</v-btn>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="flex-grow-0 flex-shrink-0"
|
||||
style="min-height: 100px; max-height: 30vh"
|
||||
>
|
||||
<div class="flex-grow-0 flex-shrink-0 chip-group-wrapper">
|
||||
<div class="h4">{{$t('invite.send_invites_to')}}</div>
|
||||
<div>{{ status }}</div>
|
||||
<v-chip-group active-class="primary--text" column>
|
||||
|
|
@ -32,7 +29,7 @@
|
|||
</div>
|
||||
|
||||
<div class="flex-grow-1 flex-shrink-1">
|
||||
<v-list class="member ma-2" style="overflow-y: auto">
|
||||
<v-list class="member ma-2">
|
||||
<v-list-item-group multiple v-model="selectedMembers">
|
||||
<v-list-item
|
||||
v-for="member in $matrix.getAllFriends()"
|
||||
|
|
@ -168,5 +165,14 @@ export default {
|
|||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import "@/assets/css/chat.scss";
|
||||
@import "@/assets/css/chat.scss";
|
||||
.invite {
|
||||
.chip-group-wrapper {
|
||||
min-height: 100px;
|
||||
max-height: 30vh;
|
||||
}
|
||||
.member {
|
||||
overflow-y: auto !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -38,8 +38,8 @@
|
|||
<v-row v-else class="text-center">
|
||||
<v-col>
|
||||
{{ $t("join.joining_as") }}
|
||||
<div style="display: inline-block">
|
||||
<v-avatar color="#e0e0e0" style="">
|
||||
<div class="d-inline-block">
|
||||
<v-avatar color="#e0e0e0">
|
||||
<v-img v-if="userAvatar" :src="userAvatar" />
|
||||
<span v-else class="white--text headline">{{
|
||||
userAvatarLetter
|
||||
|
|
|
|||
|
|
@ -4,14 +4,7 @@
|
|||
<div
|
||||
v-show="!closed"
|
||||
@click.stop="backgroundClick"
|
||||
style="
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
background-color: rgba(0, 0, 0, 0.15);
|
||||
"
|
||||
class="transition-bg"
|
||||
/>
|
||||
</v-fade-transition>
|
||||
<SwipeableBottomSheet
|
||||
|
|
@ -86,6 +79,14 @@ export default {
|
|||
}
|
||||
|
||||
.message-operations-bottom-sheet {
|
||||
.transition-bg {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
background-color: rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
.pan-area {
|
||||
padding-bottom: 0px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@
|
|||
name="avatar"
|
||||
@change="handlePickedAvatar($event)"
|
||||
accept="image/*"
|
||||
style="display: none"
|
||||
class="d-none"
|
||||
/>
|
||||
</v-avatar>
|
||||
</v-col>
|
||||
|
|
|
|||
|
|
@ -62,13 +62,10 @@
|
|||
<a :href="'//'+productLink">{{ productLink }}</a>
|
||||
</template>
|
||||
</i18n>
|
||||
<div
|
||||
style="position: relative; width: 100%; height: 40px"
|
||||
class="text-end"
|
||||
>
|
||||
<v-btn id="btn-new-room" class="new_room" text @click="createRoom">{{
|
||||
$t("profile_info_popup.new_room")
|
||||
}}</v-btn>
|
||||
<div class="text-end">
|
||||
<v-btn id="btn-new-room" class="new_room" text @click="createRoom">
|
||||
{{ $t("profile_info_popup.new_room") }}
|
||||
</v-btn>
|
||||
</div>
|
||||
</div>
|
||||
</v-card-text>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,11 @@
|
|||
<template>
|
||||
<v-dialog v-model="showDialog" class="ma-0 pa-0" width="80%">
|
||||
<v-dialog
|
||||
v-model="showDialog"
|
||||
class="ma-0 pa-0"
|
||||
:width="$vuetify.breakpoint.smAndUp ? '940px' : '95%'"
|
||||
>
|
||||
<div class="dialog-content text-center" ref="qrContainer">
|
||||
<div class="d-flex flex-column text-center" style="align-items: center">
|
||||
<div class="d-flex justify-center">
|
||||
<canvas ref="qr" class="qr" id="qr" :style="qrStyle"></canvas>
|
||||
</div>
|
||||
<div>{{ $t("room_info.scan_code") }}</div>
|
||||
|
|
|
|||
|
|
@ -3,21 +3,9 @@
|
|||
<transition name="slow-fade">
|
||||
<div
|
||||
v-if="mounted"
|
||||
style="
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
z-index: 100;
|
||||
background-color: black;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 40px;
|
||||
"
|
||||
class="text-center d-flex flex-column"
|
||||
class="text-center d-flex flex-column goodbye-wrapper"
|
||||
>
|
||||
<div v-if="roomWasPurged" style="width: 28px">
|
||||
<div v-if="roomWasPurged">
|
||||
<v-img src="@/assets/icons/trash.svg" />
|
||||
</div>
|
||||
<h2 v-if="roomWasPurged" class="white--text mt-2 mb-8">
|
||||
|
|
@ -51,16 +39,7 @@
|
|||
<transition name="slow-fade">
|
||||
<div
|
||||
v-if="mounted"
|
||||
style="
|
||||
position: fixed;
|
||||
top: 24px;
|
||||
right: 24px;
|
||||
z-index: 101;
|
||||
padding: 10px 20px;
|
||||
height: 50px;
|
||||
border-radius: 25px;
|
||||
background-color: #242424;
|
||||
"
|
||||
class="goodbye-profile"
|
||||
>
|
||||
<div class="d-inline-block me-2 white--text">
|
||||
{{ $t("profile_info_popup.you_are") }}
|
||||
|
|
@ -157,22 +136,44 @@ export default {
|
|||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import "@/assets/css/chat.scss";
|
||||
@import "@/assets/css/chat.scss";
|
||||
|
||||
.author {
|
||||
font-size: 80%;
|
||||
}
|
||||
.author {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
.close {
|
||||
position: absolute;
|
||||
bottom: 40px;
|
||||
}
|
||||
.close {
|
||||
position: absolute;
|
||||
bottom: 40px;
|
||||
}
|
||||
|
||||
.slow-fade-enter-active,
|
||||
.slow-fade-leave-active {
|
||||
transition: opacity 2.5s;
|
||||
}
|
||||
.slow-fade-enter, .slow-fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
|
||||
opacity: 0;
|
||||
}
|
||||
</style>
|
||||
.slow-fade-enter-active,
|
||||
.slow-fade-leave-active {
|
||||
transition: opacity 2.5s;
|
||||
}
|
||||
.slow-fade-enter, .slow-fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
|
||||
opacity: 0;
|
||||
}
|
||||
.goodbye-wrapper {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
z-index: 100;
|
||||
background-color: black;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 40px;
|
||||
}
|
||||
.goodbye-profile {
|
||||
position: fixed;
|
||||
top: 24px;
|
||||
right: 24px;
|
||||
z-index: 101;
|
||||
padding: 10px 20px;
|
||||
height: 50px;
|
||||
border-radius: 25px;
|
||||
background-color: #242424;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -61,7 +61,6 @@
|
|||
color="#DEE6FF"
|
||||
depressed
|
||||
class="filled-button link-copied-in-place"
|
||||
style="min-width: 180px"
|
||||
>{{ $t("room_info.link_copied") }}</v-btn
|
||||
>
|
||||
<v-btn
|
||||
|
|
@ -70,7 +69,6 @@
|
|||
color="black"
|
||||
depressed
|
||||
class="filled-button"
|
||||
style="min-width: 180px"
|
||||
@click.stop="copyRoomLink"
|
||||
>{{ $t("room_info.copy_link") }}</v-btn
|
||||
>
|
||||
|
|
|
|||
|
|
@ -48,7 +48,6 @@
|
|||
v-for="room in joinedRooms"
|
||||
:key="room.roomId"
|
||||
:value="room.roomId"
|
||||
style="position: relative"
|
||||
>
|
||||
<v-list-item-avatar size="40" color="#e0e0e0">
|
||||
<v-img :src="room.avatar" />
|
||||
|
|
|
|||
|
|
@ -65,13 +65,17 @@ export default {
|
|||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import "@/assets/css/chat.scss";
|
||||
@import "@/assets/css/chat.scss";
|
||||
</style>
|
||||
|
||||
<style lang="scss">
|
||||
.sticker-picker .tabs {
|
||||
position: sticky;
|
||||
top: 0px;
|
||||
z-index: 1;
|
||||
}
|
||||
.sticker-picker {
|
||||
z-index: 10;
|
||||
|
||||
.tabs {
|
||||
position: sticky;
|
||||
top: 0px;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -5,7 +5,6 @@
|
|||
:class="{ 'voice-recorder': true, ptt: ptt, row: !ptt }"
|
||||
ref="vrroot"
|
||||
>
|
||||
<!-- <div style="background-color:red;height:60px;width:100%"/> -->
|
||||
<v-container v-if="!ptt" fluid fill-height>
|
||||
<v-row align="center" class="mt-3">
|
||||
<v-col cols="4" align="center">
|
||||
|
|
@ -69,7 +68,6 @@
|
|||
<div
|
||||
v-if="willCancel"
|
||||
class="will-cancel"
|
||||
style="position: absolute; top: 0; left: 0; right: 0; bottom: 0"
|
||||
>
|
||||
<v-container fluid fill-height>
|
||||
<v-row align="center">
|
||||
|
|
@ -90,7 +88,6 @@
|
|||
<div
|
||||
v-if="recordingLocked"
|
||||
class="locked"
|
||||
style="position: absolute; top: 0; left: 0; right: 0; bottom: 0"
|
||||
>
|
||||
<v-container fluid fill-height>
|
||||
<v-row align="center">
|
||||
|
|
@ -117,7 +114,6 @@
|
|||
<div
|
||||
v-if="state == states.ERROR"
|
||||
class="error"
|
||||
style="position: absolute; top: 0; left: 0; right: 0; bottom: 0"
|
||||
>
|
||||
<v-container fluid fill-height>
|
||||
<v-row align="center">
|
||||
|
|
|
|||
|
|
@ -2,11 +2,10 @@
|
|||
<div class="d-flex flex-row-reverse">
|
||||
<v-chip
|
||||
@click="viewProfile"
|
||||
class="ma-2"
|
||||
class="ma-2 white-space-pre"
|
||||
:color="dark ? 'black' : '#ededed'"
|
||||
:text-color="dark ? 'white' : 'black'"
|
||||
:outlined="!dark"
|
||||
style="white-space: pre"
|
||||
>{{ $t("profile_info_popup.you_are") }}
|
||||
<span v-if="$matrix.currentUser.is_guest">
|
||||
<i18n path="profile_info_popup.identity_temporary" tag="span">
|
||||
|
|
@ -56,4 +55,4 @@ export default {
|
|||
|
||||
<style lang="scss">
|
||||
@import "@/assets/css/chat.scss";
|
||||
</style>
|
||||
</style>
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="audio-player d-flex flex-row" style="align-items: center">
|
||||
<div class="audio-player d-flex flex-row align-center">
|
||||
<audio ref="player" :src="src" @durationchange="updateDuration">
|
||||
<slot></slot>
|
||||
</audio>
|
||||
|
|
@ -9,15 +9,14 @@
|
|||
<v-btn v-else id="btn-play" @click.stop="play" icon
|
||||
><v-icon size="20">play_arrow</v-icon></v-btn
|
||||
>
|
||||
<div class="play-time" style="flex: 1 0 80px">
|
||||
<div class="play-time">
|
||||
{{ currentTime }} / {{ totalTime }}
|
||||
</div>
|
||||
<v-slider
|
||||
<v-slider
|
||||
color="currentColor"
|
||||
track-color="#cccccc"
|
||||
class="play-progress"
|
||||
v-model="playheadPercent"
|
||||
style="flex: 1 1 100%; height: 30px"
|
||||
min="0"
|
||||
max="100"
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
<div class="message">
|
||||
<span>{{ $t('message.file_prefix') }}</span>
|
||||
<span
|
||||
style="cursor: pointer"
|
||||
class="cursor-pointer"
|
||||
@click.stop="$emit('download')"
|
||||
v-html="linkify($sanitize(messageText))"
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<message-incoming v-bind="{ ...$props, ...$attrs }" v-on="$listeners">
|
||||
<div class="bubble image-bubble">
|
||||
<v-responsive :aspect-ratio="16 / 9" :src="src">
|
||||
<video :src="src" controls style="width: 100%; height: 100%">
|
||||
<video :src="src" controls class="w-100 h-100">
|
||||
{{$t('fallbacks.video_file')}}
|
||||
</video>
|
||||
<div v-if="downloadProgress" class="download-overlay">
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@
|
|||
<div class="message">
|
||||
<span>{{ $t('message.file_prefix') }}</span>
|
||||
<span
|
||||
style="cursor: pointer"
|
||||
class="cursor-pointer"
|
||||
@click.stop="$emit('download')"
|
||||
v-html="linkify($sanitize(messageText))"
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<message-outgoing v-bind="{ ...$props, ...$attrs }" v-on="$listeners">
|
||||
<div class="bubble image-bubble">
|
||||
<v-responsive :aspect-ratio="16 / 9" class="ma-0 pa-0">
|
||||
<video :src="src" controls style="width: 100%; height: 100%">
|
||||
<video :src="src" controls class="w-100 h-100">
|
||||
{{$t('fallbacks.video_file')}}
|
||||
</video>
|
||||
</v-responsive>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue