Merge pull request #2827 from weseek/display-expected-page-selected-buttons

Display expected page selected buttons

src/client/js/app.jsx

@@ -9,9 +9,7 @@ import ErrorBoundary from './components/ErrorBoudary';
 import SearchPage from './components/SearchPage';
 import TagsList from './components/TagsList';
 import DisplaySwitcher from './components/Page/DisplaySwitcher';
-import EditorNavbarBottom from './components/PageEditor/EditorNavbarBottom';
 import { defaultEditorOptions, defaultPreviewOptions } from './components/PageEditor/OptionsSelector';
-import PageEditorByHackmd from './components/PageEditorByHackmd';
 import Page from './components/Page';
 import PageComments from './components/PageComments';
 import PageTimeline from './components/PageTimeline';
@@ -108,13 +106,7 @@ if (pageContainer.state.path != null) {
 if (appContainer.currentUser != null) {
   Object.assign(componentMappings, {
     'display-switcher': <DisplaySwitcher />,
-    'page-editor-navbar-bottom-container': <EditorNavbarBottom />,
   });
-  if (pageContainer.state.pageId != null) {
-    Object.assign(componentMappings, {
-      'page-editor-with-hackmd': <PageEditorByHackmd />,
-    });
-  }
 }
 
 Object.keys(componentMappings).forEach((key) => {

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

@@ -13,15 +13,27 @@ const ThreeStrandedButton = (props) => {
 
   return (
     <div className="btn-group grw-three-stranded-button" role="group " aria-label="three-stranded-button">
-      <button type="button" className="btn btn-outline-primary view-button" onClick={() => { threeStrandedButtonClickedHandler('view') }}>
+      <button
+        type="button"
+        className="btn btn-outline-primary view-button"
+        onClick={() => { threeStrandedButtonClickedHandler('view') }}
+      >
         <i className="icon-control-play icon-fw" />
         { t('view') }
       </button>
-      <button type="button" className="btn btn-outline-primary edit-button" onClick={() => { threeStrandedButtonClickedHandler('edit') }}>
+      <button
+        type="button"
+        className="btn btn-outline-primary edit-button"
+        onClick={() => { threeStrandedButtonClickedHandler('edit') }}
+      >
         <i className="icon-note icon-fw" />
         { t('Edit') }
       </button>
-      <button type="button" className="btn btn-outline-primary hackmd-button" onClick={() => { threeStrandedButtonClickedHandler('hackmd') }}>
+      <button
+        type="button"
+        className="btn btn-outline-primary hackmd-button"
+        onClick={() => { threeStrandedButtonClickedHandler('hackmd') }}
+      >
         <i className="fa fa-fw fa-file-text-o" />
         { t('hackmd.hack_md') }
       </button>
@@ -32,7 +44,6 @@ const ThreeStrandedButton = (props) => {
 
 ThreeStrandedButton.propTypes = {
   t: PropTypes.func.isRequired, //  i18next
-
   onThreeStrandedButtonClicked: PropTypes.func,
 };
 

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

@@ -1,7 +1,12 @@
 import React from 'react';
+import { TabContent, TabPane } from 'reactstrap';
 import propTypes from 'prop-types';
 import { withUnstatedContainers } from '../UnstatedUtils';
 import NavigationContainer from '../../services/NavigationContainer';
+import Editor from '../PageEditor';
+import Page from '../Page';
+import PageEditorByHackmd from '../PageEditorByHackmd';
+import EditorNavbarBottom from '../PageEditor/EditorNavbarBottom';
 
 
 const DisplaySwitcher = (props) => {
@@ -10,9 +15,22 @@ const DisplaySwitcher = (props) => {
 
   return (
     <>
-      {editorMode === 'view' && 'view'}
-      {editorMode === 'edit' && 'edit'}
-      {editorMode === 'hackmd' && 'hackmd'}
+      <TabContent activeTab={editorMode}>
+        <TabPane tabId="view">
+          <Page />
+        </TabPane>
+        <TabPane tabId="edit">
+          <div id="page-editor" className="page-editor-preview-container page-editor-preview-body page-editor-editor-container">
+            <Editor />
+          </div>
+        </TabPane>
+        <TabPane tabId="hackmd">
+          <div id="page-editor-with-hackmd">
+            <PageEditorByHackmd />
+          </div>
+        </TabPane>
+      </TabContent>
+      {editorMode !== 'view' && <EditorNavbarBottom /> }
     </>
   );
 };

src/client/js/services/NavigationContainer.js

@@ -86,6 +86,23 @@ export default class NavigationContainer extends Container {
 
   setEditorMode(editorMode) {
     this.setState({ editorMode });
+    if (editorMode === 'view') {
+      $('body').removeClass('on-edit');
+      $('body').removeClass('builtin-editor');
+      $('body').removeClass('hackmd');
+    }
+
+    if (editorMode === 'edit') {
+      $('body').addClass('on-edit');
+      $('body').addClass('builtin-editor');
+    }
+
+    if (editorMode === 'hackmd') {
+      $('body').addClass('on-edit');
+      $('body').addClass('hackmd');
+      $('body').removeClass('builtin-editor');
+    }
+
     this.updateDrawerMode({ ...this.state, editorMode }); // generate newest state object
   }
 

src/client/styles/scss/_mixins.scss

@@ -36,8 +36,8 @@
       flex: 1;
       flex-direction: column;
 
-      .tab-pane#edit,
-      .tab-pane#hackmd {
+      #edit,
+      #hackmd {
         height: calc(100vh - #{$header-plus-footer});
         min-height: calc(100vh - #{$header-plus-footer}); // for IE11
       }

src/client/styles/scss/_on-edit.scss

@@ -11,6 +11,10 @@ body:not(.on-edit) {
 body.on-edit {
   overflow-y: hidden !important;
 
+  .container {
+    max-width: 100%;
+  }
+
   .grw-navbar {
     position: fixed !important;
     width: 100vw;

src/server/views/widget/page_content.html

@@ -41,9 +41,10 @@
 
   {% include 'page_alerts.html' %}
 
-<div class="tab-content" id="display-switcher">
+<div id="display-switcher">
   <script type="text/template" id="raw-text-original">{{ revision.body.toString() | encodeHTML }}</script>
   {% include '../_form.html' %}
 </div>
-<div id="grw-page-status-alert-container"></div>
+  <div id="grw-page-status-alert-container"></div>
 </div>
+

src/server/views/widget/page_list.html

@@ -37,7 +37,7 @@
     <span class="page-list-seer" data-count="{{ listPage.seenUsers.length }}">
       <i class="fa fa-paw"></i>{{ listPage.seenUsers.length }}
     </span>
-    {% endif  %}
+    {% endif %}
 
     {% if !listPage.isPublic() %}
     <span>