Skip to content

Commit 020214a

Browse files
antoine92190antoine92190
committed
(UI) improve emoji picker + add skin tone
1 parent 69aad85 commit 020214a

File tree

4 files changed

+99
-110
lines changed

4 files changed

+99
-110
lines changed

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -73,9 +73,9 @@
7373
"vue": "^2.6.14"
7474
},
7575
"dependencies": {
76+
"emoji-picker-element": "^1.7.0",
7677
"linkifyjs": "^2.1.9",
7778
"v-click-outside": "^3.1.2",
78-
"vue-emoji-picker": "^1.0.1",
7979
"vue-infinite-loading": "https://github.com/antoine92190/vue-infinite-loading/tarball/master"
8080
},
8181
"optionalDependencies": {

‎src/components/EmojiPicker/EmojiPicker.scss

Lines changed: 23 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -2,73 +2,40 @@
22
position: relative;
33
display: flex;
44

5+
.vac-emoji-reaction svg {
6+
height: 19px;
7+
width: 19px;
8+
}
9+
510
.vac-emoji-picker {
611
position: absolute;
712
z-index: 9999;
813
bottom: 32px;
914
right: 10px;
10-
width: 240px;
15+
width: 300px;
16+
padding-top: 4px;
1117
overflow: scroll;
12-
padding: 16px;
1318
box-sizing: border-box;
1419
border-radius: 0.5rem;
1520
background: var(--chat-emoji-bg-color);
1621
box-shadow: 0 1px 2px -2px rgba(0, 0, 0, 0.1),
1722
0 1px 2px -1px rgba(0, 0, 0, 0.1), 0 1px 2px 1px rgba(0, 0, 0, 0.1);
18-
}
1923

20-
.vac-picker-reaction {
21-
position: fixed;
22-
top: initial;
23-
right: initial;
24-
}
25-
26-
.vac-emoji-picker__search {
27-
display: flex;
28-
}
29-
30-
.vac-emoji-picker__search > input {
31-
flex: 1;
32-
border-radius: 10rem;
33-
border: var(--chat-border-style);
34-
padding: 5px 10px;
35-
outline: none;
36-
background: var(--chat-bg-color-input);
37-
color: var(--chat-color);
38-
}
39-
40-
.vac-emoji-picker h5 {
41-
margin: 15px 0 8px;
42-
color: #b1b1b1;
43-
text-transform: uppercase;
44-
font-size: 0.8rem;
45-
cursor: default;
46-
}
47-
48-
.vac-emoji-picker .vac-emojis {
49-
display: flex;
50-
flex-wrap: wrap;
51-
justify-content: space-between;
52-
}
53-
54-
.vac-emoji-picker .vac-emojis:after {
55-
content: '';
56-
flex: auto;
57-
}
58-
59-
.vac-emoji-picker .vac-emojis span {
60-
padding: 0.2rem;
61-
cursor: pointer;
62-
border-radius: 5px;
63-
}
64-
65-
.vac-emoji-picker .vac-emojis span:hover {
66-
background: var(--chat-sidemenu-bg-color-hover);
67-
cursor: pointer;
68-
}
69-
70-
.vac-emoji-reaction svg {
71-
height: 19px;
72-
width: 19px;
24+
&.vac-picker-reaction {
25+
position: fixed;
26+
top: initial;
27+
right: initial;
28+
}
29+
30+
emoji-picker {
31+
height: 100%;
32+
width: 100%;
33+
--emoji-size: 1.2rem;
34+
--background: var(--chat-emoji-bg-color);
35+
--emoji-padding: 0.4rem;
36+
--border-color: var(--chat-sidemenu-border-color-search);
37+
--button-hover-background: var(--chat-sidemenu-bg-color-hover);
38+
--button-active-background: var(--chat-sidemenu-bg-color-hover);
39+
}
7340
}
7441
}

‎src/components/EmojiPicker/EmojiPicker.vue

