Merge pull request #2771 from weseek/imprv/reactify-subnavbar

Imprv/reactify subnavbar

src/client/js/app.jsx

@@ -9,7 +9,6 @@ import ErrorBoundary from './components/ErrorBoudary';
 import SearchPage from './components/SearchPage';
 import TagsList from './components/TagsList';
 import PageEditor from './components/PageEditor';
-import PagePathNavForEditor from './components/PageEditor/PagePathNavForEditor';
 import EditorNavbarBottom from './components/PageEditor/EditorNavbarBottom';
 import { defaultEditorOptions, defaultPreviewOptions } from './components/PageEditor/OptionsSelector';
 import PageEditorByHackmd from './components/PageEditorByHackmd';
@@ -112,7 +111,6 @@ if (pageContainer.state.path != null) {
 if (appContainer.currentUser != null) {
   Object.assign(componentMappings, {
     'page-editor': <PageEditor />,
-    'page-editor-path-nav': <PagePathNavForEditor />,
     'page-editor-navbar-bottom-container': <EditorNavbarBottom />,
   });
   if (pageContainer.state.pageId != null) {

src/client/js/components/BookmarkButton.jsx

@@ -66,7 +66,7 @@ class BookmarkButton extends React.Component {
         <button
           type="button"
           onClick={this.handleClick}
-          className={`btn rounded-circle btn-bookmark border-0 d-edit-none
+          className={`btn rounded-circle btn-bookmark border-0
           ${`btn-${this.props.size}`}
           ${this.state.isBookmarked ? 'active' : ''}`}
         >

src/client/js/components/LikeButton.jsx

@@ -43,7 +43,7 @@ class LikeButton extends React.Component {
       <button
         type="button"
         onClick={this.handleClick}
-        className={`btn rounded-circle btn-like border-0 d-edit-none
+        className={`btn rounded-circle btn-like border-0
         ${this.state.isLiked ? 'active' : ''}`}
       >
         <i className="icon-like"></i>

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

@@ -83,7 +83,7 @@ const UserPagePathNav = ({ pageId, pagePath }) => {
 /* eslint-disable react/prop-types */
 const UserInfo = ({ pageUser }) => {
   return (
-    <div className="grw-users-info d-flex align-items-center d-edit-none">
+    <div className="grw-users-info d-flex align-items-center">
       <UserPicture user={pageUser} />
 
       <div className="users-meta">
@@ -153,6 +153,10 @@ const GrowiSubNavigation = (props) => {
     );
   }
 
+  function onThreeStrandedButtonClicked(viewType) {
+    navigationContainer.setEditorMode(viewType);
+  }
+
   return (
     <div className={`grw-subnav d-flex align-items-center justify-content-between ${isCompactMode ? 'grw-subnav-compact d-print-none' : ''}`}>
 
@@ -194,13 +198,13 @@ const GrowiSubNavigation = (props) => {
             { !isPageInTrash && <PageReactionButtons appContainer={appContainer} pageContainer={pageContainer} /> }
           </div>
           <div className="mt-2">
-            <ThreeStrandedButton />
+            <ThreeStrandedButton onThreeStrandedButtonClicked={onThreeStrandedButtonClicked} />
           </div>
         </div>
 
         {/* Page Authors */}
         { (!isCompactMode && !isUserPage) && (
-          <ul className="authors text-nowrap border-left d-none d-lg-block d-edit-none">
+          <ul className="authors text-nowrap border-left d-none d-lg-block">
             { creator != null && (
               <li className="pb-1">
                 <PageCreator creator={creator} createdAt={createdAt} />

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

@@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
 import { withTranslation } from 'react-i18next';
 
 const ThreeStrandedButton = (props) => {
-
   const { t } = props;
 
   function threeStrandedButtonClickedHandler(viewType) {
@@ -33,6 +32,7 @@ const ThreeStrandedButton = (props) => {
 
 ThreeStrandedButton.propTypes = {
   t: PropTypes.func.isRequired, //  i18next
+
   onThreeStrandedButtonClicked: PropTypes.func,
 };
 

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

@@ -28,12 +28,11 @@ class TagLabels extends React.Component {
 
   /**
    * @return tags data
-   *   1. pageContainer.state.tags if isEditorMode is false
-   *   2. editorContainer.state.tags if isEditorMode is true
+   *   1. pageContainer.state.tags if pageId is not null
+   *   2. editorContainer.state.tags if pageId is null
    */
   getEditTargetData() {
-    const { isEditorMode } = this.props;
-    return (isEditorMode) ? this.props.editorContainer.state.tags : this.props.pageContainer.state.tags;
+    return (this.props.editorContainer.state.pageId != null) ? this.props.editorContainer.state.tags : this.props.pageContainer.state.tags;
   }
 
   openEditorModal() {
@@ -45,24 +44,19 @@ class TagLabels extends React.Component {
   }
 
   async tagsUpdatedHandler(tags) {
-    const { appContainer, editorContainer, isEditorMode } = this.props;
+    const { appContainer, editorContainer, pageContainer } = this.props;
+    const { pageId } = pageContainer.state;
 
-    // only update tags in editorContainer
-    if (isEditorMode) {
+    // only update tags in editorContainer when new page
+    if (pageId != null) {
       return editorContainer.setState({ tags });
     }
 
-    // post api request and update tags
-    const { pageContainer } = this.props;
-
     try {
-      const { pageId } = pageContainer.state;
       await appContainer.apiPost('/tags.update', { pageId, tags });
 
       // update pageContainer.state
       pageContainer.setState({ tags });
-      editorContainer.setState({ tags });
-
       toastSuccess('updated tags successfully');
     }
     catch (err) {
@@ -113,11 +107,6 @@ TagLabels.propTypes = {
   pageContainer: PropTypes.instanceOf(PageContainer).isRequired,
   editorContainer: PropTypes.instanceOf(EditorContainer).isRequired,
 
-  isEditorMode: PropTypes.bool,
-};
-
-TagLabels.defaultProps = {
-  isEditorMode: false,
 };
 
 export default withTranslation()(TagLabelsWrapper);

src/client/js/components/PageEditor/PagePathNavForEditor.jsx

@@ -1,48 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import { withTranslation } from 'react-i18next';
-
-import LinkedPagePath from '@commons/models/linked-page-path';
-import PagePathHierarchicalLink from '@commons/components/PagePathHierarchicalLink';
-
-import { withUnstatedContainers } from '../UnstatedUtils';
-import AppContainer from '../../services/AppContainer';
-import PageContainer from '../../services/PageContainer';
-
-import RevisionPathControls from '../Page/RevisionPathControls';
-import TagLabels from '../Page/TagLabels';
-
-const PagePathNavForEditor = (props) => {
-  const { pageId, path } = props.pageContainer.state;
-
-  const linkedPagePath = new LinkedPagePath(path);
-  const pagePathHierarchicalLink = <PagePathHierarchicalLink linkedPagePath={linkedPagePath} />;
-
-  return (
-    <div className="grw-page-path-nav-for-edit">
-      <span className="d-flex align-items-center flex-wrap">
-        <h3 className="mb-0 grw-page-path-link">{pagePathHierarchicalLink}</h3>
-        <RevisionPathControls
-          pageId={pageId}
-          pagePath={path}
-        />
-      </span>
-      <TagLabels isEditorMode />
-    </div>
-  );
-};
-
-/**
- * Wrapper component for using unstated
- */
-const PagePathNavForEditorWrapper = withUnstatedContainers(PagePathNavForEditor, [AppContainer, PageContainer]);
-
-
-PagePathNavForEditor.propTypes = {
-  t: PropTypes.func.isRequired, //  i18next
-  appContainer: PropTypes.instanceOf(AppContainer).isRequired,
-  pageContainer: PropTypes.instanceOf(PageContainer).isRequired,
-};
-
-export default withTranslation()(PagePathNavForEditorWrapper);

src/client/js/legacy/crowi.js

@@ -222,6 +222,7 @@ $(() => {
     });
   } // end if pageId
 
+  // TODO clean code after GW-3605
   // tab changing handling
   $('a[href="#revision-body"]').on('show.bs.tab', () => {
     const navigationContainer = appContainer.getContainer('NavigationContainer');

src/client/js/services/NavigationContainer.js

@@ -19,7 +19,7 @@ export default class NavigationContainer extends Container {
     const { localStorage } = window;
 
     this.state = {
-      editorMode: null,
+      editorMode: 'view',
 
       isDeviceSmallerThanMd: null,
       preferDrawerModeByUser: localStorage.preferDrawerModeByUser === 'true',
@@ -136,7 +136,7 @@ export default class NavigationContainer extends Container {
     } = newState;
 
     // get preference on view or edit
-    const preferDrawerMode = editorMode != null ? preferDrawerModeOnEditByUser : preferDrawerModeByUser;
+    const preferDrawerMode = editorMode !== 'view' ? preferDrawerModeOnEditByUser : preferDrawerModeByUser;
 
     const isDrawerMode = isDeviceSmallerThanMd || preferDrawerMode;
     const isDrawerOpened = false; // close Drawer anyway

src/server/views/layout-growi/base/layout.html

@@ -11,7 +11,7 @@
 {% block content_header_wrapper %}
 <header class="py-0">
   {% block content_header %}
-    <div id="grw-subnav-container" class="d-edit-none"></div>
+    <div id="grw-subnav-container"></div>
   {% endblock %}
 </header>
 <div id="grw-subnav-switcher-container" class="d-edit-none"></div>

src/server/views/widget/page_content.html

@@ -39,12 +39,6 @@
 
   {% include 'page_alerts.html' %}
 
-  {% if !getConfig('crowi', 'customize:layout') || 'kibela' === getConfig('crowi', 'customize:layout') %}
-    {% include 'page_tabs_kibela.html' %}
-  {% else %}
-    {% include 'page_tabs.html' %}
-  {% endif %}
-
   <div class="tab-content">
 
     {% if page %}

src/server/views/widget/page_tabs.html

@@ -1,77 +0,0 @@
-{% if page %}
-<ul class="nav nav-tabs d-print-none" role="tablist">
-
-  {#
-    Left Tabs
-  #}
-  <li class="nav-item grw-main-nav-item-left">
-    <a class="nav-link active" href="#revision-body" role="tab" data-toggle="tab">
-      <i class="icon-control-play icon-fw"></i><span class="d-none d-md-inline">View</span>
-    </a>
-  </li>
-
-  {% if !isTrashPage() %}
-    <li class="nav-item grw-main-nav-item-left grw-nav-item-edit">
-      <a
-        {% if user %} href="#edit" data-toggle="tab" class="nav-link edit-button" {% endif %}
-        {% if not user %}
-          class="nav-link edit-button edit-button-disabled"
-          data-toggle="tooltip" data-placement="top" data-container="body" title="{{ t('Not available for guest') }}"
-        {% endif %}
-      >
-        <i class="icon-note icon-fw"></i><span class="d-none d-md-inline">{{ t('Edit') }}</span>
-      </a>
-    </li>
-
-    {% if isHackmdSetup() %}
-    <li class="nav-item grw-main-nav-item-left grw-nav-tab-hackmd">
-      <a
-        {% if user %} href="#hackmd" data-toggle="tab" class="nav-link edit-button" {% endif %}
-        {% if not user %}
-          class="nav-link edit-button edit-button-disabled"
-          data-toggle="tooltip" data-placement="top" data-container="body" title="{{ t('Not available for guest') }}"
-        {% endif %}
-      >
-        <i class="fa fa-fw fa-file-text-o"></i><span class="d-none d-md-inline">{{ t('HackMD') }}</span>
-      </a>
-    </li>
-    {% endif %}
-
-    <div id="page-editor-path-nav" class="d-none d-edit-sm-block ml-2"></div>
-  {% endif %}
-
-  {#
-    Right Tabs
-  #}
-
-  {# to place right side #}
-  <div class="mr-auto"></div>
-
-  <!-- presentation -->
-  {% if not page.isTopPage() %}
-    <li class="nav-item d-edit-none">
-      <a href="?presentation=1" class="nav-link toggle-presentation">
-        <i class="icon-film icon-fw"></i><span class="d-none d-sm-inline">{{ t('Presentation Mode') }}</span>
-      </a>
-    </li>
-  {% endif %}
-
-  <!-- revision-history -->
-  <li class="nav-item d-edit-none">
-    <a class="nav-link" href="#revision-history" role="tab" data-toggle="tab">
-      <i class="icon-layers icon-fw"></i><span class="d-none d-md-inline">{{ t('History') }}</span>
-    </a>
-  </li>
-
-  <!-- Outside-share-link -->
-  {% if !isTrashPage() %}
-    <li id="page-share-management" class="nav-item dropdown d-edit-none"></li>
-  {% endif %}
-
-  <!-- icon-options-vertical -->
-  {% if !isTrashPage() %}
-    <li id="page-management" class="nav-item dropdown d-edit-none"></li>
-  {% endif %}
-</ul>
-
-{% endif %}

src/server/views/widget/page_tabs_kibela.html

@@ -1,69 +0,0 @@
-{% if page %}
-<ul class="nav nav-tabs d-print-none">
-
-  {#
-    Left Tabs
-  #}
-  <li class="nav-item active">
-    <a class="nav-link active" href="#revision-body" data-toggle="tab">
-      <i class="icon-control-play"></i> View
-    </a>
-  </li>
-
-  {% if !isTrashPage() %}
-    <li class="nav-item nav-tab-edit">
-      <a
-        {% if user %} href="#edit" data-toggle="tab" class="nav-link edit-button" {% endif %}
-        {% if not user %}
-          class="nav-link edit-button edit-button-disabled"
-          data-toggle="tooltip" data-placement="top" data-container="body" title="{{ t('Not available for guest') }}"
-        {% endif %}
-      >
-        <i class="icon-note"></i> {{ t('Edit') }}
-      </a>
-    </li>
-    {% if isHackmdSetup() %}
-    <li class="nav-item nav-tab-hackmd">
-      <a
-        {% if user %} href="#hackmd" data-toggle="tab" class="nav-link edit-button" {% endif %}
-        {% if not user %}
-          class="nav-link edit-button edit-button-disabled"
-          data-toggle="tooltip" data-placement="top" data-container="body" title="{{ t('Not available for guest') }}"
-        {% endif %}
-      >
-        <i class="fa fa-file-text-o"></i> {{ t('HackMD') }}
-      </a>
-    </li>
-    {% endif %}
-
-    <div id="page-editor-path-nav" class="d-none d-edit-sm-block ml-2"></div>
-
-  {% endif %}
-
-  {#
-    Right Tabs
-  #}
-  {# to place right side #}
-  <div class="mr-auto"></div>
-
-  {% if not page.isTopPage() %}
-  <li class="nav-item">
-    <a href="?presentation=1" class="nav-link toggle-presentation">
-      <i class="icon-film"></i><span class="d-none d-sm-inline"> {{ t('Presentation Mode') }}</span>
-    </a>
-  </li>
-  {% endif %}
-
-  <li class="nav-item">
-    <a href="#revision-history" class="nav-link" data-toggle="tab">
-      <i class="icon-layers"></i><span class="d-none d-sm-inline"> {{ t('History') }}</span>
-    </a>
-  </li>
-
-  {% if !isTrashPage() %}
-    <li id="page-management" class="nav-item dropdown d-edit-none"></li>
-  {% endif %}
-
-</ul>
-
-{% endif %}