Compass-616: Collapsible Sidebar and Flexbox Layout Support

src/app/help/index.jade

@@ -1,5 +1,5 @@
 .page.help
   div(data-hook='sidebar-subview')
-  .content.with-sidebar
+  .content-sidebar-expanded
     h1.help-entry-title(data-hook='help-entry-title')
     .help-entry(data-hook='help-entry-content')

src/app/help/index.less

@@ -1,8 +1,10 @@
 .page.help  {
   .container-fluid;
 
-  .content.with-sidebar {
-    padding: 0 15px 15px 15px;
+  .content {
+    &-sidebar-expanded {
+        padding: 0 15px 15px 15px;
+    }
   }
   .related {
     margin-top: 20px;

src/app/styles/index.less

@@ -18,21 +18,7 @@ html, body {
 }
 
 #application {
-  height: 100%;
-  max-height: 100%;
-  overflow-y: auto;
-  position: absolute;
-  width: 100%;
 
-  .content {
-    height: 100%;
-    max-height: 100%;
-    overflow-y: auto;
-
-    &.with-sidebar {
-      margin-left: @sidebar-width;
-    }
-  }
   #statusbar {
     background-color: rgba(255, 255, 255, .5);
     position: fixed;
@@ -98,33 +84,9 @@ i.syntax-help {
 
 //action-bar, just a drop-shadow for now but should think about where to put these styles eventually
 .action-bar {
-  box-shadow: 0px 1px 2px rgba(0,0,0,.2);
   height: 32px;
   background: @gray8;
   border-bottom: 1px solid @gray7;
   padding-top: 4px;
   padding-left: 20px;
-  position: fixed;
-  left: 250px;
-  right: 0;
-  z-index: 4;
 }
-
-  .rtss-databases,
-  .collections {
-    .action-bar {
-      top: 46px;
-    }
-  }
-
-  .validation {
-    .action-bar {
-      top: 96px;
-    }
-  }
-
-  .column.main {
-      .action-bar {
-        position: static;
-      }
-  }

src/internal-packages/app/styles/tab-nav-bar.less

@@ -1,9 +1,21 @@
 .tab-nav-bar {
 
+  &-is-light-theme {
+    flex-grow: 1;
+    flex-shrink: 1;
+    flex-basis: auto;
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+  }
+
   &-header {
-    height: 45px;
     background-color: @pw;
+    flex-grow: 0;
+    flex-shrink: 0;
+    flex-basis: 45px;
     display: flex;
+    flex-direction: row;
     justify-content: flex-start;
     align-items: flex-end;
     position: relative;
@@ -66,49 +78,4 @@
     cursor: default;
     border-color: @chart1;
   }
-  //shouldn't positioning of the component happen when it's rendered by its parent?
-  &-is-light-theme {
-    .tab-nav-bar-header {
-      top: 50px;
-      height: 46px;
-      z-index: 2;
-      border-bottom: 1px solid #ebebed;
-    }
-  }
-
-  &-is-dark-theme {
-    .tab-nav-bar-header {
-      background-color: #2B3033;
-    }
-
-    .tab-nav-bar-tab {
-      color: #8B8D8F;
-    }
-
-    .tab-nav-bar-link {
-      color: @pw;
-    }
-
-    .tab-nav-bar-is-selected {
-      color: @pw;
-      background-color: #3D4247;
-      border-color: #545454;
-
-      &.tab-nav-bar-tab:hover {
-        background-color: #3D4247;
-      }
-    }
-
-    .tab-nav-bar-tab:hover {
-      background-color: #2B3033;
-      border-color: #545454;
-      border-bottom: none;
-
-      color: @pw;
-
-      .tab-nav-bar-link {
-        color: @pw;
-      }
-    }
-  }
 }

src/internal-packages/collection/styles/index.less

@@ -1,8 +1,6 @@
 .collection-view {
   header {
     padding: 12px 0 0;
-    position: fixed;
-    z-index: 4;
     background: @pw;
     .row {
       margin-left: 0;
@@ -13,60 +11,6 @@
     margin-top: 12px;
     font-size: 24px;
   }
-  .column-container {
-    &::-webkit-scrollbar {
-      display: none;
-    }
-  }
-
-  .header-margin {
-    margin-top: 50px; // size of header
-  }
-
-  .column {
-    overflow: auto;
-    height: auto;
-    padding: .5rem;
-    -webkit-overflow-scrolling: touch;
-    -ms-overflow-style: none;
-    position: relative;
-    transition: width 250ms ease;
-  }
-
-  .main {
-    padding: 0 26px 100px 26px;
-    overflow-x: hidden;
-    background-color: @gray8;
-    position: absolute;
-    left: 250px;
-    right: 0;
-    bottom: 0;
-    top: 95px;
-  }
-
-  .column-container {
-    &.with-message {
-      .main {
-        top: 128px;
-      }
-    }
-    &.with-refinebar {
-      .main {
-        top: 149px;
-      }
-    }
-    &.with-refinebar-and-message {
-      .main {
-        top: 181px;
-      }
-    }
-    &.with-refinebar-and-2xmessage {
-      .main {
-        top: 214px;
-      }
-    }
-  }
-
   .side {
     width: 0;
     font-family: @font-family-monospace;
@@ -76,42 +20,4 @@
     top: 30px;
   }
 
-  .splitter {
-    width: 20px;
-    height: 20px;
-    position: relative;
-    right: 10px;
-    transition: right 250ms ease;
-  }
-  .splitter-button {
-    outline: none;
-    color: @gray1;
-    text-decoration: none;
-
-    &:hover {
-      text-decoration: none;
-    }
-    &:active {
-      outline: none;
-      color: @green2;
-    }
-  }
-  .splitter-button-close {
-    display: none;
-  }
-  .column-container.sidebar-open {
-    .side {
-      width: 33%;
-      right: 0;
-    }
-    .splitter {
-      right: -2px;
-    }
-    .splitter-button-open {
-      display: none;
-    }
-    .splitter-button-close {
-      display: inline-block;
-    }
-  }
 }

src/internal-packages/crud/lib/component/document-list.jsx

@@ -77,7 +77,7 @@ class DocumentList extends React.Component {
    * Attach the scroll event to the parent container.
    */
   attachScrollEvent() {
-    this._node.parentNode.addEventListener(
+    this._node.parentNode.parentNode.addEventListener(
       SCROLL_EVENT,
       this.handleScroll.bind(this)
     );
@@ -239,7 +239,7 @@ class DocumentList extends React.Component {
       );
     }
     return (
-      <div className="column-container with-refinebar-and-2xmessage">
+      <div className="column-container">
         <div className="column main">
           <ol className={LIST_CLASS} ref={(c) => this._node = c}>
             {this.state.docs}
@@ -257,10 +257,12 @@ class DocumentList extends React.Component {
    */
   render() {
     return (
-      <div className="compass-documents header-margin">
-        <this.queryBar />
-        <this.samplingMessage isWritable={this.CollectionStore.isWritable()}
-          insertHandler={this.handleOpenInsert.bind(this)} />
+      <div className="content-container content-container-documents compass-documents">
+        <div className="controls-container">
+          <this.queryBar />
+          <this.samplingMessage isWritable={this.CollectionStore.isWritable()}
+            insertHandler={this.handleOpenInsert.bind(this)} />
+        </div>
         {this.renderContent()}
       </div>
     );

src/internal-packages/database/lib/components/collections-table.jsx

@@ -66,7 +66,7 @@ class CollectionsTable extends React.Component {
 
     return (
       <div className="collections-table" data-test-id="collections-table">
-        <div className="collections-table-create-button action-bar">
+        <div className="collections-table-create-button action-bar controls-container">
           <div className="tooltip-button-wrapper" data-tip={tooltipText} data-for="is-not-writable">
             <button
                 className="btn btn-primary btn-xs"
@@ -78,18 +78,22 @@ class CollectionsTable extends React.Component {
             </button>
           </div>
         </div>
-        <this.SortableTable
-          theme="light"
-          columns={this.props.columns}
-          rows={rows}
-          sortable
-          sortOrder={this.props.sortOrder}
-          sortColumn={this.props.sortColumn}
-          valueIndex={0}
-          removable={isWritable}
-          onColumnHeaderClicked={this.onColumnHeaderClicked.bind(this)}
-          onRowDeleteButtonClicked={this.onRowDeleteButtonClicked.bind(this)}
-        />
+        <div className="column-container">
+          <div className="column main">
+            <this.SortableTable
+              theme="light"
+              columns={this.props.columns}
+              rows={rows}
+              sortable
+              sortOrder={this.props.sortOrder}
+              sortColumn={this.props.sortColumn}
+              valueIndex={0}
+              removable={isWritable}
+              onColumnHeaderClicked={this.onColumnHeaderClicked.bind(this)}
+              onRowDeleteButtonClicked={this.onRowDeleteButtonClicked.bind(this)}
+            />
+          </div>
+        </div>
         <CreateCollectionDialog />
         <DropCollectionDialog />
       </div>

src/internal-packages/database/styles/collections-table.less

@@ -1,12 +1,5 @@
 .collections-table {
   background-color: @gray8;
-  overflow-y: scroll;
-  padding: 0 20px 100px 20px;
-  position: absolute;
-  top: 78px;
-  right: 0;
-  bottom: 0;
-  left: 250px;
 
   &-link, &-link:hover, &-link:active {
     text-decoration: none;

src/internal-packages/explain/lib/components/compass-explain.jsx

@@ -45,7 +45,7 @@ class CompassExplain extends React.Component {
 
   renderContent() {
     return (
-      <div className="column-container with-refinebar">
+      <div className="column-container">
         <div className="column main">
           <ExplainHeader
             viewType={this.props.viewType}
@@ -83,8 +83,10 @@ class CompassExplain extends React.Component {
     }
 
     return (
-      <div className="compass-explain header-margin">
-        <this.queryBar />
+      <div className="compass-explain">
+        <div className="controls-container">
+          <this.queryBar />
+        </div>
         {content}
       </div>
     );

src/internal-packages/explain/styles/explain-body.less

@@ -1,9 +1,3 @@
 .explain-body {
   background: @gray8;
-  position: absolute;
-  top: 215px;
-  left: 0px;
-  right: 0px;
-  bottom: 0px;
-  overflow-y: scroll;
 }