Merge pull request #3132 from weseek/imprv/display-pageaccessoriesmodal-in-case-of-mobile

Imprv/display pageaccessoriesmodal in case of mobile

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/Page/DisplaySwitcher.jsx

@@ -3,21 +3,69 @@ import { TabContent, TabPane } from 'reactstrap';
 import propTypes from 'prop-types';
 import { withUnstatedContainers } from '../UnstatedUtils';
 import NavigationContainer from '../../services/NavigationContainer';
+import AppContainer from '../../services/AppContainer';
+import PageContainer from '../../services/PageContainer';
+import PageAccessoriesContainer from '../../services/PageAccessoriesContainer';
 import Editor from '../PageEditor';
 import Page from '../Page';
+import UserInfo from '../User/UserInfo';
+import TableOfContents from '../TableOfContents';
+import UserContentsLinks from '../UserContentsLinks';
+import PageAccessoriesModalControl from '../PageAccessoriesModalControl';
+import PageAccessoriesModal from '../PageAccessoriesModal';
 import PageEditorByHackmd from '../PageEditorByHackmd';
 import EditorNavbarBottom from '../PageEditor/EditorNavbarBottom';
 
 
 const DisplaySwitcher = (props) => {
-  const { navigationContainer } = props;
+  const {
+    navigationContainer, appContainer, pageContainer, pageAccessoriesContainer,
+  } = props;
   const { editorMode } = navigationContainer.state;
+  const { pageUser } = pageContainer.state;
+  const { isGuestUser, isSharedUser } = appContainer;
+  const { closePageAccessoriesModal } = pageAccessoriesContainer;
+  const { isPageAccessoriesModalShown } = pageAccessoriesContainer.state;
 
   return (
     <>
       <TabContent activeTab={editorMode}>
         <TabPane tabId="view">
-          <Page />
+
+          <div className="d-flex d-md-none justify-content-end border-bottom">
+            <PageAccessoriesModalControl
+              isGuestUser={isGuestUser}
+              isSharedUser={isSharedUser}
+            />
+          </div>
+
+          <div className="d-flex flex-row justify-content-around">
+            <div className="w-100">
+              {pageUser && <UserInfo pageUser={pageUser} />}
+              <Page />
+            </div>
+
+            <div className="d-none d-md-block grw-side-contents-container">
+              <div className="grw-side-contents-sticky-container">
+                <PageAccessoriesModalControl
+                  isGuestUser={isGuestUser}
+                  isSharedUser={isSharedUser}
+                />
+                <div id="revision-toc" className="revision-toc">
+                  <TableOfContents />
+                </div>
+                {pageUser && <UserContentsLinks />}
+              </div>
+            </div>
+          </div>
+
+          <PageAccessoriesModal
+            isGuestUser={isGuestUser}
+            isSharedUser={isSharedUser}
+            isOpen={isPageAccessoriesModalShown}
+            onClose={closePageAccessoriesModal}
+          />
+
         </TabPane>
         <TabPane tabId="edit">
           <div id="page-editor">
@@ -37,7 +85,10 @@ const DisplaySwitcher = (props) => {
 
 DisplaySwitcher.propTypes = {
   navigationContainer: propTypes.instanceOf(NavigationContainer).isRequired,
+  appContainer: propTypes.instanceOf(AppContainer).isRequired,
+  pageContainer: propTypes.instanceOf(PageContainer).isRequired,
+  pageAccessoriesContainer: propTypes.instanceOf(PageAccessoriesContainer).isRequired,
 };
 
 
-export default withUnstatedContainers(DisplaySwitcher, [NavigationContainer]);
+export default withUnstatedContainers(DisplaySwitcher, [NavigationContainer, AppContainer, PageContainer, PageAccessoriesContainer]);

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/styles/scss/_page-accessories-control.scss

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

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>