Merge pull request #9892 from weseek/imprv/user-picture-tooltip

imprv: User picture tooltip

apps/app/src/client/components/AuthorInfo/AuthorInfo.module.scss

@@ -10,12 +10,12 @@ $date-font-size: 12px;
     font-size: $date-font-size;
   }
 
-  .picture {
+  .user-picture {
     width: 22px;
     height: 22px;
     border: 1px solid bs.$gray-300;
 
-    &.picture-xs {
+    &.user-picture-xs {
       width: 14px;
       height: 14px;
     }

apps/app/src/client/components/Bookmarks/BookmarkFolderTree.module.scss

@@ -65,12 +65,12 @@ $grw-bookmark-item-padding-left: 35px;
       min-width: 30px;
       height: 50px;
 
-      .picture {
+      .user-picture {
         width: 16px;
         height: 16px;
         vertical-align: text-bottom;
 
-        &.picture-md {
+        &.user-picture-md {
           width: 20px;
           height: 20px;
         }

apps/app/src/client/components/PageComment.tsx

@@ -190,7 +190,7 @@ export const PageComment: FC<PageCommentProps> = memo((props: PageCommentProps):
                           className="btn btn-secondary btn-comment-reply text-start w-100 ms-5"
                           onClick={() => onReplyButtonClickHandler(comment._id)}
                         >
-                          <UserPicture user={currentUser} noLink noTooltip additionalClassName="me-2" />
+                          <UserPicture user={currentUser} noLink noTooltip className="me-2" />
                           <span className="material-symbols-outlined me-1 fs-5 pb-1">reply</span><small>{t('page_comment.reply')}...</small>
                         </button>
                       </NotAvailableIfReadOnlyUserNotAllowedToComment>

apps/app/src/client/components/PageComment/Comment.module.scss

@@ -15,8 +15,8 @@
     }
 
     // user icon
-    .picture {
-      @extend %picture;
+    .user-picture {
+      @extend %user-picture;
     }
 
     // comment section

apps/app/src/client/components/PageComment/Comment.tsx

@@ -151,7 +151,7 @@ export const Comment = (props: CommentProps): JSX.Element => {
         <div id={commentId} className={rootClassName}>
           <div className="page-comment-main bg-comment rounded mb-2">
             <div className="d-flex align-items-center">
-              <UserPicture user={creator} additionalClassName="me-2" />
+              <UserPicture user={creator} className="me-2" />
               <div className="small fw-bold me-3">
                 <Username user={creator} />
               </div>

apps/app/src/client/components/PageComment/CommentEditor.module.scss

@@ -13,8 +13,8 @@
     }
 
     // user icon
-    .picture {
-      @extend %picture;
+    .user-picture {
+      @extend %user-picture;
     }
 
   }

apps/app/src/client/components/PageComment/CommentEditor.tsx

@@ -341,7 +341,7 @@ export const CommentEditorPre = (props: CommentEditorProps): JSX.Element => {
               onClick={() => setIsReadyToUse(true)}
               data-testid="open-comment-editor-button"
             >
-              <UserPicture user={currentUser} noLink noTooltip additionalClassName="me-3" />
+              <UserPicture user={currentUser} noLink noTooltip className="me-3" />
               <span className="material-symbols-outlined me-1 fs-5">add_comment</span>
               <small>{t('page_comment.add_a_comment')}...</small>
             </button>

apps/app/src/client/components/PageComment/_comment-inheritance.scss

@@ -21,7 +21,7 @@
   }
 }
 
-%picture {
+%user-picture {
   width: 1.2em;
   height: 1.2em;
 }

apps/app/src/client/components/PageEditor/EditorNavbar/EditingUserList.tsx

@@ -34,7 +34,7 @@ export const EditingUserList: FC<Props> = ({ userList }) => {
             <UserPicture
               user={user}
               noLink
-              additionalClassName="border border-info"
+              className="border border-info"
             />
           </div>
         ))}

apps/app/src/client/components/PageHistory/Revision.module.scss

@@ -1,5 +1,5 @@
 .revision-history-main :global {
-  img.picture-lg {
+  img.user-picture-lg {
     width: 32px;
     height: 32px;
   }

apps/app/src/client/components/Sidebar/RecentChanges/RecentChangesSubstance.tsx

@@ -108,7 +108,9 @@ const PageItem = memo(({ page, isSmall, onClickTag }: PageItemProps): JSX.Elemen
     <li className={`list-group-item ${styles['list-group-item']} py-2 px-0`}>
       <div className="d-flex w-100">
 
-        <UserPicture user={page.lastUpdateUser} size="md" noTooltip />
+        <div>
+          <UserPicture user={page.lastUpdateUser} size="md" className="d-inline-block" />
+        </div>
 
         <div className="flex-grow-1 ms-2">
           <div className={`row ${isSmall ? 'gy-0' : 'gy-1'}`}>

apps/app/src/client/components/UsersHomepageFooter.module.scss

@@ -24,12 +24,12 @@ $grw-sidebar-content-footer-height: 50px;
         border-radius: 0;
 
         &.grw-bookmark-item-list {
-          .picture {
+          .user-picture {
             width: 16px;
             height: 16px;
             vertical-align: text-bottom;
 
-            &.picture-md {
+            &.user-picture-md {
               width: 20px;
               height: 20px;
             }

apps/app/src/components/User/UserInfo.module.scss

@@ -11,7 +11,7 @@
     color: bs.$secondary;
   }
 
-  .picture {
+  .user-picture {
     width: 120px;
     height: 120px;
   }

apps/app/src/components/User/UserInfo.tsx

@@ -20,7 +20,7 @@ export const UserInfo = (props: UserInfoProps): JSX.Element => {
 
   return (
     <div className={`${styles['grw-users-info']} grw-users-info d-flex align-items-center d-edit-none mb-5 pb-3 border-bottom`} data-testid="grw-users-info">
-      <UserPicture user={author} />
+      <UserPicture user={author} noTooltip noLink />
       <div className="users-meta">
         <h1 className="user-page-name">
           {author.name}

apps/app/src/styles/style-app.scss

@@ -56,32 +56,6 @@
   flex-basis: 0;
 }
 
-.picture {
-  width: 24px;
-  height: 24px;
-
-  // size list
-  &.picture-lg {
-    width: 48px;
-    height: 48px;
-  }
-
-  &.picture-md {
-    width: 24px;
-    height: 24px;
-  }
-
-  &.picture-sm {
-    width: 18px;
-    height: 18px;
-  }
-
-  &.picture-xs {
-    width: 14px;
-    height: 14px;
-  }
-}
-
 .grw-page-control-dropdown-item {
   display: flex !important;
   align-items: center;

packages/ui/scss/molecules/_page_list.scss

@@ -22,12 +22,12 @@
       }
     }
 
-    .picture {
+    .user-picture {
       width: 16px;
       height: 16px;
       vertical-align: text-bottom;
 
-      &.picture-md {
+      &.user-picture-md {
         width: 20px;
         height: 20px;
       }

packages/ui/src/components/UserPicture.module.scss

@@ -0,0 +1,50 @@
+.user-picture {
+  width: 24px;
+  height: 24px;
+
+  &:global {
+    // size list
+    &.user-picture-lg {
+      width: 48px;
+      height: 48px;
+    }
+
+    &.user-picture-md {
+      width: 24px;
+      height: 24px;
+    }
+
+    &.user-picture-sm {
+      width: 18px;
+      height: 18px;
+    }
+
+    &.user-picture-xs {
+      width: 14px;
+      height: 14px;
+    }
+  }
+}
+
+.user-picture-tooltip {
+  --bs-tooltip-margin: 12px 0 0 0;
+
+  &:global {
+    // size list
+    &.user-picture-tooltip-lg {
+      --bs-tooltip-margin: 24px 0 0 0;
+    }
+
+    &.user-picture-tooltip-md {
+      --bs-tooltip-margin: 12px 0 0 0;
+    }
+
+    &.user-picture-tooltip-sm {
+      --bs-tooltip-margin: 9px 0 0 0;
+    }
+
+    &.user-picture-tooltip-xs {
+      --bs-tooltip-margin: 7px 0 0 0;
+    }
+  }
+}

packages/ui/src/components/UserPicture.tsx

@@ -9,13 +9,21 @@ import dynamic from 'next/dynamic';
 import { useRouter } from 'next/router';
 import type { UncontrolledTooltipProps } from 'reactstrap';
 
+import styles from './UserPicture.module.scss';
+
+const moduleClass = styles['user-picture'];
+const moduleTooltipClass = styles['user-picture-tooltip'];
+
 const UncontrolledTooltip = dynamic<UncontrolledTooltipProps>(() => import('reactstrap').then(mod => mod.UncontrolledTooltip), { ssr: false });
 
 const DEFAULT_IMAGE = '/images/icons/user.svg';
 
 
+type UserPitureSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+
 type UserPictureRootProps = {
   user: IUser,
+  size?: UserPitureSize,
   className?: string,
   children?: ReactNode,
 }
@@ -44,14 +52,23 @@ const UserPictureRootWithLink = forwardRef<HTMLSpanElement, UserPictureRootProps
 // wrapper with Tooltip
 const withTooltip = (UserPictureSpanElm: React.ForwardRefExoticComponent<UserPictureRootProps & React.RefAttributes<HTMLSpanElement>>) => {
   return (props: UserPictureRootProps) => {
-    const { user } = props;
+    const { user, size } = props;
+
+    const tooltipClassName = `${moduleTooltipClass} user-picture-tooltip-${size ?? 'md'}`;
 
     const userPictureRef = useRef<HTMLSpanElement>(null);
 
     return (
       <>
         <UserPictureSpanElm ref={userPictureRef} user={user}>{props.children}</UserPictureSpanElm>
-        <UncontrolledTooltip placement="bottom" target={userPictureRef} delay={0} fade={false} show>
+        <UncontrolledTooltip
+          placement="bottom"
+          target={userPictureRef}
+          popperClassName={tooltipClassName}
+          delay={0}
+          fade={false}
+          show
+        >
           @{user.username}<br />
           {user.name}
         </UncontrolledTooltip>
@@ -71,21 +88,21 @@ const isUserObj = (obj: Partial<IUser> | Ref<IUser>): obj is IUser => {
 
 type Props = {
   user?: Partial<IUser> | Ref<IUser> | null,
-  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl',
+  size?: UserPitureSize,
   noLink?: boolean,
   noTooltip?: boolean,
-  additionalClassName?: string
+  className?: string
 };
 
 export const UserPicture = memo((props: Props): JSX.Element => {
 
   const {
-    user, size, noLink, noTooltip, additionalClassName,
+    user, size, noLink, noTooltip, className: additionalClassName,
   } = props;
 
-  const classNames = ['rounded-circle', 'picture'];
+  const classNames = [moduleClass, 'user-picture', 'rounded-circle'];
   if (size != null) {
-    classNames.push(`picture-${size}`);
+    classNames.push(`user-picture-${size}`);
   }
   if (additionalClassName != null) {
     classNames.push(additionalClassName);
@@ -111,7 +128,7 @@ export const UserPicture = memo((props: Props): JSX.Element => {
   const userPictureSrc = user.imageUrlCached ?? DEFAULT_IMAGE;
 
   return (
-    <UserPictureRootElm user={user}>
+    <UserPictureRootElm user={user} size={size}>
       <img
         src={userPictureSrc}
         alt={user.username}