mirror of
https://github.com/scratchfoundation/scratch-paint.git
synced 2024-12-22 21:42:30 -05:00
Add coming soon for bitmap, text tool
This commit is contained in:
parent
7086916089
commit
7cbe687c18
13 changed files with 362 additions and 34 deletions
|
@ -71,6 +71,7 @@
|
||||||
"react-responsive": "3.0.0",
|
"react-responsive": "3.0.0",
|
||||||
"react-style-proptype": "3.1.0",
|
"react-style-proptype": "3.1.0",
|
||||||
"react-test-renderer": "^16.0.0",
|
"react-test-renderer": "^16.0.0",
|
||||||
|
"react-tooltip": "3.4.0",
|
||||||
"redux": "3.7.0",
|
"redux": "3.7.0",
|
||||||
"redux-mock-store": "^1.2.3",
|
"redux-mock-store": "^1.2.3",
|
||||||
"redux-throttle": "0.1.1",
|
"redux-throttle": "0.1.1",
|
||||||
|
|
|
@ -11,7 +11,7 @@
|
||||||
|
|
||||||
:local(.mod-disabled) {
|
:local(.mod-disabled) {
|
||||||
cursor: auto;
|
cursor: auto;
|
||||||
opacity: .3;
|
opacity: .5;
|
||||||
}
|
}
|
||||||
:local(.mod-disabled:active) {
|
:local(.mod-disabled:active) {
|
||||||
background: none;
|
background: none;
|
||||||
|
|
BIN
src/components/coming-soon/aww-cat.png
Normal file
BIN
src/components/coming-soon/aww-cat.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 4.4 KiB |
72
src/components/coming-soon/coming-soon.css
Normal file
72
src/components/coming-soon/coming-soon.css
Normal file
|
@ -0,0 +1,72 @@
|
||||||
|
/* DO NOT EDIT
|
||||||
|
@todo This file is copied from GUI and should be pulled out into a shared library.
|
||||||
|
See #13 */
|
||||||
|
|
||||||
|
/*
|
||||||
|
* NOTE: the copious use of `important` is needed to overwrite
|
||||||
|
* the default tooltip styling, and is required by the 3rd party
|
||||||
|
* library being used, `react-tooltip`
|
||||||
|
*/
|
||||||
|
|
||||||
|
@import "../../css/colors.css";
|
||||||
|
|
||||||
|
.coming-soon {
|
||||||
|
background-color: $data-primary !important;
|
||||||
|
border: 1px solid hsla(0, 0%, 0%, .1) !important;
|
||||||
|
border-radius: .25rem !important;
|
||||||
|
box-shadow: 0 0 .5rem hsla(0, 0%, 0%, .25) !important;
|
||||||
|
padding: .75rem 1rem !important;
|
||||||
|
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
|
||||||
|
font-size: 1rem !important;
|
||||||
|
line-height: 1.25rem !important;
|
||||||
|
z-index: 100 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.coming-soon:after {
|
||||||
|
content: "";
|
||||||
|
border-top: 1px solid hsla(0, 0%, 0%, .1) !important;
|
||||||
|
border-left: 0 !important;
|
||||||
|
border-bottom: 0 !important;
|
||||||
|
border-right: 1px solid hsla(0, 0%, 0%, .1) !important;
|
||||||
|
border-radius: .25rem;
|
||||||
|
background-color: $data-primary !important;
|
||||||
|
height: 1rem !important;
|
||||||
|
width: 1rem !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.show,
|
||||||
|
.show:before,
|
||||||
|
.show:after {
|
||||||
|
opacity: 1 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.left:after {
|
||||||
|
margin-top: -.5rem !important;
|
||||||
|
right: -.5rem !important;
|
||||||
|
transform: rotate(45deg) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right:after {
|
||||||
|
margin-top: -.5rem !important;
|
||||||
|
left: -.5rem !important;
|
||||||
|
transform: rotate(-135deg) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top:after {
|
||||||
|
margin-right: -.5rem !important;
|
||||||
|
bottom: -.5rem !important;
|
||||||
|
transform: rotate(135deg) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom:after {
|
||||||
|
margin-left: -.5rem !important;
|
||||||
|
top: -.5rem !important;
|
||||||
|
transform: rotate(-45deg) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.coming-soon-image {
|
||||||
|
margin-left: .125rem;
|
||||||
|
width: 1.25rem;
|
||||||
|
height: 1.25rem;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
147
src/components/coming-soon/coming-soon.jsx
Normal file
147
src/components/coming-soon/coming-soon.jsx
Normal file
|
@ -0,0 +1,147 @@
|
||||||
|
/* DO NOT EDIT
|
||||||
|
@todo This file is copied from GUI and should be pulled out into a shared library.
|
||||||
|
See #13 */
|
||||||
|
|
||||||
|
import bindAll from 'lodash.bindall';
|
||||||
|
import classNames from 'classnames';
|
||||||
|
import {defineMessages, injectIntl, intlShape, FormattedMessage} from 'react-intl';
|
||||||
|
import PropTypes from 'prop-types';
|
||||||
|
import React from 'react';
|
||||||
|
import ReactTooltip from 'react-tooltip';
|
||||||
|
|
||||||
|
import styles from './coming-soon.css';
|
||||||
|
|
||||||
|
import awwCatIcon from './aww-cat.png';
|
||||||
|
import coolCatIcon from './cool-cat.png';
|
||||||
|
|
||||||
|
const messages = defineMessages({
|
||||||
|
message1: {
|
||||||
|
defaultMessage: 'Don\'t worry, we\'re on it {emoji}',
|
||||||
|
description: 'One of the "coming soon" random messages for yet-to-be-done features',
|
||||||
|
id: 'gui.comingSoon.message1'
|
||||||
|
},
|
||||||
|
message2: {
|
||||||
|
defaultMessage: 'Coming Soon...',
|
||||||
|
description: 'One of the "coming soon" random messages for yet-to-be-done features',
|
||||||
|
id: 'gui.comingSoon.message2'
|
||||||
|
},
|
||||||
|
message3: {
|
||||||
|
defaultMessage: 'We\'re working on it {emoji}',
|
||||||
|
description: 'One of the "coming soon" random messages for yet-to-be-done features',
|
||||||
|
id: 'gui.comingSoon.message3'
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
class ComingSoonContent extends React.Component {
|
||||||
|
constructor (props) {
|
||||||
|
super(props);
|
||||||
|
bindAll(this, [
|
||||||
|
'setHide',
|
||||||
|
'setShow',
|
||||||
|
'getRandomMessage'
|
||||||
|
]);
|
||||||
|
this.state = {
|
||||||
|
isShowing: false
|
||||||
|
};
|
||||||
|
}
|
||||||
|
setShow () {
|
||||||
|
// needed to set the opacity to 1, since the default is .9 on show
|
||||||
|
this.setState({isShowing: true});
|
||||||
|
}
|
||||||
|
setHide () {
|
||||||
|
this.setState({isShowing: false});
|
||||||
|
}
|
||||||
|
getRandomMessage () {
|
||||||
|
// randomly chooses a messages from `messages` to display in the tooltip.
|
||||||
|
const images = [awwCatIcon, coolCatIcon];
|
||||||
|
const messageNumber = Math.floor(Math.random() * Object.keys(messages).length) + 1;
|
||||||
|
const imageNumber = Math.floor(Math.random() * Object.keys(images).length);
|
||||||
|
return (
|
||||||
|
<FormattedMessage
|
||||||
|
{...messages[`message${messageNumber}`]}
|
||||||
|
values={{
|
||||||
|
emoji: (
|
||||||
|
<img
|
||||||
|
className={styles.comingSoonImage}
|
||||||
|
src={images[imageNumber]}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
render () {
|
||||||
|
return (
|
||||||
|
<ReactTooltip
|
||||||
|
afterHide={this.setHide}
|
||||||
|
afterShow={this.setShow}
|
||||||
|
className={classNames(
|
||||||
|
styles.comingSoon,
|
||||||
|
this.props.className,
|
||||||
|
{
|
||||||
|
[styles.show]: (this.state.isShowing),
|
||||||
|
[styles.left]: (this.props.place === 'left'),
|
||||||
|
[styles.right]: (this.props.place === 'right'),
|
||||||
|
[styles.top]: (this.props.place === 'top'),
|
||||||
|
[styles.bottom]: (this.props.place === 'bottom')
|
||||||
|
}
|
||||||
|
)}
|
||||||
|
getContent={this.getRandomMessage}
|
||||||
|
id={this.props.tooltipId}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
ComingSoonContent.propTypes = {
|
||||||
|
className: PropTypes.string,
|
||||||
|
intl: intlShape,
|
||||||
|
place: PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
|
||||||
|
tooltipId: PropTypes.string.isRequired
|
||||||
|
};
|
||||||
|
|
||||||
|
ComingSoonContent.defaultProps = {
|
||||||
|
place: 'bottom'
|
||||||
|
};
|
||||||
|
|
||||||
|
const ComingSoon = injectIntl(ComingSoonContent);
|
||||||
|
|
||||||
|
const ComingSoonTooltip = props => (
|
||||||
|
<div className={props.className}>
|
||||||
|
<div
|
||||||
|
data-delay-hide={props.delayHide}
|
||||||
|
data-delay-show={props.delayShow}
|
||||||
|
data-effect="solid"
|
||||||
|
data-for={props.tooltipId}
|
||||||
|
data-place={props.place}
|
||||||
|
data-tip="tooltip"
|
||||||
|
>
|
||||||
|
{props.children}
|
||||||
|
</div>
|
||||||
|
<ComingSoon
|
||||||
|
className={props.tooltipClassName}
|
||||||
|
place={props.place}
|
||||||
|
tooltipId={props.tooltipId}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
|
||||||
|
ComingSoonTooltip.propTypes = {
|
||||||
|
children: PropTypes.node.isRequired,
|
||||||
|
className: PropTypes.string,
|
||||||
|
delayHide: PropTypes.number,
|
||||||
|
delayShow: PropTypes.number,
|
||||||
|
place: PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
|
||||||
|
tooltipClassName: PropTypes.string,
|
||||||
|
tooltipId: PropTypes.string.isRequired
|
||||||
|
};
|
||||||
|
|
||||||
|
ComingSoonTooltip.defaultProps = {
|
||||||
|
delayHide: 0,
|
||||||
|
delayShow: 0
|
||||||
|
};
|
||||||
|
|
||||||
|
export {
|
||||||
|
ComingSoon as ComingSoonComponent,
|
||||||
|
ComingSoonTooltip
|
||||||
|
};
|
BIN
src/components/coming-soon/cool-cat.png
Normal file
BIN
src/components/coming-soon/cool-cat.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 3.7 KiB |
12
src/components/paint-editor/icons/bitmap.svg
Normal file
12
src/components/paint-editor/icons/bitmap.svg
Normal 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 47.1 (45422) - http://www.bohemiancoding.com/sketch -->
|
||||||
|
<title>bitmap</title>
|
||||||
|
<desc>Created with Sketch.</desc>
|
||||||
|
<defs></defs>
|
||||||
|
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||||
|
<g id="bitmap" fill="#575E75">
|
||||||
|
<path d="M4,3 L16,3 L16,4 L4,4 L4,3 Z M2,5 L3,5 L3,13 L2,13 L2,5 Z M17,5 L18,5 L18,13 L17,13 L17,5 Z M2,13 L18,13 L18,15 L2,15 L2,13 Z M4,12 L16,12 L16,13 L4,13 L4,12 Z M5,11 L8,11 L8,12 L5,12 L5,11 Z M6,10 L7,10 L7,11 L6,11 L6,10 Z M9,11 L16,11 L16,12 L9,12 L9,11 Z M10,10 L15,10 L15,11 L10,11 L10,10 Z M11,9 L14,9 L14,10 L11,10 L11,9 Z M12,8 L13,8 L13,9 L12,9 L12,8 Z M16,12 L17,12 L17,13 L16,13 L16,12 Z M3,15 L17,15 L17,16 L3,16 L3,15 Z M3,4 L4,4 L4,5 L3,5 L3,4 Z M16,4 L17,4 L17,5 L16,5 L16,4 Z M4,16 L16,16 L16,17 L4,17 L4,16 Z" id="Combined-Shape"></path>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
After Width: | Height: | Size: 1.1 KiB |
|
@ -157,6 +157,32 @@ $border-radius: 0.25rem;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.canvas-controls {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bitmap-tooltip {
|
||||||
|
margin-left: $grid-unit;
|
||||||
|
max-width: 10rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bitmap-button {
|
||||||
|
display: flex;
|
||||||
|
border-radius: 5px;
|
||||||
|
background-color: hsla(0, 0%, 0%, .25);
|
||||||
|
padding: calc(2 * $grid-unit);
|
||||||
|
line-height: 1.5rem;
|
||||||
|
font-size: calc(3 * $grid-unit);
|
||||||
|
font-weight: bold;
|
||||||
|
justify-content: center;
|
||||||
|
opacity: .5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bitmap-button-icon {
|
||||||
|
margin-right: calc(2 * $grid-unit);
|
||||||
|
}
|
||||||
|
|
||||||
@media only screen and (max-width: $full-size-paint) {
|
@media only screen and (max-width: $full-size-paint) {
|
||||||
.editor-container {
|
.editor-container {
|
||||||
padding: calc(3 * $grid-unit) $grid-unit;
|
padding: calc(3 * $grid-unit) $grid-unit;
|
||||||
|
|
|
@ -15,6 +15,7 @@ import Button from '../button/button.jsx';
|
||||||
import ButtonGroup from '../button-group/button-group.jsx';
|
import ButtonGroup from '../button-group/button-group.jsx';
|
||||||
import BrushMode from '../../containers/brush-mode.jsx';
|
import BrushMode from '../../containers/brush-mode.jsx';
|
||||||
import BufferedInputHOC from '../forms/buffered-input-hoc.jsx';
|
import BufferedInputHOC from '../forms/buffered-input-hoc.jsx';
|
||||||
|
import {ComingSoonTooltip} from '../coming-soon/coming-soon.jsx';
|
||||||
import Dropdown from '../dropdown/dropdown.jsx';
|
import Dropdown from '../dropdown/dropdown.jsx';
|
||||||
import EraserMode from '../../containers/eraser-mode.jsx';
|
import EraserMode from '../../containers/eraser-mode.jsx';
|
||||||
import FillColorIndicatorComponent from '../../containers/fill-color-indicator.jsx';
|
import FillColorIndicatorComponent from '../../containers/fill-color-indicator.jsx';
|
||||||
|
@ -32,10 +33,12 @@ import ReshapeMode from '../../containers/reshape-mode.jsx';
|
||||||
import SelectMode from '../../containers/select-mode.jsx';
|
import SelectMode from '../../containers/select-mode.jsx';
|
||||||
import StrokeColorIndicatorComponent from '../../containers/stroke-color-indicator.jsx';
|
import StrokeColorIndicatorComponent from '../../containers/stroke-color-indicator.jsx';
|
||||||
import StrokeWidthIndicatorComponent from '../../containers/stroke-width-indicator.jsx';
|
import StrokeWidthIndicatorComponent from '../../containers/stroke-width-indicator.jsx';
|
||||||
|
import TextModeComponent from '../text-mode/text-mode.jsx';
|
||||||
|
|
||||||
import layout from '../../lib/layout-constants';
|
import layout from '../../lib/layout-constants';
|
||||||
import styles from './paint-editor.css';
|
import styles from './paint-editor.css';
|
||||||
|
|
||||||
|
import bitmapIcon from './icons/bitmap.svg';
|
||||||
import groupIcon from './icons/group.svg';
|
import groupIcon from './icons/group.svg';
|
||||||
import redoIcon from './icons/redo.svg';
|
import redoIcon from './icons/redo.svg';
|
||||||
import sendBackIcon from './icons/send-back.svg';
|
import sendBackIcon from './icons/send-back.svg';
|
||||||
|
@ -99,6 +102,11 @@ const messages = defineMessages({
|
||||||
defaultMessage: 'More',
|
defaultMessage: 'More',
|
||||||
description: 'Label for dropdown to access more action buttons',
|
description: 'Label for dropdown to access more action buttons',
|
||||||
id: 'paint.paintEditor.more'
|
id: 'paint.paintEditor.more'
|
||||||
|
},
|
||||||
|
bitmap: {
|
||||||
|
defaultMessage: 'Convert to Bitmap',
|
||||||
|
description: 'Label for button that converts the paint editor to bitmap mode',
|
||||||
|
id: 'paint.paintEditor.bitmap'
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -350,6 +358,8 @@ const PaintEditorComponent = props => {
|
||||||
<RectMode
|
<RectMode
|
||||||
onUpdateSvg={props.onUpdateSvg}
|
onUpdateSvg={props.onUpdateSvg}
|
||||||
/>
|
/>
|
||||||
|
{/* text tool, coming soon */}
|
||||||
|
<TextModeComponent />
|
||||||
</div>
|
</div>
|
||||||
) : null}
|
) : null}
|
||||||
|
|
||||||
|
@ -379,41 +389,58 @@ const PaintEditorComponent = props => {
|
||||||
</Box>
|
</Box>
|
||||||
) : null
|
) : null
|
||||||
}
|
}
|
||||||
{/* Zoom controls */}
|
<div className={styles.canvasControls}>
|
||||||
<InputGroup className={styles.zoomControls}>
|
<ComingSoonTooltip
|
||||||
<ButtonGroup>
|
className={styles.bitmapTooltip}
|
||||||
<Button
|
place="top"
|
||||||
className={styles.buttonGroupButton}
|
tooltipId="bitmap-converter"
|
||||||
onClick={props.onZoomOut}
|
>
|
||||||
>
|
<div className={styles.bitmapButton}>
|
||||||
<img
|
<img
|
||||||
alt="Zoom Out"
|
className={styles.bitmapButtonIcon}
|
||||||
className={styles.buttonGroupButtonIcon}
|
src={bitmapIcon}
|
||||||
src={zoomOutIcon}
|
|
||||||
/>
|
/>
|
||||||
</Button>
|
<span>
|
||||||
<Button
|
{props.intl.formatMessage(messages.bitmap)}
|
||||||
className={styles.buttonGroupButton}
|
</span>
|
||||||
onClick={props.onZoomReset}
|
</div>
|
||||||
>
|
</ComingSoonTooltip>
|
||||||
<img
|
{/* Zoom controls */}
|
||||||
alt="Zoom Reset"
|
<InputGroup className={styles.zoomControls}>
|
||||||
className={styles.buttonGroupButtonIcon}
|
<ButtonGroup>
|
||||||
src={zoomResetIcon}
|
<Button
|
||||||
/>
|
className={styles.buttonGroupButton}
|
||||||
</Button>
|
onClick={props.onZoomOut}
|
||||||
<Button
|
>
|
||||||
className={styles.buttonGroupButton}
|
<img
|
||||||
onClick={props.onZoomIn}
|
alt="Zoom Out"
|
||||||
>
|
className={styles.buttonGroupButtonIcon}
|
||||||
<img
|
src={zoomOutIcon}
|
||||||
alt="Zoom In"
|
/>
|
||||||
className={styles.buttonGroupButtonIcon}
|
</Button>
|
||||||
src={zoomInIcon}
|
<Button
|
||||||
/>
|
className={styles.buttonGroupButton}
|
||||||
</Button>
|
onClick={props.onZoomReset}
|
||||||
</ButtonGroup>
|
>
|
||||||
</InputGroup>
|
<img
|
||||||
|
alt="Zoom Reset"
|
||||||
|
className={styles.buttonGroupButtonIcon}
|
||||||
|
src={zoomResetIcon}
|
||||||
|
/>
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
className={styles.buttonGroupButton}
|
||||||
|
onClick={props.onZoomIn}
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
alt="Zoom In"
|
||||||
|
className={styles.buttonGroupButtonIcon}
|
||||||
|
src={zoomInIcon}
|
||||||
|
/>
|
||||||
|
</Button>
|
||||||
|
</ButtonGroup>
|
||||||
|
</InputGroup>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
27
src/components/text-mode/text-mode.jsx
Normal file
27
src/components/text-mode/text-mode.jsx
Normal file
|
@ -0,0 +1,27 @@
|
||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
import {ComingSoonTooltip} from '../coming-soon/coming-soon.jsx';
|
||||||
|
import ToolSelectComponent from '../tool-select-base/tool-select-base.jsx';
|
||||||
|
|
||||||
|
import textIcon from './text.svg';
|
||||||
|
|
||||||
|
const TextModeComponent = () => (
|
||||||
|
<ComingSoonTooltip
|
||||||
|
place="right"
|
||||||
|
tooltipId="text-mode-select"
|
||||||
|
>
|
||||||
|
<ToolSelectComponent
|
||||||
|
disabled
|
||||||
|
imgDescriptor={{
|
||||||
|
defaultMessage: 'Text',
|
||||||
|
description: 'Label for the text tool',
|
||||||
|
id: 'paint.textMode.text'
|
||||||
|
}}
|
||||||
|
imgSrc={textIcon}
|
||||||
|
isSelected={false}
|
||||||
|
onMouseDown={function () {}}
|
||||||
|
/>
|
||||||
|
</ComingSoonTooltip>
|
||||||
|
);
|
||||||
|
|
||||||
|
export default TextModeComponent;
|
12
src/components/text-mode/text.svg
Normal file
12
src/components/text-mode/text.svg
Normal 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>text</title>
|
||||||
|
<desc>Created with Sketch.</desc>
|
||||||
|
<defs></defs>
|
||||||
|
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||||
|
<g id="text" fill="#575E75">
|
||||||
|
<path d="M16,4.35294118 L16,6.85176471 C16,7.04941176 15.8447059,7.20470588 15.6470588,7.20470588 L14.8988235,7.20470588 C14.7576471,7.20470588 14.6164706,7.12 14.5741176,6.99294118 L14.2070588,6.11764706 L11.0588235,6.11764706 L11.0588235,14.2917647 L11.92,14.6164706 C12.0611765,14.6729412 12.16,14.8 12.16,14.9552941 L12.16,15.6470588 C12.16,15.8447059 11.9905882,16 11.8070588,16 L8.20705882,16 C8.02352941,16 7.85411765,15.8447059 7.85411765,15.6470588 L7.85411765,14.9552941 C7.85411765,14.8 7.95294118,14.6729412 8.08,14.6164706 L8.94117647,14.2917647 L8.94117647,6.11764706 L5.80705882,6.11764706 L5.44,6.99294118 C5.38352941,7.12 5.25647059,7.20470588 5.11529412,7.20470588 L4.35294118,7.20470588 C4.16941176,7.20470588 4,7.04941176 4,6.85176471 L4,4.35294118 C4,4.15529412 4.16941176,4 4.35294118,4 L15.6470588,4 C15.8447059,4 16,4.15529412 16,4.35294118" id="text-icon"></path>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
After Width: | Height: | Size: 1.4 KiB |
|
@ -14,6 +14,7 @@ const ToolSelectComponent = props => (
|
||||||
[styles.isSelected]: props.isSelected
|
[styles.isSelected]: props.isSelected
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
disabled={props.disabled}
|
||||||
onClick={props.onMouseDown}
|
onClick={props.onMouseDown}
|
||||||
>
|
>
|
||||||
<img
|
<img
|
||||||
|
@ -30,6 +31,7 @@ const ToolSelectComponent = props => (
|
||||||
|
|
||||||
ToolSelectComponent.propTypes = {
|
ToolSelectComponent.propTypes = {
|
||||||
className: PropTypes.string,
|
className: PropTypes.string,
|
||||||
|
disabled: PropTypes.bool,
|
||||||
imgDescriptor: PropTypes.shape({
|
imgDescriptor: PropTypes.shape({
|
||||||
defaultMessage: PropTypes.string,
|
defaultMessage: PropTypes.string,
|
||||||
description: PropTypes.string,
|
description: PropTypes.string,
|
||||||
|
|
|
@ -20,4 +20,6 @@ $sound-tertiary: #A63FA6;
|
||||||
|
|
||||||
$control-primary: #FFAB19;
|
$control-primary: #FFAB19;
|
||||||
|
|
||||||
|
$data-primary: #FF8C1A;
|
||||||
|
|
||||||
$form-border: #E9EEF2;
|
$form-border: #E9EEF2;
|
||||||
|
|
Loading…
Reference in a new issue