diff --git a/frontend/src/components/dialog/share-to-user.js b/frontend/src/components/dialog/share-to-user.js index 8fab58a362..626b939b6c 100644 --- a/frontend/src/components/dialog/share-to-user.js +++ b/frontend/src/components/dialog/share-to-user.js @@ -9,12 +9,15 @@ import UserSelect from '../user-select'; import SharePermissionEditor from '../select-editor/share-permission-editor'; import '../../css/invitations.css'; +import '../../css/share-to-user.css'; + class UserItem extends React.Component { constructor(props) { super(props); this.state = { - isOperationShow: false + isOperationShow: false, + isUserDetailsPopoverOpen: false }; } @@ -26,11 +29,19 @@ class UserItem extends React.Component { this.setState({isOperationShow: false}); } + userAvatarOnMouseEnter = () => { + this.setState({isUserDetailsPopoverOpen: true}); + } + + userAvatarOnMouseLeave = () => { + this.setState({isUserDetailsPopoverOpen: false}); + } + deleteShareItem = () => { let item = this.props.item; this.props.deleteShareItem(item.user_info.name); } - + onChangeUserPermission = (permission) => { let item = this.props.item; this.props.onChangeUserPermission(item, permission); @@ -39,9 +50,33 @@ class UserItem extends React.Component { render() { let item = this.props.item; let currentPermission = item.is_admin ? 'admin' : item.permission; + const { isUserDetailsPopoverOpen } = this.state; return ( - {item.user_info.nickname} + +
+ {item.user_info.nickname} + {item.user_info.nickname} + {isUserDetailsPopoverOpen && ( +
+
+ {item.user_info.nickname} + {item.user_info.nickname} +
+
+
{gettext('Email')}
+
{item.user_info.contact_email}
+
+
+ )} +
+