Grey out Buttons in Run and Layout Editor

This commit is contained in:
Christopher Serr
2017-07-13 03:07:51 +02:00
parent 703e7a3e60
commit eee174501a
3 changed files with 52 additions and 8 deletions
+6
View File
@@ -755,3 +755,9 @@ select {
background-color: hsla(0, 0%, 43%, 1);
height: 2px;
}
button.disabled, button.button-pressed.disabled, button.disabled:active {
background: #222;
color: #666;
cursor: default;
}
+18 -3
View File
@@ -330,9 +330,24 @@ export class LayoutEditor extends React.Component<Props, State> {
Separator
</MenuItem>
</ContextMenu>
<button onClick={(e) => this.removeComponent()}><i className="fa fa-minus" aria-hidden="true"></i></button>
<button onClick={(e) => this.moveComponentUp()}><i className="fa fa-arrow-up" aria-hidden="true"></i></button>
<button onClick={(e) => this.moveComponentDown()}><i className="fa fa-arrow-down" aria-hidden="true"></i></button>
<button
onClick={(e) => this.removeComponent()}
className={this.state.editor.buttons.can_remove ? "" : "disabled"}
>
<i className="fa fa-minus" aria-hidden="true"></i>
</button>
<button
onClick={(e) => this.moveComponentUp()}
className={this.state.editor.buttons.can_move_up ? "" : "disabled"}
>
<i className="fa fa-arrow-up" aria-hidden="true"></i>
</button>
<button
onClick={(e) => this.moveComponentDown()}
className={this.state.editor.buttons.can_move_down ? "" : "disabled"}
>
<i className="fa fa-arrow-down" aria-hidden="true"></i>
</button>
</div>
<table className="layout-editor-component-list table">
<tbody className="table-body">
+28 -5
View File
@@ -258,11 +258,34 @@ export class RunEditor extends React.Component<Props, State> {
</div>
<div className="editer-group">
<div className="btn-group">
<button onClick={(e) => this.insertSegmentAbove()}>Insert Above</button>
<button onClick={(e) => this.insertSegmentBelow()}>Insert Below</button>
<button onClick={(e) => this.removeSegments()}>Remove Segment</button>
<button onClick={(e) => this.moveSegmentsUp()}>Move Up</button>
<button onClick={(e) => this.moveSegmentsDown()}>Move Down</button>
<button
onClick={(e) => this.insertSegmentAbove()}
>
Insert Above
</button>
<button
onClick={(e) => this.insertSegmentBelow()}
>
Insert Below
</button>
<button
onClick={(e) => this.removeSegments()}
className={this.state.editor.buttons.can_remove ? "" : "disabled"}
>
Remove Segment
</button>
<button
onClick={(e) => this.moveSegmentsUp()}
className={this.state.editor.buttons.can_move_up ? "" : "disabled"}
>
Move Up
</button>
<button
onClick={(e) => this.moveSegmentsDown()}
className={this.state.editor.buttons.can_move_down ? "" : "disabled"}
>
Move Down
</button>
</div>
<table className="table run-editor-table">
<thead className="table-header">