list to table

src/client/js/components/PageHistory.jsx

@@ -7,7 +7,7 @@ import { withUnstatedContainers } from './UnstatedUtils';
 import { toastError } from '../util/apiNotification';
 
 import { withLoadingSppiner } from './SuspenseUtils';
-import PageRevisionList from './PageHistory/PageRevisionList';
+import PageRevisionTable from './PageHistory/PageRevisionTable';
 
 import PageHistroyContainer from '../services/PageHistoryContainer';
 import PaginationWrapper from './PaginationWrapper';
@@ -70,8 +70,8 @@ function PageHistory(props) {
 
   return (
     <div className="revision-history">
-      <h3 className="grw-modal-head pb-2">{t('page_history.revision_list')}</h3>
-      <PageRevisionList
+      <h3 className="pb-3">{t('page_history.revision_list')}</h3>
+      <PageRevisionTable
         pageHistoryContainer={pageHistoryContainer}
         revisionComparerContainer={revisionComparerContainer}
         revisions={revisions}

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

@@ -6,9 +6,8 @@ import PageHistroyContainer from '../../services/PageHistoryContainer';
 import RevisionComparerContainer from '../../services/RevisionComparerContainer';
 
 import Revision from './Revision';
-import RevisionSelector from '../RevisionComparer/RevisionSelector';
 
-class PageRevisionList extends React.Component {
+class PageRevisionTable extends React.Component {
 
   /**
    * render a row (Revision component and RevisionDiff component)
@@ -22,25 +21,21 @@ class PageRevisionList extends React.Component {
     const { latestRevision } = this.props.pageHistoryContainer.state;
     const revisionId = revision._id;
     const revisionDiffOpened = this.props.diffOpened[revisionId] || false;
+    const { sourceRevision, targetRevision } = revisionComparerContainer.state;
 
-    const classNames = ['revision-history-outer', 'row', 'no-gutters'];
-    if (isContiguousNodiff) {
-      classNames.push('revision-history-outer-contiguous-nodiff');
-    }
+    // const handleCompareLatestRevisionButton = () => {
+    //   revisionComparerContainer.setState({ sourceRevision: revision });
+    //   revisionComparerContainer.setState({ targetRevision: latestRevision });
+    // };
 
-    const handleCompareLatestRevisionButton = () => {
-      revisionComparerContainer.setState({ sourceRevision: revision });
-      revisionComparerContainer.setState({ targetRevision: latestRevision });
-    };
-
-    const handleComparePreviousRevisionButton = () => {
-      revisionComparerContainer.setState({ sourceRevision: previousRevision });
-      revisionComparerContainer.setState({ targetRevision: revision });
-    };
+    // const handleComparePreviousRevisionButton = () => {
+    //   revisionComparerContainer.setState({ sourceRevision: previousRevision });
+    //   revisionComparerContainer.setState({ targetRevision: revision });
+    // };
 
     return (
-      <div className={classNames.join(' ')} key={`revision-history-${revisionId}`}>
-        <div className="col-6 d-flex" key={`revision-history-top-${revisionId}`}>
+      <tr className="d-flex" key={`revision-history-${revisionId}`}>
+        <td className="col" key={`revision-history-top-${revisionId}`}>
           <Revision
             t={this.props.t}
             revision={revision}
@@ -49,7 +44,7 @@ class PageRevisionList extends React.Component {
             hasDiff={hasDiff}
             key={`revision-history-rev-${revisionId}`}
           />
-          {hasDiff && (
+          {/* {hasDiff && (
             <div className="dropdown mt-auto mb-3 ml-5">
               <button
                 className="btn btn-primary dropdown-toggle"
@@ -72,16 +67,41 @@ class PageRevisionList extends React.Component {
                 </button>
               </div>
             </div>
+          )} */}
+        </td>
+        <td className="col-1">
+          {(hasDiff) && (
+            <div className="custom-control custom-radio custom-control-inline mr-0">
+              <input
+                type="radio"
+                className="custom-control-input"
+                id={`compareSource-${revision._id}`}
+                name="compareSource"
+                value={revision._id}
+                checked={revision._id === sourceRevision?._id}
+                onChange={() => revisionComparerContainer.setState({ sourceRevision: revision })}
+              />
+              <label className="custom-control-label" htmlFor={`compareSource-${revision._id}`} />
+            </div>
           )}
-        </div>
-        <div className="col-6 align-self-center">
-          <RevisionSelector
-            revision={revision}
-            hasDiff={hasDiff}
-            key={`revision-compare-target-selector-${revisionId}`}
-          />
-        </div>
-      </div>
+        </td>
+        <td className="col-2">
+          {(hasDiff) && (
+            <div className="custom-control custom-radio custom-control-inline mr-0">
+              <input
+                type="radio"
+                className="custom-control-input"
+                id={`compareTarget-${revision._id}`}
+                name="compareTarget"
+                value={revision._id}
+                checked={revision._id === targetRevision?._id}
+                onChange={() => revisionComparerContainer.setState({ targetRevision: revision })}
+              />
+              <label className="custom-control-label" htmlFor={`compareTarget-${revision._id}`} />
+            </div>
+          )}
+        </td>
+      </tr>
     );
   }
 
@@ -116,26 +136,24 @@ class PageRevisionList extends React.Component {
     });
 
     return (
-      <div className="revision-history-list">
-        <div className="revision-history-list-content-header bg-white mb-3 pr-4">
-          <div className="row no-gutters">
-            <div className="col-6">{ t('page_history.revision') }</div>
-            <div className="col-3 text-center">{ t('page_history.comparing_source') }</div>
-            <div className="col-3 text-center">{ t('page_history.comparing_target') }</div>
-          </div>
-        </div>
-        <div className="revision-history-list-container border py-2 px-4 overflow-auto">
-          <div className="revision-history-list-content-body">
-            {revisionList}
-          </div>
-        </div>
-      </div>
+      <table className="table revision-history-table">
+        <thead>
+          <tr className="d-flex">
+            <th className="col">{ t('page_history.revision') }</th>
+            <th className="col-1">{ t('page_history.comparing_source') }</th>
+            <th className="col-2">{ t('page_history.comparing_target') }</th>
+          </tr>
+        </thead>
+        <tbody className="overflow-auto d-block">
+          {revisionList}
+        </tbody>
+      </table>
     );
   }
 
 }
 
