From 0c683276901e813bc2ccde512df62cf43e179531 Mon Sep 17 00:00:00 2001
From: Andrew Nicolaou <me@andrewnicolaou.co.uk>
Date: Wed, 11 Dec 2019 15:12:00 +0100
Subject: [PATCH] Fixed-height Overlay for QuickAdd views

---
 client/modules/App/components/Overlay.jsx     |  9 ++++++---
 client/modules/IDE/components/SketchList.jsx  |  1 +
 client/modules/IDE/pages/IDEView.jsx          |  1 +
 client/modules/User/components/Collection.jsx |  6 +++---
 client/styles/components/_overlay.scss        | 10 ++++++++++
 5 files changed, 21 insertions(+), 6 deletions(-)

diff --git a/client/modules/App/components/Overlay.jsx b/client/modules/App/components/Overlay.jsx
index 58587a5c..415a9a0e 100644
--- a/client/modules/App/components/Overlay.jsx
+++ b/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;
diff --git a/client/modules/IDE/components/SketchList.jsx b/client/modules/IDE/components/SketchList.jsx
index b40f884a..d5c7bef0 100644
--- a/client/modules/IDE/components/SketchList.jsx
+++ b/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 })}
             >
diff --git a/client/modules/IDE/pages/IDEView.jsx b/client/modules/IDE/pages/IDEView.jsx
index 1b7745ae..87531ea5 100644
--- a/client/modules/IDE/pages/IDEView.jsx
+++ b/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}
diff --git a/client/modules/User/components/Collection.jsx b/client/modules/User/components/Collection.jsx
index 6f3c5bb0..d88d5427 100644
--- a/client/modules/User/components/Collection.jsx
+++ b/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>
             )
diff --git a/client/styles/components/_overlay.scss b/client/styles/components/_overlay.scss
index c8eafd1b..570452a4 100644
--- a/client/styles/components/_overlay.scss
+++ b/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;
+}
+