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

Styling fixes

Browse source 
Issues #24 and #25.
This commit is contained in:
N-Pex 2021-01-11 17:44:09 +01:00
parent 6a22d99c17
commit 43b3bdf164
9 changed files with 173 additions and 123 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -25,13 +25,13 @@
align-items: center;
}
.num-members {
font-family: 'Titillium Web', sans-serif;
font-family: 'Inter', sans-serif;
font-weight: 400;
font-size: 12 * $chat-text-size;
color: black;
}
.v-btn.leave-button {
font-family: 'Titillium Web', sans-serif;
font-family: 'Inter', sans-serif;
font-weight: 700;
font-size: 11 * $chat-text-size;
color: white;
@ -81,7 +81,7 @@
padding-right: 2 * $chat-standard-padding-s;
padding-top: 0px;
.typing {
font-family: 'Titillium Web', sans-serif;
font-family: 'Inter', sans-serif;
font-weight: 300;
font-size: 12 * $chat-text-size;
color: #1c242a;
@ -104,7 +104,7 @@
overflow-y: auto;
padding: 0 0 0 0px;
margin: 6px 0;
font-family: 'Titillium Web', sans-serif;
font-family: 'Inter', sans-serif;
font-weight: 300;
font-size: 18 * $chat-text-size;
.v-input__slot {
@ -116,9 +116,9 @@
}
.op-button {
position:absolute;
right:-30px;
top:0;
position: relative;
display: inline-block;
vertical-align: top !important;
.v-icon {
color: #eeeeee;
&:hover {
@ -126,58 +126,18 @@
}
}
}
.messageOut .op-button {
right:70%;
}
}
.messageJoin {
font-family: 'Titillium Web', sans-serif;
font-family: 'Inter', sans-serif;
font-weight: 300;
font-size: 15 * $chat-text-size;
color: #1c242a;
text-align: center;
}
.messageOut {
margin: 8px;
margin-left: 30% !important;
text-align: right;
.bubble {
background-color: #e5e5e5;
border-radius: 10px 10px 0 10px;
padding: 8px;
}
.audio-bubble {
overflow: scroll;
}
.bubble.image-bubble {
padding: 0px;
overflow: hidden;
}
.sender {
font-family: 'Titillium Web', sans-serif;
font-weight: 400;
font-style: normal;
font-size: 10 * $chat-text-size;
color: rgba(#000000, 0.6);
display: inline-block;
margin-left: 40px;
margin-right: 8px;
}
.time {
font-family: 'Titillium Web', sans-serif;
font-weight: 400;
font-style: normal;
font-size: 10 * $chat-text-size;
color: rgba(#000000, 0.6);
display: inline-block;
}
}
.messageIn {
margin: 8px;
margin-right: 30% !important;
text-align: left;
position: relative;
.bubble {
@ -187,24 +147,85 @@
border-width: 1px !important;
border-style: solid !important;
border-color: #eeeeee !important;
margin-left: 40px;
display: inline-block;
position: relative;
max-width: 70%;
}
.audio-bubble {
margin-left: 40px;
overflow: scroll;
display: inline-block;
width: fit-content;
max-width: 70%;
}
.bubble.image-bubble {
padding: 0px;
overflow: hidden;
display: inline-block;
width: 70%;
max-width: 70%;
}
.avatar {
position: absolute;
left: -10px;
display: inline-block;
vertical-align: top !important;
margin-right: 10px;
top: 0;
border: 2px solid white;
}
.senderAndTime {
display: block;
}
.sender {
font-family: 'Titillium Web', sans-serif;
font-family: 'Inter', sans-serif;
font-weight: 400;
font-style: normal;
font-size: 10 * $chat-text-size;
color: rgba(#000000, 0.6);
margin-left: 40px;
margin-right: 8px;
display: inline-block;
}
.time {
font-family: 'Inter', sans-serif;
font-weight: 400;
font-style: normal;
font-size: 10 * $chat-text-size;
color: rgba(#000000, 0.6);
display: inline-block;
}
}
.messageOut {
margin: 8px;
text-align: right;
position: relative;
.bubble {
background-color: #e5e5e5;
border-radius: 10px 10px 0 10px;
padding: 8px;
display: inline-block;
position: relative;
max-width: 70%;
}
.audio-bubble {
overflow: scroll;
display: inline-block;
width: fit-content;
max-width: 70%;
}
.bubble.image-bubble {
padding: 0px;
display: inline-block;
width: 70%;
max-width: 70%;
.v-image {
border-radius: 10px 10px 0 10px;
}
}
.senderAndTime {
display: block;
}
.sender {
font-family: 'Inter', sans-serif;
font-weight: 400;
font-style: normal;
font-size: 10 * $chat-text-size;
@ -214,7 +235,7 @@
margin-right: 8px;
}
.time {
font-family: 'Titillium Web', sans-serif;
font-family: 'Inter', sans-serif;
font-weight: 400;
font-style: normal;
font-size: 10 * $chat-text-size;
@ -224,7 +245,7 @@
}
.sender, .status {
font-family: 'Titillium Web', sans-serif;
font-family: 'Inter', sans-serif;
font-weight: 300;
font-size: 15 * $chat-text-size;
color: #1c242a;
@ -232,12 +253,13 @@
}
.message {
font-family: 'Titillium Web', sans-serif;
font-family: 'Inter', sans-serif;
font-weight: 400;
font-size: 14 * $chat-text-size;
font-size: 16 * $chat-text-size;
color: #000000;
overflow-wrap: break-word;
white-space: pre;
word-wrap: break-word;
white-space: pre-wrap;
.edit-marker {
font-size: 0.8rem;
color: #888888;
@ -254,7 +276,7 @@
overflow-y: auto;
margin-bottom: 8px;
.original-message-sender {
font-family: 'Titillium Web', sans-serif;
font-family: 'Inter', sans-serif;
font-weight: 700;
font-size: 13 * $chat-text-size;
color: #000000;
@ -262,7 +284,7 @@
white-space: pre;
}
.original-message-text {
font-family: 'Titillium Web', sans-serif;
font-family: 'Inter', sans-serif;
font-weight: 400;
font-size: 11 * $chat-text-size;
color: #000000;
@ -272,7 +294,7 @@
}
.time {
font-family: 'Titillium Web', sans-serif;
font-family: 'Inter', sans-serif;
font-weight: 300;
font-style: italic;
font-size: 15 * $chat-text-size;
@ -281,7 +303,7 @@
}
.statusEvent {
font-family: 'Titillium Web', sans-serif;
font-family: 'Inter', sans-serif;
font-weight: 300;
font-size: 15 * $chat-text-size;
color: #1c242a;
@ -297,28 +319,27 @@
.message-operations {
position: absolute;
width: auto;
width: fit-content;
background-color: #e2e2e2;
&.incoming {
right: 30%;
}
&.outgoing {
left: 30%;
}
// &.incoming {
// right: 30%;
// }
// &.outgoing {
// left: 30%;
// }
}
.quick-reaction-container {
position: absolute;
top: -18px;
right: 10px;
background-color: #000000;
border: 3px solid white;
border-radius: 15px;
height: 30px;
width: fit-content;
right: 10px;
top: -12px;
.quick-reaction {
// border: 1px solid #e2e2e2;
// border-radius: 9px;
margin: 0px 2px;
margin: 0px 6px;
padding: 2px;
font-size: 10px;
&:hover {

3
src/assets/css/main.scss
View file

@ -1,10 +1,11 @@
$background: #ffffff;
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter&display=swap');
$chat-background: $background;
$chat-standard-padding: 32px;
$chat-standard-padding-s: 16px;
$chat-standard-padding-xs: 8px;
$chat-text-size: 0.7pt;
$chat-text-size: 1.0px;
$chat-button-height: 50px;

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

@ -1,19 +1,21 @@
<template>
<div class="messageIn">
<div class="audio-bubble">
<audio controls :src="src">Audio file</audio>
<QuickReactions :event="event" :reactions="reactions" />
</div>
<v-btn icon class="op-button" @click.stop="showContextMenu"
><v-icon>more_vert</v-icon></v-btn
>
<v-avatar class="avatar" size="32" color="#ededed">
<img v-if="messageEventAvatar(event)" :src="messageEventAvatar(event)" />
<span v-else class="white--text headline">{{
messageEventDisplayName(event).substring(0, 1).toUpperCase()
}}</span>
</v-avatar>
<div v-if="showSenderAndTime">
<div class="audio-bubble">
<audio controls :src="src">Audio file</audio>
<QuickReactions :event="event" :reactions="reactions" />
</div>
<div class="op-button" ref="opbutton">
<v-btn icon @click.stop="showContextMenu($refs.opbutton)"
><v-icon>more_vert</v-icon></v-btn
>
</div>
<div v-if="showSenderAndTime" class="senderAndTime">
<div class="sender">{{ messageEventDisplayName(event) }}</div>
<div class="time">
{{ formatTime(event.event.origin_server_ts) }}

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

@ -1,19 +1,21 @@
<template>
<div class="messageIn">
<div class="bubble image-bubble">
<v-img :aspect-ratio="16 / 9" ref="image" :src="src" cover />
<QuickReactions :event="event" :reactions="reactions" />
</div>
<v-btn icon class="op-button" @click.stop="showContextMenu"
><v-icon>more_vert</v-icon></v-btn
>
<v-avatar class="avatar" size="32" color="#ededed">
<img v-if="messageEventAvatar(event)" :src="messageEventAvatar(event)" />
<span v-else class="white--text headline">{{
messageEventDisplayName(event).substring(0, 1).toUpperCase()
}}</span>
</v-avatar>
<div v-if="showSenderAndTime">
<div class="bubble image-bubble">
<v-img :aspect-ratio="16 / 9" ref="image" :src="src" cover />
<QuickReactions :event="event" :reactions="reactions" />
</div>
<div class="op-button" ref="opbutton">
<v-btn icon @click.stop="showContextMenu($refs.opbutton)"
><v-icon>more_vert</v-icon></v-btn
>
</div>
<div v-if="showSenderAndTime" class="senderAndTime">
<div class="sender">{{ messageEventDisplayName(event) }}</div>
<div class="time">
{{ formatTime(event.event.origin_server_ts) }}

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

@ -8,8 +8,11 @@
</v-avatar>
<div class="bubble">
<QuickReactions :event="event" :reactions="reactions" />
<div class="original-message" v-if="inReplyToText">
<div class="original-message-sender">{{ inReplyToSender || 'Someone' }} said:</div>
<div class="original-message-sender">
{{ inReplyToSender || "Someone" }} said:
</div>
<div class="original-message-text">{{ inReplyToText }}</div>
</div>
<div class="message">
@ -18,13 +21,14 @@
>(edited)</span
>
</div>
<QuickReactions :event="event" :reactions="reactions" />
<!-- <div>{{ JSON.stringify(event) }}</div> -->
</div>
<v-btn icon class="op-button" @click.stop="showContextMenu"
><v-icon>more_vert</v-icon></v-btn
>
<div v-if="showSenderAndTime">
<div class="op-button" ref="opbutton">
<v-btn icon @click.stop="showContextMenu($refs.opbutton)"
><v-icon>more_vert</v-icon></v-btn
>
</div>
<div v-if="showSenderAndTime" class="senderAndTime">
<div class="sender">{{ messageEventDisplayName(event) }}</div>
<div class="time">
{{ formatTime(event.event.origin_server_ts) }}

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

@ -1,14 +1,21 @@
<template>
<div class="messageOut">
<div class="audio-bubble">
<audio controls :src="src">Audio file</audio>
<QuickReactions :event="event" :reactions="reactions" />
</div>
<!-- <div class="sender">{{ "You" }}</div> -->
<div class="time">
{{ formatTime(event.event.origin_server_ts) }}
<div class="op-button" ref="opbutton">
<v-btn icon @click.stop="showContextMenu($refs.opbutton)"
><v-icon>more_vert</v-icon></v-btn
>
</div>
<div class="audio-bubble">
<audio controls :src="src">Audio file</audio>
<QuickReactions :event="event" :reactions="reactions" />
</div>
<div class="senderAndTime">
<!-- <div class="sender">{{ "You" }}</div> -->
<div class="time">
{{ formatTime(event.event.origin_server_ts) }}
</div>
<div class="status">{{ event.status }}</div>
</div>
</div>
</template>

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

@ -1,13 +1,20 @@
<template>
<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="op-button" ref="opbutton">
<v-btn icon @click.stop="showContextMenu($refs.opbutton)"
><v-icon>more_vert</v-icon></v-btn
>
</div>
<div class="bubble image-bubble">
<v-img :aspect-ratio="16 / 9" ref="image" :src="src" cover />
<QuickReactions :event="event" :reactions="reactions" />
</div>
<div class="senderAndTime">
<!-- <div class="sender">{{ "You" }}</div> -->
<div class="time">
{{ formatTime(event.event.origin_server_ts) }}
<div class="status">{{ event.status }}</div>
<div class="time">
{{ formatTime(event.event.origin_server_ts) }}
<div class="status">{{ event.status }}</div>
</div>
</div>
</div>
</template>
@ -20,8 +27,8 @@ export default {
mixins: [messageMixin],
data() {
return {
src: null
}
src: null,
};
},
mounted() {
const width = this.$refs.image.$el.clientWidth;

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

@ -1,8 +1,16 @@
<template>
<div class="messageOut">
<div class="op-button" ref="opbutton">
<v-btn icon @click.stop="showContextMenu($refs.opbutton)"
><v-icon>more_vert</v-icon></v-btn
>
</div>
<div class="bubble">
<QuickReactions :event="event" :reactions="reactions" />
<div class="original-message" v-if="inReplyToText">
<div class="original-message-sender">{{ inReplyToSender || 'Someone' }} said:</div>
<div class="original-message-sender">
{{ inReplyToSender || "Someone" }} said:
</div>
<div class="original-message-text">{{ inReplyToText }}</div>
</div>
@ -12,16 +20,14 @@
>(edited)</span
>
</div>
<QuickReactions :event="event" :reactions="reactions" />
</div>
<v-btn icon class="op-button" @click.stop="showContextMenu"
><v-icon>more_vert</v-icon></v-btn
>
<!-- <div class="sender">{{ "You" }}</div> -->
<div class="time">
{{ formatTime(event.event.origin_server_ts) }}
<div class="senderAndTime">
<div class="time">
{{ formatTime(event.event.origin_server_ts) }}
</div>
<div class="status">{{ event.status }}</div>
</div>
<div class="status">{{ event.status }}</div>
</div>
</template>

4
src/components/messages/messageMixin.js
View file

@ -114,8 +114,8 @@ export default {
}
},
methods: {
showContextMenu() {
this.$emit("context-menu", this.event);
showContextMenu(buttonRef) {
this.$emit("context-menu", {event: this.event,anchor: buttonRef});
},
/**