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

Merge branch 'styling-of-quick-reaction'

Browse source
This commit is contained in:
N-Pex 2021-06-29 12:46:08 +02:00
commit 10112d05fd
5 changed files with 1862 additions and 6202 deletions
Download patch file Download diff file Expand all files Collapse all files

8032
package-lock.json generated
View file

File diff suppressed because it is too large Load diff

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

@ -483,6 +483,7 @@ $admin-fg: white;
.avatar-operations-strut { .avatar-operations-strut {
position: relative; position: relative;
height: 0px; height: 0px;
z-index: 1; z-index: 1;
} }
@ -490,7 +491,7 @@ $admin-fg: white;
position: absolute; position: absolute;
width: fit-content; width: fit-content;
background-color: white; background-color: white;
height: 40px; height: 45px;
border-radius: 20px; border-radius: 20px;
box-shadow: 4px 4px 8px #888888; box-shadow: 4px 4px 8px #888888;
// &.incoming { // &.incoming {
@ -953,7 +954,7 @@ $admin-fg: white;
left: 20%; left: 20%;
right: 20%; right: 20%;
background-color: #888888; background-color: #888888;
height: 50px; height: 40px;
border-radius: 25px; border-radius: 25px;
color: white; color: white;
text-align: center; text-align: center;
@ -989,3 +990,7 @@ $admin-fg: white;
text-decoration: none !important; text-decoration: none !important;
} }
} }
.recent-emoji {
color: black;
}

8
src/components/Chat.vue
View file

@ -355,7 +355,8 @@
</v-dialog> </v-dialog>
</div> </div>
<MessageOperationsBottomSheet ref="messageOperationsSheet"> <MessageOperationsBottomSheet ref="messageOperationsSheet"
style="background-color:#f776777;">
<MessageOperationsPicker <MessageOperationsPicker
v-on:close="showEmojiPicker = false" v-on:close="showEmojiPicker = false"
v-if="selectedEvent" v-if="selectedEvent"
@ -369,7 +370,7 @@
/> />
<VEmojiPicker <VEmojiPicker
ref="emojiPicker" ref="emojiPicker"
style="width: 100%" style="width: 100%;background-color:#ffffff;"
@select="emojiSelected" @select="emojiSelected"
/> />
</MessageOperationsBottomSheet> </MessageOperationsBottomSheet>
@ -1663,6 +1664,9 @@ export default {
updateRecentEmojis() { updateRecentEmojis() {
if (this.$refs.emojiPicker) { if (this.$refs.emojiPicker) {
this.recentEmojis = this.$refs.emojiPicker.mapEmojis["Frequently"]; this.recentEmojis = this.$refs.emojiPicker.mapEmojis["Frequently"];
if (this.recentEmojis.length < 20){
this.recentEmojis.push(this.$refs.emojiPicker.mapEmojis["Peoples"]);
}
return; return;
} }
this.recentEmojis = []; this.recentEmojis = [];

2
src/components/MessageOperationsBottomSheet.vue
View file

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

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

@ -1,14 +1,14 @@
<template> <template>
<div :class="{'message-operations':true,'incoming':incoming,'outgoing':!incoming}"> <div :class="{'message-operations':true,'incoming':incoming,'outgoing':!incoming}">
<template v-for="(item,index) in emojis"> <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"> <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> <span class="recent-emoji">{{ item.data }}</span>
</v-btn> </v-btn>
</template> </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-icon>reply</v-icon>
</v-btn> </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-icon>more_horiz</v-icon>
</v-btn> </div> </v-btn> </div>
</template> </template>
@ -46,9 +46,4 @@ export default {
<style lang="scss"> <style lang="scss">
@import "@/assets/css/chat.scss"; @import "@/assets/css/chat.scss";
// .recent-emoji {
// width: 30px;
// }
</style> </style>