Improve code for tables (#2730)

frontend/src/components/dialog/list-taggedfiles-dialog.js

@@ -51,7 +51,7 @@ class ListTaggedFilesDialog extends React.Component {
         </ModalHeader>
         <ModalBody className="dialog-list-container">
           <table>
-            <thead className="table-thread-hidden">
+            <thead className="table-thead-hidden">
               <tr>
                 <th width='50%' className="ellipsis">{gettext('Name')}</th>
                 <th width='25%'>{gettext('Size')}</th>

frontend/src/components/dialog/share-dialog.js

@@ -109,7 +109,7 @@ class ShareDialog extends React.Component {
       <div>
         <Modal isOpen={true} style={{maxWidth: '720px'}} className="share-dialog">
           <ModalHeader toggle={this.props.toggleDialog}>{gettext('Share')} <span className="sf-font" title={itemName}>{itemName}</span></ModalHeader>
-          <ModalBody className="share-dialog-content">
+          <ModalBody className="dialog-list-container share-dialog-content">
             {(itemType === 'library' || itemType === 'dir') && this.renderDirContent()}
             {itemType === 'file' && this.renderFileContent()}
           </ModalBody>

frontend/src/components/dialog/share-to-group.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { Button } from 'reactstrap';
 import Select from 'react-select';
@@ -246,13 +246,16 @@ class ShareToGroup extends React.Component {
 
   render() {
     return (
+      <Fragment>
         <table>
           <thead>
             <tr>
-            <th style={{'width': '40%'}}>{gettext('Group')}</th>
+              <th width="40%">{gettext('Group')}</th>
-            <th style={{'width': '40%'}}>{gettext('Permission')}</th>
+              <th width="40%">{gettext('Permission')}</th>
-            <th></th>
+              <th width="20%"></th>
             </tr>
+          </thead>
+          <tbody>
             <tr>
               <td>
                 <Select
@@ -288,6 +291,16 @@ class ShareToGroup extends React.Component {
                 );
               })                                                
             }
+          </tbody>
+        </table>
+        <div className="share-list-container">
+          <table className="table-thead-hidden">
+            <thead>
+              <tr>
+                <th width="40%">{gettext('Group')}</th>
+                <th width="40%">{gettext('Permission')}</th>
+                <th width="20%"></th>
+              </tr>
             </thead>
             <GroupList 
               items={this.state.sharedItems}
@@ -296,6 +309,8 @@ class ShareToGroup extends React.Component {
               onChangeUserPermission={this.onChangeUserPermission}
             />
           </table>
+        </div>
+      </Fragment>
     );
   }
 }

frontend/src/components/dialog/share-to-user.js

@@ -263,13 +263,16 @@ class ShareToUser extends React.Component {
   render() {
     let { sharedItems } = this.state;
     return (
+      <Fragment>
         <table>
           <thead>
             <tr>
-            <th style={{'width': '40%'}}>{gettext('User')}</th>
+              <th width="40%">{gettext('User')}</th>
-            <th style={{'width': '40%'}}>{gettext('Permission')}</th>
+              <th width="40%">{gettext('Permission')}</th>
-            <th></th>
+              <th width="20%"></th>
             </tr>
+          </thead>
+          <tbody>
             <tr>
               <td>
                 <AsyncSelect
@@ -313,6 +316,16 @@ class ShareToUser extends React.Component {
                 );
               })
             }
+          </tbody>
+        </table>
+        <div className="share-list-container">
+          <table className="table-thead-hidden">
+            <thead>
+              <tr>
+                <th width="40%">{gettext('User')}</th>
+                <th width="40%">{gettext('Permission')}</th>
+                <th width="20%"></th>
+              </tr>
             </thead>
             <UserList 
               items={sharedItems}
@@ -321,6 +334,8 @@ class ShareToUser extends React.Component {
               onChangeUserPermission={this.onChangeUserPermission}
             />
           </table>
+        </div>
+      </Fragment>
     );
   }
 }

frontend/src/components/dirent-detail/detail-list-view.js

@@ -111,7 +111,7 @@ class DetailListView extends React.Component {
                       );
                     })}
                   </ul>
-                  <i className='fa fa-pencil tag-edit-icon' onClick={this.onEditFileTagToggle}></i>
+                  <i className='fa fa-pencil attr-action-icon' onClick={this.onEditFileTagToggle}></i>
                 </td>
               </tr>
               <tr className="file-related-files">

