diff --git a/client/modules/IDE/components/SketchList.jsx b/client/modules/IDE/components/SketchList.jsx
index 3cfa421e..099b0c65 100644
--- a/client/modules/IDE/components/SketchList.jsx
+++ b/client/modules/IDE/components/SketchList.jsx
@@ -16,12 +16,16 @@ import * as SortingActions from '../actions/sorting';
import * as IdeActions from '../actions/ide';
import getSortedSketches from '../selectors/projects';
import Loader from '../../App/components/loader';
-import AddRemoveButton from '../../../components/AddRemoveButton';
import CollectionPopover from './CollectionPopover';
const arrowUp = require('../../../images/sort-arrow-up.svg');
const arrowDown = require('../../../images/sort-arrow-down.svg');
const downFilledTriangle = require('../../../images/down-filled-triangle.svg');
+const check = require('../../../images/check.svg');
+
+const checkIcon = (
+
+);
class SketchListRowBase extends React.Component {
constructor(props) {
@@ -150,6 +154,25 @@ class SketchListRowBase extends React.Component {
}
}
+ handleRowClick = () => {
+ if (!this.props.addMode) {
+ return;
+ }
+
+ if (this.props.inCollection) {
+ this.props.onCollectionRemove();
+ } else {
+ this.props.onCollectionAdd();
+ }
+ }
+
+ renderViewButton = sketchURL => (
+
{
+ View
+ }
+ |
+ )
+
renderDropdown = () => {
const { optionsOpen } = this.state;
const userIsOwner = this.props.user.username === this.props.username;
@@ -238,48 +261,54 @@ class SketchListRowBase extends React.Component {
);
}
- renderAddRemoveButtons = () => (
- {
- this.props.inCollection ?
- :
-
- }
- |
- )
-
- renderActions = () => (this.props.addMode === true ? this.renderAddRemoveButtons() : this.renderDropdown())
+ renderActions = sketchURL => (this.props.addMode === true ? this.renderViewButton(sketchURL) : this.renderDropdown())
render() {
- const { sketch, username } = this.props;
+ const {
+ sketch,
+ username,
+ addMode,
+ inCollection,
+ } = this.props;
const { renameOpen, renameValue } = this.state;
let url = `/${username}/sketches/${sketch.id}`;
if (username === 'p5') {
url = `/${username}/sketches/${slugify(sketch.name, '_')}`;
}
+
+ const name = addMode ?
+ {inCollection ? checkIcon : null} {sketch.name}
+ : (
+
+
+ {renameOpen ? '' : sketch.name}
+
+ {renameOpen
+ &&
+ e.stopPropagation()}
+ />
+ }
+
+ );
+
return (
-
- {renameOpen ? '' : sketch.name}
-
- {renameOpen
- &&
- e.stopPropagation()}
- />
- }
+ {name}
|
{format(new Date(sketch.createdAt), 'MMM D, YYYY h:mm A')} |
{format(new Date(sketch.updatedAt), 'MMM D, YYYY h:mm A')} |
- {this.renderActions()}
+ {this.renderActions(url)}
);
}