refactoring design

src/client/js/components/RevisionCompare.jsx

@@ -70,40 +70,34 @@ class PageCompare extends React.Component {
 
     return (
       <div id="revision-compare-content">
-        <div>{ t('page_compare_revision.comparing_changes') }</div>
-        <RevisionIdForm />
-        <div className="card card-compare">
-          <div className="card-body">
-
-            <div className="container-fluid px-0">
-              <div className="row">
-                <div className="col-sm">
-                  { fromRev && fromRev._id }<i className="icon-arrow-right-circle mx-1"></i>{ toRev && toRev._id }
-                </div>
-                <div className="col-sm">
-                  <Dropdown className="grw-copy-dropdown" isOpen={this.state.dropdownOpen} toggle={this.toggleDropdown}>
-                    <DropdownToggle
-                      caret
-                      className={'d-block text-muted bg-transparent btn-copy border-0 py-0'}
-                    >
-                      <i className="ti-clipboard"></i>
-                    </DropdownToggle>
-                    <DropdownMenu positionFixed modifiers={{ preventOverflow: { boundariesElement: null } }}>
-                      {/* Page path URL */}
-                      <CopyToClipboard text={pagePathUrl()}>
-                        <DropdownItem className="px-3">
-                          <DropdownItemContents title={t('copy_to_clipboard.Page URL')} contents={pagePathUrl()} />
-                        </DropdownItem>
-                      </CopyToClipboard>
-                      <DropdownItem divider className="my-0"></DropdownItem>
-                    </DropdownMenu>
-                  </Dropdown>
-                </div>
-              </div>
-            </div>
-
-          </div>
+        <div className="float-right mb-3">
+          <Dropdown
+            className="grw-copy-dropdown"
+            isOpen={this.state.dropdownOpen}
+            toggle={this.toggleDropdown}
+          >
+            <DropdownToggle
+              caret
+              className={'d-block text-muted bg-transparent btn-copy border-0 py-0'}
+            >
+              <i className="ti-clipboard"></i>
+            </DropdownToggle>
+            <DropdownMenu positionFixed modifiers={{ preventOverflow: { boundariesElement: null } }}>
+              {/* Page path URL */}
+              <CopyToClipboard text={pagePathUrl()}>
+                <DropdownItem className="px-3">
+                  <DropdownItemContents title={t('copy_to_clipboard.Page URL')} contents={pagePathUrl()} />
+                </DropdownItem>
+              </CopyToClipboard>
+              <DropdownItem divider className="my-0"></DropdownItem>
+            </DropdownMenu>
+          </Dropdown>
         </div>
+
+        <div className="clearfix"></div>
+
+        <RevisionIdForm />
+
         { showDiff &&
           <RevisionDiff
             revisionDiffOpened={ true }

src/client/js/components/RevisionCompare/RevisionIdForm.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
-import AsyncSelect from 'react-select/async';
 import ReactSelect from 'react-select';
 import PropTypes from 'prop-types';
+import { format } from 'date-fns';
 
 import { withUnstatedContainers } from '../UnstatedUtils';
 import RevisionCompareContainer from '../../services/RevisionCompareContainer';
@@ -13,9 +13,10 @@ class RevisionIdForm extends React.Component {
    */
   revisionOptions() {
     const { revisionCompareContainer } = this.props;
+    const timeFormat = 'yyyy/MM/dd HH:mm:ss';
 
     return revisionCompareContainer.state.revisions.map(rev => {
-      return { label: `${new Date(rev.createdAt)} - ${rev._id}`, value: rev._id };
+      return { label: `${format(new Date(rev.createdAt), timeFormat)} - ${rev._id}`, value: rev._id };
     });
   }
 

src/client/js/services/RevisionCompareContainer.js

@@ -92,8 +92,8 @@ export default class RevisionCompareContainer extends Container {
         pageId, shareLinkId, page, limit: 1,
       });
       newRevisions = newRevisions.concat(res.data.docs.map(rev => {
-        const { _id, createdAt } = rev;
-        return { _id, createdAt, body: null };
+        const { _id, createdAt, path } = rev;
+        return { _id, createdAt, path, body: null };
       }));
       page++;
     } while(res.data.hasNextPage && --max > 0);