From 176a52feb06e64e7c7a1114a19fb9a491464ca43 Mon Sep 17 00:00:00 2001 From: Ray Schamp Date: Wed, 18 Apr 2018 22:21:43 -0400 Subject: [PATCH] Style most of the components --- src/components/button/button.css | 1 + src/components/filter/icon--filter.svg | 2 +- src/components/filter/icon--x.svg | 2 +- src/components/library/library.css | 10 +++- src/components/library/library.jsx | 64 ++++++++++++++++++++---- src/components/tag-button/tag-button.css | 17 +++++++ src/components/tag-button/tag-button.jsx | 42 ++++++++++++++++ src/containers/extension-library.jsx | 1 + src/containers/sprite-library.jsx | 2 + src/lib/libraries/sprite-tags.js | 36 +++++++++++++ 10 files changed, 162 insertions(+), 15 deletions(-) create mode 100644 src/components/tag-button/tag-button.css create mode 100644 src/components/tag-button/tag-button.jsx create mode 100644 src/lib/libraries/sprite-tags.js diff --git a/src/components/button/button.css b/src/components/button/button.css index 5e69aabd4..9ce746c52 100644 --- a/src/components/button/button.css +++ b/src/components/button/button.css @@ -7,6 +7,7 @@ align-items: center; padding-left: .75rem; padding-right: .75rem; + user-select: none; } .icon { diff --git a/src/components/filter/icon--filter.svg b/src/components/filter/icon--filter.svg index 2a0c75fcb..400bd6234 100644 --- a/src/components/filter/icon--filter.svg +++ b/src/components/filter/icon--filter.svg @@ -1,3 +1,3 @@ - + diff --git a/src/components/filter/icon--x.svg b/src/components/filter/icon--x.svg index e78a2a8e2..88b52e870 100644 --- a/src/components/filter/icon--x.svg +++ b/src/components/filter/icon--x.svg @@ -1,3 +1,3 @@ - + diff --git a/src/components/library/library.css b/src/components/library/library.css index 489162a67..9a1872bae 100644 --- a/src/components/library/library.css +++ b/src/components/library/library.css @@ -17,9 +17,15 @@ display: flex; flex-direction: row; background-color: $motion-transparent; + justify-content: flex-start; + height: 4.5rem; padding: 1rem; } +.filter-bar-item { + margin-right: .75rem; +} + .filter { flex-grow: 0; } @@ -29,11 +35,11 @@ transition: 6s; } -.filter-input:focus { +.filter-input:focus, +.filter-input:not([value=""]) { width: 13.25rem; } .divider { - margin: 0 .75rem; transform: scaleY(1.39); } diff --git a/src/components/library/library.jsx b/src/components/library/library.jsx index ec9b26097..2e0d3085c 100644 --- a/src/components/library/library.jsx +++ b/src/components/library/library.jsx @@ -1,3 +1,4 @@ +import classNames from 'classnames'; import bindAll from 'lodash.bindall'; import PropTypes from 'prop-types'; import React from 'react'; @@ -6,9 +7,23 @@ import LibraryItem from '../library-item/library-item.jsx'; import ModalComponent from '../modal/modal.jsx'; import Divider from '../divider/divider.jsx'; import Filter from '../filter/filter.jsx'; +import TagButton from '../tag-button/tag-button.jsx'; + +import placeholderSvg from '../../lib/assets/placeholder.svg'; import styles from './library.css'; +const tagListPrefix = [{ + active: true, + title: 'All', + iconSrc: placeholderSvg +}]; + +const defaultTagProps = { + active: false, + iconSrc: placeholderSvg +}; + class LibraryComponent extends React.Component { constructor (props) { super(props); @@ -59,17 +74,38 @@ class LibraryComponent extends React.Component { contentLabel={this.props.title} onRequestClose={this.props.onRequestClose} > -
- - - -
+ {(this.props.filterable || this.props.tags) && ( +
+ {this.props.filterable && ( + + )} + {this.props.filterable && this.props.tags && ( + + )} + {this.props.tags && + (tagListPrefix.concat(this.props.tags)).map((tagProps, id) => ( + + )) + } +
+ )}
{this.getFilteredData().map((dataItem, index) => { const scratchURL = dataItem.md5 ? @@ -110,11 +146,17 @@ LibraryComponent.propTypes = { }) /* eslint-enable react/no-unused-prop-types, lines-around-comment */ ), + filterable: PropTypes.bool, onItemMouseEnter: PropTypes.func, onItemMouseLeave: PropTypes.func, onItemSelected: PropTypes.func, onRequestClose: PropTypes.func, + tags: PropTypes.arrayOf(TagButton.propTypes), title: PropTypes.string.isRequired }; +LibraryComponent.defaultProps = { + filterable: true +}; + export default LibraryComponent; diff --git a/src/components/tag-button/tag-button.css b/src/components/tag-button/tag-button.css new file mode 100644 index 000000000..1dbe7f152 --- /dev/null +++ b/src/components/tag-button/tag-button.css @@ -0,0 +1,17 @@ +@import "../../css/colors.css"; + +.tag-button { + padding: .625rem 1rem; + background: $motion-primary; + border-radius: 1.375rem; + color: $ui-white; +} + +.tag-button-icon { + max-width: 1rem; + max-height: 1rem; +} + +.active { + background: $data-primary; +} diff --git a/src/components/tag-button/tag-button.jsx b/src/components/tag-button/tag-button.jsx new file mode 100644 index 000000000..cf937e538 --- /dev/null +++ b/src/components/tag-button/tag-button.jsx @@ -0,0 +1,42 @@ +import classNames from 'classnames'; +import PropTypes from 'prop-types'; +import React from 'react'; + +import Button from '../button/button.jsx'; + +import styles from './tag-button.css'; + +const TagButton = ({ + active, + iconClassName, + className, + title, + ...props +}) => ( + +); + +TagButton.propTypes = { + ...Button.propTypes, + active: PropTypes.bool, + title: PropTypes.oneOfType([ + PropTypes.string, + PropTypes.object // FormattedMessage + ]).isRequired +}; + +export default TagButton; diff --git a/src/containers/extension-library.jsx b/src/containers/extension-library.jsx index 5d602cfbd..cae675405 100644 --- a/src/containers/extension-library.jsx +++ b/src/containers/extension-library.jsx @@ -45,6 +45,7 @@ class ExtensionLibrary extends React.PureComponent { return (