Lines changed: 74 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -1,59 +1,36 @@
11
<template>
22
<div class="vac-emoji-wrapper">
3-
<emoji-picker :search="search" @emoji="append">
4-
<template #emoji-invoker="{ events: { click: clickEvent } }">
3+
<div
4+
class="vac-svg-button"
5+
:class="{ 'vac-emoji-reaction': emojiReaction }"
6+
@click="openEmoji"
7+
>
8+
<slot name="emoji-picker-icon">
9+
<svg-icon name="emoji" :param="emojiReaction ? 'reaction' : ''" />
10+
</slot>
11+
</div>
12+
13+
<template v-if="emojiOpened">
14+
<transition name="vac-slide-up" appear>
515
<div
6-
class="vac-svg-button"
7-
:class="{ 'vac-emoji-reaction': emojiReaction }"
8-
@click.stop="clickEvent"
9-
@click="openEmoji"
16+
class="vac-emoji-picker"
17+
:class="{ 'vac-picker-reaction': emojiReaction }"
18+
:style="{
19+
height: `${emojiPickerHeight}px`,
20+
top: positionTop ? emojiPickerHeight : `${emojiPickerTop}px`,
21+
right: emojiPickerRight,
22+
display: emojiPickerTop || !emojiReaction ? 'initial' : 'none'
23+
}"
1024
>
11-
<slot name="emoji-picker-icon">
12-
<svg-icon name="emoji" :param="emojiReaction ? 'reaction' : ''" />
13-
</slot>
25+
<emoji-picker v-if="emojiOpened" ref="emojiPicker" />
1426
</div>
15-
</template>
16-
<template v-if="emojiOpened" #emoji-picker="{ emojis, insert }">
17-
<transition name="vac-slide-up" appear>
18-
<div
19-
class="vac-emoji-picker"
20-
:class="{ 'vac-picker-reaction': emojiReaction }"
21-
:style="{
22-
height: `${emojiPickerHeight}px`,
23-
top: positionTop ? emojiPickerHeight : `${emojiPickerTop}px`,
24-
right: emojiPickerRight,
25-
display: emojiPickerTop || !emojiReaction ? 'initial' : 'none'
26-
}"
27-
>
28-
<div class="vac-emoji-picker__search">
29-
<input v-model="search" type="text" />
30-
</div>
31-
<div>
32-
<div v-for="(emojiGroup, category) in emojis" :key="category">
33-
<h5 v-if="category !== 'Frequently used'">
34-
{{ category }}
35-
</h5>
36-
<div v-if="category !== 'Frequently used'" class="vac-emojis">
37-
<span
38-
v-for="(emoji, emojiName) in emojiGroup"
39-
:key="emojiName"
40-
:title="emojiName"
41-
@click="insert({ emoji, emojiName })"
42-
>
43-
{{ emoji }}
44-
</span>
45-
</div>
46-
</div>
47-
</div>
48-
</div>
49-
</transition>
50-
</template>
51-
</emoji-picker>
27+
</transition>
28+
</template>
5229
</div>
5330
</template>
5431

5532
<script>
56-
import EmojiPicker from 'vue-emoji-picker'
33+
import { EmojiPicker } from 'emoji-picker-element'
5734
5835
import SvgIcon from '../SvgIcon/SvgIcon'
5936
@@ -75,19 +52,63 @@ export default {
7552
7653
data() {
7754
return {
78-
search: '',
7955
emojiPickerHeight: 320,
8056
emojiPickerTop: 0,
8157
emojiPickerRight: ''
8258
}
8359
},
8460
61+
watch: {
62+
emojiOpened(val) {
63+
if (val) {
64+
setTimeout(() => {
65+
this.addCustomStyling()
66+
67+
document
68+
.querySelector('emoji-picker')
69+
.addEventListener('emoji-click', ({ detail }) => {
70+
this.$emit('add-emoji', {
71+
icon: detail.unicode,
72+
name: detail.annotation
73+
})
74+
})
75+
}, 0)
76+
}
77+
}
78+
},
79+
8580
methods: {
86-
append({ emoji, emojiName }) {
87-
this.$emit('add-emoji', { icon: emoji, name: emojiName })
81+
addCustomStyling() {
82+
const picker = `.picker {
83+
border: none;
84+
}`
85+
86+
const nav = `.nav {
87+
overflow-x: auto;
88+
}`
89+
90+
const searchBox = `.search-wrapper {
91+
padding-right: 2px;
92+
padding-left: 2px;
93+
}`
94+
95+
const search = `input.search {
96+
height: 32px;
97+
font-size: 14px;
98+
border-radius: 10rem;
99+
border: var(--chat-border-style);
100+
padding: 5px 10px;
101+
outline: none;
102+
background: var(--chat-bg-color-input);
103+
color: var(--chat-color);
104+
}`
105+
106+
const style = document.createElement('style')
107+
style.textContent = picker + nav + searchBox + search
108+
this.$refs.emojiPicker.shadowRoot.appendChild(style)
88109
},
89110
openEmoji(ev) {
90-
this.$emit('open-emoji', true)
111+
this.$emit('open-emoji', !this.emojiOpened)
91112
this.setEmojiPickerPosition(
92113
ev.clientY,
93114
ev.view.innerWidth,
@@ -99,12 +120,12 @@ export default {
99120
const mobileSize = innerWidth < 500 || innerHeight < 700
100121
101122
if (!this.roomFooterRef) {
102-
if (mobileSize) this.emojiPickerRight = '0px'
123+
if (mobileSize) this.emojiPickerRight = '-50px'
103124
return
104125
}
105126
106127
if (mobileSize) {
107-
this.emojiPickerRight = innerWidth / 2 - 120 + 'px'
128+
this.emojiPickerRight = innerWidth / 2 - 150 + 'px'
108129
this.emojiPickerTop = 100
109130
this.emojiPickerHeight = innerHeight - 200
110131
} else {

‎src/lib/Room/Room.vue

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -273,6 +273,7 @@
273273

274274
<emoji-picker
275275
v-if="showEmojis && (!file || imageFile || videoFile)"
276+
v-click-outside="() => emojiOpened = false"
276277
:emoji-opened="emojiOpened"
277278
:position-top="true"
278279
@add-emoji="addEmoji"

0 commit comments

Comments
 (0)