modify tag css

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 = () => {
-    this.props.onListFileCancel(this.props.item)
+  onListTaggedFiles = () => {
+    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}
-                      onListFileCancel={this.props.onListFileCancel}
+                    <TagListItem 
+                      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;
-    seafileAPI.listTaggedFiles(repoID, repoTagId).then(res => {
+    let { repoID, currentTag } = this.props;
+    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='30%'>{gettext('Size')}</th>
-                <th width='40%'>{gettext('Last Update')}</th>
+                <th width='50%' className="ellipsis">{gettext('Name')}</th>
+                <th width='25%'>{gettext('Size')}</th>
+                <th width='25%'>{gettext('Last Update')}</th>
               </tr>
             </thead>
             <tbody>