From eee174501a98e4e145f27702ca7bb671b9e51b1b Mon Sep 17 00:00:00 2001
From: Christopher Serr <christopher.serr@gmail.com>
Date: Thu, 13 Jul 2017 03:07:51 +0200
Subject: [PATCH] Grey out Buttons in Run and Layout Editor

---
 css/livesplit.css               |  6 ++++++
 src/components/LayoutEditor.tsx | 21 ++++++++++++++++++---
 src/components/RunEditor.tsx    | 33 ++++++++++++++++++++++++++++-----
 3 files changed, 52 insertions(+), 8 deletions(-)

diff --git a/css/livesplit.css b/css/livesplit.css
index df0b326..4efabce 100644
--- a/css/livesplit.css
+++ b/css/livesplit.css
@@ -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;
+}
diff --git a/src/components/LayoutEditor.tsx b/src/components/LayoutEditor.tsx
index 934295b..8f8ad1e 100644
--- a/src/components/LayoutEditor.tsx
+++ b/src/components/LayoutEditor.tsx
@@ -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">
diff --git a/src/components/RunEditor.tsx b/src/components/RunEditor.tsx
index f09f633..3a19eba 100644
--- a/src/components/RunEditor.tsx
+++ b/src/components/RunEditor.tsx
@@ -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">