scratchfoundation/scratch-paint
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-paint.git synced 2024-12-22 21:42:30 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

Add initial transparent and mixed icons for color buttons and swatch

Browse source
This commit is contained in:
Paul Kaplan 2017-10-26 15:52:37 -04:00
parent 162ca81ff9
commit d98a493954
6 changed files with 63 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
src/components/color-button/color-button.css
View file

@ -30,3 +30,8 @@
color: #575e75;
font-size: 0.75rem;
}
.swatch-icon {
width: 1.75rem;
margin: auto;
}

24
src/components/color-button/color-button.jsx
View file

@ -1,8 +1,16 @@
import React from 'react';
import PropTypes from 'prop-types';
import {MIXED} from '../../helper/style-path';
import noFillIcon from './no-fill.svg';
import mixedFillIcon from './mixed-fill.svg';
import styles from './color-button.css';
const colorToBackground = (color) => {
return color === MIXED || color === null ? 'white' : color
};
const ColorButtonComponent = props => (
<div
className={styles.colorButton}
@ -11,9 +19,21 @@ const ColorButtonComponent = props => (
<div
className={styles.colorButtonSwatch}
style={{
background: props.color
background: colorToBackground(props.color)
}}
/>
>
{props.color === null ? (
<img
className={styles.swatchIcon}
src={noFillIcon}
/>
) : ((props.color === MIXED ? (
<img
className={styles.swatchIcon}
src={mixedFillIcon}
/>
) : null))}
</div>
<div className={styles.colorButtonArrow}>▾</div>
</div>
);

16
src/components/color-button/mixed-fill.svg Normal file
View file

@ -0,0 +1,16 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 43.2 (39069) - http://www.bohemiancoding.com/sketch -->
<title>mixed-fill</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" fill-opacity="0.75">
<g id="mixed-fill">
<g id="mixed-fill-icon" transform="translate(2.000000, 2.500000)">
<circle id="blue" fill="#4C97FF" cx="4.5" cy="10.5" r="4.5"></circle>
<circle id="red" fill="#FF5500" cx="8" cy="4.5" r="4.5"></circle>
<circle id="yellow" fill="#FFBF00" cx="11.4099998" cy="10.5" r="4.5"></circle>
</g>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 888 B

12
src/components/color-button/no-fill.svg Normal file
View file

@ -0,0 +1,12 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 43.2 (39069) - http://www.bohemiancoding.com/sketch -->
<title>no-fill</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="square">
<g id="no-fill" stroke="#FF661A" stroke-width="2">
<path d="M3,17 L17,3" id="Line"></path>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 612 B

4
src/components/color-picker/color-picker.css
View file

@ -48,3 +48,7 @@
border: 1px solid #4C97FF;
box-shadow: 0px 0px 0px 3px hsla(215, 100%, 65%, 0.2);
}
.swatch > img {
max-width: 100%;
}

5
src/components/color-picker/color-picker.jsx
View file

@ -9,6 +9,7 @@ import {MIXED} from '../../helper/style-path';
import Slider from '../forms/slider.jsx';
import styles from './color-picker.css';
import noFillIcon from '../color-button/no-fill.svg';
const colorStringToHsv = hexString => {
const hsv = parseColor(hexString).hsv;
@ -179,7 +180,9 @@ class ColorPickerComponent extends React.Component {
[styles.activeSwatch]: this.props.color === null
})}
onClick={this.handleTransparent}
/>
>
<img src={noFillIcon} />
</div>
</div>
</div>
</div>