Fixed-height Overlay for QuickAdd views

Author: andrewn

client/modules/App/components/Overlay.jsx

@@ -66,9 +66,10 @@ class Overlay extends React.Component {
       title,
       children,
       actions,
+      isFixedHeight,
     } = this.props;
     return (
-      <div className="overlay">
+      <div className={`overlay ${isFixedHeight ? 'overlay--is-fixed-height' : ''}`}>
         <div className="overlay__content">
           <section
             role="main"
@@ -99,7 +100,8 @@ Overlay.propTypes = {
   closeOverlay: PropTypes.func,
   title: PropTypes.string,
   ariaLabel: PropTypes.string,
-  previousPath: PropTypes.string
+  previousPath: PropTypes.string,
+  isFixedHeight: PropTypes.bool,
 };
 
 Overlay.defaultProps = {
@@ -108,7 +110,8 @@ Overlay.defaultProps = {
   title: 'Modal',
   closeOverlay: null,
   ariaLabel: 'modal',
-  previousPath: '/'
+  previousPath: '/',
+  isFixedHeight: false,
 };
 
 export default Overlay;

client/modules/IDE/components/SketchList.jsx

@@ -407,6 +407,7 @@ class SketchList extends React.Component {
         {
           this.state.sketchToAddToCollection &&
             <Overlay
+              isFixedHeight
               title="Add to collection"
               closeOverlay={() => this.setState({ sketchToAddToCollection: null })}
             >

client/modules/IDE/pages/IDEView.jsx

@@ -383,6 +383,7 @@ class IDEView extends React.Component {
             title="Add sketch to collection"
             previousPath={this.props.ide.previousPath}
             actions={<CollectionSearchbar />}
+            isFixedHeight
           >
             <AddToCollectionList
               projectId={this.props.params.project_id}

client/modules/User/components/Collection.jsx

@@ -17,7 +17,7 @@ import { getCollection } from '../../IDE/selectors/collections';
 import Loader from '../../App/components/loader';
 import EditableInput from '../../IDE/components/EditableInput';
 import Overlay from '../../App/components/Overlay';
-import SketchList from '../../IDE/components/AddToCollectionSketchList';
+import AddToCollectionSketchList from '../../IDE/components/AddToCollectionSketchList';
 import CopyableInput from '../../IDE/components/CopyableInput';
 import { SketchSearchbar } from '../../IDE/components/Searchbar';
 import dropdownArrow from '../../../images/down-arrow.svg';
@@ -321,9 +321,9 @@ class Collection extends React.Component {
           }
           {
             this.state.isAddingSketches && (
-              <Overlay title="Add sketches" actions={<SketchSearchbar />} closeOverlay={this.hideAddSketches}>
+              <Overlay title="Add sketches" actions={<SketchSearchbar />} closeOverlay={this.hideAddSketches} isFixedHeight>
                 <div className="collection-add-sketch">
-                  <SketchList username={this.props.username} collection={this.props.collection} />
+                  <AddToCollectionSketchList username={this.props.username} collection={this.props.collection} />
                 </div>
               </Overlay>
             )

client/styles/components/_overlay.scss

@@ -46,3 +46,13 @@
   @include icon();
   padding: #{3 / $base-font-size}rem 0 #{3 / $base-font-size}rem #{10 / $base-font-size}rem;
 }
+
+/* Fixed height overlay */
+.overlay--is-fixed-height .overlay__body {
+  height: 80vh;
+}
+
+.overlay--is-fixed-height .overlay__header {
+  flex: 0;
+}
+