Merge pull request #1811 from weseek/support/adjust-layout-for-edit-mode

Support/adjust layout for edit mode

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

@@ -112,7 +112,7 @@ class OptionsSelector extends React.Component {
       <div className="my-0 form-group">
         <label>Theme:</label>
         <div className="btn-group btn-group-sm dropup">
-          <button className="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+          <button className="btn btn-white dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
             {selectedTheme}
           </button>
           <div className="dropdown-menu" aria-labelledby="dropdownMenuLink">
@@ -139,7 +139,7 @@ class OptionsSelector extends React.Component {
       <div className="my-0 form-group">
         <label>Keymap:</label>
         <div className="btn-group btn-group-sm dropup">
-          <button className="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+          <button className="btn btn-white dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
             {selectedKeymapMode}
           </button>
           <div className="dropdown-menu" aria-labelledby="dropdownMenuLink">
@@ -162,7 +162,7 @@ class OptionsSelector extends React.Component {
           toggle={this.onToggleConfigurationDropdown}
         >
 
-          <DropdownToggle caret>
+          <DropdownToggle color="white" caret>
             <i className="icon-settings"></i>
           </DropdownToggle>
 

src/client/js/components/SavePageControls/GrantSelector.jsx

@@ -166,7 +166,7 @@ class GrantSelector extends React.Component {
     return (
       <div className="form-group grw-grant-selector mb-0">
         <UncontrolledDropdown direction="up" size="sm">
-          <DropdownToggle caret className="d-flex justify-content-between align-items-center" disabled={this.props.disabled}>
+          <DropdownToggle color="white" caret className="d-flex justify-content-between align-items-center" disabled={this.props.disabled}>
             {dropdownToggleLabelElm}
           </DropdownToggle>
           <DropdownMenu>

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

@@ -25,6 +25,7 @@ body.on-edit {
   }
 
   // hide unnecessary elements
+  .grw-subnav,
   .row.row-alerts,
   .row.page-list,
   .row.page-comments-row,
@@ -71,6 +72,11 @@ body.on-edit {
     }
   }
 
+  // show compact subnav
+  .grw-compact-subnav {
+    display: block !important;
+  }
+
   /*****************
    * Expand Editor
    *****************/

src/server/views/widget/page_tabs.html

@@ -35,6 +35,10 @@
     </a>
   </li>
   {% endif %}
+    <div class="grw-compact-subnav d-none ml-2">
+      <h4 id="revision-path" class="mb-0"></h4>
+      <div id="tag-label"></div>
+    </div>
   {% endif %}
 
   {#