Merge branch 'imprv/nav-2nd-ed' into imprv/commonality-subnavbar

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

@@ -1,6 +1,8 @@
-import React, { useState /* useMemo */ } from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 
+import { Collapse } from 'reactstrap';
+
 import NavigationContainer from '../../services/NavigationContainer';
 import { withUnstatedContainers } from '../UnstatedUtils';
 
@@ -15,18 +17,14 @@ const EditorNavbarBottom = (props) => {
   const {
     navigationContainer,
   } = props;
-  const { editorMode, isDrawerMode /* isDeviceSmallerThanMd */ } = navigationContainer.state;
-
-  const showOptionsSelector = editorMode !== 'hackmd';
+  const { editorMode, isDrawerMode, isDeviceSmallerThanMd } = navigationContainer.state;
 
   const additionalClasses = ['grw-editor-navbar-bottom'];
 
   const renderDrawerButton = () => (
-    isDrawerMode && (
-      <button type="button" className="btn btn-outline-secondary border-0" onClick={() => navigationContainer.toggleDrawer()}>
-        <i className="icon-menu"></i>
-      </button>
-    )
+    <button type="button" className="btn btn-outline-secondary border-0" onClick={() => navigationContainer.toggleDrawer()}>
+      <i className="icon-menu"></i>
+    </button>
   );
 
   // eslint-disable-next-line react/prop-types
@@ -42,16 +40,33 @@ const EditorNavbarBottom = (props) => {
     </div>
   );
 
+  const isOptionsSelectorEnabled = editorMode !== 'hackmd';
+  const isCollapsedOptionsSelectorEnabled = isOptionsSelectorEnabled && isDeviceSmallerThanMd;
+
   return (
-    <div className={`navbar navbar-expand border-top fixed-bottom px-2 ${additionalClasses.join(' ')}`}>
-      <form className="form-inline mr-auto">
-        { renderDrawerButton() }
-        { showOptionsSelector && <OptionsSelector /> }
-      </form>
-      <form className="form-inline">
-        <SavePageControls />
-        { renderExpandButton() }
-      </form>
+    <div className="fixed-bottom">
+      <div className={`navbar navbar-expand border-top px-2 ${additionalClasses.join(' ')}`}>
+        <form className="form-inline">
+          { isDrawerMode && renderDrawerButton() }
+          { isOptionsSelectorEnabled && !isDeviceSmallerThanMd && <OptionsSelector /> }
+        </form>
+        <form className="form-inline ml-auto">
+          <SavePageControls />
+          { isCollapsedOptionsSelectorEnabled && renderExpandButton() }
+        </form>
+      </div>
+      {/* Collapsed OptionsSelector */}
+      { isCollapsedOptionsSelectorEnabled && (
+        <Collapse isOpen={isExpanded}>
+          <div className="px-2"> {/* set padding for border-top */}
+            <div className={`navbar navbar-expand border-top px-0 ${additionalClasses.join(' ')}`}>
+              <form className="form-inline ml-auto">
+                <OptionsSelector />
+              </form>
+            </div>
+          </div>
+        </Collapse>
+      ) }
     </div>
   );
 };

src/client/styles/scss/_override-rbt.scss

@@ -21,3 +21,11 @@
 .rbt-aux {
   display: none;
 }
+
+// seamless border for .input-group-prepend
+.input-group-prepend + div {
+  .rbt .rbt-input-main {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+}

src/client/styles/scss/theme/_apply-colors-dark.scss

@@ -50,11 +50,10 @@ textarea.form-control {
   background-color: lighten($bgcolor-global, 5%);
 }
 
-.input-group .input-group-addon {
-  color: theme-color('dark');
-  background-color: rgba($bgcolor-navbar, 0.4);
-  // FIXME: accent color
-  // border: 1px solid darken($border, 30%);
+.input-group > .input-group-prepend > .input-group-text {
+  color: color-yiq(theme-color('dark'));
+  background-color: theme-color('dark');
+  border: 1px solid theme-color('secondary');
   border-right: none;
 }
 
@@ -227,7 +226,7 @@ ul.pagination {
 /*
  * GROWI on-edit
  */
-.page-editor-footer {
+.grw-editor-navbar-bottom {
   #slack-mark-black {
     display: none;
   }

src/client/styles/scss/theme/_apply-colors-light.scss

@@ -161,7 +161,7 @@ $table-hover-bg: $bgcolor-table-hover;
 /*
  * GROWI on-edit
  */
-.page-editor-footer {
+.grw-editor-navbar-bottom {
   #slack-mark-white {
     display: none;
   }

src/client/styles/scss/theme/_apply-colors.scss

@@ -328,6 +328,10 @@ body.on-edit {
       border-top-color: $border-color-theme;
     }
   }
+
+  .grw-editor-navbar-bottom {
+    background-color: darken($bgcolor-global, 2%);
+  }
 }
 
 /*