LeadMagnet/leadchat
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

chore: Update the design for emoji picker (#4244)

Browse Source 
Co-authored-by: Nithin David Thomas <1277421+nithindavid@users.noreply.github.com>
Co-authored-by: Pranav Raj S <pranav@chatwoot.com>
This commit is contained in:
Konstantin Nosov
2022-10-11 21:59:28 +02:00
committed by GitHub
parent 2c8ded98aa
commit 0b5a956e05
2 changed files with 43 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
app/javascript/shared/components/emoji/EmojiInput.vue
View File

@@ -5,21 +5,21 @@
<li <li
v-for="category in Object.keys(emojis)" v-for="category in Object.keys(emojis)"
:key="category" :key="category"
:class="{ active: selectedKey === category }"
@click="changeCategory(category)" @click="changeCategory(category)"
> >
<button <button
v-dompurify-html="emojis[category][0]" v-dompurify-html="emojis[category][0]"
class="emoji--item" class="emoji--item"
:class="{ active: selectedKey === category }"
@click="changeCategory(category)" @click="changeCategory(category)"
/> />
</li> </li>
</ul> </ul>
</header> </header>
<h5 class="emoji-category--title">
{{ selectedKey }}
</h5>
<div class="emoji--row"> <div class="emoji--row">
<h5 class="emoji-category--title">
{{ selectedKey }}
</h5>
<button <button
v-for="emoji in emojis[selectedKey]" v-for="emoji in emojis[selectedKey]"
:key="emoji" :key="emoji"
@@ -64,16 +64,18 @@ export default {
$space-smaller: 4px; $space-smaller: 4px;
$space-small: 8px; $space-small: 8px;
$space-one: 10px;
$space-slab: 12px; $space-slab: 12px;
$space-normal: 16px; $space-normal: 16px;
$space-two: 20px; $space-two: 20px;
$space-medium: 24px; $space-medium: 24px;
$font-size-tiny: 12px;
$font-size-small: 14px; $font-size-small: 14px;
$font-size-default: 16px; $font-size-default: 16px;
$font-size-medium: 18px; $font-size-medium: 18px;
$color-bg: #ebf0f5;
.emoji-dialog { .emoji-dialog {
@include elegant-card; @include elegant-card;
background: $color-white; background: $color-white;
@@ -81,8 +83,8 @@ $font-size-medium: 18px;
box-sizing: content-box; box-sizing: content-box;
position: absolute; position: absolute;
right: 0; right: 0;
top: -22 * $space-one; top: -220px;
width: 32 * $space-one; width: 332px;
z-index: 1; z-index: 1;
&::before { &::before {
@@ -97,35 +99,44 @@ $font-size-medium: 18px;
background: transparent; background: transparent;
border: 0; border: 0;
font-size: $font-size-medium; font-size: $font-size-medium;
height: $space-medium;
border-radius: $space-smaller;
margin: 0; margin: 0;
padding: 0; padding: 0 $space-smaller;
&:hover {
background: $color-bg;
}
} }
.emoji--row { .emoji--row {
display: flex;
box-sizing: border-box; box-sizing: border-box;
height: $space-one * 18; height: 200px;
overflow-y: auto; overflow-y: auto;
padding: $space-smaller $space-normal; padding: $space-smaller;
flex-wrap: wrap;
.emoji--item { .emoji--item {
float: left;
margin: $space-smaller; margin: $space-smaller;
line-height: 1.5; line-height: 1.5;
} }
} }
}
.emoji-category--title { .emoji-category--title {
color: $color-heading; color: $color-heading;
font-size: $font-size-small; font-size: $font-size-small;
font-weight: 500; font-weight: 500;
line-height: 1.5; line-height: 1.5;
margin: 0; margin: 0;
text-transform: capitalize; padding: $space-smaller $space-small;
} margin-top: $space-smaller;
text-transform: capitalize;
} }
.emoji-dialog--header { .emoji-dialog--header {
background-color: $color-body; background-color: $color-bg;
border-top-left-radius: $space-small; border-top-left-radius: $space-small;
border-top-right-radius: $space-small; border-top-right-radius: $space-small;
padding: 0 $space-smaller; padding: 0 $space-smaller;
@@ -135,21 +146,25 @@ $font-size-medium: 18px;
list-style: none; list-style: none;
overflow: auto; overflow: auto;
margin: 0; margin: 0;
padding: $space-smaller 0 0; padding: $space-smaller 0;
> li { > li {
align-items: center; align-items: center;
cursor: pointer; cursor: pointer;
display: flex; display: flex;
height: 2.4 * $space-one;
justify-content: center; justify-content: center;
padding: $space-smaller $space-small; padding: $space-smaller;
} }
> .active { li .active {
background: $color-white; background: $color-white;
border-top-left-radius: $space-smaller; }
border-top-right-radius: $space-smaller; .emoji--item {
font-size: $font-size-small;
&:hover {
background: $color-bg;
}
} }
} }
} }

3
app/javascript/widget/components/ChatInputWrap.vue
View File

@@ -189,7 +189,8 @@ export default {
} }
.emoji-dialog { .emoji-dialog {
right: space-smaller; right: $space-smaller;
top: -278px;
&::before { &::before {
right: $space-one; right: $space-one;