Update Products on Sale and Products Tag icons (https://github.com/woocommerce/woocommerce-blocks/pull/987)

* Update Products on Sale and Products Tag icons

* Update on sale icon
This commit is contained in:
Albert Juhé Lluveras 2019-10-01 11:20:52 +02:00 committed by Mike Jolley
parent d244a60935
commit 99416e945e
6 changed files with 62 additions and 6 deletions

View File

@ -4,7 +4,6 @@
import { __ } from '@wordpress/i18n';
import { createBlock, registerBlockType } from '@wordpress/blocks';
import { without } from 'lodash';
import Gridicon from 'gridicons';
/**
* Internal dependencies
@ -14,11 +13,12 @@ import { deprecatedConvertToShortcode } from '../../utils/deprecations';
import sharedAttributes, {
sharedAttributeBlockTypes,
} from '../../utils/shared-attributes';
import { IconProductOnSale } from '../../components/icons';
registerBlockType( 'woocommerce/product-on-sale', {
title: __( 'On Sale Products', 'woo-gutenberg-products-block' ),
icon: {
src: <Gridicon icon="tag" />,
src: <IconProductOnSale />,
foreground: '#96588a',
},
category: 'woocommerce',

View File

@ -26,6 +26,7 @@ import GridContentControl from '../../components/grid-content-control';
import GridLayoutControl from '../../components/grid-layout-control';
import ProductTagControl from '../../components/product-tag-control';
import ProductOrderbyControl from '../../components/product-orderby-control';
import { IconProductTag } from '../../components/icons';
/**
* Component to handle edit mode of "Products by Tag".
@ -179,7 +180,7 @@ class ProductsByTagBlock extends Component {
return (
<Placeholder
icon="tag"
icon={ <IconProductTag className="block-editor-block-icon" /> }
label={ __(
'Products by Tag',
'woo-gutenberg-products-block'
@ -230,7 +231,9 @@ class ProductsByTagBlock extends Component {
/>
) : (
<Placeholder
icon="tag"
icon={
<IconProductTag className="block-editor-block-icon" />
}
label={ __(
'Products by Tag',
'woo-gutenberg-products-block'
@ -276,7 +279,9 @@ class ProductsByTagBlock extends Component {
</Fragment>
) : (
<Placeholder
icon="tag"
icon={
<IconProductTag className="block-editor-block-icon" />
}
label={ __(
'Products by Tag',
'woo-gutenberg-products-block'

View File

@ -10,6 +10,7 @@ import { DEFAULT_COLUMNS, DEFAULT_ROWS } from '@woocommerce/block-settings';
*/
import './editor.scss';
import Block from './block';
import { IconProductTag } from '../../components/icons';
/**
* Register and run the "Products by Tag" block.
@ -17,7 +18,7 @@ import Block from './block';
registerBlockType( 'woocommerce/product-tag', {
title: __( 'Products by Tag', 'woo-gutenberg-products-block' ),
icon: {
src: 'tag',
src: <IconProductTag />,
foreground: '#96588a',
},
category: 'woocommerce',

View File

@ -4,7 +4,9 @@ export { default as IconCheckChecked } from './checkbox-checked';
export { default as IconCheckUnchecked } from './checkbox-unchecked';
export { default as IconFolder } from './folder';
export { default as IconFolderStar } from './folder-star';
export { default as IconProductOnSale } from './product-on-sale';
export { default as IconProductSearch } from './product-search';
export { default as IconProductTag } from './product-tag';
export { default as IconNewReleases } from './new-releases';
export { default as IconRadioSelected } from './radio-selected';
export { default as IconRadioUnselected } from './radio-unselected';

View File

@ -0,0 +1,20 @@
/**
* External dependencies
*/
import { Icon } from '@wordpress/components';
export default ( { className } ) => (
<Icon
className={ className }
icon={
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M21.5,0h-9.3L0.8,11.4c-1,1-1,2.6,0,3.6L9,23.2c1,1,2.6,1,3.6,0c0,0,0,0,0,0L24,11.9V2.5C24,1.1,22.9,0,21.5,0z" />
<circle fill="#fff" cx="18.1" cy="5.8" r="2.5" />
<path
fill="#fff"
d="M5.8,10.5C5.8,10,6,9.6,6.3,9.2s0.8-0.5,1.3-0.5c0.6,0,1,0.2,1.3,0.5s0.5,0.8,0.5,1.3V11 c0,0.5-0.2,1-0.5,1.3s-0.8,0.5-1.3,0.5c-0.6,0-1-0.2-1.3-0.5s-0.5-0.8-0.5-1.3V10.5z M7,11c0,0.2,0.1,0.4,0.2,0.6 s0.3,0.2,0.5,0.2s0.4-0.1,0.5-0.2s0.2-0.3,0.2-0.6v-0.4c0-0.2-0.1-0.4-0.2-0.6S7.9,9.7,7.7,9.7c-0.2,0-0.4,0.1-0.5,0.2 S7,10.3,7,10.5V11z M8,16.8l-0.8-0.4l4.2-6.7l0.8,0.4L8,16.8z M9.9,15.3c0-0.5,0.2-1,0.5-1.3s0.8-0.5,1.3-0.5 c0.6,0,1,0.2,1.3,0.5s0.5,0.8,0.5,1.3v0.4c0,0.5-0.2,0.9-0.5,1.3s-0.8,0.5-1.3,0.5c-0.6,0-1-0.2-1.4-0.5s-0.5-0.8-0.5-1.3V15.3z M11,15.8c0,0.2,0.1,0.4,0.2,0.6s0.3,0.2,0.5,0.2c0.5,0,0.7-0.3,0.7-0.8v-0.4c0-0.2-0.1-0.4-0.2-0.6s-0.3-0.2-0.5-0.2 s-0.4,0.1-0.5,0.2S11,15.1,11,15.3V15.8z"
/>
</svg>
}
/>
);

View File

@ -0,0 +1,28 @@
/**
* External dependencies
*/
import { Icon } from '@wordpress/components';
export default ( { className } ) => (
<Icon
className={ className }
icon={
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M21.45,0H12.14L.75,11.4A2.55,2.55,0,0,0,.75,15L9,23.25a2.55,2.55,0,0,0,3.61,0L24,11.86V2.55A2.55,2.55,0,0,0,21.45,0Z" />
<circle fill="#fff" cx="18.07" cy="5.75" r="2.47" />
<path
fill="#fff"
d="M9.27,9.53c-.14-.53.19-.85.72-.72l3.17.82a1.83,1.83,0,0,1,1.21,1.21L15.19,14c.13.53-.19.86-.72.72l-3.17-.81a1.9,1.9,0,0,1-1.22-1.22Z"
/>
<path
fill="#fff"
d="M14.14,15.71a.52.52,0,0,1,.26,1L12.09,19a1.94,1.94,0,0,1-1.68.46l-3.16-.81a.52.52,0,0,1-.26-1L9.3,15.36A1.93,1.93,0,0,1,11,14.9Z"
/>
<path
fill="#fff"
d="M8.29,9.86a.52.52,0,0,0-1-.26L5,11.91a1.94,1.94,0,0,0-.46,1.68l.81,3.16a.52.52,0,0,0,1,.26L8.64,14.7A1.93,1.93,0,0,0,9.1,13Z"
/>
</svg>
}
/>
);