add components for subnavbar

src/client/js/app.jsx

@@ -36,6 +36,7 @@ import CommentContainer from './services/CommentContainer';
 import EditorContainer from './services/EditorContainer';
 import TagContainer from './services/TagContainer';
 import GrowiSubNavigation from './components/Navbar/GrowiSubNavigation';
+import GrowiCompactSubNavigation from './components/Navbar/GrowiCompactSubNavigation';
 
 import { appContainer, componentMappings } from './bootstrap';
 
@@ -102,6 +103,7 @@ if (pageContainer.state.path != null) {
     'revision-path': <RevisionPath behaviorType={appContainer.config.behaviorType} pageId={pageContainer.state.pageId} pagePath={pageContainer.state.path} />,
     'tag-label': <TagLabels />,
     'grw-subnav': <GrowiSubNavigation />,
+    'grw-compactsubnav': <GrowiCompactSubNavigation />,
   });
 }
 

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

@@ -0,0 +1,77 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { withTranslation } from 'react-i18next';
+
+import { isTrashPage } from '../../../../lib/util/path-utils';
+import { createSubscribedElement } from '../UnstatedUtils';
+import AppContainer from '../../services/AppContainer';
+import RevisionPath from '../Page/RevisionPath';
+import PageContainer from '../../services/PageContainer';
+import TagLabels from '../Page/TagLabels';
+import LikeButton from '../LikeButton';
+import BookmarkButton from '../BookmarkButton';
+// import PageCreator from './PageCreator';
+import ReducedPageCreator from './ReducedPageCreator';
+import ReducedRevisionAuthor from './ReducedRevisionAuthor';
+// import RevisionAuthor from './RevisionAuthor';
+
+const GrowiCompactSubNavigation = (props) => {
+  // const isPageForbidden = document.querySelector('#grw-compactsubnav').getAttribute('data-is-forbidden-page');
+  const { appContainer, pageContainer } = props;
+  const {
+    path, createdAt, creator, updatedAt, revisionAuthor,
+  } = pageContainer.state;
+  // const isVisible = (window.pageYOffset > 122);
+  // // const positionY = document.getElementById('#grw-navbar');
+  // const invisiblePosition = 122;
+  // window.addEventListener('scroll', () => {
+  //   if (isVisible) {
+  return (
+    <div className="d-flex align-items-center fixed-top grw-compactsubnavbar-color">
+
+      {/* Page Path */}
+      <div className="title-container mr-auto">
+        <h2>
+          <RevisionPath behaviorType={appContainer.config.behaviorType} pageId={pageContainer.state.pageId} pagePath={pageContainer.state.path} />
+        </h2>
+        <TagLabels />
+      </div>
+
+      {/* Header Button */}
+      <div className="ml-1">
+        <LikeButton pageId={pageContainer.state.pageId} isLiked={pageContainer.state.isLiked} />
+      </div>
+      <div>
+        <BookmarkButton pageId={pageContainer.state.pageId} crowi={appContainer} />
+      </div>
+
+      {/* Page Authors */}
+      <ul className="authors text-nowrap d-none d-lg-block">
+        {creator != null && <li><ReducedPageCreator creator={creator} createdAt={createdAt} /></li>}
+        {revisionAuthor != null && <li className="mt-1"><ReducedRevisionAuthor revisionAuthor={revisionAuthor} updatedAt={updatedAt} /></li>}
+      </ul>
+
+    </div>
+  );
+  //   }
+  // }, true);
+  // return null;
+
+};
+
+/**
+ * Wrapper component for using unstated
+ */
+const GrowiCompactSubNavigationWrapper = (props) => {
+  return createSubscribedElement(GrowiCompactSubNavigation, props, [AppContainer, PageContainer]);
+};
+
+
+GrowiCompactSubNavigation.propTypes = {
+  t: PropTypes.func.isRequired, //  i18next
+  appContainer: PropTypes.instanceOf(AppContainer).isRequired,
+  pageContainer: PropTypes.instanceOf(PageContainer).isRequired,
+};
+
+export default withTranslation()(GrowiCompactSubNavigationWrapper);

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

