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

Styling changes

Browse source 
Also, add "x is typing"
This commit is contained in:
N-Pex 2020-12-09 21:50:53 +01:00
parent 7d3124c934
commit 3530f4a162
10 changed files with 88 additions and 47 deletions
Download patch file Download diff file Expand all files Collapse all files

8
src/components/messages/MessageIncomingAudio.vue
View file

@ -1,12 +1,10 @@
<template>
<div>
<div class="messageIn">
<div class="sender">{{ messageEventDisplayName(event) }}</div>
<div class="messageIn">
<div class="audio-bubble">
<audio controls :src="src">Audio file</audio>
<QuickReactions :event="event" :reactions="reactions" />
</div>
<v-avatar class="avatar" size="40" color="grey">
<v-avatar class="avatar" size="32" color="#ededed">
<img
v-if="messageEventAvatar(event)"
:src="messageEventAvatar(event)"
@ -15,7 +13,7 @@
messageEventDisplayName(event).substring(0, 1).toUpperCase()
}}</span>
</v-avatar>
</div>
<div class="sender">{{ messageEventDisplayName(event) }}</div>
<div class="time">
{{ formatTime(event.event.origin_server_ts) }}
</div>

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

@ -1,7 +1,5 @@
<template>
<div>
<div class="messageIn">
<div class="sender">{{ messageEventDisplayName(event) }}</div>
<div class="messageIn">
<div class="bubble image-bubble">
<v-img :aspect-ratio="16 / 9" ref="image" :src="src" cover />
<QuickReactions :event="event" :reactions="reactions" />
@ -15,7 +13,7 @@
messageEventDisplayName(event).substring(0, 1).toUpperCase()
}}</span>
</v-avatar>
</div>
<div class="sender">{{ messageEventDisplayName(event) }}</div>
<div class="time">
{{ formatTime(event.event.origin_server_ts) }}
</div>

8
src/components/messages/MessageIncomingText.vue
View file

@ -1,8 +1,6 @@
<template>
<div>
<div class="messageIn">
<div class="sender">{{ messageEventDisplayName(event) }}</div>
<v-avatar class="avatar" size="40" color="grey">
<div class="messageIn">
<v-avatar class="avatar" size="32" color="#ededed">
<img
v-if="messageEventAvatar(event)"
:src="messageEventAvatar(event)"
@ -18,7 +16,7 @@
</div>
<QuickReactions :event="event" :reactions="reactions" />
</div>
</div>
<div class="sender">{{ messageEventDisplayName(event) }}</div>
<div class="time">
{{ formatTime(event.event.origin_server_ts) }}
</div>

8
src/components/messages/MessageOutgoingAudio.vue
View file

@ -1,16 +1,14 @@
<template>
<div>
<div class="messageOut">
<div class="sender">{{ "You" }}</div>
<div class="messageOut">
<div class="audio-bubble">
<audio controls :src="src">Audio file</audio>
<QuickReactions :event="event" :reactions="reactions" />
</div>
<div class="status">{{ event.status }}</div>
</div>
<!-- <div class="sender">{{ "You" }}</div> -->
<div class="time">
{{ formatTime(event.event.origin_server_ts) }}
</div>
<div class="status">{{ event.status }}</div>
</div>
</template>

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

@ -1,15 +1,13 @@
<template>
<div>
<div class="messageOut">
<div class="sender">{{ "You" }}</div>
<div class="messageOut">
<div class="bubble image-bubble">
<v-img :aspect-ratio="16/9" ref="image" :src="src" cover />
<QuickReactions :event="event" :reactions="reactions" />
</div>
<div class="status">{{ event.status }}</div>
</div>
<!-- <div class="sender">{{ "You" }}</div> -->
<div class="time">
{{ formatTime(event.event.origin_server_ts) }}
<div class="status">{{ event.status }}</div>
</div>
</div>
</template>

8
src/components/messages/MessageOutgoingText.vue
View file

@ -1,18 +1,16 @@
<template>
<div>
<div class="messageOut">
<div class="sender">{{ "You" }}</div>
<div class="messageOut">
<div class="bubble">
<div class="message">{{ event.getContent().body }}
<span class="edit-marker" v-if="event.replacingEventId()">(edited)</span>
</div>
<QuickReactions :event="event" :reactions="reactions" />
</div>
<div class="status">{{ event.status }}</div>
</div>
<!-- <div class="sender">{{ "You" }}</div> -->
<div class="time">
{{ formatTime(event.event.origin_server_ts) }}
</div>
<div class="status">{{ event.status }}</div>
</div>
</template>