Merge branch 'feat/article-area-renovation' into imprv/link-view,edit,hackmd-anchor-tag

src/client/js/components/Navbar/GrowiSubNavigation.jsx

@@ -145,6 +145,7 @@ const GrowiSubNavigation = (props) => {
     isForbidden: isPageForbidden, pageUser, isCreatable,
   } = pageContainer.state;
 
+  const { currentUser } = appContainer;
   const isPageNotFound = pageId == null;
   const isUserPage = pageUser != null;
   const isPageInTrash = isTrashPage(path);
@@ -195,7 +196,7 @@ const GrowiSubNavigation = (props) => {
             { !isPageNotFound && !isPageForbidden && <PageManagement /> }
           </div>
           <div className="mt-2">
-            { !isCreatable && <ThreeStrandedButton onThreeStrandedButtonClicked={onThreeStrandedButtonClicked} />}
+            { !isCreatable && <ThreeStrandedButton onThreeStrandedButtonClicked={onThreeStrandedButtonClicked} isBtnDisabled={currentUser == null} />}
           </div>
         </div>
 

src/client/js/components/Navbar/ThreeStrandedButton.jsx

@@ -1,43 +1,62 @@
-import React from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { withTranslation } from 'react-i18next';
+import { UncontrolledTooltip } from 'reactstrap';
 
 const ThreeStrandedButton = (props) => {
-  const { t } = props;
+  const { t, isBtnDisabled } = props;
+
+  const [btnActive, setBtnActive] = useState('view');
 
   function threeStrandedButtonClickedHandler(viewType) {
+    if (isBtnDisabled) {
+      return;
+    }
     if (props.onThreeStrandedButtonClicked != null) {
       props.onThreeStrandedButtonClicked(viewType);
     }
+    setBtnActive(viewType);
   }
 
   return (
-    <div className="btn-group grw-three-stranded-button" role="group " aria-label="three-stranded-button">
-      <button
-        type="button"
-        className="btn btn-outline-primary view-button"
-        onClick={() => { threeStrandedButtonClickedHandler('view') }}
-      >
-        <i className="icon-control-play icon-fw" />
-        { t('view') }
-      </button>
-      <button
-        type="button"
-        className="btn btn-outline-primary edit-button"
-        onClick={() => { threeStrandedButtonClickedHandler('edit') }}
+    <>
+      <div
+        className="btn-group grw-three-stranded-button"
+        role="group"
+        aria-label="three-stranded-button"
+        id="grw-three-stranded-button"
       >
-        <i className="icon-note icon-fw" />
-        { t('Edit') }
-      </button>
-      <button
-        type="button"
-        className="btn btn-outline-primary hackmd-button"
-        onClick={() => { threeStrandedButtonClickedHandler('hackmd') }}
-      >
-        <i className="fa fa-fw fa-file-text-o" />
-        { t('hackmd.hack_md') }
-      </button>
-    </div>
+        <button
+          type="button"
+          className={`btn btn-outline-primary view-button ${btnActive === 'view' && 'active'} ${isBtnDisabled && 'disabled'}`}
+          onClick={() => { threeStrandedButtonClickedHandler('view') }}
+        >
+          <i className="icon-control-play icon-fw" />
+          { t('view') }
+        </button>
+        <button
+          type="button"
+          className={`btn btn-outline-primary edit-button ${btnActive === 'edit' && 'active'} ${isBtnDisabled && 'disabled'}`}
+          onClick={() => { threeStrandedButtonClickedHandler('edit') }}
+        >
+          <i className="icon-note icon-fw" />
+          { t('Edit') }
+        </button>
+        <button
+          type="button"
+          className={`btn btn-outline-primary hackmd-button ${btnActive === 'hackmd' && 'active'} ${isBtnDisabled && 'disabled'}`}
+          onClick={() => { threeStrandedButtonClickedHandler('hackmd') }}
+        >
+          <i className="fa fa-fw fa-file-text-o" />
+          { t('hackmd.hack_md') }
+        </button>
+      </div>
+      {isBtnDisabled && (
+        <UncontrolledTooltip placement="top" target="grw-three-stranded-button" fade={false}>
+          {t('Not available for guest')}
+        </UncontrolledTooltip>
+      )}
+    </>
   );
 
 };
@@ -45,6 +64,11 @@ const ThreeStrandedButton = (props) => {
 ThreeStrandedButton.propTypes = {
   t: PropTypes.func.isRequired, //  i18next
   onThreeStrandedButtonClicked: PropTypes.func,
+  isBtnDisabled: PropTypes.bool,
+};
+
+ThreeStrandedButton.defaultProps = {
+  isBtnDisabled: false,
 };
 
 export default withTranslation()(ThreeStrandedButton);

src/client/js/components/NotFoundPage.jsx

@@ -2,8 +2,10 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { withTranslation } from 'react-i18next';
 import PageListIcon from './Icons/PageListIcon';
+import TimeLineIcon from './Icons/TimeLineIcon';
 import CustomNavigation from './CustomNavigation';
 import PageList from './PageList';
+import PageTimeline from './PageTimeline';
 
 
 const NotFoundPage = (props) => {
@@ -16,6 +18,12 @@ const NotFoundPage = (props) => {
       tabContent: <PageList />,
       index: 0,
     },
+    timeLine: {
+      icon: <TimeLineIcon />,
+      i18n: t('Timeline View'),
+      tabContent: <PageTimeline />,
+      index: 1,
+    },
   };
 
   return (

src/client/js/components/Page/PageManagement.jsx

@@ -194,7 +194,7 @@ const PageManagement = (props) => {
         >
           <i className="icon-options"></i>
         </button>
-        <UncontrolledTooltip placement="top" target="icon-options-guest-tltips">
+        <UncontrolledTooltip placement="top" target="icon-options-guest-tltips" fade={false}>
           {t('Not available for guest')}
         </UncontrolledTooltip>
       </>

src/client/js/components/Page/RevisionPathControls.jsx

@@ -3,8 +3,6 @@ import PropTypes from 'prop-types';
 
 import { withTranslation } from 'react-i18next';
 
-import { isTrashPage } from '@commons/util/path-utils';
-
 import CopyDropdown from './CopyDropdown';
 
 const RevisionPathControls = (props) => {
@@ -15,19 +13,13 @@ const RevisionPathControls = (props) => {
   };
 
   const {
-    pagePath, pageId, isPageForbidden,
+    pagePath, pageId,
   } = props;
 
-  const isPageInTrash = isTrashPage(pagePath);
 
   return (
     <>
       <CopyDropdown pagePath={pagePath} pageId={pageId} buttonStyle={buttonStyle} />
-      { !isPageInTrash && !isPageForbidden && (
-        <a href="#edit" className="d-edit-none text-muted btn btn-secondary bg-transparent btn-edit border-0" style={buttonStyle}>
-          <i className="icon-note" />
-        </a>
-      ) }
     </>
   );
 };

src/client/js/components/PageTimeline.jsx

@@ -62,7 +62,7 @@ class PageTimeline extends React.Component {
 
   render() {
     const { pages } = this.state;
-    if (pages == null) {
+    if (pages == null || pages.length === 0) {
       return <React.Fragment></React.Fragment>;
     }
 

src/client/styles/scss/theme/antarctic.scss

@@ -117,6 +117,10 @@ html[dark] {
     .btn.btn-outline-primary {
       @include three-stranded-button(darken($primary, 10%), lighten($primary, 55%), lighten($primary, 60%));
     }
+
+    .btn.btn-outline-primary.active {
+      background-color: lighten($primary, 60%);
+    }
   }
 
   .table {

src/client/styles/scss/theme/christmas.scss

@@ -188,5 +188,8 @@ html[dark] {
     .btn.btn-outline-primary {
       @include three-stranded-button(darken($subthemecolor, 15%), lighten($subthemecolor, 35%), lighten($subthemecolor, 45%));
     }
+    .btn.btn-outline-primary.active {
+      background-color: lighten($subthemecolor, 45%);
+    }
   }
 }

src/client/styles/scss/theme/default.scss

@@ -109,6 +109,9 @@ html[light] {
     .btn.btn-outline-primary {
       @include three-stranded-button($primary, lighten($primary, 65%), lighten($primary, 70%));
     }
+    .btn.btn-outline-primary.active {
+      background-color: lighten($primary, 70%);
+    }
   }
 }
 
@@ -209,6 +212,8 @@ html[dark] {
     .btn.btn-outline-primary {
       @include three-stranded-button(lighten($primary, 30%), lighten($primary, 20%), $primary, darken($primary, 20%));
     }
+    .btn.btn-outline-primary.active {
+      background-color: $primary;
+    }
   }
-
 }

src/client/styles/scss/theme/future.scss

@@ -94,6 +94,9 @@ html[dark] {
     .btn.btn-outline-primary {
       @include three-stranded-button(lighten($primary, 10%), $primary, darken($primary, 10%), darken($primary, 20%));
     }
+    .btn.btn-outline-primary.active {
+      background-color: darken($primary, 10%);
+    }
   }
 
   // headers

src/client/styles/scss/theme/halloween.scss

@@ -112,6 +112,9 @@ html[dark] {
     .btn.btn-outline-primary {
       @include three-stranded-button(lighten($primary, 35%), $primary, lighten($primary, 5%), darken($primary, 20%));
     }
+    .btn.btn-outline-primary.active {
+      background-color: lighten($primary, 5%);
+    }
   }
 
   // Table

src/client/styles/scss/theme/island.scss

@@ -114,5 +114,8 @@ html[dark] {
     .btn.btn-outline-primary {
       @include three-stranded-button(darken($primary, 50%), lighten($primary, 5%), darken($primary, 5%));
     }
+    .btn.btn-outline-primary.active {
+      background-color: darken($primary, 5%);
+    }
   }
 }

src/client/styles/scss/theme/kibela.scss

@@ -108,4 +108,10 @@ html[dark] {
 
   @import 'apply-colors';
   @import 'apply-colors-light';
+  //Button
+  .grw-three-stranded-button {
+    .btn.btn-outline-primary.active {
+      background-color: $light;
+    }
+  }
 }

src/client/styles/scss/theme/mono-blue.scss

@@ -93,6 +93,9 @@ html[light] {
     .btn.btn-outline-primary {
       @include three-stranded-button($primary, lighten($primary, 65%), lighten($primary, 70%));
     }
+    .btn.btn-outline-primary.active {
+      background-color: lighten($primary, 70%);
+    }
   }
 }
 
@@ -201,5 +204,8 @@ html[dark] {
     .btn.btn-outline-primary {
       @include three-stranded-button(lighten($primary, 30%), $primary, darken($primary, 10%), darken($primary, 20%));
     }
+    .btn.btn-outline-primary.active {
+      background-color: darken($primary, 10%);
+    }
   }
 }

src/client/styles/scss/theme/nature.scss

@@ -116,5 +116,8 @@ html[dark] {
     .btn.btn-outline-primary {
       @include three-stranded-button($bgcolor-navbar, lighten($bgcolor-navbar, 65%), lighten($bgcolor-navbar, 70%));
     }
+    .btn.btn-outline-primary.active {
+      background-color: lighten($bgcolor-navbar, 70%);
+    }
   }
 }

src/client/styles/scss/theme/spring.scss

@@ -98,6 +98,9 @@ html[dark] {
     .btn.btn-outline-primary {
       @include three-stranded-button(darken($primary, 50%), lighten($primary, 5%), lighten($primary, 10%));
     }
+    .btn.btn-outline-primary.active {
+      background-color: lighten($primary, 10%);
+    }
   }
 
   .growi:not(.login-page) {

src/client/styles/scss/theme/wood.scss

@@ -166,5 +166,8 @@ html[dark] {
     .btn.btn-outline-primary {
       @include three-stranded-button(darken($primary, 30%), lighten($primary, 15%), lighten($primary, 25%));
     }
+    .btn.btn-outline-primary.active {
+      background-color: lighten($primary, 25%);
+    }
   }
 }