Quellcode durchsuchen

create component

itizawa vor 5 Jahren
Ursprung
Commit
ac463c9b67

+ 2 - 0
src/client/js/app.jsx

@@ -21,6 +21,7 @@ import PageHistory from './components/PageHistory';
 import PageComments from './components/PageComments';
 import PageTimeline from './components/PageTimeline';
 import CommentEditorLazyRenderer from './components/PageComment/CommentEditorLazyRenderer';
+import PageManagement from './components/Page/PageManagement';
 import PageAttachment from './components/PageAttachment';
 import PageStatusAlert from './components/PageStatusAlert';
 import PagePathAutoComplete from './components/PagePathAutoComplete';
@@ -86,6 +87,7 @@ if (pageContainer.state.pageId != null) {
     'page-comments-list': <PageComments />,
     'page-attachment': <PageAttachment />,
     'page-comment-write': <CommentEditorLazyRenderer />,
+    'page-management': <PageManagement />,
     'revision-toc': <TableOfContents />,
     'seen-user-list': <UserPictureList userIds={pageContainer.state.seenUserIds} />,
     'liker-list': <UserPictureList userIds={pageContainer.state.likerUserIds} />,

+ 81 - 0
src/client/js/components/Page/PageManagement.jsx

@@ -0,0 +1,81 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withTranslation } from 'react-i18next';
+
+import { isTopPage, isUserPage } from '@commons/util/path-utils';
+import { createSubscribedElement } from '../UnstatedUtils';
+import AppContainer from '../../services/AppContainer';
+import PageContainer from '../../services/PageContainer';
+
+
+const PageManagement = (props) => {
+  const { t, appContainer, pageContainer } = props;
+  const { path } = pageContainer.state;
+  const { currentUser } = appContainer;
+  const isTopPagePath = isTopPage(path);
+  const isUserPagePath = isUserPage(path);
+
+  function renderDropdownItemForNotTopPage() {
+    return (
+      <>
+        <a className="dropdown-item" href="#" data-target="#renamePage" data-toggle="modal">
+          <i className="icon-fw icon-action-redo"></i> { t('Move/Rename') }
+        </a>
+        <a className="dropdown-item" href="#" data-target="#duplicatePage" data-toggle="modal">
+          <i className="icon-fw icon-docs"></i> { t('Duplicate') }
+        </a>
+        <div className="dropdown-divider"></div>
+      </>
+    );
+  }
+
+  function renderDropdownItemForDeletablePage() {
+    return (
+      <>
+        <div className="dropdown-divider"></div>
+        <a className="dropdown-item" href="#" data-target="#deletePage" data-toggle="modal">
+          <i className="icon-fw icon-fire text-danger"></i> { t('Delete') }
+        </a>
+      </>
+    );
+  }
+
+  return (
+    <li className="nav-item dropdown">
+      <a
+        role="button"
+        className={`nav-link dropdown-toggle dropdown-toggle-no-caret ${currentUser == null && 'dropdown-toggle-disabled'}`}
+        href="#"
+        data-toggle={`${currentUser == null ? 'tooltip' : 'dropdown'}`}
+        data-placement="top"
+        data-container="body"
+        title={t('Not available for guest')}
+      >
+        <i className="icon-options-vertical"></i>
+      </a>
+      <div className="dropdown-menu dropdown-menu-right">
+        {!isTopPagePath && renderDropdownItemForNotTopPage()}
+        <a className="dropdown-item" href="#" data-target="#create-template" data-toggle="modal">
+          <i className="icon-fw icon-magic-wand"></i> { t('template.option_label.create/edit') }
+        </a>
+        {(!isTopPagePath && !isUserPagePath) && renderDropdownItemForDeletablePage()}
+      </div>
+    </li>
+  );
+};
+
+/**
+ * Wrapper component for using unstated
+ */
+const PageManagementWrapper = (props) => {
+  return createSubscribedElement(PageManagement, props, [AppContainer, PageContainer]);
+};
+
+
+PageManagement.propTypes = {
+  t: PropTypes.func.isRequired, // i18next
+  appContainer: PropTypes.instanceOf(AppContainer).isRequired,
+  pageContainer: PropTypes.instanceOf(PageContainer).isRequired,
+};
+
+export default withTranslation()(PageManagementWrapper);

+ 1 - 38
src/server/views/widget/page_tabs.html

@@ -65,44 +65,7 @@
 
   <!-- icon-options-vertical -->
   {% if !isTrashPage() %}
