WIP: reorganize GrowiSubNavigation

reference isForbidden of PageContainer.state

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

@@ -58,10 +58,9 @@ const PagePathNav = ({ pageId, pagePath, isPageForbidden }) => {
 };
 
 const GrowiSubNavigation = (props) => {
-  const isPageForbidden = document.querySelector('#grw-subnav').getAttribute('data-is-forbidden-page') === 'true';
   const { appContainer, pageContainer } = props;
   const {
-    pageId, path, createdAt, creator, updatedAt, revisionAuthor,
+    pageId, path, createdAt, creator, updatedAt, revisionAuthor, isForbidden: isPageForbidden,
   } = pageContainer.state;
 
   const isPageNotFound = pageId == null;
@@ -70,16 +69,16 @@ const GrowiSubNavigation = (props) => {
   // Display only the RevisionPath
   if (isPageNotFound || isPageForbidden) {
     return (
-      <div className="px-3 py-3 grw-subnavbar">
+      <div className="grw-subnavbar d-flex align-items-center justify-content-between">
         <PagePathNav pageId={pageId} pagePath={path} isPageForbidden={isPageForbidden} />
       </div>
     );
   }
 
-  const additionalClassNames = ['grw-subnavbar'];
+  const additionalClassNames = [''];
 
   return (
-    <div className={`d-flex align-items-center justify-content-between ${additionalClassNames.join(' ')}`}>
+    <div className={`grw-subnavbar d-flex align-items-center justify-content-between ${additionalClassNames.join(' ')}`}>
 
       {/* Page Path */}
       <div>
@@ -138,6 +137,8 @@ GrowiSubNavigation.propTypes = {
   t: PropTypes.func.isRequired, //  i18next
   appContainer: PropTypes.instanceOf(AppContainer).isRequired,
   pageContainer: PropTypes.instanceOf(PageContainer).isRequired,
+
+  isCompactMode: PropTypes.bool,
 };
 
 export default withTranslation()(GrowiSubNavigationWrapper);

src/client/js/services/PageContainer.js

@@ -56,6 +56,7 @@ export default class PageContainer extends Container {
       createdAt: mainContent.getAttribute('data-page-created-at'),
       creator: JSON.parse(mainContent.getAttribute('data-page-creator')),
       updatedAt: mainContent.getAttribute('data-page-updated-at'),
+      isForbidden:  JSON.parse(mainContent.getAttribute('data-page-is-forbidden')),
       isDeleted:  JSON.parse(mainContent.getAttribute('data-page-is-deleted')),
       isDeletable:  JSON.parse(mainContent.getAttribute('data-page-is-deletable')),
       isAbleToDeleteCompletely:  JSON.parse(mainContent.getAttribute('data-page-is-able-to-delete-completely')),

src/client/styles/scss/_admin.scss

@@ -1,4 +1,13 @@
 .admin-page {
+  .title {
+    padding: 0.5rem 15px;
+
+    line-height: 1em;
+
+    @include variable-font-size(28px);
+    line-height: 1.1em;
+  }
+
   .admin-user-menu {
     .dropdown-menu {
       right: 0;

src/client/styles/scss/_subnav.scss

@@ -9,17 +9,6 @@ $easeInOutCubic: cubic-bezier(0.65, 0, 0.35, 1);
  * Styles
  */
 
-.grw-header {
-  .title {
-    padding: 0.5rem 15px;
-
-    line-height: 1em;
-
-    @include variable-font-size(28px);
-    line-height: 1.1em;
-  }
-}
-
 .grw-subnavbar {
   min-height: 115px;
   padding: 10px 30px;

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

@@ -9,8 +9,9 @@
 {% block layout_main %}
 
 {% block content_header_wrapper %}
-<header class="py-0 grw-header">
+<header class="py-0">
   {% block content_header %}
+    <div id="grw-subnav" class="grw-subnav d-edit-none"></div>
   {% endblock %}
 </header>
 {% endblock %}

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

@@ -1,11 +1,6 @@
 {% extends 'base/layout.html' %}
 
 
-{% block content_header %}
-  {% include 'widget/header.html' with {forbidden: true} %}
-{% endblock %}
-
-
 {% block content_main_before %}
   {% include '../widget/page_alerts.html' %}
 {% endblock %}

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

@@ -1,11 +1,6 @@
 {% extends 'base/layout.html' %}
 
 
-{% block content_header %}
-  {% include 'widget/header.html' with {isCreatable: false} %}
-{% endblock %}
-
-
 {% block content_main_before %}
   {% include '../widget/page_alerts.html' %}
 {% endblock %}

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

@@ -1,11 +1,6 @@
 {% extends 'base/layout.html' %}
 
 
-{% block content_header %}
-  {% include 'widget/header.html' %}
-{% endblock %}
-
-
 {% block content_main_before %}
   {% include '../widget/page_alerts.html' %}
 {% endblock %}

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

@@ -1,11 +1,6 @@
 {% extends 'base/layout.html' %}
 
 
-{% block content_header %}
-  {% include 'widget/header.html' %}
-{% endblock %}
-
-
 {% block content_main_before %}
 {% endblock %}
 

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

@@ -1,11 +1,6 @@
 {% extends 'base/layout.html' %}
 
 
-{% block content_header %}
-  {% include 'widget/header.html' %}
-{% endblock %}
-
-
 {% block content_main_before %}
 {% endblock %}
 

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

@@ -5,14 +5,12 @@
   user-page
 {% endblock %}
 
-{% block content_header_wrapper %}
-  <header class="py-0 grw-header grw-header-user-page">
-    {% if pageUser %}
-      <div id="grw-subnav-for-user-page" class="grw-subnav" data-page-user="{{ pageUser|json }}"></div>
-    {% else %}
-      {% parent %}
-    {% endif %}
-  </header>
+{% block content_header %}
+  {% if pageUser %}
+    <div id="grw-subnav-for-user-page" class="grw-subnav" data-page-user="{{ pageUser|json }}"></div>
+  {% else %}
+    {% parent %}
+  {% endif %}
 {% endblock %}
 
 

src/server/views/layout-growi/widget/header.html

@@ -1 +0,0 @@
-<div id="grw-subnav" class="grw-subnav d-edit-none" data-is-forbidden-page="{{ forbidden }}"></div>

src/server/views/tags.html

@@ -5,7 +5,7 @@
 {% block html_base_css %}tags-page{% endblock %}
 
 {% block layout_main %}
-<header class="py-0 grw-header">
+<header class="py-0">
   <h1 class="title">{{ t('Tags') }}</h1>
 </header>
 

src/server/views/widget/page_content.html

@@ -11,6 +11,7 @@
   data-page-has-draft-on-hackmd="{% if hasDraftOnHackmd %}{{ hasDraftOnHackmd.toString() }}{% endif %}"
   data-page-is-liked="{% if user %}{{ page.isLiked(user) }}{% else %}false{% endif %}"
   data-page-is-seen="{% if page and page.isSeenUser(user) %}1{% else %}0{% endif %}"
+  data-page-is-forbidden="{% if forbidden %}true{% else %}false{% endif %}"
   data-page-is-deleted="{% if page.isDeleted() %}true{% else %}false{% endif %}"
   data-page-is-deletable="{% if isDeletablePage() %}true{% else %}false{% endif %}"
   data-page-is-able-to-delete-completely="{% if user.canDeleteCompletely(page.creator._id) %}true{% else %}false{% endif %}"