KumiSystems/Chatwoot
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

chore: Remove emojione, cleanup styles (#1232)

Browse source 
* chore: Remove `emojione`, cleanup styles

* Move size to variables

* Remove unused categories
This commit is contained in:
Pranav Raj S 2020-09-13 22:49:01 +05:30 committed by GitHub
parent 739c062676
commit f3a357d832
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
12 changed files with 159 additions and 310 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
app/javascript/dashboard/assets/scss/widgets/_conversation-view.scss
View file

@ -103,11 +103,6 @@
}
}
.emojione {
height: $font-size-medium;
width: $font-size-medium;
}
.conversation-wrap {
@include background-gray;
@include margin(0);

107
app/javascript/dashboard/assets/scss/widgets/_emojiinput.scss
View file

@ -1,107 +0,0 @@
@import '../variables';
@import '../mixins';
.emoji-dialog {
@include elegant-card;
background: $color-white;
box-sizing: content-box;
position: absolute;
right: 0;
top: -22rem;
width: 28.6rem;
&::before {
@include arrow(bottom, $color-white, $space-slab);
bottom: -$space-slab;
position: absolute;
right: $space-two;
}
.emojione {
font-size: $font-size-default;
margin: $zero;
}
.emoji-row {
box-sizing: border-box;
height: 180px;
overflow-y: auto;
padding: $space-small;
.emoji {
border-radius: 4px;
display: inline-block;
padding: 5px;
}
.emojione {
cursor: pointer;
float: left;
margin: .6rem;
}
}
.emoji-category-title {
color: $color-heading;
font-size: $font-size-small;
font-weight: $font-weight-medium;
margin: 0;
text-transform: capitalize;
}
.emoji-category-heading-decoration {
text-align: right;
}
}
.emoji-dialog-header {
background-color: $color-body;
border-top-left-radius: $space-small;
border-top-right-radius: $space-small;
padding: $zero $space-smaller;
ul {
display: flex;
list-style: none;
margin: 0;
padding: $space-smaller 0 0;
>li {
align-items: center;
cursor: pointer;
display: flex;
height: $space-medium;
justify-content: center;
padding: $space-smaller $space-small;
}
.emojione {
height: $space-two;
width: $space-normal;
}
>.active {
background: $color-white;
border-top-left-radius: $space-small;
border-top-right-radius: $space-small;
}
img,
svg {
filter: grayscale(100%);
}
}
.active {
img,
svg {
filter: grayscale(0);
}
}
>* {
display: table-cell;
vertical-align: middle;
}
}

4
app/javascript/dashboard/components/widgets/conversation/Message.vue
View file

@ -49,7 +49,6 @@
</template>
<script>
import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
import getEmojiSVG from '../emoji/utils';
import timeMixin from '../../../mixins/time';
import BubbleText from './bubble/Text';
import BubbleImage from './bubble/Image';
@ -141,9 +140,6 @@ export default {
};
},
},
methods: {
getEmojiSVG,
},
};
</script>
<style lang="scss">

9
app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue
View file

