add checkbox to compactize histories

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

@@ -10,8 +10,14 @@ export default class PageRevisionList extends React.Component {
     super(props);
 
     this.state = {
-      showNodiffRevisions: false,
+      isCompactNodiffRevisions: true,
     };
+
+    this.cbCompactizeChangeHandler = this.cbCompactizeChangeHandler.bind(this);
+  }
+
+  cbCompactizeChangeHandler() {
+    this.setState({ isCompactNodiffRevisions: !this.state.isCompactNodiffRevisions });
   }
 
   /**
@@ -36,7 +42,7 @@ export default class PageRevisionList extends React.Component {
           revision={revision}
           revisionDiffOpened={revisionDiffOpened}
           hasDiff={hasDiff}
-          showNodiffRevisions={this.state.showNodiffRevisions}
+          isCompactNodiffRevisions={this.state.isCompactNodiffRevisions}
           onDiffOpenClicked={this.props.onDiffOpenClicked}
           key={`revision-history-rev-${revisionId}`}
           />
@@ -75,11 +81,21 @@ export default class PageRevisionList extends React.Component {
       return this.renderRow(revision, previousRevision, hasDiff, isContiguousNodiff);
     });
 
-    return (
-      <div className="revision-history-list">
+    const classNames = ['revision-history-list'];
+    if (this.state.isCompactNodiffRevisions) {
+      classNames.push('revision-history-list-compact');
+    }
+
+    return <React.Fragment>
+      <div className='checkbox checkbox-info pull-right'>
+        <input id='cbCompactize' type='checkbox' value={true} checked={this.state.isCompactNodiffRevisions} onChange={this.cbCompactizeChangeHandler}></input>
+        <label htmlFor='cbCompactize'>Compactize histories that have no diffs</label>
+      </div>
+      <div className="clearfix"></div>
+      <div className={classNames.join(' ')}>
         {revisionList}
       </div>
-    );
+    </React.Fragment>;
   }
 }
 

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

@@ -89,11 +89,11 @@ export default class Revision extends React.Component {
   render() {
     const revision = this.props.revision;
 
-    if (this.props.hasDiff || this.props.showNodiffRevisions) {
-      return this.renderFull(revision);
+    if (this.props.isCompactNodiffRevisions && !this.props.hasDiff) {
+      return this.renderSimplifiedNodiff(revision);
     }
     else {
-      return this.renderSimplifiedNodiff(revision);
+      return this.renderFull(revision);
     }
   }
 }
@@ -102,7 +102,7 @@ Revision.propTypes = {
   revision: PropTypes.object,
   revisionDiffOpened: PropTypes.bool.isRequired,
   hasDiff: PropTypes.bool.isRequired,
-  showNodiffRevisions: PropTypes.bool.isRequired,
+  isCompactNodiffRevisions: PropTypes.bool.isRequired,
   onDiffOpenClicked: PropTypes.func.isRequired,
 };
 

src/client/styles/scss/_page.scss

@@ -90,9 +90,6 @@
       &:not(:first-of-type) {
         border-top: 1px solid $border;
       }
-      &.revision-history-outer-contiguous-nodiff {
-        border-top: unset !important; // force unset border
-      }
 
       .revision-history-main {
         .picture-lg {
@@ -130,6 +127,12 @@
       list-style: none;
     }
   }
+  // compacted list
+  .revision-history-list-compact {
+    .revision-history-outer-contiguous-nodiff {
+      border-top: unset !important; // force unset border
+    }
+  }
 
   // adjust
   // this is for diff2html. hide page name from diff view