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

Styling tweaks

Browse source
This commit is contained in:
N-Pex 2020-12-15 17:21:34 +01:00
parent 3f1c58b743
commit 7183681e71
3 changed files with 17 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -126,7 +126,7 @@ $chat-text-size: 0.7pt;
right:-30px; right:-30px;
top:0; top:0;
.v-icon { .v-icon {
color: #cccccc; color: #eeeeee;
&:hover { &:hover {
color: #888888; color: #888888;
} }
@ -314,11 +314,19 @@ $chat-text-size: 0.7pt;
} }
.quick-reaction-container { .quick-reaction-container {
position: absolute;
top: -18px;
right: 10px;
background-color: #000000;
border: 3px solid white;
border-radius: 15px;
height: 30px;
.quick-reaction { .quick-reaction {
border: 1px solid #e2e2e2; // border: 1px solid #e2e2e2;
border-radius: 9px; // border-radius: 9px;
margin: 0px 2px; margin: 0px 2px;
padding: 2px; padding: 2px;
font-size: 10px;
&:hover { &:hover {
border: 1px solid #888888; border: 1px solid #888888;
background-color: #e2e2e2; background-color: #e2e2e2;
@ -328,8 +336,10 @@ $chat-text-size: 0.7pt;
font-size: 0.7rem; font-size: 0.7rem;
} }
} }
.sent { .sent .quick-reaction-count {
background-color: palegreen; color: white;
font-weight: 700;
// background-color: palegreen;
} }
} }

2
src/components/messages/QuickReactions.vue
View file

@ -1,5 +1,5 @@
<template> <template>
<div class="quick-reaction-container"> <div class="quick-reaction-container" v-show="reactions">
<span :class="{'quick-reaction':true,'sent':value.includes($matrix.currentUserId)}" v-for="(value, name) in reactionMap" :key="name" @mousedown="onClickEmoji(name)"> <span :class="{'quick-reaction':true,'sent':value.includes($matrix.currentUserId)}" v-for="(value, name) in reactionMap" :key="name" @mousedown="onClickEmoji(name)">
{{ name }} <span class="quick-reaction-count">{{ value.length }}</span> {{ name }} <span class="quick-reaction-count">{{ value.length }}</span>
</span> </span>

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

@ -42,7 +42,7 @@ export default {
{ {
// Can we find the original message? // Can we find the original message?
const originalEventId = relatesTo['m.in_reply_to'].event_id; const originalEventId = relatesTo['m.in_reply_to'].event_id;
if (originalEventId) { if (originalEventId && this.timelineSet) {
const originalEvent = this.timelineSet.findEventById(originalEventId); const originalEvent = this.timelineSet.findEventById(originalEventId);
this.inReplyToEvent = originalEvent; this.inReplyToEvent = originalEvent;
this.inReplyToSender = this.messageEventDisplayName(originalEvent); this.inReplyToSender = this.messageEventDisplayName(originalEvent);