Show add/remove/in collection icon in SketchList

client/modules/IDE/components/SketchList.jsx

@@ -21,11 +21,27 @@ 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 check = require('../../../images/check_encircled.svg');
+const close = require('../../../images/close.svg');
 
-const checkIcon = (
+const Icons = ({ inCollection }) => {
-  <InlineSVG className="sketch-list__check-icon" src={check} alt="In collection" />
+  const classes = [
-);
+    'sketch-list__icon',
+    inCollection ? 'sketch-list__icon--in-collection' : 'sketch-list__icon--not-in-collection'
+  ].join(' ');
+
+  return (
+    <div className={classes}>
+      <InlineSVG className="sketch-list__remove-icon" src={close} alt="Remove from collection" />
+      <InlineSVG className="sketch-list__in-icon" src={check} alt="In collection" />
+      <InlineSVG className="sketch-list__add-icon" src={close} alt="Add to collection" />
+    </div>
+  );
+};
+
+Icons.propTypes = {
+  inCollection: PropTypes.bool.isRequired,
+};
 
 class SketchListRowBase extends React.Component {
   constructor(props) {
@@ -167,9 +183,8 @@ class SketchListRowBase extends React.Component {
   }
 
   renderViewButton = sketchURL => (
-    <td className="sketch-list__dropdown-column">{
+    <td className="sketch-list__dropdown-column">
       <Link to={sketchURL}>View</Link>
-    }
     </td>
   )
 
@@ -282,7 +297,7 @@ class SketchListRowBase extends React.Component {
     }
 
     const name = addMode ?
-      <span className="sketches-table__name">{inCollection ? checkIcon : null} {sketch.name}</span>
+      <span className="sketches-table__name">{sketch.name}</span>
       : (
         <React.Fragment>
           <Link to={url}>
@@ -308,11 +323,17 @@ class SketchListRowBase extends React.Component {
           key={sketch.id}
           onClick={this.handleRowClick}
         >
+          {
+            this.props.addMode &&
+            <td className="sketches-table__icon-cell">
+              <Icons inCollection={inCollection} />
+            </td>
+          }
           <th scope="row">
             {name}
           </th>
-          <td>{format(new Date(sketch.createdAt), 'MMM D, YYYY h:mm A')}</td>
+          {!this.props.addMode && <td>{format(new Date(sketch.createdAt), 'MMM D, YYYY h:mm A')}</td>}
-          <td>{format(new Date(sketch.updatedAt), 'MMM D, YYYY h:mm A')}</td>
+          {!this.props.addMode && <td>{format(new Date(sketch.updatedAt), 'MMM D, YYYY h:mm A')}</td>}
           {this.renderActions(url)}
         </tr>
       </React.Fragment>);
@@ -433,6 +454,7 @@ class SketchList extends React.Component {
         {this._renderEmptyTable()}
         {this.hasSketches() &&
           <table className="sketches-table" summary="table containing all saved projects">
+            {!this.props.addMode &&
               <thead>
                 <tr>
                   {this._renderFieldHeader('name', 'Sketch')}
@@ -441,6 +463,7 @@ class SketchList extends React.Component {
                   <th scope="col"></th>
                 </tr>
               </thead>
+            }
             <tbody>
               {this.props.sketches.map(sketch =>
                 (<SketchListRow

client/styles/components/_sketch-list.scss

@@ -114,11 +114,15 @@
   align-items: center;
 }
 
-.sketch-list__check-icon {
+.sketches-table__icon-cell {
+  width: #{35 / $base-font-size}rem;
+}
+
+.sketch-list__icon {
   display: inline-block;
-  margin-right:#{10 / $base-font-size}rem;
+  margin-right:#{15 / $base-font-size}rem;
-  width:#{25 / $base-font-size}rem;
+  width:#{35 / $base-font-size}rem;
-  height:#{25 / $base-font-size}rem;
+  height:#{35 / $base-font-size}rem;
   @include icon();
   @include themify() {
     & path {
@@ -126,8 +130,54 @@
     }
 
     & svg {
-      width:#{25 / $base-font-size}rem;
+      width:#{35 / $base-font-size}rem;
-      height:#{25 / $base-font-size}rem;
+      height:#{35 / $base-font-size}rem;
+    }
+  }
+}
+
+.sketch-list__icon > * {
+  display: none;
+}
+
+.sketch-list__in-icon {
+  display: inline-block;
+
+  & svg {
+    opacity: 0.3;
+  }
+}
+
+.sketch-list__icon--in-collection .sketch-list__in-icon svg {
+  opacity: 1;
+}
+
+.sketch-list__add-icon {
+  transform: rotate(45deg);
+}
+
+.sketches-table__row:hover {
+  .sketch-list__in-icon {
+    display: none;
+  }
+
+  .sketch-list__icon--in-collection {
+    .sketch-list__remove-icon {
+      display: inline-block;
+    }
+
+    .sketch-list__add-icon {
+      display: none;
+    }
+  }
+
+  .sketch-list__icon--not-in-collection {
+    .sketch-list__add-icon {
+      display: inline-block;
+    }
+
+    .sketch-list__remove-icon {
+      display: none;
     }
   }
 }