Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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:
Albert Juhé Lluveras 2019-03-25 10:08:25 +01:00 committed by GitHub
parent f5568b905b
commit 23aa795a40
2 changed files with 36 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
plugins/woocommerce-admin/client/header/activity-panel/activity-card/style.scss
View File

@ -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;
} }

14
plugins/woocommerce-admin/client/header/activity-panel/panels/reviews.js
View File

@ -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,10 +85,19 @@ 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 } />
<ProductImage product={ product } /> <div className={ productImageClasses }>
<ProductImage product={ product } />
</div>
</div> </div>
); );