Merge branch 'master' into feat/3176-grid-edit-modal-for-master-merge

src/client/js/app.jsx

@@ -29,9 +29,6 @@ import MyDraftList from './components/MyDraftList/MyDraftList';
 import BookmarkIcon from './components/Icons/BookmarkIcon';
 import BookmarkList from './components/PageList/BookmarkList';
 import LikerList from './components/User/LikerList';
-import TableOfContents from './components/TableOfContents';
-import PageAccessories from './components/PageAccessories';
-import UserInfo from './components/User/UserInfo';
 import Fab from './components/Fab';
 import PersonalSettings from './components/Me/PersonalSettings';
 import UserContentsLinks from './components/UserContentsLinks';
@@ -112,8 +109,6 @@ if (pageContainer.state.pageId != null) {
     'page-comments-list': <PageComments />,
     'page-comment-write': <CommentEditorLazyRenderer />,
     'page-management': <PageManagement />,
-    'page-accessories': <PageAccessories />,
-    'revision-toc': <TableOfContents />,
     'liker-list': <LikerList />,
     'page-content-footer': <PageContentFooter />,
 
@@ -134,7 +129,6 @@ if (pageContainer.state.path != null) {
     'page': <Page />,
     'grw-subnav-container': <GrowiSubNavigation />,
     'grw-subnav-switcher-container': <GrowiSubNavigationSwitcher />,
-    'user-info': <UserInfo pageUser={pageContainer.state.pageUser} />,
     'display-switcher': <DisplaySwitcher />,
   });
 }

src/client/js/components/Admin/Users/UserMenu.jsx

@@ -1,6 +1,9 @@
 import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { withTranslation } from 'react-i18next';
+import {
+  UncontrolledDropdown, DropdownToggle, DropdownMenu,
+} from 'reactstrap';
 
 import StatusActivateButton from './StatusActivateButton';
 import StatusSuspendedButton from './StatusSuspendedButton';
@@ -80,16 +83,16 @@ class UserMenu extends React.Component {
 
     return (
       <Fragment>
-        <div className="btn-group admin-user-menu position-absolute" role="group">
-          <button id="userMenu" type="button" className="btn btn-outline-secondary btn-sm dropdown-toggle" data-toggle="dropdown">
+        <UncontrolledDropdown id="userMenu" size="sm">
+          <DropdownToggle caret color="secondary" outline>
             <i className="icon-settings"></i>
-          </button>
-          <div className="dropdown-menu" aria-labelledby="userMenu">
+          </DropdownToggle>
+          <DropdownMenu positionFixed>
             {this.renderEditMenu()}
             {user.status !== 4 && this.renderStatusMenu()}
             {user.status === 2 && this.renderAdminMenu()}
-          </div>
-        </div>
+          </DropdownMenu>
+        </UncontrolledDropdown>
       </Fragment>
     );
   }

src/client/js/components/BookmarkButton.jsx

