r/p5.js-web-editor
1
0
Fork 0
Code Issues 1 Pull requests Releases 1 Wiki Activity

Fixed-height Overlay for QuickAdd views

Browse source
This commit is contained in:
Andrew Nicolaou 2019-12-11 15:12:00 +01:00
parent 740401d18b
commit 0c68327690
5 changed files with 21 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
client/modules/App/components/Overlay.jsx
View file

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

1
client/modules/IDE/components/SketchList.jsx
View file

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

1
client/modules/IDE/pages/IDEView.jsx
View file

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

6
client/modules/User/components/Collection.jsx
View file

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

10
client/styles/components/_overlay.scss
View file

@ -46,3 +46,13 @@
@include icon(); @include icon();
padding: #{3 / $base-font-size}rem 0 #{3 / $base-font-size}rem #{10 / $base-font-size}rem; 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;
}