From 132a729758caf242464b2d9c684a879497040150 Mon Sep 17 00:00:00 2001
From: Haoming Yin <hyi25@uclive.ac.nz>
Date: Tue, 26 Sep 2017 15:49:16 +1300
Subject: [PATCH] Temporarily added more options in key binding dialog. But
 still need to implement binding after camera story has been merged into
 develop

tags: #story[1273]
---
 src/main/java/seng302/model/GameKeyBind.java  |   7 +-
 src/main/java/seng302/model/KeyAction.java    |   7 +-
 .../dialogs/KeyBindingDialogController.java   |  16 +-
 src/main/resources/css/Master.css             |   5 +
 .../css/dialogs/KeyBindingDialog.css          |   9 +-
 .../views/dialogs/KeyBindingDialog.fxml       | 293 ++++++++++++------
 6 files changed, 239 insertions(+), 98 deletions(-)

diff --git a/src/main/java/seng302/model/GameKeyBind.java b/src/main/java/seng302/model/GameKeyBind.java
index 1c765adc..c25f6202 100644
--- a/src/main/java/seng302/model/GameKeyBind.java
+++ b/src/main/java/seng302/model/GameKeyBind.java
@@ -30,7 +30,12 @@ public class GameKeyBind {
         keys.add(KeyCode.ENTER);
         keys.add(KeyCode.PAGE_UP);
         keys.add(KeyCode.PAGE_DOWN);
-        for (int i = 0; i < 7; i++) {
+        keys.add(KeyCode.F1);
+        keys.add(KeyCode.D);
+        keys.add(KeyCode.A);
+        keys.add(KeyCode.W);
+        keys.add(KeyCode.S);
+        for (int i = 0; i < 12; i++) {
             actionToKeyMap.put(KeyAction.getType(i + 1), keys.get(i));
             keyToActionMap.put(keys.get(i), KeyAction.getType(i + 1));
         }
diff --git a/src/main/java/seng302/model/KeyAction.java b/src/main/java/seng302/model/KeyAction.java
index 1b8c2fa1..51509027 100644
--- a/src/main/java/seng302/model/KeyAction.java
+++ b/src/main/java/seng302/model/KeyAction.java
@@ -10,7 +10,12 @@ public enum KeyAction {
     SAILS_STATE(4),
     TACK_GYBE(5),
     UPWIND(6),
-    DOWNWIND(7);
+    DOWNWIND(7),
+    VIEW(8),
+    RIGHT(9),
+    LEFT(10),
+    FORWARD(11),
+    BACKWARD(12);
 
     private final int type;
     private static final Map<Integer, KeyAction> intToTypeMap = new HashMap<>();
diff --git a/src/main/java/seng302/visualiser/controllers/dialogs/KeyBindingDialogController.java b/src/main/java/seng302/visualiser/controllers/dialogs/KeyBindingDialogController.java
index 2a286ec4..c650bc59 100644
--- a/src/main/java/seng302/visualiser/controllers/dialogs/KeyBindingDialogController.java
+++ b/src/main/java/seng302/visualiser/controllers/dialogs/KeyBindingDialogController.java
@@ -48,6 +48,16 @@ public class KeyBindingDialogController implements Initializable {
     private Label downwindLabel;
     @FXML
     private JFXToggleButton turningToggle;
+    @FXML
+    private JFXButton viewButton;
+    @FXML
+    private JFXButton rightButton;
+    @FXML
+    private JFXButton leftButton;
+    @FXML
+    private JFXButton forwardButton;
+    @FXML
+    private JFXButton backwardButton;
     //---------FXML END---------//
 
     private GameKeyBind gameKeyBind;
@@ -60,7 +70,9 @@ public class KeyBindingDialogController implements Initializable {
         gameKeyBind = GameKeyBind.getInstance();
         buttons = new ArrayList<>();
         Collections.addAll(buttons,
-            zoomInbtn, zoomOutBtn, vmgBtn, sailInOutBtn, tackGybeBtn, upwindBtn, downwindBtn);
+            zoomInbtn, zoomOutBtn, vmgBtn, sailInOutBtn, tackGybeBtn, upwindBtn, downwindBtn,
+            viewButton,
+            rightButton, leftButton, forwardButton, backwardButton);
         bindButtonWithAction();
         loadKeyBind();
 
@@ -106,7 +118,7 @@ public class KeyBindingDialogController implements Initializable {
      */
     private void bindButtonWithAction() {
         buttonActionMap = new HashMap<>();
-        for (int i = 0; i < 7; i++) {
+        for (int i = 0; i < 12; i++) {
             buttonActionMap.put(buttons.get(i), KeyAction.getType(i + 1));
         }
     }
diff --git a/src/main/resources/css/Master.css b/src/main/resources/css/Master.css
index cb50a645..478d7cf0 100644
--- a/src/main/resources/css/Master.css
+++ b/src/main/resources/css/Master.css
@@ -51,6 +51,11 @@
 
 /********* customised scroll bar for scroll pane ***********/
 
+.scroll-pane {
+    -fx-focus-traversable: false;
+    -fx-border-style: none;
+}
+
 /* The main scrollbar **track** CSS class  */
 .scroll-bar:horizontal .track,
 .scroll-bar:vertical .track {
diff --git a/src/main/resources/css/dialogs/KeyBindingDialog.css b/src/main/resources/css/dialogs/KeyBindingDialog.css
index 8d09e130..6c7bff26 100644
--- a/src/main/resources/css/dialogs/KeyBindingDialog.css
+++ b/src/main/resources/css/dialogs/KeyBindingDialog.css
@@ -9,8 +9,13 @@
 }
 
 #closeLabel:hover {
-    -fx-text-fill: -fx-pp-theme-color;
-    -fx-font-size: 33;
+    -fx-text-fill: red;
+    -fx-font-size: 33px;
+}
+
+.sectionLabel {
+    -fx-text-fill: -fx-pp-dark-text-color;
+    -fx-font-size: 20px;
 }
 
 JFXButton {
diff --git a/src/main/resources/views/dialogs/KeyBindingDialog.fxml b/src/main/resources/views/dialogs/KeyBindingDialog.fxml
index 4a677797..7fcf2e7f 100644
--- a/src/main/resources/views/dialogs/KeyBindingDialog.fxml
+++ b/src/main/resources/views/dialogs/KeyBindingDialog.fxml
@@ -6,117 +6,226 @@
 <?import java.net.URL?>
 <?import javafx.geometry.Insets?>
 <?import javafx.scene.control.Label?>
+<?import javafx.scene.control.ScrollPane?>
 <?import javafx.scene.layout.ColumnConstraints?>
 <?import javafx.scene.layout.GridPane?>
 <?import javafx.scene.layout.RowConstraints?>
+<?import javafx.scene.layout.StackPane?>
 <JFXDialogLayout fx:id="keyBindDialog" maxHeight="-Infinity" maxWidth="-Infinity"
   minHeight="-Infinity" minWidth="-Infinity" prefHeight="580.0" prefWidth="500.0"
   xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1"
   fx:controller="seng302.visualiser.controllers.dialogs.KeyBindingDialogController">
+    <stylesheets>
+        <URL value="@../../css/dialogs/KeyBindingDialog.css"/>
+        <URL value="@../../css/Master.css"/>
+    </stylesheets>
    <children>
       <GridPane>
         <columnConstraints>
-            <ColumnConstraints hgrow="SOMETIMES" minWidth="100.0" prefWidth="100.0"/>
-            <ColumnConstraints hgrow="SOMETIMES" minWidth="100.0" prefWidth="100.0"/>
+            <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0"/>
         </columnConstraints>
         <rowConstraints>
-            <RowConstraints maxHeight="60.0" minHeight="60.0" prefHeight="60.0" vgrow="SOMETIMES" />
-            <RowConstraints maxHeight="50.0" minHeight="50.0" prefHeight="50.0" vgrow="SOMETIMES"/>
-            <RowConstraints maxHeight="50.0" minHeight="50.0" prefHeight="50.0" vgrow="SOMETIMES"/>
-            <RowConstraints maxHeight="50.0" minHeight="50.0" prefHeight="50.0" vgrow="SOMETIMES"/>
-            <RowConstraints maxHeight="50.0" minHeight="50.0" prefHeight="50.0" vgrow="SOMETIMES"/>
-            <RowConstraints maxHeight="50.0" minHeight="50.0" prefHeight="50.0" vgrow="SOMETIMES"/>
-            <RowConstraints maxHeight="50.0" minHeight="50.0" prefHeight="50.0" vgrow="SOMETIMES"/>
-            <RowConstraints maxHeight="50.0" minHeight="50.0" prefHeight="50.0" vgrow="SOMETIMES"/>
-            <RowConstraints maxHeight="50.0" minHeight="50.0" prefHeight="50.0" vgrow="SOMETIMES"/>
-            <RowConstraints maxHeight="-Infinity" minHeight="-Infinity" prefHeight="70.0"
+            <RowConstraints maxHeight="-Infinity" minHeight="-Infinity" prefHeight="60.0"
+              vgrow="SOMETIMES"/>
+            <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES"/>
+            <RowConstraints maxHeight="-Infinity" minHeight="-Infinity" prefHeight="60.0"
               vgrow="SOMETIMES"/>
         </rowConstraints>
          <children>
-            <Label fx:id="keyBindingDialogHeader" text="CUSTOM KEYBIND" GridPane.columnSpan="2" GridPane.halignment="CENTER" GridPane.valignment="CENTER" />
-             <Label text="ZOOM IN" GridPane.halignment="CENTER" GridPane.rowIndex="1"
-               GridPane.valignment="CENTER">
-               <GridPane.margin>
-                   <Insets/>
-               </GridPane.margin></Label>
-             <Label text="ZOOM OUT" GridPane.halignment="CENTER" GridPane.rowIndex="2"
-               GridPane.valignment="CENTER">
-               <GridPane.margin>
-                   <Insets/>
-               </GridPane.margin></Label>
-             <Label text="VMG" GridPane.halignment="CENTER" GridPane.rowIndex="3"
-               GridPane.valignment="CENTER">
-               <GridPane.margin>
-                   <Insets/>
-               </GridPane.margin></Label>
-             <Label text="SAILS IN/OUT" GridPane.halignment="CENTER" GridPane.rowIndex="4"
-               GridPane.valignment="CENTER">
-               <GridPane.margin>
-                   <Insets/>
-               </GridPane.margin></Label>
-             <Label text="TACK/GYBE" GridPane.halignment="CENTER" GridPane.rowIndex="5"
-               GridPane.valignment="CENTER">
-               <GridPane.margin>
-                   <Insets/>
-               </GridPane.margin></Label>
-             <Label fx:id="upwindLabel" text="UPWIND" GridPane.halignment="CENTER"
-               GridPane.rowIndex="6" GridPane.valignment="CENTER">
-               <GridPane.margin>
-                   <Insets/>
-               </GridPane.margin></Label>
-             <Label fx:id="downwindLabel" text="DOWNWIND" GridPane.halignment="CENTER"
-               GridPane.rowIndex="7" GridPane.valignment="CENTER">
-               <GridPane.margin>
-                   <Insets/>
-               </GridPane.margin></Label>
-             <JFXButton id="ZOOM IN" fx:id="zoomInbtn" buttonType="RAISED" maxHeight="-Infinity"
-               maxWidth="-Infinity" minHeight="35.0" minWidth="-Infinity" prefWidth="120.0" text="Z"
-               GridPane.columnIndex="1" GridPane.halignment="CENTER" GridPane.rowIndex="1"
-               GridPane.valignment="CENTER"/>
-             <JFXButton id="ZOOM OUT" fx:id="zoomOutBtn" buttonType="RAISED" maxHeight="-Infinity"
-               maxWidth="-Infinity" minHeight="35.0" minWidth="-Infinity" prefWidth="120.0" text="X"
-               GridPane.columnIndex="1" GridPane.halignment="CENTER" GridPane.rowIndex="2"
-               GridPane.valignment="CENTER"/>
-             <JFXButton id="VMG" fx:id="vmgBtn" buttonType="RAISED" maxHeight="-Infinity"
-               maxWidth="-Infinity" minHeight="35.0" minWidth="-Infinity" prefWidth="120.0"
-               text="SPACE" GridPane.columnIndex="1" GridPane.halignment="CENTER"
-               GridPane.rowIndex="3" GridPane.valignment="CENTER"/>
-             <JFXButton id="SAILS IN/OUT" fx:id="sailInOutBtn" buttonType="RAISED"
-               maxHeight="-Infinity" maxWidth="-Infinity" minHeight="35.0" minWidth="-Infinity"
-               prefWidth="120.0" text="SHIFT" GridPane.columnIndex="1" GridPane.halignment="CENTER"
-               GridPane.rowIndex="4" GridPane.valignment="CENTER"/>
-             <JFXButton id="TACK/GYBE" fx:id="tackGybeBtn" buttonType="RAISED" maxHeight="-Infinity"
-               maxWidth="-Infinity" minHeight="35.0" minWidth="-Infinity" prefWidth="120.0"
-               text="ENTER" GridPane.columnIndex="1" GridPane.halignment="CENTER"
-               GridPane.rowIndex="5" GridPane.valignment="CENTER"/>
-             <JFXButton id="UPWIND" fx:id="upwindBtn" buttonType="RAISED" maxHeight="-Infinity"
-               maxWidth="-Infinity" minHeight="35.0" minWidth="-Infinity" prefWidth="120.0"
-               text="PAGE_UP" GridPane.columnIndex="1" GridPane.halignment="CENTER"
-               GridPane.rowIndex="6" GridPane.valignment="CENTER"/>
-             <JFXButton id="DOWNWIND" fx:id="downwindBtn" buttonType="RAISED" maxHeight="-Infinity"
-               maxWidth="-Infinity" minHeight="35.0" minWidth="-Infinity" prefWidth="120.0"
-               text="PAGE_DOWN" GridPane.columnIndex="1" GridPane.halignment="CENTER"
-               GridPane.rowIndex="7" GridPane.valignment="CENTER"/>
-             <JFXToggleButton fx:id="turningToggle" minHeight="-Infinity" prefHeight="35.0"
-               text="OFF / ON" GridPane.columnIndex="1" GridPane.halignment="CENTER"
-               GridPane.rowIndex="8"/>
-             <Label text="CONTINUOUSLY TURNING" GridPane.halignment="CENTER" GridPane.rowIndex="8"
-               GridPane.valignment="CENTER">
-                 <GridPane.margin>
-                     <Insets/>
-                 </GridPane.margin>
-             </Label>
+             <ScrollPane prefHeight="200.0" prefWidth="200.0" GridPane.rowIndex="1">
+                 <content>
+                     <StackPane prefHeight="150.0" prefWidth="200.0">
+                         <children>
+                             <GridPane>
+                                 <children>
+                                     <JFXButton fx:id="viewButton" buttonType="RAISED"
+                                       minHeight="35.0" prefWidth="120.0" text="F1"
+                                       GridPane.columnIndex="1" GridPane.halignment="CENTER"
+                                       GridPane.rowIndex="14" GridPane.valignment="CENTER"/>
+                                     <Label text="VIEW ASPECT" GridPane.halignment="CENTER"
+                                       GridPane.rowIndex="14" GridPane.valignment="CENTER"/>
+                                     <JFXButton fx:id="rightButton" buttonType="RAISED"
+                                       minHeight="35.0" prefWidth="120.0" text="D"
+                                       GridPane.columnIndex="1" GridPane.halignment="CENTER"
+                                       GridPane.rowIndex="13" GridPane.valignment="CENTER"/>
+                                     <Label text="RIGHT" GridPane.halignment="CENTER"
+                                       GridPane.rowIndex="13" GridPane.valignment="CENTER"/>
+                                     <JFXButton fx:id="leftButton" buttonType="RAISED"
+                                       minHeight="35.0" prefWidth="120.0" text="A"
+                                       GridPane.columnIndex="1" GridPane.halignment="CENTER"
+                                       GridPane.rowIndex="12" GridPane.valignment="CENTER"/>
+                                     <Label text="LEFT" GridPane.halignment="CENTER"
+                                       GridPane.rowIndex="12" GridPane.valignment="CENTER"/>
+                                     <JFXButton fx:id="forwardButton" buttonType="RAISED"
+                                       minHeight="35.0" prefWidth="120.0" text="W"
+                                       GridPane.columnIndex="1" GridPane.halignment="CENTER"
+                                       GridPane.rowIndex="10" GridPane.valignment="CENTER"/>
+                                     <Label text="FORWARD" GridPane.halignment="CENTER"
+                                       GridPane.rowIndex="10" GridPane.valignment="CENTER"/>
+                                     <JFXButton fx:id="backwardButton" buttonType="RAISED"
+                                       minHeight="35.0" prefWidth="120.0" text="S"
+                                       GridPane.columnIndex="1" GridPane.halignment="CENTER"
+                                       GridPane.rowIndex="11" GridPane.valignment="CENTER"/>
+                                     <Label text="BACKWARD" GridPane.halignment="CENTER"
+                                       GridPane.rowIndex="11" GridPane.valignment="CENTER"/>
+                                     <Label text="ZOOM IN" GridPane.halignment="CENTER"
+                                       GridPane.rowIndex="1" GridPane.valignment="CENTER">
+                                         <GridPane.margin>
+                                             <Insets/>
+                                         </GridPane.margin>
+                                     </Label>
+                                     <Label text="ZOOM OUT" GridPane.halignment="CENTER"
+                                       GridPane.rowIndex="2" GridPane.valignment="CENTER">
+                                         <GridPane.margin>
+                                             <Insets/>
+                                         </GridPane.margin>
+                                     </Label>
+                                     <Label text="VMG" GridPane.halignment="CENTER"
+                                       GridPane.rowIndex="3" GridPane.valignment="CENTER">
+                                         <GridPane.margin>
+                                             <Insets/>
+                                         </GridPane.margin>
+                                     </Label>
+                                     <Label text="SAILS IN/OUT" GridPane.halignment="CENTER"
+                                       GridPane.rowIndex="4" GridPane.valignment="CENTER">
+                                         <GridPane.margin>
+                                             <Insets/>
+                                         </GridPane.margin>
+                                     </Label>
+                                     <Label text="TACK/GYBE" GridPane.halignment="CENTER"
+                                       GridPane.rowIndex="5" GridPane.valignment="CENTER">
+                                         <GridPane.margin>
+                                             <Insets/>
+                                         </GridPane.margin>
+                                     </Label>
+                                     <Label fx:id="upwindLabel" text="UPWIND"
+                                       GridPane.halignment="CENTER" GridPane.rowIndex="6"
+                                       GridPane.valignment="CENTER">
+                                         <GridPane.margin>
+                                             <Insets/>
+                                         </GridPane.margin>
+                                     </Label>
+                                     <Label fx:id="downwindLabel" text="DOWNWIND"
+                                       GridPane.halignment="CENTER" GridPane.rowIndex="7"
+                                       GridPane.valignment="CENTER">
+                                         <GridPane.margin>
+                                             <Insets/>
+                                         </GridPane.margin>
+                                     </Label>
+                                     <JFXButton id="ZOOM IN" fx:id="zoomInbtn" buttonType="RAISED"
+                                       maxHeight="-Infinity" maxWidth="-Infinity" minHeight="35.0"
+                                       minWidth="-Infinity" prefWidth="120.0" text="Z"
+                                       GridPane.columnIndex="1" GridPane.halignment="CENTER"
+                                       GridPane.rowIndex="1" GridPane.valignment="CENTER"/>
+                                     <JFXButton id="ZOOM OUT" fx:id="zoomOutBtn" buttonType="RAISED"
+                                       maxHeight="-Infinity" maxWidth="-Infinity" minHeight="35.0"
+                                       minWidth="-Infinity" prefWidth="120.0" text="X"
+                                       GridPane.columnIndex="1" GridPane.halignment="CENTER"
+                                       GridPane.rowIndex="2" GridPane.valignment="CENTER"/>
+                                     <JFXButton id="VMG" fx:id="vmgBtn" buttonType="RAISED"
+                                       maxHeight="-Infinity" maxWidth="-Infinity" minHeight="35.0"
+                                       minWidth="-Infinity" prefWidth="120.0" text="SPACE"
+                                       GridPane.columnIndex="1" GridPane.halignment="CENTER"
+                                       GridPane.rowIndex="3" GridPane.valignment="CENTER"/>
+                                     <JFXButton id="SAILS IN/OUT" fx:id="sailInOutBtn"
+                                       buttonType="RAISED" maxHeight="-Infinity"
+                                       maxWidth="-Infinity" minHeight="35.0" minWidth="-Infinity"
+                                       prefWidth="120.0" text="SHIFT" GridPane.columnIndex="1"
+                                       GridPane.halignment="CENTER" GridPane.rowIndex="4"
+                                       GridPane.valignment="CENTER"/>
+                                     <JFXButton id="TACK/GYBE" fx:id="tackGybeBtn"
+                                       buttonType="RAISED" maxHeight="-Infinity"
+                                       maxWidth="-Infinity" minHeight="35.0" minWidth="-Infinity"
+                                       prefWidth="120.0" text="ENTER" GridPane.columnIndex="1"
+                                       GridPane.halignment="CENTER" GridPane.rowIndex="5"
+                                       GridPane.valignment="CENTER"/>
+                                     <JFXButton id="UPWIND" fx:id="upwindBtn" buttonType="RAISED"
+                                       maxHeight="-Infinity" maxWidth="-Infinity" minHeight="35.0"
+                                       minWidth="-Infinity" prefWidth="120.0" text="PAGE_UP"
+                                       GridPane.columnIndex="1" GridPane.halignment="CENTER"
+                                       GridPane.rowIndex="6" GridPane.valignment="CENTER"/>
+                                     <JFXButton id="DOWNWIND" fx:id="downwindBtn"
+                                       buttonType="RAISED" maxHeight="-Infinity"
+                                       maxWidth="-Infinity" minHeight="35.0" minWidth="-Infinity"
+                                       prefWidth="120.0" text="PAGE_DOWN" GridPane.columnIndex="1"
+                                       GridPane.halignment="CENTER" GridPane.rowIndex="7"
+                                       GridPane.valignment="CENTER"/>
+                                     <JFXToggleButton fx:id="turningToggle" minHeight="-Infinity"
+                                       prefHeight="35.0" text="OFF / ON" GridPane.columnIndex="1"
+                                       GridPane.halignment="CENTER" GridPane.rowIndex="8"/>
+                                     <Label text="CONTINUOUSLY TURNING" GridPane.halignment="CENTER"
+                                       GridPane.rowIndex="8" GridPane.valignment="CENTER">
+                                         <GridPane.margin>
+                                             <Insets/>
+                                         </GridPane.margin>
+                                     </Label>
+                                     <Label styleClass="sectionLabel" text="BOAT ACTIONS"
+                                       GridPane.columnSpan="2" GridPane.halignment="CENTER"
+                                       GridPane.valignment="CENTER">
+                                         <GridPane.margin>
+                                             <Insets left="50.0"/>
+                                         </GridPane.margin>
+                                     </Label>
+                                     <Label styleClass="sectionLabel" text="CAMERA SETTINGS"
+                                       GridPane.columnSpan="2" GridPane.halignment="CENTER"
+                                       GridPane.rowIndex="9" GridPane.valignment="CENTER">
+                                         <GridPane.margin>
+                                             <Insets left="50.0"/>
+                                         </GridPane.margin>
+                                     </Label>
+                                 </children>
+                                 <columnConstraints>
+                                     <ColumnConstraints hgrow="SOMETIMES" maxWidth="-Infinity"
+                                       minWidth="-Infinity" prefWidth="250.0"/>
+                                     <ColumnConstraints hgrow="SOMETIMES" maxWidth="-Infinity"
+                                       minWidth="-Infinity" prefWidth="150.0"/>
+                                 </columnConstraints>
+                                 <rowConstraints>
+                                     <RowConstraints maxHeight="50.0" minHeight="50.0"
+                                       prefHeight="50.0" vgrow="SOMETIMES"/>
+                                     <RowConstraints maxHeight="50.0" minHeight="50.0"
+                                       prefHeight="50.0" vgrow="SOMETIMES"/>
+                                     <RowConstraints maxHeight="50.0" minHeight="50.0"
+                                       prefHeight="50.0" vgrow="SOMETIMES"/>
+                                     <RowConstraints maxHeight="50.0" minHeight="50.0"
+                                       prefHeight="50.0" vgrow="SOMETIMES"/>
+                                     <RowConstraints maxHeight="50.0" minHeight="50.0"
+                                       prefHeight="50.0" vgrow="SOMETIMES"/>
+                                     <RowConstraints maxHeight="50.0" minHeight="50.0"
+                                       prefHeight="50.0" vgrow="SOMETIMES"/>
+                                     <RowConstraints maxHeight="50.0" minHeight="50.0"
+                                       prefHeight="50.0" vgrow="SOMETIMES"/>
+                                     <RowConstraints maxHeight="50.0" minHeight="50.0"
+                                       prefHeight="50.0" vgrow="SOMETIMES"/>
+                                     <RowConstraints maxHeight="50.0" minHeight="50.0"
+                                       prefHeight="50.0" vgrow="SOMETIMES"/>
+                                     <RowConstraints maxHeight="50.0" minHeight="50.0"
+                                       prefHeight="50.0" vgrow="SOMETIMES"/>
+                                     <RowConstraints maxHeight="50.0" minHeight="50.0"
+                                       prefHeight="50.0" vgrow="SOMETIMES"/>
+                                     <RowConstraints maxHeight="50.0" minHeight="50.0"
+                                       prefHeight="50.0" vgrow="SOMETIMES"/>
+                                     <RowConstraints maxHeight="50.0" minHeight="50.0"
+                                       prefHeight="50.0" vgrow="SOMETIMES"/>
+                                     <RowConstraints maxHeight="50.0" minHeight="50.0"
+                                       prefHeight="50.0" vgrow="SOMETIMES"/>
+                                     <RowConstraints maxHeight="50.0" minHeight="50.0"
+                                       prefHeight="50.0" vgrow="SOMETIMES"/>
+                                 </rowConstraints>
+                             </GridPane>
+                         </children>
+                     </StackPane>
+                 </content>
+             </ScrollPane>
+             <Label fx:id="keyBindingDialogHeader" text="CUSTOM KEYBINDING" GridPane.columnSpan="2"
+               GridPane.halignment="CENTER" GridPane.valignment="CENTER"/>
+             <Label fx:id="closeLabel" text="✖" GridPane.halignment="RIGHT"
+               GridPane.valignment="TOP"/>
              <JFXButton fx:id="resetBtn" buttonType="RAISED" maxHeight="-Infinity"
                maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="45.0"
                prefWidth="150.0" text="RESET" GridPane.columnSpan="2" GridPane.halignment="CENTER"
-               GridPane.rowIndex="9" GridPane.valignment="CENTER"/>
-             <Label fx:id="closeLabel" text="✖" translateY="-5.0" GridPane.columnIndex="1"
-               GridPane.halignment="RIGHT" GridPane.valignment="TOP"/>
+               GridPane.rowIndex="2" GridPane.valignment="CENTER"/>
          </children>
       </GridPane>
    </children>
-   <stylesheets>
-      <URL value="@../../css/dialogs/KeyBindingDialog.css" />
-      <URL value="@../../css/Master.css" />
-   </stylesheets>
 </JFXDialogLayout>