frontend/src/components/permission-editor.js

@@ -80,8 +80,7 @@ class PermissionEditor extends React.Component {
             {this.props.isEditIconShow && (
               <span 
                 title={gettext('Edit')} 
-                style={{fontSize: '0.875rem', marginLeft: '0.5rem'}} 
+                className="fa fa-pencil attr-action-icon" 
-                className="fa fa-pencil action-icon" 
                 onClick={this.onEidtPermission}>
               </span>
             )}

frontend/src/components/shared-repo-list-view/shared-repo-list-view.js

@@ -52,7 +52,7 @@ class SharedRepoListView extends React.Component {
     let isShowTableThread = this.props.isShowTableThread !== undefined ? this.props.isShowTableThread : true;
     return (
       <table>
-        <thead className={isShowTableThread ? '' : 'table-thread-hidden'}>
+        <thead className={isShowTableThread ? '' : 'table-thead-hidden'}>
           <tr>
             <th width="4%"><span className="sr-only">{gettext("Library Type")}</span></th>
             <th width="40%">{gettext("Name")}

frontend/src/css/repo-tag.css

@@ -70,16 +70,6 @@
   right: 0.5rem;
 }
 
-.tag-edit-icon {
-  padding: 0 0.5rem;
-  color: #888;
-  cursor: pointer;
-}
-
-.tag-edit-icon:hover {
-  color: #333;
-}
-
 .file-tag-item {
   margin: 0.25rem 0;
   padding: 0 0.5rem;

frontend/src/css/share-link-dialog.css

@@ -3,6 +3,7 @@
     min-height: 15rem;
     display: flex;
     flex-direction: row;
+    overflow: hidden;
 }
 
 .share-dialog-content .share-dialog-side {
@@ -21,6 +22,11 @@
     flex: 1;
 }
 
+.share-list-container {
+    max-height: 15rem;
+    overflow: auto;
+}
+
 .share-dialog-content label {
     padding: 0.5rem 0 0.25rem;
 }

frontend/src/pages/shared-libs/shared-libs.js

@@ -196,7 +196,7 @@ class Item extends Component {
 
     let iconVisibility = this.state.showOpIcon ? '' : ' invisible';
     let shareIconClassName = 'op-icon sf2-icon-share repo-share-btn' + iconVisibility; 
-    let leaveShareIconClassName = 'op-icon sf2-icon-delete' + iconVisibility;
+    let leaveShareIconClassName = 'op-icon sf2-icon-x3' + iconVisibility;
 
     const desktopItem = (
       <tr onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut}>

media/css/seahub_react.css

@@ -150,6 +150,7 @@ ul,ol,li {
 }
 
 .sf-dropdown-toggle {
+    margin-left: 0.5rem;
     vertical-align: middle;
     font-style: normal;
     font-size: 0.85rem;
@@ -166,8 +167,9 @@ ul,ol,li {
     user-select: none;
 }
 
-.dialog-list-container { /*for content is list dialog*/
+.dialog-list-container { /* for dialog containing list */
-    height: 20rem;
+    min-height: 15rem;
+    max-height: 35rem;
     overflow: auto;
 }
 
@@ -297,8 +299,9 @@ ul,ol,li {
 
 /** op-icon **/
 .op-icon,
-.action-icon {
+.action-icon,
-    margin-right: 0.5rem;
+.attr-action-icon {
+    margin-left: 0.5rem;
     font-size: 1.25rem;
     font-style: normal;
     line-height: 1;
@@ -316,16 +319,24 @@ ul,ol,li {
     border-bottom: 0.125rem solid #f89a68;
 }
 
-.action-icon {
+.action-icon,
+.attr-action-icon {
+    margin-right: 0.25rem;
     color:#888;
 }
 
 .action-icon:focus,
-.action-icon:hover {
+.action-icon:hover,
+.attr-action-icon:focus,
+.attr-action-icon:hover {
     color: #333;
     text-decoration: none;
 }
 
+.attr-action-icon {
+    font-size: 0.875rem;
+}
+
 /** Account info **/
 #account {
     position:relative;
@@ -837,7 +848,12 @@ table td img {
     height: 1.5rem;
 }
 
-.table-thread-hidden th {   /* hide table th */
+.table-thead-hidden thead tr {
+    height: 0;
+    border: 0;
+}
+
+.table-thead-hidden th {   /* hide table th */
     padding: 0;
     border: 0;
     font-size: 0;