-PageRevisionList.propTypes = {
+PageRevisionTable.propTypes = {
   t: PropTypes.func.isRequired, // i18next
   pageHistoryContainer: PropTypes.instanceOf(PageHistroyContainer).isRequired,
   revisionComparerContainer: PropTypes.instanceOf(RevisionComparerContainer).isRequired,
@@ -144,4 +162,4 @@ PageRevisionList.propTypes = {
   diffOpened: PropTypes.object,
 };
 
-export default withTranslation()(PageRevisionList);
+export default withTranslation()(PageRevisionTable);

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

@@ -26,11 +26,9 @@ export default class Revision extends React.Component {
           {pic}
         </div>
         <div className="ml-3">
-          <div className="revision-history-meta">
-            <span className="text-muted small">
-              <UserDate dateTime={revision.createdAt} /> ({ t('No diff') })
-            </span>
-          </div>
+          <span className="text-muted small">
+            <UserDate dateTime={revision.createdAt} /> ({ t('No diff') })
+          </span>
         </div>
       </div>
     );
@@ -47,24 +45,20 @@ export default class Revision extends React.Component {
     }
 
     return (
-      <div className="revision-history-main d-flex mt-3">
-        <div className="mt-2">
+      <div className="revision-history-main d-flex">
+        <div className="picture-container">
           {pic}
         </div>
         <div className="ml-2">
-          <div className="revision-history-author">
+          <div className="revision-history-author mb-1">
             <strong><Username user={author}></Username></strong>
             {this.props.isLatestRevision && <span className="badge badge-info ml-2">Latest</span>}
           </div>
-          <div className="revision-history-meta">
-            <p>
-              <UserDate dateTime={revision.createdAt} />
-            </p>
-            <p>
-              <a href={`?revision=${revision._id}`}>
-                <i className="icon-login"></i> { t('Go to this version') }
-              </a>
-            </p>
+          <div>
+            <UserDate dateTime={revision.createdAt} />
+            <a className="ml-3" href={`?revision=${revision._id}`}>
+              <i className="icon-login"></i> { t('Go to this version') }
+            </a>
           </div>
         </div>
       </div>

src/client/js/components/RevisionComparer/RevisionSelector.jsx

@@ -1,66 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import { withUnstatedContainers } from '../UnstatedUtils';
-import { withLoadingSppiner } from '../SuspenseUtils';
-
-import RevisionComparerContainer from '../../services/RevisionComparerContainer';
-
-const RevisionSelector = (props) => {
-
-  const { revision, hasDiff, revisionComparerContainer } = props;
-  const { sourceRevision, targetRevision } = revisionComparerContainer.state;
-
-  if (!hasDiff) {
-    return <></>;
-  }
-
-  return (
-    <React.Fragment>
-      <div className="container-fluid px-0">
-        <div className="row no-gutters">
-          <div className="col text-center">
-            <div className="custom-control custom-radio custom-control-inline mr-0">
-              <input
-                type="radio"
-                className="custom-control-input"
-                id={`compareSource-${revision._id}`}
-                name="compareSource"
-                value={revision._id}
-                checked={revision._id === sourceRevision?._id}
-                onChange={() => revisionComparerContainer.setState({ sourceRevision: revision })}
-              />
-              <label className="custom-control-label" htmlFor={`compareSource-${revision._id}`} />
-            </div>
-          </div>
-          <div className="col text-center">
-            <div className="custom-control custom-radio custom-control-inline mr-0">
-              <input
-                type="radio"
-                className="custom-control-input"
-                id={`compareTarget-${revision._id}`}
-                name="compareTarget"
-                value={revision._id}
-                checked={revision._id === targetRevision?._id}
-                onChange={() => revisionComparerContainer.setState({ targetRevision: revision })}
-              />
-              <label className="custom-control-label" htmlFor={`compareTarget-${revision._id}`} />
-            </div>
-          </div>
-        </div>
-      </div>
-    </React.Fragment>
-  );
-
-};
-
-const RevisionSelectorWrapper = withUnstatedContainers(withLoadingSppiner(RevisionSelector), [RevisionComparerContainer]);
-
-RevisionSelector.propTypes = {
-  revisionComparerContainer: PropTypes.instanceOf(RevisionComparerContainer).isRequired,
-
-  revision: PropTypes.object,
-  hasDiff: PropTypes.bool.isRequired,
-};
-
-export default RevisionSelectorWrapper;

src/client/styles/scss/_page-history.scss

@@ -1,70 +1,33 @@
-.revision-history {
-  .revision-history-list {
-    .revision-history-list-container {
-      min-height: 250px;
-      max-height: calc(100vh - 100px - 550px);
-    }
-
-    .revision-history-list-content-body {
-      .revision-history-outer {
-        // add border-top except of first element
-        &:not(:first-of-type) {
-          @extend .border-top;
-        }
-
-        .revision-history-main {
-          .picture-lg {
-            width: 32px;
-            height: 32px;
-          }
-
-          .revision-history-meta {
-            a:hover {
-              cursor: pointer;
-            }
-          }
-
-          .caret {
-            transition: 0.4s;
-            transform: rotate(-90deg);
-
-            &.caret-opened {
-              transform: rotate(0deg);
-            }
-          }
-        }
-
-        .revision-history-main-nodiff {
-          .picture-container {
-            min-width: 32px;
-            text-align: center; // centering .picture
-          }
-        }
-
-        .revision-history-diff {
-          padding-left: 40px;
-          color: $gray-900;
-          table-layout: fixed;
-        }
-      }
+.revision-history-table {
+  tbody {
+    max-height: calc(100vh - 100px - 550px);
+  }
+}
 
-      li {
-        position: relative;
-        list-style: none;
-      }
-    }
+.revision-history-main {
+  img.picture-lg {
+    width: 32px;
+    height: 32px;
   }
+}
 
-  // compacted list
-  .revision-history-outer-contiguous-nodiff {
-    border-top: unset !important; // force unset border
+.revision-history-main-nodiff {
+  .picture-container {
+    min-width: 32px;
+    text-align: center; // centering .picture
   }
+}
+
+.revision-history-diff {
+  padding-left: 40px;
+  color: $gray-900;
+  table-layout: fixed;
+}
 
-  .revision-compare {
-    .revision-compare-outer {
-      min-height: 100px;
-      max-height: 250px;
-      overflow: auto;
-    }
+.revision-compare {
+  .revision-compare-outer {
+    min-height: 100px;
+    max-height: 250px;
+    overflow: auto;
   }
 }