mirror of
https://github.com/haiwen/seahub.git
synced 2025-09-01 07:01:12 +00:00
update dir shared item api (#4648)
* update dir shared item api return contact_email and avatar_url field * [share dialog] share to user: show avatar & user details popover for shared user Co-authored-by: lian <lian@seafile.com> Co-authored-by: llj <lingjun.li1@gmail.com>
This commit is contained in:
@@ -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 (
|
||||
<tr onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>
|
||||
<td className="name">{item.user_info.nickname}</td>
|
||||
<td className="name">
|
||||
<div className="position-relative">
|
||||
<img src={item.user_info.avatar_url}
|
||||
width="24" alt={item.user_info.nickname}
|
||||
className="rounded-circle mr-2 cursor-pointer"
|
||||
onMouseEnter={this.userAvatarOnMouseEnter}
|
||||
onMouseLeave={this.userAvatarOnMouseLeave} />
|
||||
<span>{item.user_info.nickname}</span>
|
||||
{isUserDetailsPopoverOpen && (
|
||||
<div className="user-details-popover p-4 position-absolute w-100 mt-1">
|
||||
<div className="user-details-main pb-3">
|
||||
<img src={item.user_info.avatar_url} width="40"
|
||||
alt={item.user_info.nickname}
|
||||
className="rounded-circle mr-2" />
|
||||
<span className="user-details-name">{item.user_info.nickname}</span>
|
||||
</div>
|
||||
<dl className="m-0 mt-3 d-flex">
|
||||
<dt className="m-0 mr-3">{gettext('Email')}</dt>
|
||||
<dd className="m-0">{item.user_info.contact_email}</dd>
|
||||
</dl>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<SharePermissionEditor
|
||||
isTextMode={true}
|
||||
|
Reference in New Issue
Block a user