fix: Fix role desc expand in invite member modal

kubesphere · Feb 19, 2020 · 62a6a56 · 62a6a56
1 parent a3a2026
commit 62a6a56
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 3 deletions.
diff --git a/src/components/Base/Avatar/index.jsx b/src/components/Base/Avatar/index.jsx
@@ -37,13 +37,24 @@ export default class Avatar extends React.Component {
   }
 
   render() {
-    const { avatar, icon, iconSize, title, desc, to, noLink } = this.props
+    const {
+      className,
+      avatar,
+      icon,
+      iconSize,
+      title,
+      desc,
+      to,
+      noLink,
+    } = this.props
 
     const titleComponent = to ? <Link to={to}>{title}</Link> : title
 
     return (
       <div
-        className={classNames(styles.wrapper, { [styles.link]: noLink || to })}
+        className={classNames(styles.wrapper, className, {
+          [styles.link]: noLink || to,
+        })}
       >
         {avatar ? (
           <img
@@ -56,7 +67,9 @@ export default class Avatar extends React.Component {
         )}
         <div className={styles.text}>
           <div className={styles.title}>{titleComponent}</div>
-          <div className={styles.description}>{desc}</div>
+          <div className={classNames(styles.description, 'ks-avatar-desc')}>
+            {desc}
+          </div>
         </div>
       </div>
     )

diff --git a/src/components/Modals/InviteMember/User.jsx b/src/components/Modals/InviteMember/User.jsx
@@ -51,6 +51,7 @@ export default class UserItem extends React.Component {
           {roles.map(role => (
             <Menu.MenuItem key={role.name}>
               <Avatar
+                className={styles.avatar}
                 icon="role"
                 iconSize={40}
                 title={role.name}

diff --git a/src/components/Modals/InviteMember/index.scss b/src/components/Modals/InviteMember/index.scss
@@ -80,3 +80,12 @@
     font-weight: 600;
   }
 }
+
+
+.avatar {
+  &:hover {
+    :global(.ks-avatar-desc) {
+      white-space: normal;
+    }
+  }
+}