-    {% if page.isTopPage() %}
-    <li class="nav-item dropdown">
-      <a
-        {% if user %} role="button" class="nav-link dropdown-toggle dropdown-toggle-no-caret" href="#" data-toggle="dropdown" {% endif %}
-        {% if not user %}
-          class="nav-link dropdown-toggle dropdown-toggle-disabled dropdown-toggle-no-caret"
-          data-toggle="tooltip" data-placement="top" data-container="body" title="{{ t('Not available for guest') }}"
-        {% endif %}
-      >
-        <i class="icon-options-vertical"></i>
-      </a>
-      <div class="dropdown-menu dropdown-menu-right">
-        <a class="dropdown-item" href="#" data-target="#create-template" data-toggle="modal"><i class="icon-fw icon-magic-wand"></i> {{ t('template.option_label.create/edit') }}</a>
-      </div>
-    </li>
-    {% else %}
-    <li class="nav-item dropdown">
-      <a
-        {% if user %} role="button" class="nav-link dropdown-toggle dropdown-toggle-no-caret" href="#" data-toggle="dropdown" {% endif %}
-        {% if not user %}
-          class="nav-link dropdown-toggle dropdown-toggle-disabled dropdown-toggle-no-caret"
-          data-toggle="tooltip" data-placement="top" data-container="body" title="{{ t('Not available for guest') }}"
-        {% endif %}
-      >
-        <i class="icon-options-vertical"></i>
-      </a>
-      <div class="dropdown-menu dropdown-menu-right">
-        <a class="dropdown-item" href="#" data-target="#renamePage" data-toggle="modal"><i class="icon-fw icon-action-redo"></i> {{ t('Move/Rename') }}</a>
-        <a class="dropdown-item" href="#" data-target="#duplicatePage" data-toggle="modal"><i class="icon-fw icon-docs"></i> {{ t('Duplicate') }}</a>
-        <div class="dropdown-divider"></div>
-        <a class="dropdown-item" href="#" data-target="#create-template" data-toggle="modal"><i class="icon-fw icon-magic-wand"></i> {{ t('template.option_label.create/edit') }}</a>
-        {% if isDeletablePage() %}
-          <div class="dropdown-divider"></div>
-          <a class="dropdown-item" href="#" data-target="#deletePage" data-toggle="modal"><i class="icon-fw icon-fire text-danger"></i> {{ t('Delete') }}</a>
-        {% endif %}
-      </u>
-    </li>
-    {% endif %}
+    <li id="page-management" class="nav-item dropdown"></li>
   {% endif %}
 </ul>
 

+ 1 - 42
src/server/views/widget/page_tabs_kibela.html

@@ -61,48 +61,7 @@
   </li>
 
   {% if !isTrashPage() %}
-    {% if page.isTopPage() %}
-    <li class="nav-item dropdown">
-      <a
-        {% if user %} role="button" class="nav-link dropdown-toggle dropdown-toggle-no-caret" data-toggle="dropdown" {% endif %}
-        {% if not user %}
-          class="nav-link dropdown-toggle dropdown-toggle-disabled dropdown-toggle-no-caret"
-          data-toggle="tooltip" data-placement="top" data-container="body" title="{{ t('Not available for guest') }}"
-        {% endif %}
-      >
-        <i class="icon-options-vertical"></i>
-      </a>
-      <ul class="dropdown-menu dropdown-menu-right">
-        <li class="dropdown-item">
-          <a href="#" data-target="#create-template" data-toggle="modal"><i class="icon-fw icon-magic-wand"></i> {{ t('template.option_label.create/edit') }}</a>
-        </li>
-      </ul>
-    </li>
-    {% else %}
-    <li class="nav-item dropdown">
-      <a
-        {% if user %} role="button" class="nav-link dropdown-toggle dropdown-toggle-no-caret" data-toggle="dropdown" {% endif %}
-        {% if not user %}
-          class="nav-link dropdown-toggle dropdown-toggle-disabled dropdown-toggle-no-caret"
-          data-toggle="tooltip" data-placement="top" data-container="body" title="{{ t('Not available for guest') }}"
-        {% endif %}
-      >
-        <i class="icon-options-vertical"></i>
-      </a>
-      <ul class="dropdown-menu dropdown-menu-right">
-        <li class="dropdown-item"><a href="#" data-target="#renamePage" data-toggle="modal"><i class="icon-fw icon-action-redo"></i> {{ t('Move/Rename') }}</a></li>
-        <li class="dropdown-item"><a href="#" data-target="#duplicatePage" data-toggle="modal"><i class="icon-fw icon-docs"></i> {{ t('Duplicate') }}</a></li>
-        <li class="dropdown-divider"></li>
-        <li class="dropdown-item">
-          <a href="#" data-target="#create-template" data-toggle="modal"><i class="icon-fw icon-magic-wand"></i> {{ t('template.option_label.create/edit') }}</a>
-        </li>
-        {% if isDeletablePage() %}
-        <li class="dropdown-divider"></li>
-        <li class="dropdown-item"><a href="#" data-target="#deletePage" data-toggle="modal"><i class="icon-fw icon-fire text-danger"></i> {{ t('Delete') }}</a></li>
-        {% endif %}
-      </ul>
-    </li>
-    {% endif %}
+    <li id="page-management" class="nav-item dropdown"></li>
   {% endif %}
 
 </ul>