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

* 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

frontend/src/components/share-link-panel/link-item.js

@@ -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) => {
+  clickItem = (e) => {
-    e.preventDefault();
     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.onCopyIconClicked} 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.onDeleteIconClicked} className={`sf2-icon-delete action-icon ${isItemOpVisible ? '' : 'invisible'}`} title={gettext('Delete')} aria-label={gettext('Delete')}></a>
-            <a href="#" role="button" onClick={this.toggleDeleteShareLinkDialog} className={`sf2-icon-delete action-icon ${isItemOpVisible ? '' : 'invisible'}`} title={gettext('Delete')} aria-label={gettext('Delete')}></a>
           </td>
         </tr>
         {this.state.isDeleteShareLinkDialogOpen && (

frontend/src/components/share-link-panel/link-list.js

@@ -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="25%">{gettext('Expiration')}</th>
-                <th width="18%"></th>
+                <th width="14%"></th>
               </tr>
             </thead>
             <tbody>