mirror of
https://github.com/scratchfoundation/scratch-paint.git
synced 2025-01-08 13:42:00 -05:00
Add disabled state for button
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
parent
1459593b2b
commit
a38b1f6121
5 changed files with 172 additions and 144 deletions
|
|
@ -1,3 +1,17 @@
|
|||
.button {
|
||||
@import "../../css/colors.css";
|
||||
|
||||
:local(.button) {
|
||||
background: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
:local(.button:active) {
|
||||
background-color: $motion-transparent;
|
||||
}
|
||||
|
||||
:local(.mod-disabled) {
|
||||
cursor: auto;
|
||||
opacity: .3;
|
||||
}
|
||||
:local(.mod-disabled:active) {
|
||||
background: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,6 +2,9 @@
|
|||
@todo This file is copied from GUI and should be pulled out into a shared library.
|
||||
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 PropTypes from 'prop-types';
|
||||
import React from 'react';
|
||||
|
|
@ -13,23 +16,34 @@ const ButtonComponent = ({
|
|||
onClick,
|
||||
children,
|
||||
...props
|
||||
}) => (
|
||||
<span
|
||||
className={classNames(
|
||||
styles.button,
|
||||
className
|
||||
)}
|
||||
role="button"
|
||||
onClick={onClick}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
</span>
|
||||
);
|
||||
}) => {
|
||||
const disabled = props.disabled || false;
|
||||
if (disabled === false) {
|
||||
// if not disabled, add `onClick()` to be applied
|
||||
// in props. If disabled, don't add `onClick()`
|
||||
props.onClick = onClick;
|
||||
}
|
||||
return (
|
||||
<span
|
||||
className={classNames(
|
||||
styles.button,
|
||||
className,
|
||||
{
|
||||
[styles.modDisabled]: disabled
|
||||
}
|
||||
)}
|
||||
role="button"
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
</span>
|
||||
);
|
||||
};
|
||||
|
||||
ButtonComponent.propTypes = {
|
||||
children: PropTypes.node,
|
||||
className: PropTypes.string,
|
||||
disabled: PropTypes.string,
|
||||
onClick: PropTypes.func.isRequired
|
||||
};
|
||||
export default ButtonComponent;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,3 @@
|
|||
@import "../../css/colors.css";
|
||||
@import "../../css/units.css";
|
||||
|
||||
$border-radius: 0.25rem;
|
||||
|
|
@ -15,10 +14,6 @@ $border-radius: 0.25rem;
|
|||
text-align: center;
|
||||
}
|
||||
|
||||
.mod-edit-field:active {
|
||||
background-color: $motion-transparent;
|
||||
}
|
||||
|
||||
.edit-field-icon {
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
|
|
|
|||
|
|
@ -43,10 +43,6 @@ $border-radius: 0.25rem;
|
|||
padding: calc(2 * $grid-unit);
|
||||
}
|
||||
|
||||
.button-group-button:active {
|
||||
background-color: $ui-background-blue;
|
||||
}
|
||||
|
||||
.button-group-button:last-of-type {
|
||||
border-top-right-radius: $border-radius;
|
||||
border-bottom-right-radius: $border-radius;
|
||||
|
|
|
|||
|
|
@ -1,15 +1,23 @@
|
|||
import bindAll from 'lodash.bindall';
|
||||
import classNames from 'classnames';
|
||||
import {defineMessages, injectIntl, intlShape} from 'react-intl';
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
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 ButtonGroup from '../button-group/button-group.jsx';
|
||||
import BrushMode from '../../containers/brush-mode.jsx';
|
||||
import BufferedInputHOC from '../forms/buffered-input-hoc.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 Label from '../forms/label.jsx';
|
||||
import LabeledIconButton from '../labeled-icon-button/labeled-icon-button.jsx';
|
||||
import LineMode from '../../containers/line-mode.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 ReshapeMode from '../../containers/reshape-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 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 groupIcon from './group.svg';
|
||||
|
|
@ -62,126 +63,134 @@ class PaintEditorComponent extends React.Component {
|
|||
render () {
|
||||
return (
|
||||
<div className={styles.editorContainer}>
|
||||
<div className={styles.editorContainerTop}>
|
||||
{/* First row */}
|
||||
<div className={styles.row}>
|
||||
{/* Name field */}
|
||||
<InputGroup>
|
||||
<Label text={this.props.intl.formatMessage(messages.costume)}>
|
||||
<BufferedInput
|
||||
type="text"
|
||||
value={this.props.name}
|
||||
onSubmit={this.props.onUpdateName}
|
||||
{this.state.canvas ? (
|
||||
<div className={styles.editorContainerTop}>
|
||||
{/* First row */}
|
||||
<div className={styles.row}>
|
||||
{/* Name field */}
|
||||
<InputGroup>
|
||||
<Label text={this.props.intl.formatMessage(messages.costume)}>
|
||||
<BufferedInput
|
||||
type="text"
|
||||
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>
|
||||
</InputGroup>
|
||||
<LabeledIconButton
|
||||
disabled={!shouldShowUngroup()}
|
||||
imgAlt="Ungroup Icon"
|
||||
imgSrc={ungroupIcon}
|
||||
title="Ungroup"
|
||||
onClick={this.props.onUngroup}
|
||||
/>
|
||||
</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>
|
||||
{/* Forward/Backward */}
|
||||
<InputGroup className={styles.modDashedBorder}>
|
||||
<LabeledIconButton
|
||||
disabled={!shouldShowBringForward()}
|
||||
imgAlt="Send Forward Icon"
|
||||
imgSrc={sendForwardIcon}
|
||||
title="Forward"
|
||||
onClick={this.props.onSendForward}
|
||||
/>
|
||||
<LabeledIconButton
|
||||
disabled={!shouldShowSendBackward()}
|
||||
imgAlt="Send Backward Icon"
|
||||
imgSrc={sendBackwardIcon}
|
||||
title="Backward"
|
||||
onClick={this.props.onSendBackward}
|
||||
/>
|
||||
</InputGroup>
|
||||
|
||||
{/* Group/Ungroup */}
|
||||
<InputGroup className={styles.modDashedBorder}>
|
||||
<LabeledIconButton
|
||||
imgAlt="Group Icon"
|
||||
imgSrc={groupIcon}
|
||||
title="Group"
|
||||
onClick={this.props.onGroup}
|
||||
/>
|
||||
<LabeledIconButton
|
||||
imgAlt="Ungroup Icon"
|
||||
imgSrc={ungroupIcon}
|
||||
title="Ungroup"
|
||||
onClick={this.props.onUngroup}
|
||||
/>
|
||||
</InputGroup>
|
||||
{/* Front/Back */}
|
||||
<InputGroup>
|
||||
<LabeledIconButton
|
||||
disabled={!shouldShowBringForward()}
|
||||
imgAlt="Send to Front Icon"
|
||||
imgSrc={sendFrontIcon}
|
||||
title="Front"
|
||||
onClick={this.props.onSendToFront}
|
||||
/>
|
||||
<LabeledIconButton
|
||||
disabled={!shouldShowSendBackward()}
|
||||
imgAlt="Send to Back Icon"
|
||||
imgSrc={sendBackIcon}
|
||||
title="Back"
|
||||
onClick={this.props.onSendToBack}
|
||||
/>
|
||||
</InputGroup>
|
||||
|
||||
{/* Forward/Backward */}
|
||||
<InputGroup className={styles.modDashedBorder}>
|
||||
<LabeledIconButton
|
||||
imgAlt="Send Forward Icon"
|
||||
imgSrc={sendForwardIcon}
|
||||
title="Forward"
|
||||
onClick={this.props.onSendForward}
|
||||
/>
|
||||
<LabeledIconButton
|
||||
imgAlt="Send Backward Icon"
|
||||
imgSrc={sendBackwardIcon}
|
||||
title="Backward"
|
||||
onClick={this.props.onSendBackward}
|
||||
/>
|
||||
</InputGroup>
|
||||
|
||||
{/* Front/Back */}
|
||||
<InputGroup>
|
||||
<LabeledIconButton
|
||||
imgAlt="Send to Front Icon"
|
||||
imgSrc={sendFrontIcon}
|
||||
title="Front"
|
||||
onClick={this.props.onSendToFront}
|
||||
/>
|
||||
<LabeledIconButton
|
||||
imgAlt="Send to Back Icon"
|
||||
imgSrc={sendBackIcon}
|
||||
title="Back"
|
||||
onClick={this.props.onSendToBack}
|
||||
/>
|
||||
</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}
|
||||
/>
|
||||
{/* 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>
|
||||
<InputGroup className={styles.modModeTools}>
|
||||
<ModeToolsComponent />
|
||||
</InputGroup>
|
||||
</div>
|
||||
<InputGroup className={styles.modModeTools}>
|
||||
<ModeToolsComponent />
|
||||
</InputGroup>
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
<div className={styles.topAlignRow}>
|
||||
{/* Modes */}
|
||||
|
|
|
|||
Loading…
Reference in a new issue