adjust style

frontend/src/components/logo.js

@@ -3,7 +3,8 @@ import PropTypes from 'prop-types';
 import { siteRoot, mediaUrl, logoPath, logoWidth, logoHeight, siteTitle } from '../utils/constants'; 
 
 const propTypes = {
-  onCloseSidePanel: PropTypes.func.isRequired,
+  onCloseSidePanel: PropTypes.func,
+  showCloseSidePanelIcon: PropTypes.bool,
 };
 
 class Logo extends React.Component {
@@ -18,13 +19,15 @@ class Logo extends React.Component {
         <a href={siteRoot} id="logo">
           <img src={mediaUrl + logoPath} height={logoHeight} width={logoWidth} title={siteTitle} alt="logo" />
         </a>
-        <a 
+        {this.props.showCloseSidePanelIcon &&
-          className="sf2-icon-x1 sf-popover-close side-panel-close action-icon d-md-none"
+          <a 
-          onClick={this.closeSide} 
+            className="sf2-icon-x1 sf-popover-close side-panel-close action-icon d-md-none"
-          title="Close" 
+            onClick={this.closeSide} 
-          aria-label="Close" 
+            title="Close" 
-        >
+            aria-label="Close" 
-        </a>
+          >
+          </a>
+        }
       </div>
     );
   }

frontend/src/css/file-history-old.css

@@ -1,4 +1,3 @@
-@media (min-width: 768px){
   .old-history-header {
     display: flex;
     justify-content: space-between;
@@ -10,20 +9,18 @@
   }
 
   .old-history-main {
-    padding-top: 16px;
+    padding: 16px 10% 0;
-    margin: 0 8.333333%;
     display: inline !important;
     overflow: auto;
     position: relative;
     min-height: 1px;
-    padding-right: .9375rem;
-    padding-left: .9375rem;
   }
 
   .old-history-main .go-back {
     font-size: 25px;
     color: #ccc;
     float: left;
+    margin-left: -20px;
   }
 
   .old-history-main .go-back:hover {
@@ -79,4 +76,16 @@
     text-decoration: none;
     font-weight: bold;
   }
-}
+
+  .old-history-more-operation i {
+    color: #999;
+    cursor: pointer;
+  }
+
+  .old-history-more-operation a:hover {
+    text-decoration: none;
+  }
+
+  .old-history-more-operation i:hover {
+    color: #666;
+  }

frontend/src/file-history-old.js

@@ -186,8 +186,6 @@ class FileHistory extends React.Component {
     }
   }
 
