From 6ee1de9ffa3694a619d6ad547c44a1028489e284 Mon Sep 17 00:00:00 2001 From: Nuary Pradipta Date: Mon, 10 Oct 2022 15:23:54 +0700 Subject: [PATCH] Update Emoji Picker --- .../Orbis/FloatingChat/ChatToolbar.module.css | 10 ++-- .../Orbis/FloatingChat/ChatToolbar.tsx | 48 +++---------------- .../FloatingChat/Conversation.module.css | 21 -------- .../FloatingChat/ConversationItem.module.css | 1 + .../Orbis/FloatingChat/EmojiPicker.module.css | 20 ++++++++ .../Orbis/FloatingChat/EmojiPicker.tsx | 36 ++++++++++++++ src/stylesGlobal/_emojipicker.css | 17 +++++++ src/stylesGlobal/styles.css | 1 + 8 files changed, 85 insertions(+), 69 deletions(-) create mode 100644 src/components/@shared/Orbis/FloatingChat/EmojiPicker.module.css create mode 100644 src/components/@shared/Orbis/FloatingChat/EmojiPicker.tsx create mode 100644 src/stylesGlobal/_emojipicker.css diff --git a/src/components/@shared/Orbis/FloatingChat/ChatToolbar.module.css b/src/components/@shared/Orbis/FloatingChat/ChatToolbar.module.css index 3ece96ad9..bf975d3c8 100644 --- a/src/components/@shared/Orbis/FloatingChat/ChatToolbar.module.css +++ b/src/components/@shared/Orbis/FloatingChat/ChatToolbar.module.css @@ -49,14 +49,12 @@ position: relative; } -.inputWrap .button { - position: absolute; - right: calc(var(--spacer) / 42); - top: 50%; - transform: translateY(-50%); +.inputWrap input { + transition: none; + padding-right: calc(var(--spacer) * 1.3); } -.pickerBox { +.emojiPicker { position: absolute; bottom: calc(var(--spacer) * 1.7); left: calc(var(--spacer) / 2); diff --git a/src/components/@shared/Orbis/FloatingChat/ChatToolbar.tsx b/src/components/@shared/Orbis/FloatingChat/ChatToolbar.tsx index 778cd19cd..c7275c06b 100644 --- a/src/components/@shared/Orbis/FloatingChat/ChatToolbar.tsx +++ b/src/components/@shared/Orbis/FloatingChat/ChatToolbar.tsx @@ -1,40 +1,23 @@ -import React, { useEffect, useState } from 'react' +import React, { useState } from 'react' import styles from './ChatToolbar.module.css' import SendIcon from '@images/send.svg' -import EmojiIcon from '@images/emoji.svg' import Input from '@shared/FormInput' import { useOrbis } from '@context/Orbis' -// import dynamic from 'next/dynamic' -import Picker, { EmojiClickData, EmojiStyle, Theme } from 'emoji-picker-react' +import EmojiPicker from './EmojiPicker' +import { EmojiClickData } from 'emoji-picker-react' export default function ChatToolbar({ callbackMessage }: { callbackMessage: (post: OrbisPostInterface) => void }) { - const { orbis, conversationId, account, convOpen } = useOrbis() + const { orbis, conversationId, account } = useOrbis() const [content, setContent] = useState('') - const [showPicker, setShowPicker] = useState(false) - - // const Picker = dynamic( - // () => { - // return import('emoji-picker-react') - // }, - // { ssr: false } - // ) const onEmojiClick = (emojiData: EmojiClickData) => { setContent((prevInput) => prevInput + emojiData.emoji) - setShowPicker(false) } - useEffect(() => { - console.log(convOpen) - if (!convOpen) { - setShowPicker(false) - } - }, [convOpen]) - const sendMessage = async () => { const _callbackMessage: OrbisPostInterface = { creator: account.did, @@ -72,33 +55,14 @@ export default function ChatToolbar({ size="small" placeholder="Type Message" value={content} - onInput={(e) => setContent(e.target.value)} + onChange={(e: any) => setContent(e.target.value)} /> - + -
- {showPicker && ( - - )} -
) } diff --git a/src/components/@shared/Orbis/FloatingChat/Conversation.module.css b/src/components/@shared/Orbis/FloatingChat/Conversation.module.css index d174f816f..20985626a 100644 --- a/src/components/@shared/Orbis/FloatingChat/Conversation.module.css +++ b/src/components/@shared/Orbis/FloatingChat/Conversation.module.css @@ -84,27 +84,6 @@ border-top-left-radius: 0; } -/* .conversationItem .colBubble .chatBubbleItem .chatBubble { - border-top-left-radius: 0; - border-bottom-left-radius: 0px; -} */ - -/* .conversationItem .colBubble .chatBubbleItem:first-of-type .chatBubble { - border-top-left-radius: 1rem; - border-bottom-left-radius: 0px; -} - -.conversationSend .colBubble .chatBubbleItem .chatBubble { - border-top-right-radius: 0; - border-bottom-right-radius: 0px; - text-align: left; -} - -.conversationSend .colBubble .chatBubbleItem:first-of-type .chatBubble { - border-top-right-radius: 1rem; - border-bottom-left-radius: 0px; -} */ - .chatStamp { font-size: var(--font-size-small); color: var(--color-secondary); diff --git a/src/components/@shared/Orbis/FloatingChat/ConversationItem.module.css b/src/components/@shared/Orbis/FloatingChat/ConversationItem.module.css index c338be0d7..acfc67293 100644 --- a/src/components/@shared/Orbis/FloatingChat/ConversationItem.module.css +++ b/src/components/@shared/Orbis/FloatingChat/ConversationItem.module.css @@ -1,5 +1,6 @@ .conversationItem { display: flex; + align-items: center; padding: calc(var(--spacer) / 2) var(--spacer); border-bottom: 1px solid var(--border-color); cursor: pointer; diff --git a/src/components/@shared/Orbis/FloatingChat/EmojiPicker.module.css b/src/components/@shared/Orbis/FloatingChat/EmojiPicker.module.css new file mode 100644 index 000000000..8962db6b5 --- /dev/null +++ b/src/components/@shared/Orbis/FloatingChat/EmojiPicker.module.css @@ -0,0 +1,20 @@ +.emojiToolTip { + position: absolute; + padding: calc(var(--spacer) / 4.5) calc(var(--spacer) / 3); + cursor: pointer; + white-space: nowrap; + top: 0; + right: 0; + width: auto !important; +} +.icon { + position: relative; + font-size: var(--font-size-title); + color: var(--font-color-text); + fill: currentColor; +} +.icon:hover, +.icon:focus { + color: var(--color-primary); + fill: currentColor; +} diff --git a/src/components/@shared/Orbis/FloatingChat/EmojiPicker.tsx b/src/components/@shared/Orbis/FloatingChat/EmojiPicker.tsx new file mode 100644 index 000000000..f9be3d995 --- /dev/null +++ b/src/components/@shared/Orbis/FloatingChat/EmojiPicker.tsx @@ -0,0 +1,36 @@ +import React from 'react' +import EmojiIcon from '@images/emoji.svg' +import Picker, { EmojiStyle, Theme } from 'emoji-picker-react' +import styles from './EmojiPicker.module.css' +import useDarkMode from '@oceanprotocol/use-dark-mode' +import { useMarketMetadata } from '@context/MarketMetadata' +import Tooltip from '@shared/atoms/Tooltip' + +export default function EmojiPicker({ onEmojiClick }: { onEmojiClick: any }) { + const { appConfig } = useMarketMetadata() + const darkMode = useDarkMode(false, appConfig?.darkModeConfig) + + return ( + + } + trigger="click focus" + zIndex={21} + placement={'top-end'} + className={styles.emojiToolTip} + > + <> + + + + ) +} diff --git a/src/stylesGlobal/_emojipicker.css b/src/stylesGlobal/_emojipicker.css new file mode 100644 index 000000000..b02bdaa0b --- /dev/null +++ b/src/stylesGlobal/_emojipicker.css @@ -0,0 +1,17 @@ +.EmojiPickerReact.epr-dark-theme { + --epr-bg-color: var(--background-content) !important; + --epr-category-label-bg-color: #141414e6 !important; +} +.EmojiPickerReact { + --epr-emoji-size: 24px !important; +} + +.EmojiPickerReact .epr-search-container input.epr-search:focus { + background-color: var(--epr-search-input-bg-color-active); + border: 1px solid var(--border-color) !important; +} + +.EmojiPickerReact .epr-category-nav > button.epr-cat-btn { + -webkit-filter: hue-rotate(110deg) saturate(2); + filter: hue-rotate(110deg) saturate(2); +} diff --git a/src/stylesGlobal/styles.css b/src/stylesGlobal/styles.css index 9abd37c33..00723215b 100644 --- a/src/stylesGlobal/styles.css +++ b/src/stylesGlobal/styles.css @@ -158,6 +158,7 @@ table th { @import '_code.css'; @import '_toast.css'; @import '_web3modal.css'; +@import '_emojipicker.css'; /* prevent background scrolling */ .ReactModal__Body--open {