scratchfoundation/scratch-paint
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-paint.git synced 2025-01-24 05:09:52 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

Add disabled state for button

Browse source 
This implements #47 by adding a disabled state to the button component, and then by applying it to top row buttons for group/ungroup, and front/back forward/backward.
This commit is contained in:
Matthew Taylor 2017-10-25 16:44:04 -04:00
parent 1459593b2b
commit a38b1f6121
5 changed files with 172 additions and 144 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
src/components/button/button.css
View file

@ -1,3 +1,17 @@
.button { @import "../../css/colors.css";
:local(.button) {
background: none;
cursor: pointer; cursor: pointer;
} }
:local(.button:active) {
background-color: $motion-transparent;
}
:local(.mod-disabled) {
cursor: auto;
opacity: .3;
}
:local(.mod-disabled:active) {
background: none;
}

40
src/components/button/button.jsx
View file

@ -2,6 +2,9 @@
@todo This file is copied from GUI and should be pulled out into a shared library. @todo This file is copied from GUI and should be pulled out into a shared library.
See #13 */ See #13 */
/* ACTUALLY, THIS IS EDITED ;)
THIS WAS CHANGED ON 10/25/2017 BY @mewtaylor TO ADD HANDLING FOR DISABLED STATES.*/
import classNames from 'classnames'; import classNames from 'classnames';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import React from 'react'; import React from 'react';
@ -13,23 +16,34 @@ const ButtonComponent = ({
onClick, onClick,
children, children,
...props ...props
}) => ( }) => {
<span const disabled = props.disabled || false;
className={classNames( if (disabled === false) {
styles.button, // if not disabled, add `onClick()` to be applied
className // in props. If disabled, don't add `onClick()`
)} props.onClick = onClick;
role="button" }
onClick={onClick} return (
{...props} <span
> className={classNames(
{children} styles.button,
</span> className,
); {
[styles.modDisabled]: disabled
}
)}
role="button"
{...props}
>
{children}
</span>
);
};
ButtonComponent.propTypes = { ButtonComponent.propTypes = {
children: PropTypes.node, children: PropTypes.node,
className: PropTypes.string, className: PropTypes.string,
disabled: PropTypes.string,
onClick: PropTypes.func.isRequired onClick: PropTypes.func.isRequired
}; };
export default ButtonComponent; export default ButtonComponent;

5
src/components/labeled-icon-button/labeled-icon-button.css
View file