-  onCloseSidePanel = () => {}
-
   onSearchedClick = (selectedItem) => {
     if (selectedItem.is_dir === true) {
       let url = siteRoot + 'library/' + selectedItem.repo_id + '/' + selectedItem.repo_name + selectedItem.path;
@@ -205,7 +203,7 @@ class FileHistory extends React.Component {
       <Fragment>
         <div id="header" className="old-history-header">
           <div className="logo">
-            <Logo onCloseSidePanel={this.onCloseSidePanel} />
+            <Logo showCloseSidePanelIcon={false}/>
           </div>
           <div className='toolbar'>
             <CommonToolbar onSearchedClick={this.onSearchedClick} />
@@ -226,10 +224,10 @@ class FileHistory extends React.Component {
                 <table className="commit-list">
                   <thead>
                     <tr>
-                      <th width="25%" >{gettext('Time')}</th>
+                      <th width="40%" >{gettext('Time')}</th>
-                      <th width="25%" >{gettext('Modifier')}</th>
+                      <th width="30%" >{gettext('Modifier')}</th>
-                      <th width="20%" >{gettext('Size')}</th>
+                      <th width="25%" >{gettext('Size')}</th>
-                      <th width="30%" >{gettext('Operation')}</th>
+                      <th width="5%" ></th>
                     </tr>
                   </thead>
                   <tbody>

frontend/src/pages/file-history-old/history-item.js

@@ -4,6 +4,7 @@ import moment from 'moment';
 import { Utils } from '../../utils/utils';
 import { gettext, siteRoot, filePath, historyRepoID } from '../../utils/constants';
 import URLDecorator from '../../utils/url-decorator';
+import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';
 
 moment.locale(window.app.config.lang);
 
@@ -49,24 +50,27 @@ class HistoryItem extends React.Component {
     let diffUrl = `${siteRoot}repo/text_diff/${historyRepoID}/?commit=${item.commit_id}&p=${filePath}`;
     return (
       <Fragment>
-        <tr onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>
+        <tr onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave} className={this.state.active ? 'tr-highlight' : ''}>
           <td>
             <time datetime={item.time} is="relative-time" title={moment(item.ctime).format('llll')}>{moment(item.ctime).fromNow()}</time>
             {this.props.index === 0 && gettext('(current version)')}
           </td>
           <td>
-            <img className="avatar" src={item.creator_avatar_url}></img>{' '}
+            <img className="avatar" src={item.creator_avatar_url} alt=''></img>{' '}
             <a href={userProfileURL} target='_blank' className="username">{item.creator_name}</a>
           </td>
           <td>{Utils.bytesToSize(item.size)}</td>
           <td>
             {this.state.active &&
-              <span className="attr-action-icon">
+              <MoreMenu
-                {this.props.index !== 0 && <a href="#" onClick={this.onItemRestore}>{gettext('Restore')}</a>}
+                index={this.props.index}
-                {this.props.canDownload && <a href={downloadUrl}>{gettext('Download')}</a>}
+                downloadUrl={downloadUrl}
-                {this.props.canCompare && <a href={viewUrl}>{gettext('View')}</a>}
+                viewUrl={viewUrl}
-                <a href={diffUrl}>{gettext('Diff')}</a>
+                diffUrl={diffUrl}
-              </span>
+                onItemRestore={this.onItemRestore}
+                canDownload={this.props.canDownload}
+                canCompare={this.props.canCompare}
+              />
             }
           </td>
         </tr>
@@ -77,4 +81,53 @@ class HistoryItem extends React.Component {
 
 HistoryItem.propTypes = propTypes;
 
+
+const MoreMenuPropTypes = {
+  index: PropTypes.number.isRequired,
+  downloadUrl: PropTypes.string.isRequired,
+  viewUrl: PropTypes.string.isRequired,
+  diffUrl: PropTypes.string.isRequired,
+  onItemRestore: PropTypes.func.isRequired,
+  canDownload: PropTypes.bool.isRequired,
+  canCompare: PropTypes.bool.isRequired,
+};
+
+class MoreMenu extends React.PureComponent {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      dropdownOpen: false
+    };
+  }
+
+  dropdownToggle = () => {
+    this.setState({ dropdownOpen: !this.state.dropdownOpen });
+  }
+
+  render() {
+    const { index, downloadUrl, viewUrl, diffUrl, onItemRestore, canCompare, canDownload } = this.props;
+    return (
+      <Dropdown isOpen={this.state.dropdownOpen} toggle={this.dropdownToggle} direction="down" className="mx-1 old-history-more-operation">
+        <DropdownToggle
+          tag='i'
+          className='fa fa-ellipsis-v'
+          title={gettext('More Operations')}
+          data-toggle="dropdown" 
+          aria-expanded={this.state.dropdownOpen}
+        >
+        </DropdownToggle>
+        <DropdownMenu className="drop-list" right={true}>
+          {index !== 0 && <a href="#" onClick={onItemRestore}><DropdownItem>{gettext('Restore')}</DropdownItem></a>}
+          {canDownload && <a href={downloadUrl}><DropdownItem>{gettext('Download')}</DropdownItem></a>}
+          <a href={viewUrl}><DropdownItem>{gettext('View')}</DropdownItem></a>
+          {canCompare && <a href={diffUrl}><DropdownItem>{gettext('Diff')}</DropdownItem></a>}
+        </DropdownMenu>
+      </Dropdown>
+    );
+  }
+}
+
+MoreMenu.propTypes = MoreMenuPropTypes;
+
 export default HistoryItem;