Merge pull request #2868 from weseek/imprv/article-area-gw4006

Imprv/article area gw4006

src/client/js/app.jsx

@@ -16,6 +16,7 @@ import PageTimeline from './components/PageTimeline';
 import CommentEditorLazyRenderer from './components/PageComment/CommentEditorLazyRenderer';
 import PageManagement from './components/Page/PageManagement';
 import TrashPageAlert from './components/Page/TrashPageAlert';
+import NotFoundAlert from './components/Page/NotFoundAlert';
 import PageStatusAlert from './components/PageStatusAlert';
 import RecentCreated from './components/RecentCreated/RecentCreated';
 import MyDraftList from './components/MyDraftList/MyDraftList';
@@ -73,6 +74,8 @@ Object.assign(componentMappings, {
 
   'trash-page-alert': <TrashPageAlert />,
 
+  'not-found-alert': <NotFoundAlert onPageCreateClicked={navigationContainer.setEditorMode} />,
+
   'page-timeline': <PageTimeline />,
 
   'personal-setting': <PersonalSettings crowi={personalContainer} />,

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

@@ -0,0 +1,41 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const NotFoundAlert = (props) => {
+
+  function clickHandler(viewType) {
+    if (props.onPageCreateClicked === null) {
+      return;
+    }
+    props.onPageCreateClicked(viewType);
+  }
+
+  return (
+    <div className="grw-not-found-alert border m-4 p-4">
+      <div className="col-md-12">
+        <h2 className="text-muted not-found-text">
+          <i className="icon-info" aria-hidden="true"></i>
+          {/* Todo make the message supported by i18n GW4050 */ }
+          このページは存在しません。新たに作成する必要があります。
+        </h2>
+        <button
+          type="button"
+          className="m-2 p-2"
+          onClick={() => { clickHandler('edit') }}
+        >
+          <i className="icon-note icon-fw" />
+          {/* Todo make the message supported by i18n GW4050 */ }
+          ページを作成する
+        </button>
+      </div>
+    </div>
+  );
+};
+
+
+NotFoundAlert.propTypes = {
+  onPageCreateClicked: PropTypes.func,
+};
+
+
+export default NotFoundAlert;

src/client/js/services/NavigationContainer.js

@@ -37,6 +37,7 @@ export default class NavigationContainer extends Container {
 
     this.openPageCreateModal = this.openPageCreateModal.bind(this);
     this.closePageCreateModal = this.closePageCreateModal.bind(this);
+    this.setEditorMode = this.setEditorMode.bind(this);
     this.initDeviceSize();
     this.initScrollEvent();
   }

src/server/views/widget/not_found_content.html

@@ -1,12 +1,3 @@
-<div class="row not-found-message-row mb-4 d-edit-none">
-  <div class="col-md-12">
-    <h2 class="text-muted">
-      <i class="icon-info" aria-hidden="true"></i>
-      Page is not found
-    </h2>
-  </div>
-</div>
-
 <div id="content-main" class="content-main page-list"
   data-path="{{ encodeURI(path) }}"
   data-current-user="{% if user %}{{ user._id.toString() }}{% endif %}"
@@ -15,6 +6,8 @@
   {% endif %}
   >
 
+  <div id="display-switcher"></div>
+  <div id="not-found-alert"></div>
   {% include 'not_found_tabs.html' %}
 
   <div class="tab-content">
@@ -49,13 +42,6 @@
       {% include '../widget/page_list.html' with { pages: pages, pager: pager, viewConfig: viewConfig } %}
     </div>
 
-    {# edit view #}
-    <div class="tab-pane" id="edit">
-      <div id="page-editor">{% if pageForm.body %}{{ pageForm.body }}{% endif %}</div>
-    </div>
-
-    <div id="page-editor-navbar-bottom-container" class="d-none d-edit-block"></div>
-
   </div>
 
   <div id="grw-page-status-alert-container"></div>

src/server/views/widget/not_found_tabs.html

@@ -1,20 +1,8 @@
-<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 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>
 
-  {% if !isTrashPage() and !page.isDeleted() %}
-  <li class="nav-item grw-nav-main-left-tab">
-    <a
-      {% if user %} href="#edit" role="tab" 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('Create') }}
-    </a>
-  </li>
-
-  <div id="page-editor-path-nav" class="d-none d-edit-sm-block ml-2"></div>
-  {% endif %}
-</ul>