Merge pull request #2588 from weseek/imprv/gw3295-add-modal-new

Imprv/gw3295 add a modal

resource/locales/en_US/translation.json

@@ -45,6 +45,7 @@
   "List View": "List",
   "Timeline View": "Timeline",
   "History": "History",
+  "attachment_data": "Attachment Data",
   "Presentation Mode": "Presentation",
   "Not available for guest": "Not available for guest",
   "username": "Username",
@@ -108,6 +109,7 @@
   "Specified users only": "Specified users only",
   "Only me": "Only me",
   "Only inside the group": "Only inside the group",
+  "page_list": "Page List",
   "page_list_and_search_results": "Page list / Search results",
   "scope_of_page_disclosure": "Scope of page disclosure",
   "set_point": "Set point",

resource/locales/ja_JP/translation.json

@@ -43,8 +43,9 @@
   "Example": "例",
   "Taro Yamada": "山田 太郎",
   "List View": "リスト表示",
-  "Timeline View": "タイムライン表示",
+  "Timeline View": "タイムライン",
   "History": "更新履歴",
+  "attachment_data": "添付データ",
   "Presentation Mode": "プレゼンテーション",
   "Not available for guest": "ゲストユーザーは利用できません",
   "username": "ユーザー名",
@@ -107,6 +108,7 @@
   "Specified users": "特定ユーザーのみ",
   "Only me": "自分のみ",
   "Only inside the group": "特定グループのみ",
+  "page_list": "ページリスト",
   "page_list_and_search_results": "ページリスト・検索結果",
   "scope_of_page_disclosure": "ページの公開範囲",
   "set_point": "設定値",

resource/locales/zh_CN/translation.json

@@ -45,7 +45,8 @@
 	"Taro Yamada": "John Doe",
 	"List View": "列表",
 	"Timeline View": "时间线",
-	"History": "历史",
+  "History": "历史",
+  "attachment_data": "Attachment Data",
 	"Presentation Mode": "演示文稿",
 	"Not available for guest": "Not available for guest",
 	"username": "用户名",
@@ -113,7 +114,8 @@
 	"Anyone with the link": "任何人",
 	"Specified users only": "仅指定用户",
 	"Only me": "只有我",
-	"Only inside the group": "仅组内",
+  "Only inside the group": "仅组内",
+  "page_list": "Page List",
 	"page_list_and_search_results": "页面列表/搜索结果",
 	"scope_of_page_disclosure": "页面公开范围",
 	"set_point": "设定值",

src/client/js/components/PageAccessoriesModal.jsx

@@ -0,0 +1,87 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import {
+  Modal, ModalBody, Nav, NavItem, NavLink, TabContent,
+} from 'reactstrap';
+
+import { withTranslation } from 'react-i18next';
+
+import PageList from './PageList';
+import TimeLine from './TimeLine';
+import RecentChanges from './RecentChanges';
+import Attachment from './Attachment';
+
+import { withUnstatedContainers } from './UnstatedUtils';
+import PageContainer from '../services/PageContainer';
+
+const PageAccessoriesModal = (props) => {
+  const { t } = props;
+
+  function closeModalHandler() {
+    if (props.onClose == null) {
+      return;
+    }
+    props.onClose();
+  }
+
+  return (
+    <React.Fragment>
+      <Modal
+        size="lg"
+        isOpen={props.isOpen}
+        toggle={closeModalHandler}
+        className="grw-page-accessories-modal"
+      >
+        <ModalBody>
+          <Nav className="nav-title border-bottom">
+            <NavItem className={`nav-link ${props.activeTab === 'pageList' && 'active'}`}>
+              <NavLink>
+                <PageList />
+                { t('page_list') }
+              </NavLink>
+            </NavItem>
+            <NavItem className={`nav-link ${props.activeTab === 'timeLine' && 'active'}`}>
+              <NavLink>
+                <TimeLine />
+                { t('Timeline View') }
+              </NavLink>
+            </NavItem>
+            <NavItem className={`nav-link ${props.activeTab === 'recentChanges' && 'active'}`}>
+              <NavLink>
+                <RecentChanges />
+                { t('History') }
+              </NavLink>
+            </NavItem>
+            <NavItem className={`nav-link ${props.activeTab === 'attachment' && 'active'}`}>
+              <NavLink>
+                <Attachment />
+                { t('attachment_data') }
+              </NavLink>
+            </NavItem>
+          </Nav>
+          <TabContent>
+          </TabContent>
+        </ModalBody>
+      </Modal>
+    </React.Fragment>
+  );
+};
+
+
+/**
+ * Wrapper component for using unstated
+ */
+const PageAccessoriesModalWrapper = withUnstatedContainers(PageAccessoriesModal, [PageContainer]);
+
+
+PageAccessoriesModal.propTypes = {
+  t: PropTypes.func.isRequired, //  i18next
+  pageContainer: PropTypes.instanceOf(PageContainer).isRequired,
+
+  isOpen: PropTypes.bool.isRequired,
+  onClose: PropTypes.func,
+  activeTab: PropTypes.string.isRequired,
+};
+
+export default withTranslation()(PageAccessoriesModalWrapper);

