modify tag css

frontend/src/components/cur-dir-path/dir-tool.js

@@ -80,7 +80,7 @@ class DirTool extends React.Component {
               onListTagCancel={this.onListRepoTagToggle}
               onCreateRepoTag={this.onCreateRepoTagToggle}
               onUpdateRepoTag={this.onUpdateRepoTagToggle}
-              onListFileCancel={this.onListTaggedFileToggle}
+              onListTaggedFiles={this.onListTaggedFileToggle}
             />
           }
           {
@@ -101,7 +101,8 @@ class DirTool extends React.Component {
           {
             this.state.isListTaggedFileShow &&
             <ListTaggedFilesDialog
-              repoTagId={this.state.currentTag.id}
+              repoID={this.props.repoID}
+              currentTag={this.state.currentTag}
               toggleCancel={this.onListTaggedFileToggle}
             />
           }

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

@@ -9,7 +9,7 @@ import '../../css/repo-tag.css';
 const tagListItemPropTypes = {
   item: PropTypes.object.isRequired,
   onTagUpdate: PropTypes.func.isRequired,
-  onListFileCancel: PropTypes.func.isRequired,
+  onListTaggedFiles: PropTypes.func.isRequired,
 };
 
 class TagListItem extends React.Component {
@@ -18,8 +18,8 @@ class TagListItem extends React.Component {
     this.props.onTagUpdate(this.props.item);
   }
 
-  onListFileCancel = () => {
+  onListTaggedFiles = () => {
-    this.props.onListFileCancel(this.props.item)
+    this.props.onListTaggedFiles(this.props.item)
   }
 
   render() {
@@ -28,7 +28,9 @@ class TagListItem extends React.Component {
       <li className="tag-list-item">
         <span className={`tag-demo bg-${color}`}>
           <span className="tag-name">{this.props.item.name}</span>
-          <span className="tag-files" onClick={this.onListFileCancel}>{this.props.item.fileCount}{' '}{gettext('files')}</span>
+          <span className="tag-files" onClick={this.onListTaggedFiles}>
+            {this.props.item.fileCount}{' '}{gettext('files')}
+          </span>
         </span>
         <i className="tag-edit fa fa-pencil" onClick={this.onTagUpdate}></i>
       </li>
@@ -43,7 +45,7 @@ const listTagPropTypes = {
   onListTagCancel: PropTypes.func.isRequired,
   onCreateRepoTag: PropTypes.func.isRequired,
   onUpdateRepoTag: PropTypes.func.isRequired,
-  onListFileCancel: PropTypes.func.isRequired,
+  onListTaggedFiles: PropTypes.func.isRequired,
 };
 
 class ListTagDialog extends React.Component {
@@ -78,23 +80,25 @@ class ListTagDialog extends React.Component {
         <Modal isOpen={true} toggle={this.toggle}>
           <ModalHeader toggle={this.toggle}>{gettext('Tags')}</ModalHeader>
           <ModalBody>
-            {
+            {this.state.repotagList.length === 0 && (
-              this.state.repotagList.length === 0 && 
               <div className="tag-list tag-list-container">
                 {gettext('Click new tag button to create tags.')}
               </div>
-            }
+            )}
-            { this.state.repotagList.length > 0 &&
+            {this.state.repotagList.length > 0 && (
               <ul className="tag-list tag-list-container">
                 {this.state.repotagList.map((repoTag, index) => {
                   return (
-                    <TagListItem key={index} item={repoTag} onTagUpdate={this.props.onUpdateRepoTag}
+                    <TagListItem 
-                      onListFileCancel={this.props.onListFileCancel}
+                      key={index} 
+                      item={repoTag} 
+                      onTagUpdate={this.props.onUpdateRepoTag}
+                      onListTaggedFiles={this.props.onListTaggedFiles}
                     />
                   );
                 })}
               </ul>
-            }
+            )}
           </ModalBody>
           <ModalFooter>
             <Button color="primary" onClick={this.props.onCreateRepoTag}>{gettext('New Tag')}</Button>

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

@@ -1,13 +1,14 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
-import { gettext, repoID } from '../../utils/constants';
+import { gettext } from '../../utils/constants';
 import { seafileAPI } from '../../utils/seafile-api';
 import moment from 'moment';
 import { Utils } from '../../utils/utils';
 
 const propTypes = {
-  repoTagId: PropTypes.number.isRequired,
+  repoID: PropTypes.string.isRequired,
+  currentTag: PropTypes.object.isRequired,
   toggleCancel: PropTypes.func.isRequired,
 };
 
@@ -25,8 +26,8 @@ class ListTaggedFilesDialog extends React.Component {
   }
 
   getTaggedFiles = () => {
-    let repoTagId = this.props.repoTagId;
+    let { repoID, currentTag } = this.props;
-    seafileAPI.listTaggedFiles(repoID, repoTagId).then(res => {
+    seafileAPI.listTaggedFiles(repoID, currentTag.id).then(res => {
       let taggedFileList = [];
       res.data.tagged_files !== undefined &&
       res.data.tagged_files.forEach(file => {
@@ -50,11 +51,11 @@ class ListTaggedFilesDialog extends React.Component {
         <ModalHeader toggle={this.toggle}>{gettext('Tagged Files')}</ModalHeader>
         <ModalBody>
           <table>
-            <thead>
+            <thead className="table-thread-hidden">
               <tr>
-                <th width='30%'>{gettext('Name')}</th>
+                <th width='50%' className="ellipsis">{gettext('Name')}</th>
-                <th width='30%'>{gettext('Size')}</th>
+                <th width='25%'>{gettext('Size')}</th>
-                <th width='40%'>{gettext('Last Update')}</th>
+                <th width='25%'>{gettext('Last Update')}</th>
               </tr>
             </thead>
             <tbody>

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

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

frontend/src/css/groups.css

@@ -17,24 +17,13 @@
   font-size: 1rem;
   font-weight: normal;
   padding: 0.25rem; 
-  border-bottom: 1px solid #e6e6e6;
   margin: 0.75rem 0 0; 
 }
 
-.group-list-panel thead th { /* overwrite bootstrap styles */
-  padding: 0;
-  font-size: 0;
-  border: 0;
-}
-
-.cur-view-content-groups td { /* overwrite bootstrap styles */
-  border-top:0;
-}
-
-
 .group-list-panel .group-item-empty-tip {
   color: #a4a4a4;
   text-align: center;
   padding: 4px 0;
+  border-top: 1px solid #e6e6e6;
   border-bottom: 1px solid #e5e5e5;
 }

frontend/src/css/repo-tag.css

@@ -34,7 +34,7 @@
 .tag-demo .tag-files {
   margin-right: 0.5rem;
   cursor: pointer;
-  text-decoration: underline;
+  border-bottom: 1px solid;
 }
 
 .tag-list-item .tag-edit {

media/css/seahub_react.css

@@ -186,6 +186,16 @@ ul,ol,li {
     color: #fff;
 }
 
+.table-thread-hidden {
+    border-bottom: 1px solid #e6e6e6;
+}
+
+.table-thread-hidden th {
+    padding: 0;
+    font-size: 0;
+    border: 0;
+}
+
 /* UI Widget */
 
 /**** caret ****/