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

Change border on disabled undo/enabled redo

Browse source 
thanks @fsih
This commit is contained in:
Matthew Taylor 2017-10-26 14:03:09 -04:00
parent 9ef967aa24
commit cdb235a876
2 changed files with 30 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -49,11 +49,19 @@ $border-radius: 0.25rem;
} }
.button-group-button:first-of-type { .button-group-button:first-of-type {
border-left: 1px solid #ddd; border-left: 1px solid $ui-pane-border;
border-top-left-radius: $border-radius; border-top-left-radius: $border-radius;
border-bottom-left-radius: $border-radius; border-bottom-left-radius: $border-radius;
} }
.button-group-button.mod-left-border {
border-left: 1px solid $ui-pane-border;
}
.button-group-button.mod-no-right-border {
border-right: none;
}
.button-group-button-icon { .button-group-button-icon {
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;

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

@ -61,6 +61,9 @@ class PaintEditorComponent extends React.Component {
this.setState({canvas: canvas}); this.setState({canvas: canvas});
} }
render () { render () {
const redoDisabled = !this.props.canRedo();
const undoDisabled = !this.props.canUndo();
return ( return (
<div className={styles.editorContainer}> <div className={styles.editorContainer}>
{this.state.canvas ? ( {this.state.canvas ? (
@ -82,8 +85,15 @@ class PaintEditorComponent extends React.Component {
<InputGroup> <InputGroup>
<ButtonGroup> <ButtonGroup>
<Button <Button
className={styles.buttonGroupButton} className={
disabled={!this.props.canUndo()} classNames(
styles.buttonGroupButton,
{
[styles.modNoRightBorder]: !redoDisabled
}
)
}
disabled={undoDisabled}
onClick={this.props.onUndo} onClick={this.props.onUndo}
> >
<img <img
@ -93,8 +103,15 @@ class PaintEditorComponent extends React.Component {
/> />
</Button> </Button>
<Button <Button
className={styles.buttonGroupButton} className={
disabled={!this.props.canRedo()} classNames(
styles.buttonGroupButton,
{
[styles.modLeftBorder]: !redoDisabled
}
)
}
disabled={redoDisabled}
onClick={this.props.onRedo} onClick={this.props.onRedo}
> >
<img <img