Merge pull request #3478 from weseek/feat/design-fix

Feat/design fix

src/client/js/components/PageHistory.jsx

@@ -2,7 +2,6 @@ import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
 import loggerFactory from '@alias/logger';
 
-import { withTranslation } from 'react-i18next';
 import { withUnstatedContainers } from './UnstatedUtils';
 import { toastError } from '../util/apiNotification';
 
@@ -17,7 +16,7 @@ import RevisionComparerContainer from '../services/RevisionComparerContainer';
 const logger = loggerFactory('growi:PageHistory');
 
 function PageHistory(props) {
-  const { pageHistoryContainer, revisionComparerContainer, t } = props;
+  const { pageHistoryContainer, revisionComparerContainer } = props;
   const { getPreviousRevision } = pageHistoryContainer;
   const {
     activePage, totalPages, pagingLimit, revisions, diffOpened,
@@ -70,7 +69,6 @@ function PageHistory(props) {
 
   return (
     <div className="revision-history">
-      <h3 className="pb-3">{t('page_history.revision_list')}</h3>
       <PageRevisionTable
         pageHistoryContainer={pageHistoryContainer}
         revisionComparerContainer={revisionComparerContainer}
@@ -90,10 +88,8 @@ function PageHistory(props) {
 const RenderPageHistoryWrapper = withUnstatedContainers(withLoadingSppiner(PageHistory), [PageHistroyContainer, RevisionComparerContainer]);
 
 PageHistory.propTypes = {
-  t: PropTypes.func.isRequired, // i18next
-
   pageHistoryContainer: PropTypes.instanceOf(PageHistroyContainer).isRequired,
   revisionComparerContainer: PropTypes.instanceOf(RevisionComparerContainer).isRequired,
 };
 
-export default withTranslation()(RenderPageHistoryWrapper);
+export default RenderPageHistoryWrapper;

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

@@ -63,7 +63,7 @@ class RevisionDiff extends React.Component {
             </div>
           </div>
         </div>
-        <div className="revision-history-diff" dangerouslySetInnerHTML={diffView} />
+        <div className="revision-history-diff pb-1" dangerouslySetInnerHTML={diffView} />
       </>
     );
   }

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

@@ -61,6 +61,8 @@ const RevisionComparer = (props) => {
     return null;
   }
 
+  const isNodiff = sourceRevision._id === targetRevision._id;
+
   return (
     <div className="revision-compare">
       <div className="d-flex">
@@ -76,7 +78,7 @@ const RevisionComparer = (props) => {
           >
             <i className="ti-clipboard"></i>
           </DropdownToggle>
-          <DropdownMenu positionFixed modifiers={{ preventOverflow: { boundariesElement: null } }}>
+          <DropdownMenu positionFixed right modifiers={{ preventOverflow: { boundariesElement: null } }}>
             {/* Page path URL */}
             <CopyToClipboard text={pagePathUrl()}>
               <DropdownItem className="px-3">
@@ -88,14 +90,19 @@ const RevisionComparer = (props) => {
         </Dropdown>
       </div>
 
-      <div className="revision-compare-outer">
-        {sourceRevision._id === targetRevision._id ? t('No diff') : (
-          <RevisionDiff
-            revisionDiffOpened
-            previousRevision={sourceRevision}
-            currentRevision={targetRevision}
-          />
-        )}
+      <div className={`revision-compare-container ${isNodiff ? 'nodiff' : ''}`}>
+        { isNodiff
+          ? (
+            <span className="h3 text-muted">{t('No diff')}</span>
+          )
+          : (
+            <RevisionDiff
+              revisionDiffOpened
+              previousRevision={sourceRevision}
+              currentRevision={targetRevision}
+            />
+          )
+        }
       </div>
     </div>
   );

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

@@ -47,10 +47,14 @@
 }
 
 .revision-compare {
-  .revision-compare-outer {
+  .revision-compare-container {
     min-height: 100px;
-    max-height: 250px;
-    overflow: auto;
+
+    &.nodiff {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
   }
   .d2h-file-header {
     display: none;