Activity Panel: add overlay to product placeholder images (https://github.com/woocommerce/woocommerce-admin/pull/1880)
* Activity Panel: add overlay to product placeholder images * Replace 'background' with 'background-color'
This commit is contained in:
parent
f5568b905b
commit
23aa795a40
|
@ -243,6 +243,26 @@
|
||||||
position: relative;
|
position: relative;
|
||||||
top: -42px;
|
top: -42px;
|
||||||
border: 2px solid $white;
|
border: 2px solid $white;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.woocommerce-review-activity-card__image-overlay__product {
|
||||||
|
display: inline-block;
|
||||||
|
height: 60px;
|
||||||
|
position: relative;
|
||||||
|
width: 60px;
|
||||||
|
|
||||||
|
&.is-placeholder::before {
|
||||||
|
background-color: $core-grey-dark-500;
|
||||||
|
border-radius: 50%;
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
top: 0;
|
||||||
|
opacity: 0.1;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -251,15 +271,17 @@
|
||||||
margin-top: $gap-smallest;
|
margin-top: $gap-smallest;
|
||||||
}
|
}
|
||||||
|
|
||||||
.woocommerce-activity-card__icon img.woocommerce-gravatar {
|
.woocommerce-review-activity-card__image-overlay__product .woocommerce-gravatar {
|
||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
width: 18px;
|
width: 18px;
|
||||||
height: 18px;
|
height: 18px;
|
||||||
left: 32px;
|
left: 32px;
|
||||||
top: -28px;
|
top: -28px;
|
||||||
|
z-index: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.woocommerce-activity-card__icon img.woocommerce-product-image {
|
.woocommerce-review-activity-card__image-overlay__product,
|
||||||
|
.woocommerce-review-activity-card__image-overlay__product .woocommerce-product-image {
|
||||||
width: 38px;
|
width: 38px;
|
||||||
height: 38px;
|
height: 38px;
|
||||||
}
|
}
|
||||||
|
|
|
@ -3,12 +3,13 @@
|
||||||
* External dependencies
|
* External dependencies
|
||||||
*/
|
*/
|
||||||
import { __, sprintf } from '@wordpress/i18n';
|
import { __, sprintf } from '@wordpress/i18n';
|
||||||
|
import classnames from 'classnames';
|
||||||
import { Component, Fragment } from '@wordpress/element';
|
import { Component, Fragment } from '@wordpress/element';
|
||||||
import { compose } from '@wordpress/compose';
|
import { compose } from '@wordpress/compose';
|
||||||
import Gridicon from 'gridicons';
|
import Gridicon from 'gridicons';
|
||||||
import interpolateComponents from 'interpolate-components';
|
import interpolateComponents from 'interpolate-components';
|
||||||
import moment from 'moment';
|
import moment from 'moment';
|
||||||
import { noop, isNull } from 'lodash';
|
import { get, noop, isNull } from 'lodash';
|
||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
import { withDispatch } from '@wordpress/data';
|
import { withDispatch } from '@wordpress/data';
|
||||||
|
|
||||||
|
@ -84,11 +85,20 @@ class ReviewsPanel extends Component {
|
||||||
</Fragment>
|
</Fragment>
|
||||||
);
|
);
|
||||||
|
|
||||||
|
const productImage = get( product, [ 'images', 0 ] ) || get( product, [ 'image' ] );
|
||||||
|
const productImageClasses = classnames(
|
||||||
|
'woocommerce-review-activity-card__image-overlay__product',
|
||||||
|
{
|
||||||
|
'is-placeholder': ! productImage || ! productImage.src,
|
||||||
|
}
|
||||||
|
);
|
||||||
const icon = (
|
const icon = (
|
||||||
<div className="woocommerce-review-activity-card__image-overlay">
|
<div className="woocommerce-review-activity-card__image-overlay">
|
||||||
<Gravatar user={ review.reviewer_email } size={ 24 } />
|
<Gravatar user={ review.reviewer_email } size={ 24 } />
|
||||||
|
<div className={ productImageClasses }>
|
||||||
<ProductImage product={ product } />
|
<ProductImage product={ product } />
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
);
|
);
|
||||||
|
|
||||||
const cardActions = () => {
|
const cardActions = () => {
|
||||||
|
|
Loading…
Reference in New Issue