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]
This commit is contained in:
Haoming Yin
2017-09-28 11:13:02 +13:00
parent 8b7407bf89
commit 37e4fe4ce7
3 changed files with 100 additions and 54 deletions
@@ -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() {
@@ -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 {
-fx-text-fill: -fx-pp-dark-text-color;
-fx-font-size: 16px;
}
#maxPlayerPromptLabel {
.optionLabel {
-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;
}
@@ -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" 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">
<JFXDialogLayout maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity"
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 minHeight="10.0" prefHeight="30.0" 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 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>
<VBox alignment="BOTTOM_CENTER" prefHeight="200.0" prefWidth="100.0" GridPane.columnIndex="1" GridPane.halignment="CENTER" GridPane.valignment="CENTER">
<children>
<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" />
</children>
</JFXSlider>
<Label fx:id="maxPlayersLabel" alignment="CENTER"
styleClass="sliderLabel" text="10" GridPane.columnIndex="1"
GridPane.halignment="CENTER" GridPane.rowIndex="1"
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" text="REPEATING LEGS" GridPane.halignment="CENTER" GridPane.rowIndex="1" />
<Label alignment="CENTER" styleClass="optionLabel"
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 minHeight="10.0" percentHeight="40.0" prefHeight="30.0" vgrow="SOMETIMES" />
<RowConstraints maxHeight="-Infinity" minHeight="10.0"
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>