correspond design spec

resource/locales/ja_JP/translation.json

@@ -325,6 +325,7 @@
     "user_not_admin": "権限のあるユーザーのみが完全削除できます"
   },
   "page_history": {
+    "revision_list": "更新履歴",
     "comparing_versions": "比較",
     "comparing_with_latest": "常に最新バージョンと比較する",
     "select_as_a_comparing_source": "このバージョンを比較ソースにする",

src/client/js/components/PageHistory.jsx

@@ -68,7 +68,7 @@ function PageHistory(props) {
   }
 
   return (
-    <div>
+    <div className="revision-history">
       <PageRevisionList
         pageHistoryContainer={pageHistoryContainer}
         revisions={revisions}
@@ -77,7 +77,6 @@ function PageHistory(props) {
         onDiffOpenClicked={onDiffOpenClicked}
       />
       {pager()}
-
       <RevisionCompare />
     </div>
   );

src/client/js/components/PageHistory/PageRevisionList.jsx

@@ -42,7 +42,7 @@ class PageRevisionList extends React.Component {
 
     return (
       <div className={classNames.join(' ')} key={`revision-history-${revisionId}`}>
-        <div className="d-flex justify-content-between" key={`revision-history-top-${revisionId}`}>
+        <div className="d-flex" key={`revision-history-top-${revisionId}`}>
           <Revision
             t={this.props.t}
             revision={revision}
@@ -52,9 +52,10 @@ class PageRevisionList extends React.Component {
             onDiffOpenClicked={this.props.onDiffOpenClicked}
             key={`revision-history-rev-${revisionId}`}
           />
-          <div className="d-flex form-group align-items-center ml-auto">
+          <div className="align-self-center ml-auto">
             <RevisionCompareTargetSelector
               revision={revision}
+              hasDiff={hasDiff}
               key={`revision-compare-target-selector-${revisionId}`}
             />
           </div>
@@ -100,13 +101,7 @@ class PageRevisionList extends React.Component {
 
       hasDiffPrev = hasDiff;
 
-      const row = this.renderRow(revision, previousRevision, hasDiff, isContiguousNodiff);
-      return (
-        <React.Fragment>
-          {row}
-          <hr />
-        </React.Fragment>
-      );
+      return this.renderRow(revision, previousRevision, hasDiff, isContiguousNodiff);
     });
 
     const classNames = ['revision-history-list'];
@@ -116,19 +111,28 @@ class PageRevisionList extends React.Component {
 
     return (
       <React.Fragment>
-        <div className="custom-control custom-checkbox custom-checkbox-info float-right">
-          <input
-            type="checkbox"
-            id="cbCompactize"
-            className="custom-control-input"
-            checked={this.state.isCompactNodiffRevisions}
-            onChange={this.cbCompactizeChangeHandler}
-          />
-          <label className="custom-control-label" htmlFor="cbCompactize">{ t('Shrink versions that have no diffs') }</label>
+        <div className="d-flex">
+          <h3>{t('page_history.revision_list')}</h3>
+          <div className="custom-control custom-checkbox custom-checkbox-info ml-auto">
+            <input
+              type="checkbox"
+              id="cbCompactize"
+              className="custom-control-input"
+              checked={this.state.isCompactNodiffRevisions}
+              onChange={this.cbCompactizeChangeHandler}
+            />
+            <label className="custom-control-label" htmlFor="cbCompactize">{ t('Shrink versions that have no diffs') }</label>
+          </div>
         </div>
-        <div className="clearfix"></div>
+        <hr />
         <div className={classNames.join(' ')}>
-          {revisionList}
+          <div class="d-flex">
+            <div className="mr-auto">バージョン</div>
+            <div>ソース<span className="ml-2 mr-2">/</span>ターゲット</div>
+          </div>
+          <div className="revision-history-list-body">
+            {revisionList}
+          </div>
         </div>
       </React.Fragment>
     );

src/client/js/components/PageHistory/RevisionCompareTargetSelector.jsx

@@ -8,9 +8,13 @@ import RevisionCompareContainer from '../../services/RevisionCompareContainer';
 
 const RevisionCompareTargetSelector = (props) => {
 
-  const { t, revision, revisionCompareContainer } = props;
+  const { t, revision, hasDiff, revisionCompareContainer } = props;
   const { fromRevision, toRevision } = revisionCompareContainer.state;
 
+  if (!hasDiff) {
+    return <></>;
+  }
+
   return (
     <React.Fragment>
       <div className="custom-control custom-radio custom-control-inline">
@@ -50,6 +54,7 @@ RevisionCompareTargetSelector.propTypes = {
   revisionCompareContainer: PropTypes.instanceOf(RevisionCompareContainer).isRequired,
 
   revision: PropTypes.object,
+  hasDiff: PropTypes.bool.isRequired,
 };
 
 export default RevisionCompareTargetSelectorWrapper;

src/client/js/components/RevisionCompare.jsx

@@ -54,7 +54,7 @@ const RevisionCompare = (props) => {
   const showDiff = (fromRev && toRev);
 
   return (
-    <React.Fragment>
+    <div className="revision-compare">
       <div className="d-flex">
         <h3 className="align-self-center mb-0">{t('page_history.comparing_versions')}</h3>
         <div className="align-self-center ml-3">
@@ -94,16 +94,18 @@ const RevisionCompare = (props) => {
         </Dropdown>
       </div>
 
-      <div className="clearfix"></div>
+      <hr />
 
-      { showDiff && (
-        <RevisionDiff
-          revisionDiffOpened
-          previousRevision={fromRev}
-          currentRevision={toRev}
-        />
-      )}
-    </React.Fragment>
+      <div className="revision-compare-outer">
+        { showDiff && (
+          <RevisionDiff
+            revisionDiffOpened
+            previousRevision={fromRev}
+            currentRevision={toRev}
+          />
+        )}
+      </div>
+    </div>
   );
 };
 

src/client/styles/scss/_page.scss

@@ -3,6 +3,12 @@
 
 .revision-history {
   .revision-history-list {
+    .revision-history-list-body {
+      min-height: 200px;
+      max-height: calc(100vh - 100px - 550px);
+      overflow: auto;
+    }
+
     .revision-history-outer {
       // add border-top except of first element
       &:not(:first-of-type) {
@@ -67,6 +73,14 @@
   .d2h-diff-tbody {
     background-color: white;
   }
+
+  .revision-compare {
+    .revision-compare-outer {
+      min-height: 100px;
+      max-height: 250px;
+      overflow: auto;
+    }
+  }
 }
 
 /**