mirror of
https://github.com/scratchfoundation/scratch-paint.git
synced 2025-01-11 23:19:59 -05:00
Change border on disabled undo/enabled redo
thanks @fsih
This commit is contained in:
parent
9ef967aa24
commit
cdb235a876
2 changed files with 30 additions and 5 deletions
src/components/paint-editor
|
@ -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;
|
||||||
|
|
|
@ -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
|
||||||
|
|
Loading…
Reference in a new issue