scratchfoundation/scratch-paint
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-paint.git synced 2024-12-23 05:52:42 -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 {
border-left: 1px solid #ddd;
border-left: 1px solid $ui-pane-border;
border-top-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 {
width: 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});
}
render () {
const redoDisabled = !this.props.canRedo();
const undoDisabled = !this.props.canUndo();
return (
<div className={styles.editorContainer}>
{this.state.canvas ? (
@ -82,8 +85,15 @@ class PaintEditorComponent extends React.Component {
<InputGroup>
<ButtonGroup>
<Button
className={styles.buttonGroupButton}
disabled={!this.props.canUndo()}
className={
classNames(
styles.buttonGroupButton,
{
[styles.modNoRightBorder]: !redoDisabled
}
)
}
disabled={undoDisabled}
onClick={this.props.onUndo}
>
<img
@ -93,8 +103,15 @@ class PaintEditorComponent extends React.Component {
/>
</Button>
<Button
className={styles.buttonGroupButton}
disabled={!this.props.canRedo()}
className={
classNames(
styles.buttonGroupButton,
{
[styles.modLeftBorder]: !redoDisabled
}
)
}
disabled={redoDisabled}
onClick={this.props.onRedo}
>
<img