Issue #83: Server creation dialog need to be polished

- rearranged the layout of all the nodes
- set CSS files for the dialog
- added close button

tags: #story[1273]

src/main/java/seng302/visualiser/controllers/dialogs/ServerCreationController.java

@@ -28,12 +28,12 @@ public class ServerCreationController implements Initializable {
     @FXML
     private JFXSlider maxPlayersSlider;
     @FXML
-    private Label maxPlayersLabel;
-    @FXML
     private JFXButton submitBtn;
     @FXML
     private Label closeLabel;
     @FXML
+    private Label maxPlayersLabel;
+    @FXML
     private JFXButton nextMapButton;
     @FXML
     private JFXButton lastMapButton;
@@ -47,11 +47,10 @@ public class ServerCreationController implements Initializable {
     private JFXCheckBox pickupsCheckBox;
     @FXML
     private AnchorPane mapHolder;
+    //---------FXML END---------//
 
     private MapMaker mapMaker = MapMaker.getInstance();
 
-    //---------FXML END---------//
-
     private List<ServerCreationDialogListener> serverCreationDialogListeners;
 
     public void initialize(URL location, ResourceBundle resources) {
@@ -96,7 +95,7 @@ public class ServerCreationController implements Initializable {
         mapHolder.getChildren().setAll(mapMaker.getCurrentGameView());
         mapNameLabel.setText(mapMaker.getCurrentRegatta().getCourseName());
         pickupsCheckBox.setSelected(true);
-        //closeLabel.setOnMouseClicked(event -> notifyListeners());
+        closeLabel.setOnMouseClicked(event -> notifyListeners());
     }
 
     /**
@@ -134,7 +133,8 @@ public class ServerCreationController implements Initializable {
      */
     private void updateMaxPlayerLabel() {
         maxPlayersSlider.setValue(Math.floor(maxPlayersSlider.getValue()));
-        maxPlayersLabel.setText(String.format("Max players: %.0f", maxPlayersSlider.getValue()));
+        maxPlayersLabel.setText(String
+            .format("Only %.0f players are allowed into the game", maxPlayersSlider.getValue()));
     }
 
     private void updateLegSliderLabel() {

src/main/resources/css/dialogs/ServerCreation.css

@@ -2,6 +2,14 @@
     -fx-font-family: monospace !important;
 }
 
+.sliderLabel {
+    -fx-text-fill: -fx-pp-dark-text-color;
+}
+
+.error-label * {
+    -fx-text-fill: red;
+}
+
 #submitBtn {
     -fx-background-color: -fx-pp-theme-color;
     -fx-text-fill: -fx-pp-light-text-color;
@@ -32,12 +40,7 @@
     -fx-font-size: 16px;
 }
 
-#maxPlayersLabel {
+.optionLabel {
-    -fx-text-fill: -fx-pp-dark-text-color;
-    -fx-font-size: 16px;
-}
-
-#maxPlayerPromptLabel {
     -fx-text-fill: -fx-pp-dark-text-color;
     -fx-font-size: 16px;
 }
@@ -55,3 +58,8 @@
     -fx-text-fill: red;
     -fx-font-size: 33px;
 }
+
+JFXCheckBox {
+    -jfx-checked-color: -fx-pp-theme-color;
+    -fx-text-fill: -fx-pp-dark-text-color;
+}

src/main/resources/views/dialogs/ServerCreationDialog.fxml

@@ -5,16 +5,18 @@
 <?import com.jfoenix.controls.JFXDialogLayout?>
 <?import com.jfoenix.controls.JFXSlider?>
 <?import com.jfoenix.controls.JFXTextField?>
+<?import java.net.URL?>
 <?import javafx.geometry.Insets?>
 <?import javafx.scene.control.Label?>
 <?import javafx.scene.layout.AnchorPane?>
 <?import javafx.scene.layout.ColumnConstraints?>
 <?import javafx.scene.layout.GridPane?>
 <?import javafx.scene.layout.RowConstraints?>
-<?import javafx.scene.layout.VBox?>
 <?import javafx.scene.text.Font?>
-
+<JFXDialogLayout maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity"
-<JFXDialogLayout maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="600.0" prefWidth="1000.0" xmlns="http://javafx.com/javafx/8.0.112" xmlns:fx="http://javafx.com/fxml/1" fx:controller="seng302.visualiser.controllers.dialogs.ServerCreationController">
+  minWidth="-Infinity" prefHeight="600.0" prefWidth="1000.0" xmlns="http://javafx.com/javafx/8"
+  xmlns:fx="http://javafx.com/fxml/1"
+  fx:controller="seng302.visualiser.controllers.dialogs.ServerCreationController">
    <children>
       <GridPane>
          <children>
@@ -36,9 +38,14 @@
                       <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
                     </columnConstraints>
                     <rowConstraints>
