diff --git a/src/components/library-item/library-item.css b/src/components/library-item/library-item.css index 4fe6ae6a8..bf690872d 100644 --- a/src/components/library-item/library-item.css +++ b/src/components/library-item/library-item.css @@ -27,6 +27,15 @@ border-color: #1dacf4; } +.disabled { + opacity: .5; + cursor: auto; +} + +.disabled:hover { + border-color: #e9eef2; +} + .library-item-image-container-wrapper { height: 100px; width: 100%; @@ -67,6 +76,10 @@ padding: 0; } +.featured-image-container { + position: relative; +} + .featured-image { width: 100%; } @@ -82,3 +95,15 @@ font-weight: normal; line-height: 2; } + +.coming-soon-text { + position: absolute; + transform: translate(calc(2 * $space), calc(2 * $space)); + background-color: $data-primary; + border-radius: 1rem; + box-shadow: 0 0 .5rem hsla(0, 0%, 0%, .25); + padding: .5rem 1rem; + font-size: .875rem; + font-weight: bold; + color: #FFF; +} diff --git a/src/components/library-item/library-item.jsx b/src/components/library-item/library-item.jsx index 04e5c0805..407cd6471 100644 --- a/src/components/library-item/library-item.jsx +++ b/src/components/library-item/library-item.jsx @@ -1,4 +1,5 @@ import bindAll from 'lodash.bindall'; +import {FormattedMessage} from 'react-intl'; import PropTypes from 'prop-types'; import React from 'react'; @@ -25,7 +26,9 @@ class LibraryItem extends React.PureComponent { this.props.onFocus(this.props.id); } handleClick (e) { - this.props.onSelect(this.props.id); + if (!this.props.disabled) { + this.props.onSelect(this.props.id); + } e.preventDefault(); } handleKeyPress (e) { @@ -43,10 +46,25 @@ class LibraryItem extends React.PureComponent { render () { return this.props.featured ? (