Merge pull request #2999 from danbr/feat/2847-actionpage-show-member-…

…popover Show member popover when user avatar selected
JoinColony · Dec 7, 2021 · 4482505 · 4482505
2 parents f2c338e + dd20573
commit 4482505
Show file tree

Hide file tree

Showing 9 changed files with 46 additions and 6 deletions.
diff --git a/src/modules/core/components/ActionsList/ActionsListItem.css b/src/modules/core/components/ActionsList/ActionsListItem.css
@@ -32,7 +32,7 @@
   cursor: pointer;
 }
 
-.avatar figure {
+.avatar > div > figure {
   height: 41px;
   width: 41px;
   border: 2px solid transparent;

diff --git a/src/modules/core/components/ActionsList/ActionsListItem.tsx b/src/modules/core/components/ActionsList/ActionsListItem.tsx
@@ -194,6 +194,8 @@ const ActionsListItem = ({
     motionState === MotionState.Passed ||
     motionState === MotionState.Failed ||
     motionState === MotionState.FailedNoFinalizable;
+
+  const stopPropagation = (event) => event.stopPropagation();
   return (
     <li>
       <div
@@ -219,9 +221,21 @@ const ActionsListItem = ({
         onClick={handleSyntheticEvent}
         onKeyPress={handleSyntheticEvent}
       >
-        <div className={styles.avatar}>
+        <div
+          /*
+           * Clicking on UserAvatar would redirect to Actions page and stop
+           * interaction with popover.
+           * stopPropagation prevents event being inherited by child
+           */
+          onClick={stopPropagation}
+          onKeyPress={stopPropagation}
+          role="button"
+          tabIndex={0}
+          className={styles.avatar}
+        >
           {initiator && (
             <UserAvatar
+              colony={colony}
               size="s"
               address={initiator}
               user={initiatorUserProfile}

diff --git a/src/modules/core/components/Comment/Comment.tsx b/src/modules/core/components/Comment/Comment.tsx
@@ -107,11 +107,16 @@ const Comment = ({
     >
       <div className={styles.avatar}>
         <UserAvatar
+          colony={colony}
           size="xs"
           address={user?.profile.walletAddress || ''}
           user={user as AnyUser}
           showInfo
           notSet={false}
+          popperProps={{
+            showArrow: false,
+            placement: 'bottom',
+          }}
         />
       </div>
       <div className={styles.content}>

diff --git a/src/modules/core/components/DetailsWidgetUser/DetailsWidgetUser.tsx b/src/modules/core/components/DetailsWidgetUser/DetailsWidgetUser.tsx
@@ -3,18 +3,19 @@ import React from 'react';
 import HookedUserAvatar from '~users/HookedUserAvatar';
 import MaskedAddress from '~core/MaskedAddress';
 import InvisibleCopyableAddress from '~core/InvisibleCopyableAddress';
-import { useUser } from '~data/index';
+import { useUser, Colony } from '~data/index';
 import { Address } from '~types/index';
 
 import styles from './DetailsWidgetUser.css';
 
 const displayName = 'DetailsWidgetUser';
 
 interface Props {
+  colony?: Colony;
   walletAddress: Address;
 }
 
-const DetailsWidgetUser = ({ walletAddress }: Props) => {
+const DetailsWidgetUser = ({ colony, walletAddress }: Props) => {
   const UserAvatar = HookedUserAvatar({ fetchUser: false });
   const userProfile = useUser(walletAddress);
   const userDisplayName = userProfile?.profile?.displayName;
@@ -23,11 +24,24 @@ const DetailsWidgetUser = ({ walletAddress }: Props) => {
   return (
     <div className={styles.main}>
       <UserAvatar
+        colony={colony}
         size="s"
         notSet={false}
         user={userProfile}
         address={walletAddress || ''}
         showInfo
+        popperProps={{
+          showArrow: false,
+          placement: 'left',
+          modifiers: [
+            {
+              name: 'offset',
+              options: {
+                offset: [0, 10],
+              },
+            },
+          ],
+        }}
       />
       <div className={styles.textContainer}>
         {(userDisplayName || username) && (

diff --git a/src/modules/core/components/InfoPopover/MemberInfoPopover/MemberInfoPopover.css b/src/modules/core/components/InfoPopover/MemberInfoPopover/MemberInfoPopover.css
@@ -2,7 +2,10 @@
 
 .main {
   padding: 20px 25px 25px 25px;
-  width: 470px;
+  width: 480px;
+  text-align: left;
+  letter-spacing: normal;
+  cursor: auto;
 }
 
 .section {

diff --git a/src/modules/dashboard/components/ActionsPage/DetailsWidget/DetailsWidget.tsx b/src/modules/dashboard/components/ActionsPage/DetailsWidget/DetailsWidget.tsx
@@ -79,6 +79,7 @@ const DetailsWidget = ({
   recipient,
   values,
   transactionHash,
+  colony,
 }: Props) => {
   const { formatMessage } = useIntl();
 
@@ -162,6 +163,7 @@ const DetailsWidget = ({
             )}
             {recipient && detailsForAction.ToRecipient && (
               <DetailsWidgetUser
+                colony={colony}
                 walletAddress={recipient?.profile.walletAddress as string}
               />
             )}

diff --git a/src/modules/dashboard/components/ColonyEvents/ColonyEventsListItem.css b/src/modules/dashboard/components/ColonyEvents/ColonyEventsListItem.css
@@ -30,7 +30,7 @@
   cursor: pointer;
 }
 
-.avatar figure {
+.avatar > div > figure {
   height: 41px;
   width: 41px;
   border: 2px solid transparent;

diff --git a/src/modules/dashboard/components/ColonyEvents/ColonyEventsListItem.tsx b/src/modules/dashboard/components/ColonyEvents/ColonyEventsListItem.tsx
@@ -202,6 +202,7 @@ const ColonyEventsListItem = ({
         <div className={styles.avatar}>
           {agent && (
             <UserAvatar
+              colony={colony}
               size="s"
               address={agent}
               user={agentUserProfile}

diff --git a/src/modules/dashboard/components/Extensions/ExtensionDetails.tsx b/src/modules/dashboard/components/Extensions/ExtensionDetails.tsx
@@ -243,6 +243,7 @@ const ExtensionDetails = ({
         value: (
           <span className={styles.installedBy}>
             <DetailsWidgetUser
+              colony={colony}
               walletAddress={installedExtension.details.installedBy}
             />
           </span>