@@ -67,7 +73,14 @@ const CollectionPopover = ({
{
- filteredCollections.map(collection => - handleAddToCollection(collection.id)} />)
+ filteredCollections.map((collection) => {
+ const inCollection = projectInCollection(project, collection);
+ const handleSelect = inCollection ? handleRemoveFromCollection : handleAddToCollection;
+
+ return (
+
- handleSelect(collection.id)} />
+ );
+ })
}
@@ -79,6 +92,7 @@ CollectionPopover.propTypes = {
onClose: PropTypes.func.isRequired,
getCollections: PropTypes.func.isRequired,
addToCollection: PropTypes.func.isRequired,
+ removeFromCollection: PropTypes.func.isRequired,
user: PropTypes.shape({
username: PropTypes.string.isRequired,
}).isRequired,
diff --git a/client/modules/IDE/components/CollectionPopover/Item.jsx b/client/modules/IDE/components/CollectionPopover/Item.jsx
index 1d3d4efa..f73192e9 100644
--- a/client/modules/IDE/components/CollectionPopover/Item.jsx
+++ b/client/modules/IDE/components/CollectionPopover/Item.jsx
@@ -1,10 +1,20 @@
import PropTypes from 'prop-types';
import React from 'react';
import { Link } from 'react-router';
+import InlineSVG from 'react-inlinesvg';
-const CollectionItem = ({ collection, onSelect }) => (
+import check from '../../../../images/check.svg';
+
+const checkIcon = (
+
+);
+
+
+const CollectionItem = ({ inCollection, collection, onSelect }) => (
+ {inCollection && checkIcon}
+
@@ -17,6 +27,7 @@ const CollectionItem = ({ collection, onSelect }) => (
);
CollectionItem.propTypes = {
+ inCollection: PropTypes.bool.isRequired,
onSelect: PropTypes.func.isRequired,
collection: PropTypes.shape({
name: PropTypes.string,
diff --git a/client/styles/components/_collection-popover.scss b/client/styles/components/_collection-popover.scss
index 3c65dda5..fa199f07 100644
--- a/client/styles/components/_collection-popover.scss
+++ b/client/styles/components/_collection-popover.scss
@@ -66,8 +66,7 @@
height: 100%;
display: flex;
- justify-content: stretch;
- align-items: stretch;
+ align-items: center;
}
.collection-popover__item__info button,