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

Add checked/unchecked icons next to each menu item

This commit is contained in:
Kelly Dwan 2018-11-30 17:29:43 -05:00
parent 3d5571093a
commit 5b9e615d45
3 changed files with 61 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
plugins/woocommerce-blocks/assets/js/components/search-list-control/icons.js Normal file
View File

@ -0,0 +1,48 @@
/**
* External dependencies
*/
import { SVG } from '@wordpress/components';
export const CheckedIcon = () => (
<SVG
viewBox="0 0 16 16"
width="16"
height="16"
xmlns="http://www.w3.org/2000/svg"
>
<defs>
<path
id="checked"
d="M15.2222 1H2.7778C1.791 1 1 1.8 1 2.7778v12.4444C1 16.2 1.7911 17 2.7778 17h12.4444C16.209 17 17 16.2 17 15.2222V2.7778C17 1.8 16.2089 1 15.2222 1zm-8 12.4444L2.7778 9 4.031 7.7467l3.1911 3.1822 6.7467-6.7467 1.2533 1.2622-8 8z"
/>
</defs>
<g fill="none" fillRule="evenodd" transform="translate(-1 -1)">
<mask id="checked-mask" fill="#fff">
<use xlinkHref="#checked" />
</mask>
<path fill="#1E8CBE" d="M0 0h18v18H0z" mask="url(#checked-mask)" />
</g>
</SVG>
);
export const UncheckedIcon = () => (
<SVG
viewBox="0 0 16 16"
width="16"
height="16"
xmlns="http://www.w3.org/2000/svg"
>
<defs>
<path
id="unchecked"
d="M15.2222 2.7778v12.4444H2.7778V2.7778h12.4444zm0-1.7778H2.7778C1.8 1 1 1.8 1 2.7778v12.4444C1 16.2 1.8 17 2.7778 17h12.4444C16.2 17 17 16.2 17 15.2222V2.7778C17 1.8 16.2 1 15.2222 1z"
/>
</defs>
<g fill="none" fillRule="evenodd" transform="translate(-1 -1)">
<mask id="unchecked-mask" fill="#fff">
<use xlinkHref="#unchecked" />
</mask>
<path fill="#6C7781" d="M0 0h18v18H0z" mask="url(#unchecked-mask)" />
</g>
</SVG>
);

2
plugins/woocommerce-blocks/assets/js/components/search-list-control/index.js
View File

@ -20,6 +20,7 @@ import { Tag } from '@woocommerce/components';
*/
import './style.scss';
import { buildTermsTree } from './hierarchy';
import { CheckedIcon, UncheckedIcon } from './icons';
const defaultMessages = {
clear: __( 'Clear all selected items', 'woocommerce' ),
@ -115,6 +116,7 @@ export class SearchListControl extends Component {
onClick={ onSelect( item ) }
aria-selected={ isSelected }
>
{ isSelected ? <CheckedIcon /> : <UncheckedIcon /> }
<span
className="woocommerce-search-list__item-name"
dangerouslySetInnerHTML={ {

11
plugins/woocommerce-blocks/assets/js/components/search-list-control/style.scss
View File

@ -49,6 +49,8 @@
}
.woocommerce-search-list__item {
display: flex;
align-items: center;
margin-bottom: 0;
padding: $gap;
background: $white;
@ -56,6 +58,15 @@
border-bottom: 1px solid $core-grey-light-500 !important;
color: $core-grey-dark-500;
svg {
flex: 0 0 16px;
margin-right: $gap-smaller;
}
.woocommerce-search-list__item-name {
flex: 1;
}
@include hover-state {
background: $core-grey-light-100;
}