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

1. Styling of quick reactions

Browse source
This commit is contained in:
Tenzin Samten 2021-06-22 17:38:16 +05:30
parent 03f7759b6c
commit 33b0737955
5 changed files with 21 additions and 30 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -438,6 +438,7 @@ $admin-fg: white;
.avatar-operations-strut {
position: relative;
height: 0px;
z-index: 1;
}
@ -445,7 +446,7 @@ $admin-fg: white;
position: absolute;
width: fit-content;
background-color: white;
height: 40px;
height: 45px;
border-radius: 20px;
box-shadow: 4px 4px 8px #888888;
// &.incoming {
@ -457,6 +458,7 @@ $admin-fg: white;
// }
}
.avatar-operations {
position: absolute;
width: fit-content;
@ -881,7 +883,7 @@ $admin-fg: white;
left: 20%;
right: 20%;
background-color: #888888;
height: 50px;
height: 40px;
border-radius: 25px;
color: white;
text-align: center;
@ -897,4 +899,9 @@ $admin-fg: white;
opacity: 0.7;
}
}
}
}
.recent-emoji {
color:black;
}

5
src/components/Chat.vue
View file

@ -355,7 +355,8 @@
</v-dialog>
</div>
<MessageOperationsBottomSheet ref="messageOperationsSheet">
<MessageOperationsBottomSheet ref="messageOperationsSheet"
style="background-color:#f776777;">
<MessageOperationsPicker
v-on:close="showEmojiPicker = false"
v-if="selectedEvent"
@ -369,7 +370,7 @@
/>
<VEmojiPicker
ref="emojiPicker"
style="width: 100%"
style="width: 100%;background-color:#ffffff;"
@select="emojiSelected"
/>
</MessageOperationsBottomSheet>

2
src/components/MessageOperationsBottomSheet.vue
View file

@ -10,7 +10,7 @@
left: 0;
bottom: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.3);
background-color: rgba(0, 0, 0, 0.15);
"
/>
</v-fade-transition>

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

@ -1,14 +1,14 @@
<template>
<div :class="{'message-operations':true,'incoming':incoming,'outgoing':!incoming}">
<template v-for="(item,index) in emojis">
<v-btn v-if="index < maxRecents" :key="item.data" icon @click.stop="addQuickReaction(item.data)" class="ma-0 pa-0">
<span class="recent-emoji" >{{ item.data }}</span>
<v-btn v-if="index < maxRecents" :key="item.data" icon @click.stop="addQuickReaction(item.data)" class="ma-0 pa-0" dense>
<span class="recent-emoji">{{ item.data }}</span>
</v-btn>
</template>
<v-btn v-if="incoming" icon @click.stop="addReply" class="ma-0 pa-0">
<v-btn v-if="incoming" icon @click.stop="addReply" class="ma-0 pa-0" large>
<v-icon>reply</v-icon>
</v-btn>
<v-btn icon @click.stop="more" class="ma-0 pa-0">
<v-btn icon @click.stop="more" class="ma-0 pa-0" large>
<v-icon>more_horiz</v-icon>
</v-btn> </div>
</template>
@ -46,9 +46,4 @@ export default {
<style lang="scss">
@import "@/assets/css/chat.scss";
// .recent-emoji {
// width: 30px;
// }
</style>