src/client/js/components/TopOfTableContents.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 
 import { withTranslation } from 'react-i18next';
@@ -10,26 +10,52 @@ import TimeLine from './TimeLine';
 import RecentChanges from './RecentChanges';
 import Attachment from './Attachment';
 
+import PageAccessoriesModal from './PageAccessoriesModal';
+
 import { withUnstatedContainers } from './UnstatedUtils';
 
 const TopOfTableContents = (props) => {
 
+  const [isPageAccessoriesModalShown, setIsPageAccessoriesModalShown] = useState(false);
+  const [activeTab, setActiveTab] = useState('');
+
+  function openPageAccessoriesModal(activeTab) {
+    setIsPageAccessoriesModalShown(true);
+    setActiveTab(activeTab);
+  }
+
+  function closePageAccessoriesModal() {
+    setIsPageAccessoriesModalShown(false);
+  }
+
+  function renderModal() {
+    return (
+      <>
+        <PageAccessoriesModal
+          isOpen={isPageAccessoriesModalShown}
+          onClose={closePageAccessoriesModal}
+          activeTab={activeTab}
+        />
+      </>
+    );
+  }
+
   return (
     <>
       <div className="top-of-table-contents d-flex align-items-end pb-1">
-        <button type="button" className="bg-transparent border-0">
+        <button type="button" className="bg-transparent border-0" onClick={() => openPageAccessoriesModal('pageList')}>
           <PageList />
         </button>
 
-        <button type="button" className="bg-transparent border-0">
+        <button type="button" className="bg-transparent border-0 active" onClick={() => openPageAccessoriesModal('timeLine')}>
           <TimeLine />
         </button>
 
-        <button type="button" className="bg-transparent border-0">
+        <button type="button" className="bg-transparent border-0" onClick={() => openPageAccessoriesModal('recentChanges')}>
           <RecentChanges />
         </button>
 
-        <button type="button" className="bg-transparent border-0">
+        <button type="button" className="bg-transparent border-0" onClick={() => openPageAccessoriesModal('attachment')}>
           <Attachment />
         </button>
         {/* [TODO: setting Footprints' icon by GW-3308] */}
@@ -40,11 +66,10 @@ const TopOfTableContents = (props) => {
         >
         </div>
       </div>
+      {renderModal()}
     </>
   );
-
 };
-
 /**
  * Wrapper component for using unstated
  */

src/client/styles/scss/_layout_growi.scss

@@ -22,6 +22,12 @@
     }
   }
 
+  .grw-page-accessories-modal {
+    .table-top-icon {
+      margin-right: 5px;
+    }
+  }
+
   .revision-toc {
     position: sticky;
     // growisubnavigation + grw-navbar-boder

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

@@ -253,6 +253,18 @@ pre:not(.hljs):not(.CodeMirror-line) {
   }
 }
 
+.grw-page-accessories-modal {
+  .nav-title {
+    color: $color-link;
+  }
+  .table-top-icon {
+    fill: $color-link;
+  }
+  .active {
+    border-bottom: 2px solid $color-link;
+  }
+}
+
 /*
  * cards
  */