Merge branch 'feat/article-area-renovation' into imprv/3545-4071-restrictions-on-triple-buttons-for-guest-user-access

resource/locales/en_US/translation.json

@@ -160,6 +160,9 @@
     "Create Page": "Create Page",
     "page_not_exist_alert": "This page does not exist. Please create a new page."
   },
+  "custom_navigation": {
+    "no_page_list": "There are no pages under <a href='{{path}}'><strong>{{ path }}</strong></a>."
+  },
   "installer": {
     "setup": "Setup",
     "create_initial_account": "Create an initial account",

resource/locales/ja_JP/translation.json

@@ -163,6 +163,9 @@
     "Create Page": "ページを作成する",
     "page_not_exist_alert": "このページは存在しません。新たに作成する必要があります。"
   },
+  "custom_navigation": {
+    "no_page_list": "<a href='{{path}}'><strong>{{ path }}</strong></a>の配下にはページが存在しません。"
+  },
   "installer": {
     "setup": "セットアップ",
     "create_initial_account": "最初のアカウントの作成",

resource/locales/zh_CN/translation.json

@@ -159,6 +159,9 @@
   "not_found_page": {
     "Create Page": "创建页面",
     "page_not_exist_alert": "该页面不存在，请创建一个新页面"
+  },
+  "custom_navigation": {
+    "no_page_list": "There are no pages under <a href='{{path}}'><strong>{{ path }}</strong></a>."
   },
 	"installer": {
 		"setup": "安装",

src/client/js/app.jsx

@@ -17,6 +17,7 @@ import CommentEditorLazyRenderer from './components/PageComment/CommentEditorLaz
 import PageManagement from './components/Page/PageManagement';
 import TrashPage from './components/TrashPage';
 import TrashPageAlert from './components/Page/TrashPageAlert';
+import NotFoundPage from './components/NotFoundPage';
 import NotFoundAlert from './components/Page/NotFoundAlert';
 import PageStatusAlert from './components/PageStatusAlert';
 import RecentCreated from './components/RecentCreated/RecentCreated';
@@ -77,6 +78,8 @@ Object.assign(componentMappings, {
 
   'trash-page': <TrashPage />,
 
+  'not-found-page': <NotFoundPage />,
+
   'not-found-alert': <NotFoundAlert onPageCreateClicked={navigationContainer.setEditorMode} />,
 
   'page-timeline': <PageTimeline />,

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

@@ -1,21 +1,23 @@
-import React from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { withTranslation } from 'react-i18next';
 
 const ThreeStrandedButton = (props) => {
   const { t, isBtnDisabled } = props;
 
+  const [btnActive, setBtnActive] = useState('view');
   function threeStrandedButtonClickedHandler(viewType) {
     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"
+        className={`btn btn-outline-primary view-button ${btnActive === 'view' && 'active'}`}
         onClick={() => { threeStrandedButtonClickedHandler('view') }}
         disabled={isBtnDisabled}
       >
@@ -24,8 +26,8 @@ const ThreeStrandedButton = (props) => {
       </button>
       <button
         type="button"
-        className="btn btn-outline-primary edit-button"
-        onClick={() => { threeStrandedButtonClickedHandler('edit') }}
+        className={`btn btn-outline-primary edit-button ${btnActive === 'edit' && 'active'}`}
+        onClick={(e) => { threeStrandedButtonClickedHandler('edit') }}
         disabled={isBtnDisabled}
       >
         <i className="icon-note icon-fw" />
@@ -33,7 +35,7 @@ const ThreeStrandedButton = (props) => {
       </button>
       <button
         type="button"
-        className="btn btn-outline-primary hackmd-button"
+        className={`btn btn-outline-primary hackmd-button ${btnActive === 'hackmd' && 'active'}`}
         onClick={() => { threeStrandedButtonClickedHandler('hackmd') }}
         disabled={isBtnDisabled}
       >

src/client/js/components/NotFoundPage.jsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withTranslation } from 'react-i18next';
+import PageListIcon from './Icons/PageListIcon';
+import CustomNavigation from './CustomNavigation';
+import PageList from './PageList';
+
+
+const NotFoundPage = (props) => {
+  const { t } = props;
+
+  const navTabMapping = {
+    pagelist: {
+      icon: <PageListIcon />,
+      i18n: t('page_list'),
+      tabContent: <PageList />,
+      index: 0,
+    },
+  };
+
+  return (
+    <div className="grw-custom-navigation mt-5">
+      <CustomNavigation navTabMapping={navTabMapping} />
+    </div>
+  );
+};
+
+NotFoundPage.propTypes = {
+  t: PropTypes.func.isRequired, //  i18next
+};
+
+export default withTranslation()(NotFoundPage);

src/client/js/components/PageList.jsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useCallback, useState } from 'react';
 import PropTypes from 'prop-types';
+import { withTranslation } from 'react-i18next';
 
 import Page from './PageList/Page';
 import { withUnstatedContainers } from './UnstatedUtils';
@@ -11,7 +12,7 @@ import PaginationWrapper from './PaginationWrapper';
 
 
 const PageList = (props) => {
-  const { appContainer, pageContainer } = props;
+  const { appContainer, pageContainer, t } = props;
   const { path } = pageContainer.state;
   const [pages, setPages] = useState(null);
   const [isLoading, setIsLoading] = useState(false);
@@ -56,6 +57,14 @@ const PageList = (props) => {
       <Page page={page} />
     </li>
   ));
+  if (pageList.length === 0) {
+    return (
+      <div className="mt-2">
+        {/* eslint-disable-next-line react/no-danger */}
+        <p dangerouslySetInnerHTML={{ __html: t('custom_navigation.no_page_list', { path }) }} />
+      </div>
+    );
+  }
 
   return (
     <div className="page-list-container-create">
@@ -77,10 +86,13 @@ const PageList = (props) => {
 
 const PageListWrapper = withUnstatedContainers(PageList, [AppContainer, PageContainer]);
 
+const PageListTranslation = withTranslation()(PageListWrapper);
+
 
 PageList.propTypes = {
+  t: PropTypes.func.isRequired, // i18next
   appContainer: PropTypes.instanceOf(AppContainer),
   pageContainer: PropTypes.instanceOf(PageContainer),
 };
 
-export default PageListWrapper;
+export default PageListTranslation;

src/client/js/components/TrashPage.jsx

@@ -19,7 +19,7 @@ const TrashPage = (props) => {
   };
 
   return (
-    <div className="grw-trash-page mt-5">
+    <div className="grw-custom-navigation mt-5">
       <CustomNavigation navTabMapping={navTabMapping} />
     </div>
   );

src/client/styles/scss/_navbar.scss

@@ -76,7 +76,7 @@
   }
 }
 
-.grw-trash-page {
+.grw-custom-navigation {
   .grw-nav-slide-hr {
     border-bottom: 2px solid;
     transition: 0.3s ease-in-out;

src/client/styles/scss/theme/_apply-colors.scss

@@ -288,7 +288,7 @@ pre:not(.hljs):not(.CodeMirror-line) {
   }
 }
 
-.grw-trash-page {
+.grw-custom-navigation {
   .nav-title {
     color: $color-link;
   }

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%);
+    }
   }
 }

src/server/views/widget/not_found_content.html

@@ -8,7 +8,7 @@
 
   <div id="display-switcher"></div>
   <div id="not-found-alert"></div>
-  {% include 'not_found_tabs.html' %}
+  <div id="not-found-page"></div>
 
   <div class="tab-content">
 
@@ -28,20 +28,6 @@
     {% endif %}
 
     {# TODO: should be removed and transplanted to PageContainer.initStateMarkdown ------ to here ------ #}
-
-
-
-    {# list view #}
-    <div class="pt-2 active tab-pane page-list-container" id="revision-body">
-      {% if pages.length == 0 %}
-        <div class="mt-2">
-          There are no pages under <strong>{{ path | preventXss }}</strong>.
-        </div>
-      {% endif  %}
-
-      {% include '../widget/page_list.html' with { pages: pages, pager: pager, viewConfig: viewConfig } %}
-    </div>
-
   </div>
 
   <div id="grw-page-status-alert-container"></div>

src/server/views/widget/not_found_tabs.html

@@ -1,8 +0,0 @@
-  <ul class="nav nav-tabs d-print-none" role="tablist">
-    <li class="nav-item grw-nav-main-left-tab">
-      <a class="nav-link active" role="tab" href="#revision-body" data-toggle="tab">
-        <i class="icon-notebook"></i> List
-      </a>
-    </li>
-  </ul>
-