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

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

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

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

@ -1,19 +1,21 @@
<template> <template>
<div class="messageIn"> <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"> <v-avatar class="avatar" size="32" color="#ededed">
<img v-if="messageEventAvatar(event)" :src="messageEventAvatar(event)" /> <img v-if="messageEventAvatar(event)" :src="messageEventAvatar(event)" />
<span v-else class="white--text headline">{{ <span v-else class="white--text headline">{{
messageEventDisplayName(event).substring(0, 1).toUpperCase() messageEventDisplayName(event).substring(0, 1).toUpperCase()
}}</span> }}</span>
</v-avatar> </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="sender">{{ messageEventDisplayName(event) }}</div>
<div class="time"> <div class="time">
{{ formatTime(event.event.origin_server_ts) }} {{ formatTime(event.event.origin_server_ts) }}

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

@ -1,19 +1,21 @@
<template> <template>
<div class="messageIn"> <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"> <v-avatar class="avatar" size="32" color="#ededed">
<img v-if="messageEventAvatar(event)" :src="messageEventAvatar(event)" /> <img v-if="messageEventAvatar(event)" :src="messageEventAvatar(event)" />
<span v-else class="white--text headline">{{ <span v-else class="white--text headline">{{
messageEventDisplayName(event).substring(0, 1).toUpperCase() messageEventDisplayName(event).substring(0, 1).toUpperCase()
}}</span> }}</span>
</v-avatar> </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="sender">{{ messageEventDisplayName(event) }}</div>
<div class="time"> <div class="time">
{{ formatTime(event.event.origin_server_ts) }} {{ formatTime(event.event.origin_server_ts) }}

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

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

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

@ -1,15 +1,22 @@
<template> <template>
<div class="messageOut"> <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="audio-bubble"> <div class="audio-bubble">
<audio controls :src="src">Audio file</audio> <audio controls :src="src">Audio file</audio>
<QuickReactions :event="event" :reactions="reactions" /> <QuickReactions :event="event" :reactions="reactions" />
</div> </div>
<div class="senderAndTime">
<!-- <div class="sender">{{ "You" }}</div> --> <!-- <div class="sender">{{ "You" }}</div> -->
<div class="time"> <div class="time">
{{ formatTime(event.event.origin_server_ts) }} {{ formatTime(event.event.origin_server_ts) }}
</div> </div>
<div class="status">{{ event.status }}</div> <div class="status">{{ event.status }}</div>
</div> </div>
</div>
</template> </template>
<script> <script>

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

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

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

@ -1,8 +1,16 @@
<template> <template>
<div class="messageOut"> <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"> <div class="bubble">
<QuickReactions :event="event" :reactions="reactions" />
<div class="original-message" v-if="inReplyToText"> <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 class="original-message-text">{{ inReplyToText }}</div>
</div> </div>
@ -12,17 +20,15 @@
>(edited)</span >(edited)</span
> >
</div> </div>
<QuickReactions :event="event" :reactions="reactions" />
</div> </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="sender">{{ "You" }}</div> -->
<div class="senderAndTime">
<div class="time"> <div class="time">
{{ formatTime(event.event.origin_server_ts) }} {{ formatTime(event.event.origin_server_ts) }}
</div> </div>
<div class="status">{{ event.status }}</div> <div class="status">{{ event.status }}</div>
</div> </div>
</div>
</template> </template>
<script> <script>

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

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