From 769fd7b524e91544eacb06cf1fe1efee2e5bd9ca Mon Sep 17 00:00:00 2001 From: unknown Date: Fri, 13 Aug 2021 16:31:22 +0530 Subject: [PATCH] improved EmojiBoard --- src/app/organisms/emoji-board/EmojiBoard.jsx | 39 +++++++--- src/app/organisms/emoji-board/EmojiBoard.scss | 73 +++++++++++++++---- src/app/organisms/emoji-board/emoji.js | 3 +- 3 files changed, 87 insertions(+), 28 deletions(-) diff --git a/src/app/organisms/emoji-board/EmojiBoard.jsx b/src/app/organisms/emoji-board/EmojiBoard.jsx index 5428eaa..03dcf4f 100644 --- a/src/app/organisms/emoji-board/EmojiBoard.jsx +++ b/src/app/organisms/emoji-board/EmojiBoard.jsx @@ -30,14 +30,14 @@ const viewEvent = new EventEmitter(); function EmojiGroup({ name, emojis }) { function getEmojiBoard() { + const emojiBoard = []; const ROW_EMOJIS_COUNT = 7; - const emojiRows = []; const totalEmojis = emojis.length; for (let r = 0; r < totalEmojis; r += ROW_EMOJIS_COUNT) { const emojiRow = []; for (let c = r; c < r + ROW_EMOJIS_COUNT; c += 1) { - const emojiIndex = r + c; + const emojiIndex = c; if (emojiIndex >= totalEmojis) break; const emoji = emojis[emojiIndex]; emojiRow.push( @@ -49,6 +49,7 @@ function EmojiGroup({ name, emojis }) { attributes: () => ({ unicode: emoji.unicode, shortcodes: emoji.shortcodes?.toString(), + hexcode: emoji.hexcode, }), }, )) @@ -56,9 +57,9 @@ function EmojiGroup({ name, emojis }) { , ); } - emojiRows.push(
{emojiRow}
); + emojiBoard.push(
{emojiRow}
); } - return emojiRows; + return emojiBoard; } return ( @@ -73,6 +74,7 @@ EmojiGroup.propTypes = { emojis: PropTypes.arrayOf(PropTypes.shape({ length: PropTypes.number, unicode: PropTypes.string, + hexcode: PropTypes.string, shortcodes: PropTypes.oneOfType([ PropTypes.string, PropTypes.arrayOf(PropTypes.string), @@ -104,16 +106,18 @@ function SearchedEmoji() { function EmojiBoard({ onSelect }) { const searchRef = useRef(null); const scrollEmojisRef = useRef(null); + const emojiInfo = useRef(null); function isTargetNotEmoji(target) { return target.classList.contains('emoji') === false; } function getEmojiDataFromTarget(target) { const unicode = target.getAttribute('unicode'); + const hexcode = target.getAttribute('hexcode'); let shortcodes = target.getAttribute('shortcodes'); if (typeof shortcodes === 'undefined') shortcodes = undefined; else shortcodes = shortcodes.split(','); - return { unicode, shortcodes }; + return { unicode, hexcode, shortcodes }; } function selectEmoji(e) { @@ -123,18 +127,29 @@ function EmojiBoard({ onSelect }) { onSelect(getEmojiDataFromTarget(emoji)); } + function setEmojiInfo(emoji) { + const infoEmoji = emojiInfo.current.firstElementChild.firstElementChild; + const infoShortcode = emojiInfo.current.lastElementChild; + + const emojiSrc = infoEmoji.src; + infoEmoji.src = `${emojiSrc.slice(0, emojiSrc.lastIndexOf('/') + 1)}${emoji.hexcode.toLowerCase()}.png`; + infoShortcode.textContent = `:${emoji.shortcode}:`; + } + function hoverEmoji(e) { if (isTargetNotEmoji(e.target)) return; const emoji = e.target; - const { shortcodes } = getEmojiDataFromTarget(emoji); + const { shortcodes, hexcode } = getEmojiDataFromTarget(emoji); if (typeof shortcodes === 'undefined') { searchRef.current.placeholder = 'Search'; + setEmojiInfo({ hexcode: '1f643', shortcode: 'slight_smile' }); return; } if (searchRef.current.placeholder === shortcodes[0]) return; searchRef.current.setAttribute('placeholder', `:${shortcodes[0]}:`); + setEmojiInfo({ hexcode, shortcode: shortcodes[0] }); } function handleSearchChange(e) { @@ -157,7 +172,11 @@ function EmojiBoard({ onSelect }) { return (
-
+
+ + +
+
@@ -169,9 +188,9 @@ function EmojiBoard({ onSelect }) {
-
- - +
+
{ parse(twemoji.parse('🙂')) }
+ :slight_smile:
diff --git a/src/app/organisms/emoji-board/EmojiBoard.scss b/src/app/organisms/emoji-board/EmojiBoard.scss index 6d43d66..f9c791e 100644 --- a/src/app/organisms/emoji-board/EmojiBoard.scss +++ b/src/app/organisms/emoji-board/EmojiBoard.scss @@ -10,14 +10,15 @@ .emoji-board { display: flex; - &__content { @extend .emoji-board-flexItem; @extend .emoji-board-flexBoxV; - height: 360px; + height: 400px; + width: 286px; } &__nav { @extend .emoji-board-flexBoxV; + justify-content: center; padding: 4px 6px; background-color: var(--bg-surface-low); @@ -29,30 +30,62 @@ & > .ic-btn-surface { margin: calc(var(--sp-ultra-tight) / 2) 0; + opacity: 0.8; } } } - -.emoji-board__emojis { - @extend .emoji-board-flexItem; -} -.emoji-board__search { - display: flex; - align-items: center; - padding: calc(var(--sp-ultra-tight) / 2) var(--sp-normal); +.emoji-board__content__search { + padding: var(--sp-extra-tight); + position: relative; + & .ic-raw { + position: absolute; + left: var(--sp-normal); + top: var(--sp-normal); + transform: translateY(1px); + [dir=rtl] & { + left: unset; + right: var(--sp-normal); + } + } + & .input-container { - @extend .emoji-board-flexItem; & .input { min-width: 100%; width: 0; - background-color: transparent; - border: none !important; - box-shadow: none !important; + padding: var(--sp-extra-tight) 36px; + border-radius: calc(var(--bo-radius) / 2); } } } +.emoji-board__content__emojis { + @extend .emoji-board-flexItem; + @extend .emoji-board-flexBoxV; +} +.emoji-board__content__info { + margin: 0 var(--sp-extra-tight); + padding: var(--sp-tight) var(--sp-extra-tight); + border-top: 1px solid var(--bg-surface-border); + + display: flex; + align-items: center; + + & > div:first-child { + line-height: 0; + .emoji { + width: 32px; + height: 32px; + } + } + & > p:last-child { + @extend .emoji-board-flexItem; + margin: 0 var(--sp-tight); + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + } +} .emoji-group { --emoji-padding: 6px; @@ -65,12 +98,19 @@ z-index: 99; background-color: var(--bg-surface); - padding: var(--sp-tight) var(--sp-normal); + margin-left: var(--sp-extra-tight); + padding: var(--sp-extra-tight) var(--sp-ultra-tight); text-transform: uppercase; font-weight: 600; + box-shadow: 0 -4px 0 0 var(--bg-surface); + border-bottom: 1px solid var(--bg-surface-border); + [dir=rtl] & { + margin-left: 0; + margin-right: var(--sp-extra-tight); + } } & .emoji-set { - margin: 0 calc(var(--sp-normal) - var(--emoji-padding)); + margin: var(--sp-extra-tight) calc(var(--sp-normal) - var(--emoji-padding)); margin-right: calc(var(--sp-extra-tight) - var(--emoji-padding)); [dir=rtl] & { margin-right: calc(var(--sp-normal) - var(--emoji-padding)); @@ -79,6 +119,7 @@ } & .emoji { width: 38px; + height: 38px; padding: var(--emoji-padding); cursor: pointer; &:hover { diff --git a/src/app/organisms/emoji-board/emoji.js b/src/app/organisms/emoji-board/emoji.js index 821b0a2..a57ef98 100644 --- a/src/app/organisms/emoji-board/emoji.js +++ b/src/app/organisms/emoji-board/emoji.js @@ -47,7 +47,7 @@ function addToGroup(emoji) { else if (emoji.group === 6) addEmoji(emoji, 3); else if (emoji.group === 5) addEmoji(emoji, 4); else if (emoji.group === 7) addEmoji(emoji, 5); - else if (emoji.group === 8) addEmoji(emoji, 6); + else if (emoji.group === 8 || typeof emoji.group === 'undefined') addEmoji(emoji, 6); else if (emoji.group === 9) addEmoji(emoji, 7); } @@ -70,7 +70,6 @@ function searchEmoji(term) { if (result.length > 20) result = result.slice(0, 20); return result; } - export { emojis, emojiGroups, searchEmoji, };