compact revision histories that has no diff

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

@@ -14,18 +14,29 @@ export default class PageRevisionList extends React.Component {
     };
   }
 
-  renderRow(revision, previousRevision) {
+  /**
+   * render a row (Revision component and RevisionDiff component)
+   * @param {Revison} revision
+   * @param {Revision} previousRevision
+   * @param {boolean} hasDiff whether revision has difference to previousRevision
+   * @param {boolean} isContiguousNodiff true if the current 'hasDiff' and one of previous row is both false
+   */
+  renderRow(revision, previousRevision, hasDiff, isContiguousNodiff) {
     const revisionId = revision._id;
     const revisionDiffOpened = this.props.diffOpened[revisionId] || false;
 
-    const hasDiff = revision.hasDiffToPrev !== false; // set 'true' if undefined for backward compatibility
+    const classNames = ['revision-history-outer'];
+    if (isContiguousNodiff) {
+      classNames.push('revision-history-outer-contiguous-nodiff');
+    }
 
     return (
-      <div className="revision-history-outer pt-3" key={`revision-history-${revisionId}`}>
+      <div className={classNames.join(' ')} key={`revision-history-${revisionId}`}>
         <Revision
           revision={revision}
           revisionDiffOpened={revisionDiffOpened}
           hasDiff={hasDiff}
+          showNodiffRevisions={this.state.showNodiffRevisions}
           onDiffOpenClicked={this.props.onDiffOpenClicked}
           key={`revision-history-rev-${revisionId}`}
           />
@@ -45,6 +56,8 @@ export default class PageRevisionList extends React.Component {
     const revisions = this.props.revisions,
       revisionCount = this.props.revisions.length;
 
+    let hasDiffPrev;
+
     const revisionList = this.props.revisions.map((revision, idx) => {
       let previousRevision;
       if (idx+1 < revisionCount) {
@@ -54,7 +67,12 @@ export default class PageRevisionList extends React.Component {
         previousRevision = revision; // if it is the first revision, show full text as diff text
       }
 
-      return this.renderRow(revision, previousRevision);
+      const hasDiff = revision.hasDiffToPrev !== false; // set 'true' if undefined for backward compatibility
+      const isContiguousNodiff = !hasDiff && !hasDiffPrev;
+
+      hasDiffPrev = hasDiff;
+
+      return this.renderRow(revision, previousRevision, hasDiff, isContiguousNodiff);
     });
 
     return (

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

@@ -19,18 +19,41 @@ export default class Revision extends React.Component {
     this.props.onDiffOpenClicked(this.props.revision);
   }
 
-  render() {
-    const revision = this.props.revision;
+  renderSimplifiedNodiff(revision) {
+    const author = revision.author;
+
+    let pic = '';
+    if (typeof author === 'object') {
+      pic = <UserPicture user={author} size='sm' />;
+    }
+
+    return (
+      <div className="revision-history-main revision-history-main-nodiff my-1 d-flex align-items-center">
+        <div className="picture-container">
+          {pic}
+        </div>
+        <div className="m-l-10">
+          <div className="revision-history-meta">
+            <span className="text-muted small">
+              <UserDate dateTime={revision.createdAt} /> (No diff)
+            </span>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  renderFull(revision) {
     const author = revision.author;
 
     let pic = '';
     if (typeof author === 'object') {
-      pic = <UserPicture user={author} />;
+      pic = <UserPicture user={author} size='lg' />;
     }
 
     const iconClass = this.props.revisionDiffOpened ? 'caret caret-opened' : 'caret';
     return (
-      <div className="revision-history-main d-flex">
+      <div className="revision-history-main d-flex mt-3">
         <div className="m-t-5">
           {pic}
         </div>
@@ -62,12 +85,24 @@ export default class Revision extends React.Component {
       </div>
     );
   }
+
+  render() {
+    const revision = this.props.revision;
+
+    if (this.props.hasDiff || this.props.showNodiffRevisions) {
+      return this.renderFull(revision);
+    }
+    else {
+      return this.renderSimplifiedNodiff(revision);
+    }
+  }
 }
 
 Revision.propTypes = {
   revision: PropTypes.object,
   revisionDiffOpened: PropTypes.bool.isRequired,
   hasDiff: PropTypes.bool.isRequired,
+  showNodiffRevisions: PropTypes.bool.isRequired,
   onDiffOpenClicked: PropTypes.func.isRequired,
 };
 

src/client/styles/scss/_page.scss

@@ -90,9 +90,12 @@
       &: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 {
+        .picture-lg {
           width: 32px;
           height: 32px;
         }
@@ -111,6 +114,12 @@
           }
         }
       }
+      .revision-history-main-nodiff {
+        .picture-container {
+          min-width: 32px;
+          text-align: center; // centering .picture
+        }
+      }
       .revision-history-diff {
         padding-left: 40px;
       }