Collection Create is a modal
This commit is contained in:
Andrew Nicolaou
parent
c84f590290
commit
ec32eb1262
5 changed files with 57 additions and 40 deletions
|
|
@ -61,49 +61,43 @@ class CollectionCreate extends React.Component {
|
|||
const invalid = name === '' || name == null;
|
||||
|
||||
return (
|
||||
<section className="dashboard-header">
|
||||
<div className="collection-create">
|
||||
<Helmet>
|
||||
<title>{this.getTitle()}</title>
|
||||
</Helmet>
|
||||
|
||||
<div className="dashboard-header__header">
|
||||
<h2 className="dashboard-header__header__title">Create collection</h2>
|
||||
<div className="sketches-table-container">
|
||||
<form className="form" onSubmit={this.handleCreateCollection}>
|
||||
{creationError && <span className="form-error">Couldn't create collection</span>}
|
||||
<p className="form__field">
|
||||
<label htmlFor="name" className="form__label">Collection name</label>
|
||||
<input
|
||||
className="form__input"
|
||||
aria-label="name"
|
||||
type="text"
|
||||
id="name"
|
||||
value={name}
|
||||
placeholder={generatedCollectionName}
|
||||
onChange={this.handleTextChange('name')}
|
||||
/>
|
||||
{invalid && <span className="form-error">Collection name is required</span>}
|
||||
</p>
|
||||
<p className="form__field">
|
||||
<label htmlFor="description" className="form__label">Description (optional)</label>
|
||||
<textarea
|
||||
className="form__input form__input-flexible-height"
|
||||
aria-label="description"
|
||||
type="text"
|
||||
id="description"
|
||||
value={description}
|
||||
onChange={this.handleTextChange('description')}
|
||||
placeholder="My fave sketches"
|
||||
rows="4"
|
||||
/>
|
||||
</p>
|
||||
<input type="submit" disabled={invalid} value="Create collection" aria-label="create collection" />
|
||||
</form>
|
||||
</div>
|
||||
<div className="dashboard-content">
|
||||
<div className="sketches-table-container">
|
||||
<form className="form" onSubmit={this.handleCreateCollection}>
|
||||
{creationError && <span className="form-error">Couldn't create collection</span>}
|
||||
<p className="form__field">
|
||||
<label htmlFor="name" className="form__label">Collection name</label>
|
||||
<input
|
||||
className="form__input"
|
||||
aria-label="name"
|
||||
type="text"
|
||||
id="name"
|
||||
value={name}
|
||||
placeholder={generatedCollectionName}
|
||||
onChange={this.handleTextChange('name')}
|
||||
/>
|
||||
{invalid && <span className="form-error">Collection name is required</span>}
|
||||
</p>
|
||||
<p className="form__field">
|
||||
<label htmlFor="description" className="form__label">Description (optional)</label>
|
||||
<textarea
|
||||
className="form__input form__input-flexible-height"
|
||||
aria-label="description"
|
||||
type="text"
|
||||
id="description"
|
||||
value={description}
|
||||
onChange={this.handleTextChange('description')}
|
||||
placeholder="My fave sketches"
|
||||
rows="4"
|
||||
/>
|
||||
</p>
|
||||
<input type="submit" disabled={invalid} value="Create collection" aria-label="create collection" />
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,12 +5,14 @@ import { bindActionCreators } from 'redux';
|
|||
import { browserHistory, Link } from 'react-router';
|
||||
import { updateSettings, initiateVerification, createApiKey, removeApiKey } from '../actions';
|
||||
import Nav from '../../../components/Nav';
|
||||
import Overlay from '../../App/components/Overlay';
|
||||
|
||||
import AssetList from '../../IDE/components/AssetList';
|
||||
import CollectionList from '../../IDE/components/CollectionList';
|
||||
import SketchList from '../../IDE/components/SketchList';
|
||||
import Searchbar from '../../IDE/components/Searchbar';
|
||||
|
||||
import CollectionCreate from '../components/CollectionCreate';
|
||||
import DashboardTabSwitcher, { TabKey } from '../components/DashboardTabSwitcher';
|
||||
|
||||
class DashboardView extends React.Component {
|
||||
|
|
@ -60,6 +62,15 @@ class DashboardView extends React.Component {
|
|||
return this.props.user.username === this.props.params.username;
|
||||
}
|
||||
|
||||
isCollectionCreate() {
|
||||
const path = this.props.location.pathname;
|
||||
return /collections\/create$/.test(path);
|
||||
}
|
||||
|
||||
returnToDashboard = () => {
|
||||
browserHistory.push(`/${this.ownerName()}/collections`);
|
||||
}
|
||||
|
||||
renderActionButton(tabKey, username) {
|
||||
if (!this.isOwner()) {
|
||||
return null;
|
||||
|
|
@ -111,6 +122,14 @@ class DashboardView extends React.Component {
|
|||
{this.renderContent(currentTab, username)}
|
||||
</div>
|
||||
</section>
|
||||
{this.isCollectionCreate() &&
|
||||
<Overlay
|
||||
title="Create collection"
|
||||
closeOverlay={this.returnToDashboard}
|
||||
>
|
||||
<CollectionCreate />
|
||||
</Overlay>
|
||||
}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -46,7 +46,7 @@ const routes = store => (
|
|||
<Route path="/:username/sketches/:project_id/add-to-collection" component={IDEView} />
|
||||
<Route path="/:username/sketches" component={DashboardView} />
|
||||
<Route path="/:username/collections" component={DashboardView} />
|
||||
<Route path="/:username/collections/create" component={CollectionView} />
|
||||
<Route path="/:username/collections/create" component={DashboardView} />
|
||||
<Route path="/:username/collections/:collection_id" component={CollectionView} />
|
||||
<Route path="/about" component={IDEView} />
|
||||
<Route path="/feedback" component={IDEView} />
|
||||
|
|
|
|||
3
client/styles/components/_collection-create.scss
Normal file
3
client/styles/components/_collection-create.scss
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
.collection-create {
|
||||
padding: #{24 / $base-font-size}rem;
|
||||
}
|
||||
|
|
@ -50,6 +50,7 @@
|
|||
@import 'components/dashboard-header';
|
||||
@import 'components/editable-input';
|
||||
@import 'components/collection';
|
||||
@import 'components/collection-create';
|
||||
|
||||
@import 'layout/dashboard';
|
||||
@import 'layout/ide';
|
||||
|
|
|
|||
Loading…
Reference in a new issue