-                      <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
+                        <RowConstraints maxHeight="-Infinity" minHeight="90.0" prefHeight="90.0"
-                      <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
+                          vgrow="SOMETIMES"/>
-                      <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
+                        <RowConstraints maxHeight="-Infinity" minHeight="90.0" prefHeight="90.0"
+                          vgrow="SOMETIMES"/>
+                        <RowConstraints maxHeight="-Infinity" minHeight="90.0" prefHeight="90.0"
+                          vgrow="SOMETIMES"/>
+                        <RowConstraints maxHeight="-Infinity" minHeight="90.0" prefHeight="90.0"
+                          vgrow="SOMETIMES"/>
                     </rowConstraints>
                      <children>
                         <JFXTextField fx:id="serverName" promptText="SERVER NAME">
@@ -46,29 +53,33 @@
                               <Insets left="15.0" right="15.0" />
                            </padding>
                            <GridPane.margin>
-                              <Insets left="35.0" right="35.0" />
+                               <Insets left="20.0" right="35.0"/>
                            </GridPane.margin>
                         </JFXTextField>
                         <GridPane fx:id="maxPlayersGridPane" GridPane.rowIndex="1">
                            <children>
-                              <Label fx:id="maxPlayersLabel" text="20" GridPane.columnIndex="1" GridPane.halignment="CENTER" GridPane.rowIndex="1" GridPane.valignment="TOP">
+                               <Label styleClass="optionLabel" text="MAX PLAYERS" translateY="5.0"
+                                 GridPane.halignment="CENTER" GridPane.valignment="BOTTOM">
                                  <GridPane.margin>
-                                    <Insets right="30.0" />
+                                     <Insets/>
                                  </GridPane.margin>
                               </Label>
-                              <Label fx:id="maxPlayerPromptLabel" text="MAX PLAYERS" GridPane.halignment="LEFT" GridPane.valignment="BOTTOM">
+                               <JFXSlider fx:id="maxPlayersSlider" blockIncrement="1.0"
+                                 majorTickUnit="2.0" max="20.0" min="1.0" minorTickCount="1"
+                                 snapToTicks="true" styleClass="maxPlayers" value="11.0"
+                                 GridPane.columnIndex="1" GridPane.valignment="BOTTOM">
                                  <GridPane.margin>
-                                    <Insets left="30.0" top="20.0" />
+                                     <Insets right="30.0"/>
                                  </GridPane.margin>
-                              </Label>
+                               </JFXSlider>
-                              <VBox alignment="BOTTOM_CENTER" prefHeight="200.0" prefWidth="100.0" GridPane.columnIndex="1" GridPane.halignment="CENTER" GridPane.valignment="CENTER">
+                               <Label fx:id="maxPlayersLabel" alignment="CENTER"
-                                 <children>
+                                 styleClass="sliderLabel" text="10" GridPane.columnIndex="1"
-                                    <JFXSlider fx:id="maxPlayersSlider" blockIncrement="1.0" majorTickUnit="2.0" max="20.0" min="1.0" minorTickCount="1" snapToTicks="true" styleClass="maxPlayers" value="11.0" />
+                                 GridPane.halignment="CENTER" GridPane.rowIndex="1"
-                                 </children>
+                                 GridPane.valignment="CENTER">
                                  <GridPane.margin>
-                                    <Insets bottom="10.0" right="30.0" />
+                                     <Insets right="15.0"/>
                                  </GridPane.margin>
-                              </VBox>
+                               </Label>
                            </children>
                            <columnConstraints>
                               <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" percentWidth="30.0" prefWidth="100.0" />
@@ -81,48 +92,68 @@
                         </GridPane>
                         <GridPane fx:id="maxPlayersGridPane1" GridPane.rowIndex="2">
                            <children>
-                              <Label fx:id="legsSliderLabel" text="20" GridPane.columnIndex="1" GridPane.halignment="CENTER" GridPane.rowIndex="1" GridPane.valignment="TOP">
-                                 <GridPane.margin>
-                                    <Insets right="30.0" />
-                                 </GridPane.margin>
-                              </Label>
-                              <VBox alignment="BOTTOM_CENTER" prefHeight="200.0" prefWidth="100.0" GridPane.columnIndex="1" GridPane.halignment="CENTER" GridPane.valignment="CENTER">
-                                 <children>
-                                    <JFXSlider fx:id="legsSlider" blockIncrement="1.0" majorTickUnit="2.0" max="20.0" min="1.0" minorTickCount="1" snapToTicks="true" styleClass="maxPlayers" value="11.0" />
-                                 </children>
-                                 <GridPane.margin>
-                                    <Insets bottom="10.0" right="30.0" />
-                                 </GridPane.margin>
-                              </VBox>
                               <GridPane>
                                  <children>