@ -80,14 +80,11 @@
</template>
<script>
/* eslint no-console: 0 */
import { mapGetters } from 'vuex';
import emojione from 'emojione';
import { mixin as clickaway } from 'vue-clickaway';
import FileUpload from 'vue-upload-component';
import EmojiInput from '../emoji/EmojiInput';
import EmojiInput from 'shared/components/emoji/EmojiInput';
import CannedResponse from './CannedResponse';
import ResizableTextArea from 'shared/components/ResizableTextArea';
import {
@ -284,9 +281,7 @@ export default {
this.$refs.messageInput.focus();
},
emojiOnClick(emoji) {
this.message = emojione.shortnameToUnicode(
`${this.message}${emoji.shortname} `
);
this.message = `${this.message}${emoji} `;
},
clearMessage() {
this.message = '';

124
app/javascript/dashboard/components/widgets/emoji/EmojiInput.vue
View file

@ -1,124 +0,0 @@
<template>
<div role="dialog" class="emoji-dialog">
<header class="emoji-dialog-header" role="menu">
<ul>
<li
v-for="category in categoryList"
:key="category.key"
:class="{ active: selectedKey === category.key }"
@click="changeCategory(category)"
>
<div
role="menuitem"
class="emojione"
@click="changeCategory(category)"
v-html="` ${getEmojiUnicode(`:${category.emoji}:`)}`"
></div>
</li>
</ul>
</header>
<div class="emoji-row">
<h5 class="emoji-category-title">
{{ selectedKey }}
</h5>
<div
v-for="emoji in filteredSelectedEmojis"
:key="emoji.shortname"
role="menuitem"
class="emojione"
track-by="$index"
@click="onClick(emoji)"
v-html="getEmojiUnicode(emoji.shortname)"
/>
</div>
</div>
</template>
<script>
/* eslint-disable no-restricted-syntax */
import strategy from 'emojione/emoji.json';
import categoryList from './categories';
import { getEmojiUnicode } from './utils';
export default {
props: ['onClick'],
data() {
return {
selectedKey: 'people',
categoryList,
selectedEmojis: {},
};
},
computed: {
emojis() {
const emojiArr = {};
// categorise and nest emoji
// sort ensures that modifiers appear unmodified keys
const keys = Object.keys(strategy);
for (const key of keys) {
const value = strategy[key];
// skip unknown categoryList
if (value.category !== 'modifier') {
if (!emojiArr[value.category]) emojiArr[value.category] = {};
const match = key.match(/(.*?)_tone(.*?)$/);
if (match) {
// this check is to stop the plugin from failing in the case that the
// emoji strategy miscategorizes tones - which was the case here:
const unmodifiedEmojiExists = !!emojiArr[value.category][match[1]];
if (unmodifiedEmojiExists) {
emojiArr[value.category][match[1]][match[2]] = value;
}
} else {
emojiArr[value.category][key] = [value];
}
}
}
return emojiArr;
},
filteredSelectedEmojis() {
const emojis = this.selectedEmojis;
const filteredEmojis = Object.keys(emojis)
.map(key => {
const emoji = emojis[key];
const [lastEmoji] = emoji.slice(-1);
return { ...lastEmoji, key };
})
.filter(emoji => {
const { shortname } = emoji;
if (shortname) {
return this.filterEmoji(shortname);
}
return false;
});
return filteredEmojis;
},
},
// On mount render initial emoji
mounted() {
this.getInitialEmoji();
},
methods: {
// Change category and associated emojis
changeCategory(category) {
this.selectedKey = category.key;
this.selectedEmojis = this.emojis[this.selectedKey];
},
// Filter non-existant or irregular unicode characters
filterEmoji(shortName) {
return shortName !== ':relaxed:' && shortName !== ':frowning2:';
},
// Get inital emojis
getInitialEmoji() {
this.selectedEmojis = this.emojis.people;
},
getEmojiUnicode,
},
};
</script>
<style lang="scss" scoped>
@import '~dashboard/assets/scss/widgets/emojiinput';
</style>

42
app/javascript/dashboard/components/widgets/emoji/categories.js
View file

@ -1,42 +0,0 @@
export default [ // eslint-disable-line
{
key: 'people',
title: 'People',
emoji: 'smile',
},
{
key: 'nature',
title: 'Nature',
emoji: 'hamster',
},
{
key: 'food',
title: 'Food & Drink',
emoji: 'pizza',
},
{
key: 'activity',
title: 'Activity',
emoji: 'soccer',
},
{
key: 'travel',
title: 'Travel & Places',
emoji: 'earth_americas',
},
{
key: 'objects',
title: 'Objects',
emoji: 'bulb',
},
{
key: 'symbols',
title: 'Symbols',
emoji: 'clock9',
},
{
key: 'flags',
title: 'Flags',
emoji: 'flag_gb',
},
];

9
app/javascript/dashboard/components/widgets/emoji/utils.js
View file

@ -1,9 +0,0 @@
import emojione from 'emojione';
/* eslint-disable */
export default function (value, method = 'shortnameToImage') {
return emojione[method](value);
}
export function getEmojiUnicode(value) {
return emojione.shortnameToUnicode(value);
}

154
app/javascript/shared/components/emoji/EmojiInput.vue Normal file
View file

@ -0,0 +1,154 @@
<template>
<div role="dialog" class="emoji-dialog">
<header class="emoji-dialog--header" role="menu">
<ul>
<li
v-for="category in Object.keys(emojis)"
:key="category"
:class="{ active: selectedKey === category }"
@click="changeCategory(category)"
>
<button
class="emoji--item"
@click="changeCategory(category)"
v-html="emojis[category][0]"
/>
</li>
</ul>
</header>
<div class="emoji--row">
<h5 class="emoji-category--title">
{{ selectedKey }}
</h5>
<button
v-for="emoji in emojis[selectedKey]"
:key="emoji"
class="emoji--item"
track-by="$index"
@click="onClick(emoji)"
v-html="emoji"
/>
</div>
</div>
</template>
<script>
import emojis from './emojis.json';
export default {
props: {
onClick: {
type: Function,
default: () => {},
},
},
data() {
return {
selectedKey: 'Smileys & Emotion',
emojis,
};
},
methods: {
changeCategory(category) {
this.selectedKey = category;
},
},
};
</script>
<style lang="scss" scoped>
/**
* All the units used below are pixels due to variable name conflict in widget and dashboard
**/
@import '~dashboard/assets/scss/variables';
@import '~dashboard/assets/scss/mixins';
$space-smaller: 4px;
$space-small: 8px;
$space-one: 10px;
$space-slab: 12px;
$space-normal: 16px;
$space-two: 20px;
$space-medium: 24px;
$font-size-small: 14px;
$font-size-default: 16px;
$font-size-medium: 18px;
.emoji-dialog {
@include elegant-card;
background: $color-white;
border-radius: $space-small;
box-sizing: content-box;
position: absolute;
right: 0;
top: -22 * $space-one;
width: 32 * $space-one;
&::before {
@include arrow(bottom, $color-white, $space-slab);
bottom: -$space-slab;
position: absolute;
right: $space-two;
}
.emoji--item {
cursor: pointer;
background: transparent;
border: 0;
font-size: $font-size-medium;
margin: 0;
padding: 0;
}
.emoji--row {
box-sizing: border-box;
height: $space-one * 18;
overflow-y: auto;
padding: $space-smaller $space-normal;
.emoji--item {
float: left;
margin: $space-smaller;
line-height: 1.5;
}
}
.emoji-category--title {
color: $color-heading;
font-size: $font-size-small;
font-weight: 500;
line-height: 1.5;
margin: 0;
text-transform: capitalize;
}
}
.emoji-dialog--header {
background-color: $color-body;
border-top-left-radius: $space-small;
border-top-right-radius: $space-small;
padding: 0 $space-smaller;
ul {
display: flex;
list-style: none;
margin: 0;
padding: $space-smaller 0 0;
> li {
align-items: center;
cursor: pointer;
display: flex;
height: 2.4 * $space-one;
justify-content: center;
padding: $space-smaller $space-small;
}
> .active {
background: $color-white;
border-top-left-radius: $space-smaller;
border-top-right-radius: $space-smaller;
}
}
}
</style>

1
app/javascript/shared/components/emoji/emojis.json Normal file
View file

File diff suppressed because one or more lines are too long

8
app/javascript/widget/components/ChatInputWrap.vue
View file

@ -34,12 +34,11 @@
<script>
import { mapGetters } from 'vuex';
import emojione from 'emojione';
import { mixin as clickaway } from 'vue-clickaway';
import ChatSendButton from 'widget/components/ChatSendButton.vue';
import ChatAttachmentButton from 'widget/components/ChatAttachment.vue';
import ResizableTextArea from 'shared/components/ResizableTextArea';
import EmojiInput from 'dashboard/components/widgets/emoji/EmojiInput';
import EmojiInput from 'shared/components/emoji/EmojiInput';
import configMixin from '../mixins/configMixin';
export default {
@ -110,11 +109,8 @@ export default {
}
},
emojiOnClick(emoji) {
this.userInput = emojione.shortnameToUnicode(
`${this.userInput}${emoji.shortname} `
);
this.userInput = `${this.userInput}${emoji} `;
},
onBlur() {
this.toggleTyping('off');
},

1
package.json
View file

@ -22,7 +22,6 @@
"copy-text-to-clipboard": "^2.1.1",
"core-js": "3",
"dotenv": "^8.0.0",
"emojione": "~2.2.7",
"foundation-sites": "~6.5.3",
"highlight.js": "^9.15.10",
"ionicons": "~2.0.1",

5
yarn.lock
View file

@ -3857,11 +3857,6 @@ emoji-regex@^8.0.0:
resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-8.0.0.tgz#e818fd69ce5ccfcb404594f842963bf53164cc37"
integrity sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==
emojione@~2.2.7:
version "2.2.7"
resolved "https://registry.yarnpkg.com/emojione/-/emojione-2.2.7.tgz#46457cf6b9b2f8da13ae8a2e4e547de06ee15e96"
integrity sha1-RkV89rmy+NoTroouTlR94G7hXpY=
emojis-list@^3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-3.0.0.tgz#5570662046ad29e2e916e71aae260abdff4f6a78"