From 07d69c1fb627d7aea8fa4925e283c816971ab17b Mon Sep 17 00:00:00 2001 From: Nuary Pradipta Date: Mon, 3 Oct 2022 05:23:38 +0700 Subject: [PATCH] Add orbis floating chat --- src/@images/send.svg | 3 + .../Orbis/FloatingChat/ChatToolbar.module.css | 46 +++++++ .../Orbis/FloatingChat/ChatToolbar.tsx | 22 ++++ .../FloatingChat/Conversation.module.css | 89 ++++++++++++++ .../Orbis/FloatingChat/Conversation.tsx | 89 ++++++++++++++ .../@shared/Orbis/FloatingChat/DmDetails.tsx | 5 - .../Orbis/FloatingChat/index.module.css | 112 +++++++++++++++++- .../@shared/Orbis/FloatingChat/index.tsx | 99 ++++++++++++++-- 8 files changed, 446 insertions(+), 19 deletions(-) create mode 100644 src/@images/send.svg create mode 100644 src/components/@shared/Orbis/FloatingChat/ChatToolbar.module.css create mode 100644 src/components/@shared/Orbis/FloatingChat/ChatToolbar.tsx create mode 100644 src/components/@shared/Orbis/FloatingChat/Conversation.module.css create mode 100644 src/components/@shared/Orbis/FloatingChat/Conversation.tsx delete mode 100644 src/components/@shared/Orbis/FloatingChat/DmDetails.tsx diff --git a/src/@images/send.svg b/src/@images/send.svg new file mode 100644 index 000000000..da6354d18 --- /dev/null +++ b/src/@images/send.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/@shared/Orbis/FloatingChat/ChatToolbar.module.css b/src/components/@shared/Orbis/FloatingChat/ChatToolbar.module.css new file mode 100644 index 000000000..2563b0b5b --- /dev/null +++ b/src/components/@shared/Orbis/FloatingChat/ChatToolbar.module.css @@ -0,0 +1,46 @@ +.chatToolbar { + position: absolute; + bottom: 0; + left: 0; + right: 0; + width: 100%; + background-color: var(--background-content); + padding: calc(var(--spacer) / 2); + border-top: 1px solid var(--border-color); + border-bottom: 1px solid var(--border-color); +} + +.chatMessage { + position: relative; + display: flex; + justify-content: space-between; + gap: calc(var(--spacer) / 2); +} + +.chatMessage div { + width: 100%; + margin-bottom: 0; +} + +.chatMessage label { + margin: 0; +} + +.button { + right: calc(var(--spacer) / 4); + background-color: var(--background-content); + border: none; + cursor: pointer; + color: var(--brand-white); + font-size: var(--font-size-title); + transition: color 200ms ease; +} + +.button:hover, +.button:focus { + color: var(--color-primary); +} + +.sendIcon { + fill: currentColor; +} diff --git a/src/components/@shared/Orbis/FloatingChat/ChatToolbar.tsx b/src/components/@shared/Orbis/FloatingChat/ChatToolbar.tsx new file mode 100644 index 000000000..bbe932459 --- /dev/null +++ b/src/components/@shared/Orbis/FloatingChat/ChatToolbar.tsx @@ -0,0 +1,22 @@ +import React from 'react' +import styles from './ChatToolbar.module.css' +import SendIcon from '@images/send.svg' +import Input from '@shared/FormInput' + +export default function ChatToolbar() { + return ( +
+
+ + +
+
+ ) +} diff --git a/src/components/@shared/Orbis/FloatingChat/Conversation.module.css b/src/components/@shared/Orbis/FloatingChat/Conversation.module.css new file mode 100644 index 000000000..ea03f70ef --- /dev/null +++ b/src/components/@shared/Orbis/FloatingChat/Conversation.module.css @@ -0,0 +1,89 @@ +.conversationBox { + padding: calc(var(--spacer) / 2); + height: calc(100% - (var(--spacer) * 3.5)); + overflow-y: auto; +} + +.conversationRecipient, +.conversationSend { + display: flex; + align-items: flex-end; + margin-bottom: calc(var(--spacer) / 2); +} + +.conversationSend .chatBubbleItem { + text-align: right; + padding-left: 48px; +} + +.colAvatar { + flex-shrink: 0; + padding-right: calc(var(--spacer) / 2); +} + +.avatar { + aspect-ratio: 1/1; + border-radius: 100%; + border: 1px solid var(--border-color); + flex-shrink: 0; + width: calc(var(--font-size-large) * 2); + height: calc(var(--font-size-large) * 2); +} + +.colBubble { + display: flex; + flex-direction: column; + width: 100%; +} + +.chatBubbleItem { + display: block; +} + +.chatBubbleItem + .chatBubbleItem { + margin-top: calc(var(--spacer) / 8); +} + +.chatBubble { + display: inline-block; + background-color: var(--color-primary); + padding: calc(var(--spacer) / 4) calc(var(--spacer) / 2.5); + font-size: var(--font-size-base); + border-radius: 1rem; +} + +.chatPrimary { + color: var(--brand-white); + background-color: var(--color-primary); +} + +.chatDefault { + background-color: var(--border-color); +} + +.conversationRecipient .colBubble .chatBubbleItem .chatBubble { + border-top-left-radius: 0; + border-bottom-left-radius: 0px; +} + +.conversationRecipient .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); + padding-top: calc(var(--spacer) / 8); +} diff --git a/src/components/@shared/Orbis/FloatingChat/Conversation.tsx b/src/components/@shared/Orbis/FloatingChat/Conversation.tsx new file mode 100644 index 000000000..63e4ddbc8 --- /dev/null +++ b/src/components/@shared/Orbis/FloatingChat/Conversation.tsx @@ -0,0 +1,89 @@ +import React from 'react' +import styles from './Conversation.module.css' + +export default function DmConversation() { + const dummyData = [ + { + name: 'realdatawhale.eth', + image: '/apple-touch-icon.png', + chat1: 'Hello friend whats up!', + chat2: + 'I have this exact same issue with using brave browser. It wont prompt for metamask instead asking to connect to brave wallet.', + chat3: 'Hello!', + chat4: 'Yeah thats weird!', + chat5: + 'Did you update your profile within Orbis or with an app you built?!', + timestamp: 'Jul 27, 2022, 3:39 AM' + } + ] + + return ( + <> + {dummyData.map((dm, index) => ( +
+
+
+ Avatar +
+
+
+
+ {dm.chat1} +
+
+
+
+ {dm.chat2} +
+
{dm.timestamp}
+
+
+
+
+
+
+
+ {dm.chat3} +
+
+
+
+ {dm.chat4} +
+
+
+
+ {dm.chat5} +
+
{dm.timestamp}
+
+
+
+
+
+ Avatar +
+
+
+
+ {dm.chat1} +
+
+
+
+ {dm.chat4} +
+
+
+
+ {dm.chat2} +
+
{dm.timestamp}
+
+
+
+
+ ))} + + ) +} diff --git a/src/components/@shared/Orbis/FloatingChat/DmDetails.tsx b/src/components/@shared/Orbis/FloatingChat/DmDetails.tsx deleted file mode 100644 index c8fa13408..000000000 --- a/src/components/@shared/Orbis/FloatingChat/DmDetails.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import React from 'react' - -export default function DmDetails() { - return
DmDetails
-} diff --git a/src/components/@shared/Orbis/FloatingChat/index.module.css b/src/components/@shared/Orbis/FloatingChat/index.module.css index 90152a584..b8e8ca6bf 100644 --- a/src/components/@shared/Orbis/FloatingChat/index.module.css +++ b/src/components/@shared/Orbis/FloatingChat/index.module.css @@ -9,23 +9,24 @@ right: 0; bottom: 0; left: 0; - transition: all 300ms ease 0s; + transition: transform 300ms ease 0s; pointer-events: none; z-index: 20; } .floating { + display: flex; + flex-direction: column; pointer-events: auto; width: 100%; max-width: 400px; height: 530px; max-height: 80vh; - background-color: var(--brand-black); + background-color: var(--background-content); border: 1px solid var(--border-color); border-bottom: 0; border-radius: var(--border-radius); transform: translateY(0); - transition: all 0.3s ease-in-out; } .isClosed { @@ -36,6 +37,7 @@ display: flex; flex-wrap: wrap; justify-content: flex-start; + align-items: center; padding: calc(0.35 * var(--spacer)) var(--spacer); border-bottom: 1px solid var(--border-color); box-shadow: var(--box-shadow); @@ -50,6 +52,22 @@ fill: var(--font-color-text); } +.back { + margin-left: 0; + width: 1rem; + margin-right: calc(0.5 * var(--spacer)); + fill: var(--font-color-text); + transform: rotate(180deg); +} + +.btnBack { + border: none; + background-color: transparent; + padding: 0; + margin: 0; + cursor: pointer; +} + .toggle { cursor: pointer; margin-left: auto; @@ -68,9 +86,92 @@ transform: scaleY(-1); } +.dmList { + position: relative; + overflow: auto; + height: 100%; +} + .dmItem { - padding: calc(var(--spacer) / 2); + display: flex; + padding: calc(var(--spacer) / 2) var(--spacer); border-bottom: 1px solid var(--border-color); + cursor: pointer; +} + +.dmDate { + font-size: var(--font-size-mini); + color: var(--font-color-text); + min-width: calc(var(--spacer) * 1.5); + text-align: right; +} + +.dmCount { + background-color: var(--color-primary); + width: 20px; + height: 20px; + color: var(--brand-white); + border-radius: 100%; + display: flex; + justify-content: center; + align-items: center; + font-size: var(--font-size-mini); + font-weight: 600; +} + +.accountAvatarSet .dmCount { + position: absolute; + bottom: -4px; + right: -4px; +} + +.header .dmCount { + margin-left: calc(var(--spacer) / 4); +} + +.accountInfo { + -webkit-box-flex: 1; + flex: 1; + padding-left: calc(var(--spacer) / 2); + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + min-width: 0; +} + +.accountHeading { + display: flex; + justify-content: space-between; +} + +.accountAvatarSet { + position: relative; + flex-shrink: 0; +} + +.accountAvatar { + aspect-ratio: 1/1; + border-radius: 100%; + border: 1px solid var(--border-color); + flex-shrink: 0; + width: calc(var(--font-size-large) * 2.5); + height: calc(var(--font-size-large) * 2.5); + margin-left: 0; +} + +.accountName { + margin-bottom: calc(var(--spacer) / 6); + font-size: var(--font-size-medium); + color: var(--color-primary); +} + +.accountChat { + font-size: var(--font-size-small); + color: var(--color-secondary); + margin-bottom: 0; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; } .dmDetails { @@ -79,7 +180,8 @@ left: 0; right: 0; bottom: 0; - background-color: var(--background-body); + height: 100%; + background-color: var(--background-content); } @media screen and (min-width: 42rem) { diff --git a/src/components/@shared/Orbis/FloatingChat/index.tsx b/src/components/@shared/Orbis/FloatingChat/index.tsx index 7555d3943..fc2e8fb65 100644 --- a/src/components/@shared/Orbis/FloatingChat/index.tsx +++ b/src/components/@shared/Orbis/FloatingChat/index.tsx @@ -1,16 +1,52 @@ import React, { useState } from 'react' import ChatBubble from '@images/chatbubble.svg' +import ArrowBack from '@images/arrow.svg' import ChevronDoubleUp from '@images/chevrondoubleup.svg' import styles from './index.module.css' +import Conversation from './Conversation' +import ChatToolbar from './ChatToolbar' export default function FloatingChat() { const [opened, setOpened] = useState(false) const [dmDetails, setDmDetails] = useState(null) - const dummyData = [{ name: 'John' }, { name: 'Jane' }] + const dummyData = [ + { + name: '0xd30D…AFbD', + chat: 'Hello world!', + date: '15 Minutes Ago', + image: '/apple-touch-icon.png', + count: '3' + }, + { + name: 'realdatawhale.eth', + chat: 'Getting some similar glitches with profile NFT. The current non-NFT photo works fine.', + date: '1 Day Ago', + image: '/apple-touch-icon.png', + count: '1' + }, + { + name: 'hidetaka.eth', + chat: 'I already updated in the past.', + date: '1 Oct', + image: '/apple-touch-icon.png', + count: '0' + }, + { + name: 'orbisclub.eth', + chat: 'Yeah that is weird, Did you update your profile within Orbis or with an app you built', + date: '1 Oct', + image: '/apple-touch-icon.png', + count: '0' + } + ] - const openDetails = (name: string) => { - setDmDetails(name) + const sumCount = dummyData.reduce(function (prev, current) { + return prev + +current.count + }, 0) + + function openDetails(id: string) { + setDmDetails(id) } return ( @@ -19,6 +55,7 @@ export default function FloatingChat() {
Direct Messages + {sumCount > 0 && {sumCount}}
-
+
{dummyData.map((dm, index) => (
openDetails(dm.name)} > - {dm.name} +
+ Avatar + {dm.count > '0' && ( +
{dm.count}
+ )} +
+
+
+

{dm.name}

+ {dm.date} +
+

{dm.chat}

+
))} - - {dmDetails && ( -
Details {dmDetails}
- )}
+ {dmDetails && ( +
+
+ + {dmDetails} + +
+ + +
+ )}
)