@@ -24,7 +24,7 @@ const GrowiSubNavigation = (props) => {
   // Display only the RevisionPath if the page is trash or forbidden
   if (isTrashPage(path) || isPageForbidden) {
     return (
-      <div className="d-sm-flex align-items-center">
+      <div className="d-flex align-items-center">
         <div className="title-container mr-auto">
           <h1>
             <RevisionPath behaviorType={appContainer.config.behaviorType} pageId={pageContainer.state.pageId} pagePath={pageContainer.state.path} />

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

@@ -0,0 +1,28 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import UserPicture from '../User/UserPicture';
+import { userPageRoot } from '../../../../lib/util/path-utils';
+
+const ReducedPageCreator = (props) => {
+  const { creator, createdAt } = props;
+
+  return (
+    <div className="d-flex align-items-center">
+      <div className="mr-2" href={userPageRoot(creator)} data-toggle="tooltip" data-placement="bottom" title={creator.name}>
+        <UserPicture user={creator} size="xs" />
+      </div>
+      <div>
+        Created in <span className="text-muted">{createdAt}</span>
+      </div>
+    </div>
+  );
+};
+
+ReducedPageCreator.propTypes = {
+  creator: PropTypes.object.isRequired,
+  createdAt: PropTypes.string.isRequired,
+};
+
+
+export default ReducedPageCreator;

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

@@ -0,0 +1,29 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import UserPicture from '../User/UserPicture';
+import { userPageRoot } from '../../../../lib/util/path-utils';
+
+const ReducedRevisionAuthor = (props) => {
+  const { revisionAuthor, updatedAt } = props;
+
+  return (
+    <div className="d-flex align-items-center">
+      <div className="mr-2" href={userPageRoot(revisionAuthor)} data-toggle="tooltip" data-placement="bottom" title={revisionAuthor.name}>
+        <UserPicture user={revisionAuthor} size="xs" />
+      </div>
+      <div>
+        Updated in <span className="text-muted">{updatedAt}</span>
+      </div>
+    </div>
+  );
+};
+
+ReducedRevisionAuthor.propTypes = {
+
+  revisionAuthor: PropTypes.object.isRequired,
+  updatedAt: PropTypes.string.isRequired,
+};
+
+
+export default ReducedRevisionAuthor;

src/client/styles/scss/_layout.scss

@@ -36,6 +36,12 @@
   }
 }
 
+.grw-subnavbar {
+  position: fixed;
+  top: 0;
+  z-index: 1;
+}
+
 /*
   * header
   */
@@ -61,7 +67,7 @@ header {
   }
 
   h1 {
-    @include variable-font-size(26px);
+    @include variable-font-size(28px);
     line-height: 1.1em;
   }
 }

src/client/styles/scss/_page_growi.scss

@@ -20,5 +20,8 @@
         }
       }
     }
+    .grw-compactsubnavbar-color {
+      background-color: rgba(250, 250, 250, 0.9);
+    }
   }
 }

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

@@ -9,7 +9,7 @@
 {% block layout_main %}
 <div class="container-fluid">
 
-  <div class="row grw-subnav sticky-top">
+  <div class="row grw-subnav">
     <div class="col-12 grw-title-bar">
       {% block content_header %}
       {% endblock %}

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

@@ -1,6 +1,7 @@
 <header id="page-header">
 
   <div id="grw-subnav" data-is-forbidden-page="{{ forbidden }}"></div>
+  <div id="grw-compactsubnav" data-is-forbidden-page="{{ forbidden }}"></div>
 
     {% if not page and not forbidden and ('/' === path or 'crowi' === getConfig('crowi', 'customize:behavior')) and not isUserPageList(path) and !isTrashPage() %}
       {% if '/' === path.slice(-1) %}