WIP: reactify editor footer navbar

src/client/js/app.jsx

@@ -10,11 +10,8 @@ import SearchPage from './components/SearchPage';
 import TagsList from './components/TagsList';
 import PageEditor from './components/PageEditor';
 import PagePathNavForEditor from './components/PageEditor/PagePathNavForEditor';
-// eslint-disable-next-line import/no-duplicates
-import OptionsSelector from './components/PageEditor/OptionsSelector';
-// eslint-disable-next-line import/no-duplicates
+import EditorNavbarBottom from './components/PageEditor/EditorNavbarBottom';
 import { defaultEditorOptions, defaultPreviewOptions } from './components/PageEditor/OptionsSelector';
-import SavePageControls from './components/SavePageControls';
 import PageEditorByHackmd from './components/PageEditorByHackmd';
 import Page from './components/Page';
 import PageHistory from './components/PageHistory';
@@ -114,8 +111,7 @@ if (appContainer.currentUser != null) {
   Object.assign(componentMappings, {
     'page-editor': <PageEditor />,
     'page-editor-path-nav': <PagePathNavForEditor />,
-    'page-editor-options-selector': <OptionsSelector />,
-    'save-page-controls': <SavePageControls />,
+    'page-editor-navbar-bottom-container': <EditorNavbarBottom />,
   });
   if (pageContainer.state.pageId != null) {
     Object.assign(componentMappings, {

src/client/js/components/PageEditor/EditorNavbarBottom.jsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import NavigationContainer from '../../services/NavigationContainer';
+import { withUnstatedContainers } from '../UnstatedUtils';
+
+import SavePageControls from '../SavePageControls';
+
+import OptionsSelector from './OptionsSelector';
+
+const EditorNavbarBottom = (props) => {
+
+  const {
+    navigationContainer,
+  } = props;
+  const { editorMode, isDeviceSmallerThanMd } = navigationContainer.state;
+
+  const showOptionsSelector = editorMode !== 'hackmd';
+
+  const additionalClasses = ['grw-editor-navbar-bottom'];
+
+  return (
+    <div className={`navbar navbar-expand border-top ${additionalClasses.join(' ')}`}>
+      <form className="form-inline mr-auto">
+        { showOptionsSelector && <OptionsSelector /> }
+      </form>
+      <form className="form-inline">
+        <SavePageControls />
+      </form>
+    </div>
+  );
+};
+
+EditorNavbarBottom.propTypes = {
+  navigationContainer: PropTypes.instanceOf(NavigationContainer).isRequired,
+};
+
+export default withUnstatedContainers(EditorNavbarBottom, [NavigationContainer]);

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

@@ -36,6 +36,10 @@ body.on-edit {
   }
 
   // show
+  .d-edit-block {
+    display: block !important;
+  }
+
   .d-edit-sm-block {
     @include media-breakpoint-up(sm) {
       display: block !important;
@@ -61,12 +65,6 @@ body.on-edit {
     display: none;
   }
 
-  &.hackmd {
-    #page-editor-options-selector {
-      display: none !important;
-    }
-  }
-
   &:not(.hackmd) .nav-tab-hackmd {
     display: none;
   }
@@ -121,12 +119,14 @@ body.on-edit {
     line-height: 1em;
   }
 
-  .page-editor-footer {
-    width: 100%;
-    min-height: 40px;
-    padding: 3px;
-    margin: 0;
-    border-top: solid 1px transparent;
+  // .page-editor-footer {
+  .grw-editor-navbar-bottom {
+    height: $grw-editor-navbar-bottom-height;
+    //   width: 100%;
+    //   min-height: 40px;
+    //   padding: 3px;
+    //   margin: 0;
+    //   border-top: solid 1px transparent;
 
     .grw-grant-selector {
       .dropdown-toggle {

src/client/styles/scss/_variables.scss

@@ -10,6 +10,7 @@ $grw-navbar-height: 52px;
 $grw-navbar-border-width: 3.3333px;
 
 $grw-navbar-bottom-height: 48px;
+$grw-editor-navbar-bottom-height: 48px;
 
 $grw-sidebar-nav-width: 64px; // !!DO NOT CHANGE!! 'margin-left' for '.css-teprsg' is hardcoded
 $grw-sidebar-content-min-width: 240px;

src/server/views/_form.html

@@ -9,6 +9,8 @@
 </div>
 {% endif %}
 
+<div id="page-editor-navbar-bottom-container" class="d-none d-edit-block"></div>
+{#
 <div class="page-editor-footer d-flex flex-row align-items-center justify-content-between">
 
   <div>
@@ -22,5 +24,6 @@
   </div>
 
 </div>
+#}
 
 <div class="file-module hidden"></div>