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

Show add/remove/in collection icon in SketchList

Browse source
This commit is contained in:
Andrew Nicolaou 2019-11-04 22:04:38 +01:00
parent e738221be6
commit 18af6aed3a
2 changed files with 96 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -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 = (
<InlineSVG className="sketch-list__check-icon" src={check} alt="In collection" />
);
const Icons = ({ inCollection }) => {
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>
<td>{format(new Date(sketch.updatedAt), 'MMM D, YYYY h:mm A')}</td>
{!this.props.addMode && <td>{format(new Date(sketch.createdAt), '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,14 +454,16 @@ class SketchList extends React.Component {
{this._renderEmptyTable()}
{this.hasSketches() &&
<table className="sketches-table" summary="table containing all saved projects">
<thead>
<tr>
{this._renderFieldHeader('name', 'Sketch')}
{this._renderFieldHeader('createdAt', 'Date Created')}
{this._renderFieldHeader('updatedAt', 'Date Updated')}
<th scope="col"></th>
</tr>
</thead>
{!this.props.addMode &&
<thead>
<tr>
{this._renderFieldHeader('name', 'Sketch')}
{this._renderFieldHeader('createdAt', 'Date Created')}
{this._renderFieldHeader('updatedAt', 'Date Updated')}
<th scope="col"></th>
</tr>
</thead>
}
<tbody>
{this.props.sketches.map(sketch =>
(<SketchListRow

62
client/styles/components/_sketch-list.scss
View file

@ -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;
width:#{25 / $base-font-size}rem;
height:#{25 / $base-font-size}rem;
margin-right:#{15 / $base-font-size}rem;
width:#{35 / $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;
height:#{25 / $base-font-size}rem;
width:#{35 / $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;
}
}
}