@@ -18,8 +18,8 @@ class BookmarkButton extends React.Component {
   }
 
   async handleClick() {
-    const { pageContainer } = this.props;
-    const isGuestUser = pageContainer.state.isGuestUser;
+    const { appContainer, pageContainer } = this.props;
+    const { isGuestUser } = appContainer;
 
     if (isGuestUser) {
       return;
@@ -70,8 +70,8 @@ class BookmarkButton extends React.Component {
 const BookmarkButtonWrapper = withUnstatedContainers(BookmarkButton, [AppContainer, PageContainer]);
 
 BookmarkButton.propTypes = {
-  appContainer: PropTypes.instanceOf(PageContainer).isRequired,
-  pageContainer: PropTypes.instanceOf(AppContainer).isRequired,
+  appContainer: PropTypes.instanceOf(AppContainer).isRequired,
+  pageContainer: PropTypes.instanceOf(PageContainer).isRequired,
 
   pageId: PropTypes.string,
   t: PropTypes.func.isRequired,

src/client/js/components/LikeButton.jsx

@@ -18,8 +18,8 @@ class LikeButton extends React.Component {
   }
 
   async handleClick() {
-    const { pageContainer } = this.props;
-    const isGuestUser = pageContainer.state.isGuestUser;
+    const { appContainer, pageContainer } = this.props;
+    const { isGuestUser } = appContainer;
 
     if (isGuestUser) {
       return;

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

@@ -3,21 +3,51 @@ import { TabContent, TabPane } from 'reactstrap';
 import propTypes from 'prop-types';
 import { withUnstatedContainers } from '../UnstatedUtils';
 import NavigationContainer from '../../services/NavigationContainer';
+import PageContainer from '../../services/PageContainer';
 import Editor from '../PageEditor';
 import Page from '../Page';
+import UserInfo from '../User/UserInfo';
+import TableOfContents from '../TableOfContents';
+import UserContentsLinks from '../UserContentsLinks';
+import PageAccessories from '../PageAccessories';
 import PageEditorByHackmd from '../PageEditorByHackmd';
 import EditorNavbarBottom from '../PageEditor/EditorNavbarBottom';
 
 
 const DisplaySwitcher = (props) => {
-  const { navigationContainer } = props;
+  const {
+    navigationContainer, pageContainer,
+  } = props;
   const { editorMode } = navigationContainer.state;
+  const { pageUser } = pageContainer.state;
 
   return (
     <>
       <TabContent activeTab={editorMode}>
         <TabPane tabId="view">
-          <Page />
+          <div className="d-flex flex-column flex-lg-row-reverse">
+
+            <div className="grw-side-contents-container">
+              <div className="grw-side-contents-sticky-container">
+                <div className="border-bottom pb-1">
+                  <PageAccessories />
+                </div>
+
+                <div className="d-none d-lg-block">
+                  <div id="revision-toc" className="revision-toc">
+                    <TableOfContents />
+                  </div>
+                  {pageUser && <UserContentsLinks />}
+                </div>
+              </div>
+            </div>
+
+            <div>
+              {pageUser && <UserInfo pageUser={pageUser} />}
+              <Page />
+            </div>
+
+          </div>
         </TabPane>
         <TabPane tabId="edit">
           <div id="page-editor">
@@ -37,7 +67,8 @@ const DisplaySwitcher = (props) => {
 
 DisplaySwitcher.propTypes = {
   navigationContainer: propTypes.instanceOf(NavigationContainer).isRequired,
+  pageContainer: propTypes.instanceOf(PageContainer).isRequired,
 };
 
 
-export default withUnstatedContainers(DisplaySwitcher, [NavigationContainer]);
+export default withUnstatedContainers(DisplaySwitcher, [NavigationContainer, PageContainer]);

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

@@ -6,7 +6,7 @@ import { UncontrolledTooltip } from 'reactstrap';
 
 const RenderTagLabels = React.memo((props) => {
   const {
-    t, tags, pageId, isGuestUser,
+    t, tags, isGuestUser,
   } = props;
 
   function openEditorHandler() {
@@ -25,7 +25,7 @@ const RenderTagLabels = React.memo((props) => {
 
   const tagElements = tags.map((tag) => {
     return (
-      <a key={`${pageId}_${tag}`} href={`/_search?q=tag:${tag}`} className="grw-tag-label badge badge-secondary mr-2">
+      <a key={tag} href={`/_search?q=tag:${tag}`} className="grw-tag-label badge badge-secondary mr-2">
         {tag}
       </a>
     );
@@ -60,7 +60,6 @@ RenderTagLabels.propTypes = {
   tags: PropTypes.array,
   openEditorModal: PropTypes.func,
   isGuestUser: PropTypes.bool.isRequired,
-  pageId: PropTypes.string.isRequired,
 };
 
 export default withTranslation()(RenderTagLabels);

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

@@ -74,7 +74,7 @@ class TagLabels extends React.Component {
 
   render() {
     const tags = this.getTagData();
-    const { appContainer, pageContainer } = this.props;
+    const { appContainer } = this.props;
 
     return (
       <>
@@ -85,7 +85,6 @@ class TagLabels extends React.Component {
             <RenderTagLabels
               tags={tags}
               openEditorModal={this.openEditorModal}
-              pageId={pageContainer.state.pageId}
               isGuestUser={appContainer.isGuestUser}
             />
           </Suspense>

src/client/js/components/PageAccessories.jsx

@@ -14,7 +14,10 @@ const PageAccessories = (props) => {
 
   return (
     <>
-      <PageAccessoriesModalControl isGuestUser={isGuestUser} isSharedUser={isSharedUser} />
+      <PageAccessoriesModalControl
+        isGuestUser={isGuestUser}
+        isSharedUser={isSharedUser}
+      />
       <PageAccessoriesModal
         isGuestUser={isGuestUser}
         isSharedUser={isSharedUser}

src/client/js/components/PageAccessoriesModalControl.jsx

@@ -51,7 +51,7 @@ const PageAccessoriesModalControl = (props) => {
   }, [isGuestUser, isSharedUser]);
 
   return (
-    <div className="grw-page-accessories-control d-flex align-items-center justify-content-between pb-1">
+    <div className="grw-page-accessories-control d-flex flex-nowrap align-items-center justify-content-end justify-content-lg-between">
       {accessoriesBtnList.map((accessory) => {
         return (
           <Fragment key={accessory.name}>

src/client/js/services/NavigationContainer.js

@@ -52,6 +52,9 @@ export default class NavigationContainer extends Container {
     return 'NavigationContainer';
   }
 
+  getPageContainer() {
+    return this.appContainer.getContainer('PageContainer');
+  }
 
   initDeviceSize() {
     const mdOrAvobeHandler = async(mql) => {
@@ -89,12 +92,18 @@ export default class NavigationContainer extends Container {
   }
 
   setEditorMode(editorMode) {
+    const { isNotCreatable } = this.getPageContainer().state;
 
     if (this.appContainer.currentUser == null) {
       logger.warn('Please login or signup to edit the page or use hackmd.');
       return;
     }
 
+    if (isNotCreatable) {
+      logger.warn('This page could not edit.');
+      return;
+    }
+
     this.setState({ editorMode });
     if (editorMode === 'view') {
       $('body').removeClass('on-edit');

src/client/styles/scss/_layout.scss

@@ -31,21 +31,25 @@ body {
 .main {
   margin-top: 1rem;
 
-  @include media-breakpoint-up(md) {
-    margin-top: 3rem;
+  @include media-breakpoint-up(lg) {
+    margin-top: 2rem;
   }
 }
 
 .grw-side-contents-container {
-  margin-left: 30px;
+  margin-bottom: 1rem;
+
+  @include media-breakpoint-up(lg) {
+    width: 250px;
+    min-width: 250px;
+    margin-left: 30px;
+  }
 }
 
 .grw-side-contents-sticky-container {
   position: sticky;
   // growisubnavigation + grw-navbar-boder
   top: calc(100px + 4px);
-  width: 250px;
-  min-width: 250px;
   margin-top: 5px;
 }
 

src/client/styles/scss/_page-accessories-control.scss

@@ -1,5 +1,4 @@
 .grw-page-accessories-control {
-  flex-wrap: wrap;
   line-height: 1.25;
   border-bottom: 1px solid transparent;
 

src/migrations/20200903080025-remove-timeline-type.js.js

@@ -13,7 +13,7 @@ module.exports = {
 
     const Config = getModelSafely('Config') || require('@server/models/config')();
 
-    await Config.findOneAndDelete({ key: 'customize:timeline' }); // remove timeline
+    await Config.findOneAndDelete({ key: 'customize:isEnabledTimeline' }); // remove timeline
 
     logger.info('Migration has successfully applied');
   },
@@ -27,7 +27,7 @@ module.exports = {
 
     const insertConfig = new Config({
       ns: 'crowi',
-      key: 'customize:timeline',
+      key: 'customize:isEnabledTimeline',
       value: true,
     });
 

src/server/views/widget/page_content.html

@@ -43,29 +43,12 @@
 <div class="flex-grow-1">
   {% include 'page_alerts.html' %}
 
-  {% if pageUser %}
-    <div class="user-info" id="user-info"></div>
-  {% endif %}
-
   <div id="display-switcher">
     <script type="text/template" id="raw-text-original">{{ revision.body.toString() | encodeHTML }}</script>
   </div>
   <div id="page-editor-navbar-bottom-container" class="d-none d-edit-block"></div>
 </div>
 
-{% if revision %}
-<div class="d-none d-lg-block d-edit-none grw-side-contents-container">
-  <div class="grw-side-contents-sticky-container">
-    <div id="page-accessories" class="page-accessories"></div>
-    <div id="revision-toc" class="revision-toc sps sps--abv" data-sps-offset="123"></div>
-    {% if pageUser %}
-      <div id="grw-user-contents-links"></div>
-    {% endif %}
-  </div>
-</div>
-{% endif %}
-
-
 <div id="grw-page-status-alert-container"></div>
 
 </div>