haiwen/seahub
1
0
Fork 0
mirror of https://github.com/haiwen/seahub.git synced 2025-09-19 18:29:23 +00:00
Code Issues Releases Wiki Activity

[share dialog] 'share link' panel: redesigned the link items (#5598)

Browse Source 
* removed the underline for the link when hover on it
* removed the 'edit' icon
* show 'pointer' cursor for the whole link item
* click the link item to visit the link details(into the 'details'
panel')
* adjusted width of the columns
This commit is contained in:
llj
2023-08-22 00:03:32 +08:00
committed by GitHub
parent c93a654c1c
commit c056c9d01e
2 changed files with 32 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
frontend/src/components/share-link-panel/link-item.js
View File

@@ -43,22 +43,32 @@ class LinkItem extends React.Component {
return link.slice(0, 9) + '...' + link.slice(length-5);
}
onDeleteIconClicked = (e) => {
e.preventDefault();
e.stopPropagation();
this.toggleDeleteShareLinkDialog();
}
toggleDeleteShareLinkDialog = () => {
this.setState({isDeleteShareLinkDialogOpen: !this.state.isDeleteShareLinkDialogOpen});
}
copyLink = (e) => {
onCopyIconClicked = (e) => {
e.preventDefault();
e.stopPropagation();
const { item } = this.props;
copy(item.link);
toaster.success(gettext('Share link is copied to the clipboard.'));
}
viewDetails = (e) => {
e.preventDefault();
clickItem = (e) => {
this.props.showLinkDetails(this.props.item);
}
onCheckboxClicked = (e) => {
e.stopPropagation();
}
toggleSelectLink = (e) => {
const { item } = this.props;
this.props.toggleSelectLink(item, e.target.checked);
@@ -76,12 +86,23 @@ class LinkItem extends React.Component {
const currentPermission = Utils.getShareLinkPermissionStr(permissions);
return (
<Fragment>
<tr onMouseOver={this.onMouseOver} onMouseOut={this.onMouseOut} className={isSelected ? 'tr-highlight' : ''}>
<tr
onClick={this.clickItem}
onMouseOver={this.onMouseOver}
onMouseOut={this.onMouseOut}
className={`cursor-pointer ${isSelected ? 'tr-highlight' : ''}`}
>
<td className="text-center">
<input type="checkbox" checked={isSelected} onChange={this.toggleSelectLink} className="vam" />
<input
type="checkbox"
checked={isSelected}
className="vam"
onClick={this.onCheckboxClicked}
onChange={this.toggleSelectLink}
/>
</td>
<td>
<a href="#" onClick={this.viewDetails} className="text-inherit">{this.cutLink(link)}</a>
{this.cutLink(link)}
</td>
<td>
{(isPro && permissions) && (
@@ -98,9 +119,8 @@ class LinkItem extends React.Component {
{expire_date ? moment(expire_date).format('YYYY-MM-DD HH:mm') : '--'}
</td>
<td>
<a href="#" role="button" onClick={this.copyLink} className={`sf2-icon-copy action-icon ${isItemOpVisible ? '' : 'invisible'}`} title={gettext('Copy')} aria-label={gettext('Copy')}></a>
<a href="#" role="button" onClick={this.viewDetails} className={`fa fa-pencil-alt attr-action-icon ${isItemOpVisible ? '' : 'invisible'}`} title={gettext('Edit')} aria-label={gettext('Edit')}></a>
<a href="#" role="button" onClick={this.toggleDeleteShareLinkDialog} className={`sf2-icon-delete action-icon ${isItemOpVisible ? '' : 'invisible'}`} title={gettext('Delete')} aria-label={gettext('Delete')}></a>
<a href="#" role="button" onClick={this.onCopyIconClicked} className={`sf2-icon-copy action-icon ${isItemOpVisible ? '' : 'invisible'}`} title={gettext('Copy')} aria-label={gettext('Copy')}></a>
<a href="#" role="button" onClick={this.onDeleteIconClicked} className={`sf2-icon-delete action-icon ${isItemOpVisible ? '' : 'invisible'}`} title={gettext('Delete')} aria-label={gettext('Delete')}></a>
</td>
</tr>
{this.state.isDeleteShareLinkDialogOpen && (

6
frontend/src/components/share-link-panel/link-list.js
View File

@@ -80,10 +80,10 @@ class LinkList extends React.Component {
<th width="5%" className="text-center">
<input type="checkbox" checked={isAllLinksSelected} className="vam" onChange={this.toggleSelectAllLinks} />
</th>
<th width="23%">{gettext('Link')}</th>
<th width="26%">{gettext('Link')}</th>
<th width="30%">{gettext('Permission')}</th>
<th width="24%">{gettext('Expiration')}</th>
<th width="18%"></th>
<th width="25%">{gettext('Expiration')}</th>
<th width="14%"></th>
</tr>
</thead>
<tbody>