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

Update UX of Quick Add List: when clicking on row/hovering on row, can add/remove sketch/collection

Browse source
This commit is contained in:
Cassie Tarakajian 2020-02-11 16:16:43 -05:00
parent 1ef4b66727
commit 2ce36bef6f
2 changed files with 21 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
client/modules/IDE/components/QuickAddList/QuickAddList.jsx
View file

@ -7,12 +7,19 @@ import Icons from './Icons';
const Item = ({ const Item = ({
isAdded, onSelect, name, url isAdded, onSelect, name, url
}) => ( }) => (
<li className="quick-add__item"> <li className="quick-add__item" onClick={onSelect}> { /* eslint-disable-line */ }
<button className="quick-add__item-toggle" onClick={onSelect}> <button className="quick-add__item-toggle" onClick={onSelect}>
<Icons isAdded={isAdded} /> <Icons isAdded={isAdded} />
{name}
</button> </button>
<Link className="quick-add__item-view" to={url}>View</Link> <span className="quick-add__item-name">{name}</span>
<Link
className="quick-add__item-view"
to={url}
target="_blank"
onClick={e => e.stopPropogation()}
>
View
</Link>
</li> </li>
); );
@ -45,7 +52,10 @@ const QuickAddList = ({
key={item.id} key={item.id}
{...item} {...item}
onSelect={ onSelect={
() => handleAction(item) (event) => {
event.target.blur();
handleAction(item);
}
} }
/>))} />))}
</ul> </ul>

10
client/styles/components/_quick-add.scss
View file

@ -29,7 +29,9 @@
.quick-add__item-toggle { .quick-add__item-toggle {
display: flex; display: flex;
align-items: center; align-items: center;
}
.quick-add__item-name {
flex: 1; flex: 1;
} }
@ -83,8 +85,10 @@
transform: rotate(45deg); transform: rotate(45deg);
} }
.quick-add__item:hover,
.quick-add__item-toggle:hover, .quick-add__item-toggle:hover,
.quick-add__item-toggle:focus { .quick-add__item-toggle:focus {
cursor: pointer;
@include themify() { @include themify() {
.quick-add__icon { .quick-add__icon {
polygon { polygon {
@ -97,11 +101,11 @@
} }
} }
.quick-add__in-icon { & .quick-add__in-icon {
display: none; display: none;
} }
.quick-add__icon--in-collection { & .quick-add__icon--in-collection {
.quick-add__remove-icon { .quick-add__remove-icon {
display: inline-block; display: inline-block;
} }
@ -111,7 +115,7 @@
} }
} }
.quick-add__icon--not-in-collection { & .quick-add__icon--not-in-collection {
.quick-add__add-icon { .quick-add__add-icon {
display: inline-block; display: inline-block;
} }