-                                    <Label alignment="CENTER" text="NUMBER OF" GridPane.halignment="CENTER" />
+                                     <Label alignment="CENTER" styleClass="optionLabel"
-                                    <Label alignment="CENTER" text="REPEATING LEGS" GridPane.halignment="CENTER" GridPane.rowIndex="1" />
+                                       text="NUMBER OF" GridPane.halignment="CENTER"
+                                       GridPane.valignment="BOTTOM"/>
                                  </children>
                                  <columnConstraints>
                                     <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
                                  </columnConstraints>
                                  <rowConstraints>
                                     <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
-                                    <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
-                                    <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
                                  </rowConstraints>
                               </GridPane>
-                              <JFXCheckBox fx:id="pickupsCheckBox" text="Enable Pickups" GridPane.rowIndex="1">
+                               <JFXSlider fx:id="legsSlider" blockIncrement="1.0"
+                                 majorTickUnit="2.0" max="20.0" min="1.0" minorTickCount="1"
+                                 snapToTicks="true" styleClass="maxPlayers" value="11.0"
+                                 GridPane.columnIndex="1" GridPane.halignment="CENTER"
+                                 GridPane.valignment="BOTTOM">
                                  <GridPane.margin>
-                                    <Insets left="5.0" />
+                                     <Insets right="30.0"/>
                                  </GridPane.margin>
-                              </JFXCheckBox>
+                               </JFXSlider>
+                               <Label alignment="CENTER" styleClass="optionLabel"
+                                 text="REPEATING LEGS" GridPane.halignment="CENTER"
+                                 GridPane.rowIndex="1"/>
+                               <Label fx:id="legsSliderLabel" styleClass="sliderLabel" text="10"
+                                 GridPane.columnIndex="1" GridPane.rowIndex="1">
+                                   <GridPane.margin>
+                                       <Insets right="15.0"/>
+                                   </GridPane.margin>
+                               </Label>
                            </children>
                            <columnConstraints>
                               <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" percentWidth="30.0" prefWidth="100.0" />
-                              <ColumnConstraints hgrow="SOMETIMES" minWidth="100.0" prefWidth="100.0" />
+                               <ColumnConstraints halignment="CENTER" hgrow="SOMETIMES"
+                                 minWidth="100.0" prefWidth="100.0"/>
                            </columnConstraints>
                            <rowConstraints>
-                              <RowConstraints minHeight="10.0" percentHeight="60.0" prefHeight="10.0" vgrow="SOMETIMES" />
+                               <RowConstraints maxHeight="-Infinity" minHeight="10.0"
-                              <RowConstraints minHeight="10.0" percentHeight="40.0" prefHeight="30.0" vgrow="SOMETIMES" />
+                                 percentHeight="60.0" prefHeight="100.0" vgrow="SOMETIMES"/>
+                               <RowConstraints maxHeight="-Infinity" minHeight="10.0"
+                                 percentHeight="40.0" prefHeight="100.0" vgrow="SOMETIMES"/>
                            </rowConstraints>
                         </GridPane>
+                         <GridPane GridPane.rowIndex="3">
+                             <columnConstraints>
+                                 <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0"
+                                   percentWidth="30.0" prefWidth="100.0"/>
+                                 <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0"
+                                   prefWidth="100.0"/>
+                             </columnConstraints>
+                             <rowConstraints>
+                                 <RowConstraints minHeight="10.0" prefHeight="30.0"
+                                   vgrow="SOMETIMES"/>
+                             </rowConstraints>
+                             <children>
+                                 <JFXCheckBox fx:id="pickupsCheckBox" text=" "
+                                   GridPane.columnIndex="1"/>
+                                 <Label styleClass="optionLabel" text="ENABLE TOKENS"
+                                   GridPane.halignment="CENTER" GridPane.valignment="CENTER"/>
+                             </children>
+                         </GridPane>
                      </children>
                   </GridPane>
                   <GridPane GridPane.columnIndex="1">
@@ -152,7 +183,8 @@
                             <RowConstraints maxHeight="342.0" minHeight="10.0" prefHeight="336.0" vgrow="SOMETIMES" />
                           </rowConstraints>
                            <children>
-                              <Label fx:id="mapNameLabel" text="MAP NAME" GridPane.halignment="CENTER" />
+                               <Label fx:id="mapNameLabel" styleClass="optionLabel" text="MAP NAME"
+                                 GridPane.halignment="CENTER"/>
                               <AnchorPane fx:id="mapHolder" prefHeight="333.0" prefWidth="404.0" GridPane.rowIndex="1" />
                            </children>
                         </GridPane>
@@ -164,6 +196,8 @@
                <font>
                   <Font size="20.0" />
                </font></Label>
+             <Label fx:id="closeLabel" text="✖" translateY="-10.0" GridPane.halignment="RIGHT"
+               GridPane.valignment="TOP"/>
          </children>
          <columnConstraints>
             <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
@@ -175,4 +209,8 @@
          </rowConstraints>
       </GridPane>
    </children>
+    <stylesheets>
+        <URL value="@../../css/Master.css"/>
+        <URL value="@../../css/dialogs/ServerCreation.css"/>
+    </stylesheets>
 </JFXDialogLayout>