From 32a768022362b456a7f5bbd437f00d2e6bd14222 Mon Sep 17 00:00:00 2001 From: Bhupesh-mfsi <137804674+Bhupesh-mfsi@users.noreply.github.com> Date: Wed, 30 Aug 2023 15:19:49 +0530 Subject: [PATCH] 585 msg actions (#593) * stashed files added * signin page ui * renamed file * fixed linting issues * integrated rainbow wallet * integrated metamask wallet & fixed home image strech issue * fixed error message * removed provider check * removed fontawesome library & added svg image * added user profile page * integrated user contact list * changed color of contact background on hover * created hamburger menu ui * removed unused import * fixed prettier issue * created contacts action menu * added contact menu list * UI for user contact page * contact info page * add conversation UI * integrated add conversation modal * integrated preferences modal * optimized code * removed unused code & fixed linting * changed let to const * UI for profile configuration * added error messages * Configure user profile * removed unused parameter * fixed prettier issue * env test * hide contact integrated * modified condition check * profile not configured info box * env test * chat screen * chat message UI * library function integration for chat * removed unused code * message actions * fixed user config profile method --------- Co-authored-by: Bhupesh-MS Co-authored-by: Heiko Burkhardt --- .../src/assets/images/chat-delete.svg | 9 +++++ .../src/assets/images/edit.svg | 9 +++++ .../src/assets/images/reply.svg | 9 +++++ .../src/components/Chat/Chat.tsx | 23 +++++------- .../src/components/Contacts/bl.ts | 2 +- .../src/components/Message/Message.css | 22 +++++++++++- .../src/components/Message/Message.tsx | 36 ++++++++++++++++--- .../MessageAction/MessageAction.css | 32 +++++++++++++++++ .../MessageAction/MessageAction.tsx | 33 +++++++++++++++++ 9 files changed, 153 insertions(+), 22 deletions(-) create mode 100644 packages/messenger-widget/src/assets/images/chat-delete.svg create mode 100644 packages/messenger-widget/src/assets/images/edit.svg create mode 100644 packages/messenger-widget/src/assets/images/reply.svg create mode 100644 packages/messenger-widget/src/components/MessageAction/MessageAction.css create mode 100644 packages/messenger-widget/src/components/MessageAction/MessageAction.tsx diff --git a/packages/messenger-widget/src/assets/images/chat-delete.svg b/packages/messenger-widget/src/assets/images/chat-delete.svg new file mode 100644 index 000000000..a76aa2854 --- /dev/null +++ b/packages/messenger-widget/src/assets/images/chat-delete.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/packages/messenger-widget/src/assets/images/edit.svg b/packages/messenger-widget/src/assets/images/edit.svg new file mode 100644 index 000000000..5c6ba42d4 --- /dev/null +++ b/packages/messenger-widget/src/assets/images/edit.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/packages/messenger-widget/src/assets/images/reply.svg b/packages/messenger-widget/src/assets/images/reply.svg new file mode 100644 index 000000000..7ddc9c6f1 --- /dev/null +++ b/packages/messenger-widget/src/assets/images/reply.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/packages/messenger-widget/src/components/Chat/Chat.tsx b/packages/messenger-widget/src/components/Chat/Chat.tsx index 5d89c5186..ffcd7804e 100644 --- a/packages/messenger-widget/src/components/Chat/Chat.tsx +++ b/packages/messenger-widget/src/components/Chat/Chat.tsx @@ -1,15 +1,14 @@ import './Chat.css'; -import { useContext, useEffect, useState } from 'react'; -import { GlobalContext } from '../../utils/context-utils'; -import ConfigProfileAlertBox from '../ContactProfileAlertBox/ContactProfileAlertBox'; import { Message } from '../Message/Message'; -import { MessageProps } from '../../interfaces/props'; -import { MessageInput } from '../MessageInput/MessageInput'; import { getConversation } from 'dm3-lib-storage'; import { globalConfig, log } from 'dm3-lib-shared'; +import { MessageProps } from '../../interfaces/props'; +import { useContext, useEffect, useState } from 'react'; +import { GlobalContext } from '../../utils/context-utils'; +import { MessageInput } from '../MessageInput/MessageInput'; +import ConfigProfileAlertBox from '../ContactProfileAlertBox/ContactProfileAlertBox'; import { checkUserProfileConfigured, - getPastMessages, handleMessages, scrollToBottomOfChat, } from './bl'; @@ -33,6 +32,7 @@ export function Chat() { setMessageList(msgs); }; + // handles messages list useEffect(() => { checkUserProfileConfigured( state, @@ -62,16 +62,9 @@ export function Chat() { log(error, 'error'); } } - }, [ - state.userDb?.conversations, - state.accounts.selectedContact, - state.accounts.contacts, - ]); - - useEffect(() => { - getPastMessages(state, dispatch, alias, setListOfMessages); - }, [state.accounts.selectedContact]); + }, [state.userDb?.conversations, state.accounts.selectedContact]); + // scrolls to bottom on any new message arrival useEffect(() => { scrollToBottomOfChat(); }, [messageList]); diff --git a/packages/messenger-widget/src/components/Contacts/bl.ts b/packages/messenger-widget/src/components/Contacts/bl.ts index 97579394b..3a5cd9818 100644 --- a/packages/messenger-widget/src/components/Contacts/bl.ts +++ b/packages/messenger-widget/src/components/Contacts/bl.ts @@ -39,7 +39,7 @@ export const setContactHeightToMaximum = (isProfileConfigured: boolean) => { const element = document.getElementsByClassName( 'contacts-scroller', )[0] as HTMLElement; - element.style.height = isProfileConfigured ? '89.5vh' : '68vh'; + element.style.height = isProfileConfigured ? '89.5vh' : '70vh'; }; // fetches contact list and sets data according to view on UI diff --git a/packages/messenger-widget/src/components/Message/Message.css b/packages/messenger-widget/src/components/Message/Message.css index 682f0b0de..4322c47cb 100644 --- a/packages/messenger-widget/src/components/Message/Message.css +++ b/packages/messenger-widget/src/components/Message/Message.css @@ -18,7 +18,7 @@ .time-style { margin-top: 3px; font-size: 10px; - margin-right: 0.3rem; + margin-right: 1.6rem; } .readed-tick-icon { @@ -32,3 +32,23 @@ .second-tick { margin-left: -5px; } + +.msg-action-container { + height: fit-content; + width: fit-content; + border: 1px solid var(--text-primary-color); + visibility: hidden; +} + +.msg-action-dot { + height: 0.9rem; + width: 0.9rem; +} + +.msg-action-container:hover { + background-color: var(--normal-btn-hover); +} + +.msg:hover div .content-style + .msg-action-container { + visibility: visible !important; +} diff --git a/packages/messenger-widget/src/components/Message/Message.tsx b/packages/messenger-widget/src/components/Message/Message.tsx index 92b1acde3..eb03ae23b 100644 --- a/packages/messenger-widget/src/components/Message/Message.tsx +++ b/packages/messenger-widget/src/components/Message/Message.tsx @@ -1,16 +1,30 @@ import './Message.css'; -import { MessageProps } from '../../interfaces/props'; -import tickIcon from '../../assets/images/tick.svg'; +import { useState } from 'react'; import { MessageState } from 'dm3-lib-messaging'; +import tickIcon from '../../assets/images/tick.svg'; +import { MessageProps } from '../../interfaces/props'; +import threeDotsIcon from '../../assets/images/three-dots.svg'; +import { MessageAction } from '../MessageAction/MessageAction'; export function Message(props: MessageProps) { + // state to show action items three dots + const [isHovered, setIsHovered] = useState(false); + + const handleMouseOver = () => { + setIsHovered(true); + }; + + const handleMouseOut = () => { + setIsHovered(false); + }; + return (
@@ -24,6 +38,18 @@ export function Message(props: MessageProps) { > {props.message}
+
+ action + {isHovered && } +
+ {props.ownMessage && ( + <> +
+ edit + Edit +
+
+ delete + Delete +
+ + )} +
+ delete + Reply +
+
+ ); +}