fix: fixed modal position

push-protocol · Nov 8, 2023 · 04d637b · 04d637b
1 parent e72b992
commit 04d637b
Show file tree

Hide file tree

Showing 8 changed files with 135 additions and 57 deletions.
diff --git a/packages/examples/sdk-frontend-react/src/app/ChatUITest/ChatViewComponent.tsx b/packages/examples/sdk-frontend-react/src/app/ChatUITest/ChatViewComponent.tsx
@@ -1,7 +1,7 @@
 import styled from 'styled-components';
 
 import { Section } from '../components/StyledComponents';
-import { CreateGroupModal, MODAL_BACKGROUND_TYPE } from "@pushprotocol/uiweb";
+import { CreateGroupModal, MODAL_BACKGROUND_TYPE, MODAL_POSITION_TYPE } from "@pushprotocol/uiweb";
 import { ChatView } from '@pushprotocol/uiweb';
 
 const ChatViewComponentTest = () => {
@@ -13,14 +13,17 @@ const ChatViewComponentTest = () => {
   return (
     <div>
       <h2>Chat UI Test page</h2>
-      {/* <CreateGroupModal onClose={()=>{console.log('in close')}}  modalBackground={MODAL_BACKGROUND_TYPE.OVERLAY}/> */}
       <ChatViewComponentCard>
+      <CreateGroupModal onClose={()=>{console.log('in close')}}  modalBackground={MODAL_BACKGROUND_TYPE.OVERLAY} modalPositionType={MODAL_POSITION_TYPE.RELATIVE}/>
+
         <ChatView 
         onVerificationFail={() => console.log("BOIIII RETURNNNSSSSS")} 
         chatId='4ac5ab85c9c3d57adbdf2dba79357e56b2f9ef0256befe750d9f93af78d2ca68' 
         limit={10}
          isConnected={true} 
          groupInfoModalBackground={MODAL_BACKGROUND_TYPE.OVERLAY}
+         groupInfoModalPositionType={MODAL_POSITION_TYPE.RELATIVE}
+         verificationFailModalPosition={MODAL_POSITION_TYPE.RELATIVE}
          />
       </ChatViewComponentCard>
     </div>
@@ -30,7 +33,8 @@ const ChatViewComponentTest = () => {
 export default ChatViewComponentTest;
 
 const ChatViewComponentCard = styled(Section)`
-  height: 60vh;
+  height: 80vh;
+  position:relative;
 `;
 //c2d544ad9d1efd5c5a593b143bf8232875c926cf28015564e70ad078b95f807e
 //4ac5ab85c9c3d57adbdf2dba79357e56b2f9ef0256befe750d9f93af78d2ca68
diff --git a/packages/uiweb/src/lib/components/chat/ChatProfile/ChatProfile.tsx b/packages/uiweb/src/lib/components/chat/ChatProfile/ChatProfile.tsx
@@ -24,7 +24,9 @@ import {
   IChatProfile,
   IChatTheme,
   MODAL_BACKGROUND_TYPE,
+  MODAL_POSITION_TYPE,
   ModalBackgroundType,
+  ModalPositionType,
 } from '../exportedTypes';
 import { InfuraAPIKey, allowedNetworks, device } from '../../../config';
 import { resolveNewEns, shortenText } from '../../../helpers';
@@ -67,42 +69,40 @@ const Options = ({
 
   if (groupInfo && isGroup) {
     return (
+      <ImageItem onClick={() => setOptions(true)}>
+        <Image
+          src={VerticalEllipsisIcon}
+          height="21px"
+          maxHeight="32px"
+          width={'auto'}
+          cursor="pointer"
+        />
 
-        <ImageItem onClick={() => setOptions(true)}>
-          <Image
-            src={VerticalEllipsisIcon}
-            height="21px"
-            maxHeight="32px"
-            width={'auto'}
-            cursor="pointer"
-          />
-
-          {options && (
-            <DropDownBar theme={theme} ref={DropdownRef}>
-              <DropDownItem cursor="pointer" onClick={ShowModal}>
-                <Image
-                  src={InfoIcon}
-                  height="21px"
-                  maxHeight="21px"
-                  width={'auto'}
-                  cursor="pointer"
-                />
-
-                <TextItem cursor="pointer">Group Info</TextItem>
-              </DropDownItem>
-            </DropDownBar>
-          )}
-          {modal && (
-            <GroupInfoModal
-              theme={theme}
-              setModal={setModal}
-              groupInfo={groupInfo}
-              setGroupInfo={setGroupInfo}
-              groupInfoModalBackground={groupInfoModalBackground}
-            />
-          )}
-        </ImageItem>
+        {options && (
+          <DropDownBar theme={theme} ref={DropdownRef}>
+            <DropDownItem cursor="pointer" onClick={ShowModal}>
+              <Image
+                src={InfoIcon}
+                height="21px"
+                maxHeight="21px"
+                width={'auto'}
+                cursor="pointer"
+              />
 
+              <TextItem cursor="pointer">Group Info</TextItem>
+            </DropDownItem>
+          </DropDownBar>
+        )}
+        {modal && (
+          <GroupInfoModal
+            theme={theme}
+            setModal={setModal}
+            groupInfo={groupInfo}
+            setGroupInfo={setGroupInfo}
+            groupInfoModalBackground={groupInfoModalBackground}
+          />
+        )}
+      </ImageItem>
     );
   } else {
     return null;
@@ -113,6 +113,7 @@ export const ChatProfile: React.FC<IChatProfile> = ({
   chatId,
   style,
   groupInfoModalBackground = MODAL_BACKGROUND_TYPE.OVERLAY,
+  groupInfoModalPositionType = MODAL_POSITION_TYPE.GLOBAL,
 }) => {
   const theme = useContext(ThemeContext);
   const { account, env } = useChatData();
@@ -127,6 +128,16 @@ export const ChatProfile: React.FC<IChatProfile> = ({
   const isMobile = useMediaQuery(device.tablet);
   const l1ChainId = allowedNetworks[env].includes(1) ? 1 : 5;
   const provider = new ethers.providers.InfuraProvider(l1ChainId, InfuraAPIKey);
+  const DropdownRef = useRef(null);
+  const [modal, setModal] = useState(false);
+
+  useClickAway(DropdownRef, () => {
+    setOptions(false);
+  });
+
+  const ShowModal = () => {
+    setModal(true);
+  };
 
   const fetchProfileData = async () => {
     if (isValidETHAddress(chatId)) {
@@ -176,7 +187,7 @@ export const ChatProfile: React.FC<IChatProfile> = ({
 
   if (chatId && style === 'Info') {
     return (
-      <Container theme={theme}  >
+      <Container theme={theme}>
         <ProfileContainer
           theme={theme}
           member={{ wallet: getProfileName() as string, image: getImage() }}
@@ -188,7 +199,6 @@ export const ChatProfile: React.FC<IChatProfile> = ({
           gap="10px"
           margin="0 20px 0 auto"
           alignSelf="center"
-
         >
           {(groupInfo?.rules?.chat?.conditions ||
             groupInfo?.rules?.entry?.conditions) && <TokenGatedSvg />}
@@ -201,16 +211,54 @@ export const ChatProfile: React.FC<IChatProfile> = ({
             />
           )}
 
-          <Options
+          {!!groupInfo && isGroup && (
+            <ImageItem onClick={() => setOptions(true)}>
+              <Image
+                src={VerticalEllipsisIcon}
+                height="21px"
+                maxHeight="32px"
+                width={'auto'}
+                cursor="pointer"
+              />
+
+              {options && (
+                <DropDownBar theme={theme} ref={DropdownRef}>
+                  <DropDownItem cursor="pointer" onClick={ShowModal}>
+                    <Image
+                      src={InfoIcon}
+                      height="21px"
+                      maxHeight="21px"
+                      width={'auto'}
+                      cursor="pointer"
+                    />
+
+                    <TextItem cursor="pointer">Group Info</TextItem>
+                  </DropDownItem>
+                </DropDownBar>
+              )}
+            </ImageItem>
+          )}
+
+          {/* <Options
             options={options}
             setOptions={setOptions}
             isGroup={isGroup}
             groupInfo={groupInfo}
             setGroupInfo={setGroupInfo}
             theme={theme}
             groupInfoModalBackground={groupInfoModalBackground}
-          />
+          /> */}
         </Section>
+        {modal && (
+            <GroupInfoModal
+              theme={theme}
+              setModal={setModal}
+              groupInfo={groupInfo!}
+              setGroupInfo={setGroupInfo}
+              groupInfoModalBackground={groupInfoModalBackground}
+              groupInfoModalPositionType={groupInfoModalPositionType}
+            />
+          )}
         {/* {!isGroup && 
                     <VideoChatSection>
                         <Image src={VideoChatIcon} height="18px" maxHeight="18px" width={'auto'} />

diff --git a/packages/uiweb/src/lib/components/chat/ChatProfile/GroupInfoModal.tsx b/packages/uiweb/src/lib/components/chat/ChatProfile/GroupInfoModal.tsx
@@ -35,7 +35,7 @@ import { copyToClipboard, shortenText } from '../../../helpers';
 import ConditionsComponent from '../CreateGroup/ConditionsComponent';
 import { ACCESS_TYPE_TITLE, OPERATOR_OPTIONS_INFO } from '../constants';
 import { getRuleInfo } from '../helpers/getRulesToCondtionArray';
-import { MODAL_BACKGROUND_TYPE, ModalBackgroundType } from '../exportedTypes';
+import { MODAL_BACKGROUND_TYPE, MODAL_POSITION_TYPE, ModalBackgroundType, ModalPositionType } from '../exportedTypes';
 import { TokenGatedSvg } from '../../../icons/TokenGatedSvg';
 
 const UPDATE_KEYS = {
@@ -315,6 +315,7 @@ type GroupInfoModalProps = {
   groupInfo: IGroup;
   setGroupInfo: React.Dispatch<React.SetStateAction<IGroup | null | undefined>>;
   groupInfoModalBackground?: ModalBackgroundType;
+  groupInfoModalPositionType?: ModalPositionType;
 };
 
 export const GROUPINFO_STEPS = {
@@ -578,6 +579,7 @@ export const GroupInfoModal = ({
   groupInfo,
   setGroupInfo,
   groupInfoModalBackground = MODAL_BACKGROUND_TYPE.OVERLAY,
+  groupInfoModalPositionType = MODAL_POSITION_TYPE.GLOBAL,
 }: GroupInfoModalProps) => {
   const [activeComponent, setActiveComponent] = useState<GROUP_INFO_TYPE>(
     GROUPINFO_STEPS.GROUP_INFO
@@ -738,6 +740,7 @@ export const GroupInfoModal = ({
       <Modal
         clickawayClose={onClose}
         modalBackground={groupInfoModalBackground}
+        modalPositionType={groupInfoModalPositionType}
       >
         {!showAddMoreWalletModal && (
           <Section

diff --git a/packages/uiweb/src/lib/components/chat/ChatViewComponent/ChatViewComponent.tsx b/packages/uiweb/src/lib/components/chat/ChatViewComponent/ChatViewComponent.tsx
@@ -1,5 +1,5 @@
 import React, { useContext } from 'react';
-import { IChatTheme, IChatViewComponentProps, MODAL_BACKGROUND_TYPE } from '../exportedTypes';
+import { IChatTheme, IChatViewComponentProps, MODAL_BACKGROUND_TYPE, MODAL_POSITION_TYPE } from '../exportedTypes';
 
 import { Section, Span } from '../../reusables';
 import { ChatViewList } from '../ChatViewList';
@@ -36,7 +36,10 @@ export const ChatViewComponent: React.FC<IChatViewComponentProps> = (
     isConnected = true,
     autoConnect = false,
     onVerificationFail,
-    groupInfoModalBackground = MODAL_BACKGROUND_TYPE.OVERLAY
+    groupInfoModalBackground = MODAL_BACKGROUND_TYPE.OVERLAY,
+    groupInfoModalPositionType =  MODAL_POSITION_TYPE.GLOBAL,
+    verificationFailModalBackground = MODAL_BACKGROUND_TYPE.OVERLAY,
+    verificationFailModalPosition = MODAL_POSITION_TYPE.GLOBAL,
   } = options || {};
 
   const { env, signer, account, pgpPrivateKey } = useChatData();
@@ -59,7 +62,7 @@ export const ChatViewComponent: React.FC<IChatViewComponentProps> = (
       padding="13px"
       theme={theme}
     >
-      {chatProfile && <ChatProfile chatId={chatId} style="Info" groupInfoModalBackground={groupInfoModalBackground} />}
+      {chatProfile && <ChatProfile chatId={chatId} style="Info" groupInfoModalBackground={groupInfoModalBackground} groupInfoModalPositionType={groupInfoModalPositionType}/>}
       <Section
         flex="1 1 auto"
         overflow="hidden"
@@ -86,14 +89,16 @@ export const ChatViewComponent: React.FC<IChatViewComponentProps> = (
         </Section>
       )}
       {(messageInput && (!!signer || (!!account && !!pgpPrivateKey) || isConnected )) && (
-        <Section flex="0 1 auto">
+        <Section flex="0 1 auto" position='static'>
           <MessageInput
             onVerificationFail={onVerificationFail}
             chatId={chatId}
             file={file}
             emoji={emoji}
             gif={gif}
             isConnected={isConnected}
+            verificationFailModalBackground={verificationFailModalBackground}
+            verificationFailModalPosition={verificationFailModalPosition}
             autoConnect = {autoConnect}
           />
         </Section>

diff --git a/packages/uiweb/src/lib/components/chat/CreateGroup/CreateGroupModal.tsx b/packages/uiweb/src/lib/components/chat/CreateGroup/CreateGroupModal.tsx
@@ -13,7 +13,7 @@ import { Section, Span } from '../../reusables';
 import { Button } from '../reusables';
 import { CreateGroupType } from './CreateGroupType';
 import useToast from '../reusables/NewToast';
-import { CreateGroupModalProps, IChatTheme, MODAL_BACKGROUND_TYPE } from '../exportedTypes';
+import { CreateGroupModalProps, IChatTheme, MODAL_BACKGROUND_TYPE, MODAL_POSITION_TYPE } from '../exportedTypes';
 import useMediaQuery from '../../../hooks/useMediaQuery';
 import { DefineCondtion } from './DefineCondition';
 import AddCriteria from './AddCriteria';
@@ -47,7 +47,8 @@ interface GroupInputDetailsType {
 
 export const CreateGroupModal: React.FC<CreateGroupModalProps> = ({
   onClose,
-  modalBackground = MODAL_BACKGROUND_TYPE.OVERLAY
+  modalBackground = MODAL_BACKGROUND_TYPE.OVERLAY,
+  modalPositionType = MODAL_POSITION_TYPE.GLOBAL
 }) => {
   const [activeComponent, setActiveComponent] = useState<CreateGroupStepKeys>(
     // replace it with info one
@@ -135,7 +136,7 @@ export const CreateGroupModal: React.FC<CreateGroupModalProps> = ({
   };
 
   return (
-    <Modal clickawayClose={onClose} modalBackground={modalBackground}>
+    <Modal clickawayClose={onClose} modalBackground={modalBackground} modalPositionType={modalPositionType}>
       {renderComponent()} <ToastContainer />
     </Modal>
   );

diff --git a/packages/uiweb/src/lib/components/chat/MessageInput/MessageInput.tsx b/packages/uiweb/src/lib/components/chat/MessageInput/MessageInput.tsx
@@ -39,7 +39,7 @@ import {
 } from '../../../hooks';
 
 import type { FileMessageContent, IGroup } from '../../../types';
-import { GIFType, IChatTheme, MessageInputProps } from '../exportedTypes';
+import { GIFType, IChatTheme, MODAL_BACKGROUND_TYPE, MODAL_POSITION_TYPE, MessageInputProps } from '../exportedTypes';
 import { PUBLIC_GOOGLE_TOKEN, device } from '../../../config';
 import { checkIfAccessVerifiedGroup, checkIfMember } from '../helpers';
 import { InfoContainer } from '../reusables';
@@ -84,6 +84,8 @@ export const MessageInput: React.FC<MessageInputProps> = ({
   file = true,
   isConnected = true,
   autoConnect = false,
+  verificationFailModalBackground = MODAL_BACKGROUND_TYPE.OVERLAY,
+  verificationFailModalPosition = MODAL_POSITION_TYPE.GLOBAL,
   onVerificationFail,
 }) => {
   const [typedMessage, setTypedMessage] = useState<string>('');
@@ -467,7 +469,7 @@ export const MessageInput: React.FC<MessageInputProps> = ({
             </Section>
           )}
           {!!pgpPrivateKey && !verificationSuccessfull && (
-            <Modal width="550px">
+            <Modal width="550px" modalBackground={verificationFailModalBackground} modalPositionType={verificationFailModalPosition}>
               <Section
                 margin="5px 0px 0px 0px"
                 gap="16px"