@ -1,4 +1,3 @@
@import "../../css/colors.css";
@import "../../css/units.css"; @import "../../css/units.css";
$border-radius: 0.25rem; $border-radius: 0.25rem;
@ -15,10 +14,6 @@ $border-radius: 0.25rem;
text-align: center; text-align: center;
} }
.mod-edit-field:active {
background-color: $motion-transparent;
}
.edit-field-icon { .edit-field-icon {
width: 1.5rem; width: 1.5rem;
height: 1.5rem; height: 1.5rem;

4
src/components/paint-editor/paint-editor.css
View file

@ -43,10 +43,6 @@ $border-radius: 0.25rem;
padding: calc(2 * $grid-unit); padding: calc(2 * $grid-unit);
} }
.button-group-button:active {
background-color: $ui-background-blue;
}
.button-group-button:last-of-type { .button-group-button:last-of-type {
border-top-right-radius: $border-radius; border-top-right-radius: $border-radius;
border-bottom-right-radius: $border-radius; border-bottom-right-radius: $border-radius;

251
src/components/paint-editor/paint-editor.jsx
View file

@ -1,15 +1,23 @@
import bindAll from 'lodash.bindall'; import bindAll from 'lodash.bindall';
import classNames from 'classnames'; import classNames from 'classnames';
import {defineMessages, injectIntl, intlShape} from 'react-intl';
import React from 'react'; import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import PaperCanvas from '../../containers/paper-canvas.jsx'; import PaperCanvas from '../../containers/paper-canvas.jsx';
import {shouldShowGroup, shouldShowUngroup} from '../../helper/group';
import {shouldShowBringForward, shouldShowSendBackward} from '../../helper/order';
import Button from '../button/button.jsx'; 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 EraserMode from '../../containers/eraser-mode.jsx'; import EraserMode from '../../containers/eraser-mode.jsx';
import FillColorIndicatorComponent from '../../containers/fill-color-indicator.jsx';
import Input from '../forms/input.jsx';
import InputGroup from '../input-group/input-group.jsx'; import InputGroup from '../input-group/input-group.jsx';
import Label from '../forms/label.jsx';
import LabeledIconButton from '../labeled-icon-button/labeled-icon-button.jsx'; import LabeledIconButton from '../labeled-icon-button/labeled-icon-button.jsx';
import LineMode from '../../containers/line-mode.jsx'; import LineMode from '../../containers/line-mode.jsx';
import ModeToolsComponent from '../mode-tools/mode-tools.jsx'; import ModeToolsComponent from '../mode-tools/mode-tools.jsx';
@ -18,16 +26,9 @@ import PenMode from '../../containers/pen-mode.jsx';
import RectMode from '../../containers/rect-mode.jsx'; import RectMode from '../../containers/rect-mode.jsx';
import ReshapeMode from '../../containers/reshape-mode.jsx'; import ReshapeMode from '../../containers/reshape-mode.jsx';
import SelectMode from '../../containers/select-mode.jsx'; import SelectMode from '../../containers/select-mode.jsx';
import FillColorIndicatorComponent from '../../containers/fill-color-indicator.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 {defineMessages, injectIntl, intlShape} from 'react-intl';
import BufferedInputHOC from '../forms/buffered-input-hoc.jsx';
import Label from '../forms/label.jsx';
import Input from '../forms/input.jsx';
import styles from './paint-editor.css'; import styles from './paint-editor.css';
import groupIcon from './group.svg'; import groupIcon from './group.svg';
@ -62,126 +63,134 @@ class PaintEditorComponent extends React.Component {
render () { render () {
return ( return (
<div className={styles.editorContainer}> <div className={styles.editorContainer}>
<div className={styles.editorContainerTop}> {this.state.canvas ? (
{/* First row */} <div className={styles.editorContainerTop}>
<div className={styles.row}> {/* First row */}
{/* Name field */} <div className={styles.row}>
<InputGroup> {/* Name field */}
<Label text={this.props.intl.formatMessage(messages.costume)}> <InputGroup>
<BufferedInput <Label text={this.props.intl.formatMessage(messages.costume)}>
type="text" <BufferedInput
value={this.props.name} type="text"
onSubmit={this.props.onUpdateName} value={this.props.name}
onSubmit={this.props.onUpdateName}
/>
</Label>
</InputGroup>
{/* Undo/Redo */}
<InputGroup>
<ButtonGroup>
<Button
className={styles.buttonGroupButton}
onClick={this.props.onUndo}
>
<img
alt="Undo Icon"
className={styles.buttonGroupButtonIcon}
src={undoIcon}
/>
</Button>
<Button
className={styles.buttonGroupButton}
onClick={this.props.onRedo}
>
<img
alt="Redo Icon"
className={styles.buttonGroupButtonIcon}
src={redoIcon}
/>
</Button>
</ButtonGroup>
</InputGroup>
{/* Group/Ungroup */}
<InputGroup className={styles.modDashedBorder}>
<LabeledIconButton
disabled={!shouldShowGroup()}
imgAlt="Group Icon"
imgSrc={groupIcon}
title="Group"
onClick={this.props.onGroup}
/> />
</Label> <LabeledIconButton
</InputGroup> disabled={!shouldShowUngroup()}
imgAlt="Ungroup Icon"
imgSrc={ungroupIcon}
title="Ungroup"
onClick={this.props.onUngroup}
/>
</InputGroup>
{/* Undo/Redo */} {/* Forward/Backward */}
<InputGroup> <InputGroup className={styles.modDashedBorder}>
<ButtonGroup> <LabeledIconButton
<Button disabled={!shouldShowBringForward()}
className={styles.buttonGroupButton} imgAlt="Send Forward Icon"
onClick={this.props.onUndo} imgSrc={sendForwardIcon}
> title="Forward"
<img onClick={this.props.onSendForward}
alt="Undo Icon" />
className={styles.buttonGroupButtonIcon} <LabeledIconButton
src={undoIcon} disabled={!shouldShowSendBackward()}
/> imgAlt="Send Backward Icon"
</Button> imgSrc={sendBackwardIcon}
<Button title="Backward"
className={styles.buttonGroupButton} onClick={this.props.onSendBackward}
onClick={this.props.onRedo} />
> </InputGroup>
<img
alt="Redo Icon"
className={styles.buttonGroupButtonIcon}
src={redoIcon}
/>
</Button>
</ButtonGroup>
</InputGroup>
{/* Group/Ungroup */} {/* Front/Back */}
<InputGroup className={styles.modDashedBorder}> <InputGroup>
<LabeledIconButton <LabeledIconButton
imgAlt="Group Icon" disabled={!shouldShowBringForward()}
imgSrc={groupIcon} imgAlt="Send to Front Icon"
title="Group" imgSrc={sendFrontIcon}
onClick={this.props.onGroup} title="Front"
/> onClick={this.props.onSendToFront}
<LabeledIconButton />
imgAlt="Ungroup Icon" <LabeledIconButton
imgSrc={ungroupIcon} disabled={!shouldShowSendBackward()}
title="Ungroup" imgAlt="Send to Back Icon"
onClick={this.props.onUngroup} imgSrc={sendBackIcon}
/> title="Back"
</InputGroup> onClick={this.props.onSendToBack}
/>
</InputGroup>
{/* Forward/Backward */} {/* To be rotation point */}
<InputGroup className={styles.modDashedBorder}> {/* <InputGroup>
<LabeledIconButton <LabeledIconButton
imgAlt="Send Forward Icon" imgAlt="Rotation Point Icon"
imgSrc={sendForwardIcon} imgSrc={rotationPointIcon}
title="Forward" title="Rotation Point"
onClick={this.props.onSendForward} onClick={function () {}}
/> />
<LabeledIconButton </InputGroup> */}
imgAlt="Send Backward Icon" </div>
imgSrc={sendBackwardIcon}
title="Backward" {/* Second Row */}
onClick={this.props.onSendBackward} <div className={styles.row}>
/> <div className={classNames(styles.row, styles.modDashedBorder)}>
</InputGroup> {/* fill */}
<FillColorIndicatorComponent
{/* Front/Back */} onUpdateSvg={this.props.onUpdateSvg}
<InputGroup> />
<LabeledIconButton {/* stroke */}
imgAlt="Send to Front Icon" <StrokeColorIndicatorComponent
imgSrc={sendFrontIcon} onUpdateSvg={this.props.onUpdateSvg}
title="Front" />
onClick={this.props.onSendToFront} {/* stroke width */}
/> <StrokeWidthIndicatorComponent
<LabeledIconButton onUpdateSvg={this.props.onUpdateSvg}
imgAlt="Send to Back Icon" />
imgSrc={sendBackIcon} </div>
title="Back" <InputGroup className={styles.modModeTools}>
onClick={this.props.onSendToBack} <ModeToolsComponent />
/> </InputGroup>
</InputGroup>
{/* To be rotation point */}
{/* <InputGroup>
<LabeledIconButton
imgAlt="Rotation Point Icon"
imgSrc={rotationPointIcon}
title="Rotation Point"
onClick={function () {}}
/>
</InputGroup> */}
</div>
{/* Second Row */}
<div className={styles.row}>
<div className={classNames(styles.row, styles.modDashedBorder)}>
{/* fill */}
<FillColorIndicatorComponent
onUpdateSvg={this.props.onUpdateSvg}
/>
{/* stroke */}
<StrokeColorIndicatorComponent
onUpdateSvg={this.props.onUpdateSvg}
/>
{/* stroke width */}
<StrokeWidthIndicatorComponent
onUpdateSvg={this.props.onUpdateSvg}
/>
</div> </div>
<InputGroup className={styles.modModeTools}>
<ModeToolsComponent />
</InputGroup>
</div> </div>
</div> ) : null}
<div className={styles.topAlignRow}> <div className={styles.topAlignRow}>
{/* Modes */} {/* Modes */}