impl PagePathNavForEditor

src/client/js/app.jsx

@@ -8,6 +8,7 @@ import loggerFactory from '@alias/logger';
 import SearchPage from './components/SearchPage';
 import TagsList from './components/TagsList';
 import PageEditor from './components/PageEditor';
+import PagePathNavForEditor from './components/PageEditor/PagePathNavForEditor';
 // eslint-disable-next-line import/no-duplicates
 import OptionsSelector from './components/PageEditor/OptionsSelector';
 // eslint-disable-next-line import/no-duplicates
@@ -21,8 +22,6 @@ import PageTimeline from './components/PageTimeline';
 import CommentEditorLazyRenderer from './components/PageComment/CommentEditorLazyRenderer';
 import PageAttachment from './components/PageAttachment';
 import PageStatusAlert from './components/PageStatusAlert';
-import RevisionPathControls from './components/Page/RevisionPathControls';
-import TagLabels from './components/Page/TagLabels';
 import PagePathAutoComplete from './components/PagePathAutoComplete';
 import RecentCreated from './components/RecentCreated/RecentCreated';
 import MyDraftList from './components/MyDraftList/MyDraftList';
@@ -71,6 +70,7 @@ Object.assign(componentMappings, {
   'create-page-name-input': <PagePathAutoComplete crowi={appContainer} initializedPath={pageContainer.state.path} addTrailingSlash />,
 
   'page-editor': <PageEditor />,
+  'page-editor-path-nav': <PagePathNavForEditor />,
   'page-editor-options-selector': <OptionsSelector crowi={appContainer} />,
   'page-status-alert': <PageStatusAlert />,
   'save-page-controls': <SavePageControls />,
@@ -101,8 +101,6 @@ if (pageContainer.state.path != null) {
   Object.assign(componentMappings, {
     // eslint-disable-next-line quote-props
     'page': <Page />,
-    'revision-path-controls': <RevisionPathControls pageId={pageContainer.state.pageId} pagePath={pageContainer.state.path} />,
-    'tag-label': <TagLabels />,
     'grw-subnav': <GrowiSubNavigation />,
     'grw-subnav-for-user-page': <GrowiSubNavigationForUserPage />,
   });

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

@@ -0,0 +1,50 @@
+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 { createSubscribedElement } 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 mt-1">
+      <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 />
+    </div>
+  );
+};
+
+/**
+ * Wrapper component for using unstated
+ */
+const PagePathNavForEditorWrapper = (props) => {
+  return createSubscribedElement(PagePathNavForEditor, props, [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/styles/scss/_on-edit.scss

@@ -24,6 +24,11 @@ body.on-edit {
     }
   }
 
+  // show
+  .d-edit-block {
+    display: block !important;
+  }
+
   // hide unnecessary elements
   header,
   footer,
@@ -63,11 +68,6 @@ body.on-edit {
     }
   }
 
-  // show revision path
-  .grw-revision-path-for-edit {
-    display: block !important;
-  }
-
   /*****************
    * Expand Editor
    *****************/
@@ -93,24 +93,21 @@ body.on-edit {
       padding: 0; //    for crowi layout
       pointer-events: initial; // enable pointer-events
     }
+  }
 
-    h1#revision-path {
-      @include variable-font-size(20px);
+  .grw-page-path-nav-for-edit {
+    .grw-page-path-link {
+      font-size: 20px;
       line-height: 1em;
-
-      // nowrap even if the path is too long
-      .d-flex {
-        flex-wrap: nowrap;
       }
-
-      .path-segment {
-        white-space: nowrap;
+    .separator {
+      margin-right: 0.1em;
+      margin-left: 0.1em;
       }
     }
 
-    .tag-labels.new-page {
-      display: block;
-    }
+  .tag-labels {
+    line-height: 1em;
   }
 
   .page-editor-footer {

src/client/styles/scss/_page.scss

@@ -24,10 +24,6 @@
       }
     }
   }
-
-  .tag-labels.new-page {
-    display: none;
-  }
 }
 
 .main .content-main .revision-history {

src/client/styles/scss/_subnav.scss

@@ -77,9 +77,11 @@ header.grw-header {
     line-height: 1.1em;
   }
 
-  .separator {
-    margin-right: 0.2em;
-    margin-left: 0.2em;
+  .grw-page-path-nav {
+    .separator {
+      margin-right: 0.2em;
+      margin-left: 0.2em;
+    }
   }
 
   ul.authors {

src/server/views/widget/not_found_tabs.html

@@ -14,5 +14,7 @@
       <i class="icon-note"></i> {{ t('Create') }}
     </a>
   </li>
+
+  <div id="page-editor-path-nav" class="d-none d-edit-block ml-2"></div>
   {% endif %}
 </ul>

src/server/views/widget/page_tabs.html

@@ -37,11 +37,7 @@
     </li>
     {% endif %}
 
-    <div class="grw-revision-path-for-edit d-none ml-2">
-      <h4 id="revision-path" class="mb-0"></h4>
-      <div id="revision-path-controls"></div>
-      <div id="tag-label"></div>
-    </div>
+    <div id="page-editor-path-nav" class="d-none d-edit-block ml-2"></div>
   {% endif %}
 
   {#

src/server/views/widget/page_tabs_kibela.html

@@ -11,30 +11,33 @@
   </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 %}
+    <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-block ml-2"></div>
+
   {% endif %}
 
   {#