UI improvements

This commit is contained in:
Seil0 2017-03-31 19:19:34 +02:00
parent d2043bee0b
commit 4bd5aa86c3
17 changed files with 43 additions and 28 deletions

Binary file not shown.

View File

@ -25,10 +25,10 @@
</ScrollPane>
<HBox fx:id="topHBox" prefHeight="38.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
<children>
<JFXHamburger fx:id="menuHam" prefHeight="38.0" prefWidth="38.0" />
<JFXHamburger fx:id="menuHam" prefHeight="38.0" prefWidth="38.0" stylesheets="@MainWindows.css" />
</children>
</HBox>
<VBox fx:id="sideMenuVBox" layoutY="32.0" prefHeight="568.0" prefWidth="150.0" visible="false" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.topAnchor="38.0">
<VBox fx:id="sideMenuVBox" layoutY="32.0" prefHeight="568.0" prefWidth="175.0" visible="false" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.topAnchor="38.0">
<children>
<JFXButton fx:id="aboutBtn" alignment="TOP_LEFT" maxHeight="38.0" maxWidth="150.0" onAction="#aboutBtnAction" prefHeight="38.0" prefWidth="150.0" text="About" textAlignment="LEFT">
<font>
@ -52,18 +52,19 @@
</JFXButton>
</children>
</VBox>
<AnchorPane fx:id="settingsAnchorPane" layoutX="38.0" layoutY="27.0" prefHeight="573.0" prefWidth="862.0" style="-fx-background-color: white;" visible="false" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="150.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="38.0">
<!-- space between settings sections 35px, between sections elements (label + element) 20px, between label and element 3px(or more) -->
<AnchorPane fx:id="settingsAnchorPane" layoutX="38.0" layoutY="27.0" prefHeight="573.0" prefWidth="862.0" style="-fx-background-color: white;" visible="false" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="175.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="38.0">
<children>
<Label layoutX="22.0" layoutY="59.0" text="Cemu Directory" AnchorPane.leftAnchor="14.0" AnchorPane.topAnchor="59.0" />
<JFXTextField fx:id="cemuTextField" layoutX="18.0" layoutY="83.0" maxWidth="305.0" minWidth="305.0" onAction="#cemuTextFieldAction" prefHeight="32.0" prefWidth="305.0" promptText="cemu directory" AnchorPane.leftAnchor="14.0" AnchorPane.topAnchor="83.0" />
<JFXTextField fx:id="romTextField" layoutX="18.0" layoutY="159.0" maxWidth="305.0" minWidth="305.0" onAction="#romTextFieldAction" prefHeight="32.0" prefWidth="305.0" promptText="rom directory" AnchorPane.leftAnchor="14.0" AnchorPane.topAnchor="159.0" />
<JFXTextField fx:id="cemuTextField" layoutX="18.0" layoutY="83.0" maxWidth="305.0" minWidth="305.0" onAction="#cemuTextFieldAction" prefHeight="32.0" prefWidth="305.0" promptText="cemu directory" AnchorPane.leftAnchor="14.0" AnchorPane.topAnchor="79.0" />
<JFXTextField fx:id="romTextField" layoutX="18.0" layoutY="159.0" maxWidth="305.0" minWidth="305.0" onAction="#romTextFieldAction" prefHeight="32.0" prefWidth="305.0" promptText="rom directory" AnchorPane.leftAnchor="14.0" AnchorPane.topAnchor="151.0" />
<JFXButton fx:id="romTFBtn" layoutX="337.0" layoutY="159.0" onAction="#romTFBtnAction" prefHeight="32.0" prefWidth="108.0" text="choose directory" AnchorPane.leftAnchor="333.0" AnchorPane.topAnchor="159.0" />
<JFXButton fx:id="cemuTFBtn" layoutX="337.0" layoutY="90.0" onAction="#cemuTFBtnAction" prefHeight="32.0" prefWidth="108.0" text="choose directory" AnchorPane.leftAnchor="333.0" AnchorPane.topAnchor="90.0" />
<JFXColorPicker fx:id="colorPicker" layoutX="22.0" layoutY="235.0" onAction="#colorPickerAction" AnchorPane.leftAnchor="16.0" AnchorPane.topAnchor="235.0" />
<JFXToggleButton fx:id="fullscreenToggleBtn" layoutX="18.0" layoutY="316.0" onAction="#fullscreenToggleBtnAction" text="start game in fullscreen" AnchorPane.leftAnchor="18.0" AnchorPane.topAnchor="317.0" />
<Label layoutX="22.0" layoutY="135.0" text="Rom Directory" AnchorPane.leftAnchor="14.0" AnchorPane.topAnchor="135.0" />
<Label layoutX="22.0" layoutY="211.0" text="main color" AnchorPane.leftAnchor="14.0" AnchorPane.topAnchor="211.0" />
<Label layoutX="18.0" layoutY="281.0" text="Cemu Settings" AnchorPane.leftAnchor="18.0" AnchorPane.topAnchor="290.0">
<JFXColorPicker fx:id="colorPicker" layoutX="22.0" layoutY="235.0" onAction="#colorPickerAction" AnchorPane.leftAnchor="16.0" AnchorPane.topAnchor="227.0" />
<JFXToggleButton fx:id="fullscreenToggleBtn" layoutX="18.0" layoutY="316.0" onAction="#fullscreenToggleBtnAction" text="start game in fullscreen" AnchorPane.leftAnchor="18.0" AnchorPane.topAnchor="314.0" />
<Label layoutX="22.0" layoutY="135.0" text="Rom Directory" AnchorPane.leftAnchor="14.0" AnchorPane.topAnchor="131.0" />
<Label layoutX="22.0" layoutY="211.0" text="main Color" AnchorPane.leftAnchor="14.0" AnchorPane.topAnchor="203.0" />
<Label layoutX="18.0" layoutY="281.0" text="Cemu Settings" AnchorPane.leftAnchor="18.0" AnchorPane.topAnchor="287.0">
<font>
<Font name="System Bold" size="14.0" />
</font>

View File

@ -0,0 +1,4 @@
.jfx-hamburgerW StackPane { -fx-background-color: white;
-fx-background-radius: 5px; }
.jfx-hamburgerB StackPane { -fx-background-color: black;
-fx-background-radius: 5px; }

View File

@ -1 +0,0 @@
/* JavaFX CSS - Leave this comment until you have at least create one rule which uses -fx-Property */

View File

@ -109,7 +109,7 @@ public class Main extends Application {
mainWindowController.initUI();
Scene scene = new Scene(pane); //create new scene, append pane to scene
scene.getStylesheets().add(Main.class.getResource("MainWindows.css").toExternalForm());
primaryStage.setScene(scene); //append scene to stage
primaryStage.show(); //show stage
} catch (IOException e) {

View File

@ -25,10 +25,10 @@
</ScrollPane>
<HBox fx:id="topHBox" prefHeight="38.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
<children>
<JFXHamburger fx:id="menuHam" prefHeight="38.0" prefWidth="38.0" />
<JFXHamburger fx:id="menuHam" prefHeight="38.0" prefWidth="38.0" stylesheets="@MainWindows.css" />
</children>
</HBox>
<VBox fx:id="sideMenuVBox" layoutY="32.0" prefHeight="568.0" prefWidth="150.0" visible="false" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.topAnchor="38.0">
<VBox fx:id="sideMenuVBox" layoutY="32.0" prefHeight="568.0" prefWidth="175.0" visible="false" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.topAnchor="38.0">
<children>
<JFXButton fx:id="aboutBtn" alignment="TOP_LEFT" maxHeight="38.0" maxWidth="150.0" onAction="#aboutBtnAction" prefHeight="38.0" prefWidth="150.0" text="About" textAlignment="LEFT">
<font>
@ -52,18 +52,19 @@
</JFXButton>
</children>
</VBox>
<AnchorPane fx:id="settingsAnchorPane" layoutX="38.0" layoutY="27.0" prefHeight="573.0" prefWidth="862.0" style="-fx-background-color: white;" visible="false" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="150.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="38.0">
<!-- space between settings sections 35px, between sections elements (label + element) 20px, between label and element 3px(or more) -->
<AnchorPane fx:id="settingsAnchorPane" layoutX="38.0" layoutY="27.0" prefHeight="573.0" prefWidth="862.0" style="-fx-background-color: white;" visible="false" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="175.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="38.0">
<children>
<Label layoutX="22.0" layoutY="59.0" text="Cemu Directory" AnchorPane.leftAnchor="14.0" AnchorPane.topAnchor="59.0" />
<JFXTextField fx:id="cemuTextField" layoutX="18.0" layoutY="83.0" maxWidth="305.0" minWidth="305.0" onAction="#cemuTextFieldAction" prefHeight="32.0" prefWidth="305.0" promptText="cemu directory" AnchorPane.leftAnchor="14.0" AnchorPane.topAnchor="83.0" />
<JFXTextField fx:id="romTextField" layoutX="18.0" layoutY="159.0" maxWidth="305.0" minWidth="305.0" onAction="#romTextFieldAction" prefHeight="32.0" prefWidth="305.0" promptText="rom directory" AnchorPane.leftAnchor="14.0" AnchorPane.topAnchor="159.0" />
<JFXTextField fx:id="cemuTextField" layoutX="18.0" layoutY="83.0" maxWidth="305.0" minWidth="305.0" onAction="#cemuTextFieldAction" prefHeight="32.0" prefWidth="305.0" promptText="cemu directory" AnchorPane.leftAnchor="14.0" AnchorPane.topAnchor="79.0" />
<JFXTextField fx:id="romTextField" layoutX="18.0" layoutY="159.0" maxWidth="305.0" minWidth="305.0" onAction="#romTextFieldAction" prefHeight="32.0" prefWidth="305.0" promptText="rom directory" AnchorPane.leftAnchor="14.0" AnchorPane.topAnchor="151.0" />
<JFXButton fx:id="romTFBtn" layoutX="337.0" layoutY="159.0" onAction="#romTFBtnAction" prefHeight="32.0" prefWidth="108.0" text="choose directory" AnchorPane.leftAnchor="333.0" AnchorPane.topAnchor="159.0" />
<JFXButton fx:id="cemuTFBtn" layoutX="337.0" layoutY="90.0" onAction="#cemuTFBtnAction" prefHeight="32.0" prefWidth="108.0" text="choose directory" AnchorPane.leftAnchor="333.0" AnchorPane.topAnchor="90.0" />
<JFXColorPicker fx:id="colorPicker" layoutX="22.0" layoutY="235.0" onAction="#colorPickerAction" AnchorPane.leftAnchor="16.0" AnchorPane.topAnchor="235.0" />
<JFXToggleButton fx:id="fullscreenToggleBtn" layoutX="18.0" layoutY="316.0" onAction="#fullscreenToggleBtnAction" text="start game in fullscreen" AnchorPane.leftAnchor="18.0" AnchorPane.topAnchor="317.0" />
<Label layoutX="22.0" layoutY="135.0" text="Rom Directory" AnchorPane.leftAnchor="14.0" AnchorPane.topAnchor="135.0" />
<Label layoutX="22.0" layoutY="211.0" text="main color" AnchorPane.leftAnchor="14.0" AnchorPane.topAnchor="211.0" />
<Label layoutX="18.0" layoutY="281.0" text="Cemu Settings" AnchorPane.leftAnchor="18.0" AnchorPane.topAnchor="290.0">
<JFXColorPicker fx:id="colorPicker" layoutX="22.0" layoutY="235.0" onAction="#colorPickerAction" AnchorPane.leftAnchor="16.0" AnchorPane.topAnchor="227.0" />
<JFXToggleButton fx:id="fullscreenToggleBtn" layoutX="18.0" layoutY="316.0" onAction="#fullscreenToggleBtnAction" text="start game in fullscreen" AnchorPane.leftAnchor="18.0" AnchorPane.topAnchor="314.0" />
<Label layoutX="22.0" layoutY="135.0" text="Rom Directory" AnchorPane.leftAnchor="14.0" AnchorPane.topAnchor="131.0" />
<Label layoutX="22.0" layoutY="211.0" text="main Color" AnchorPane.leftAnchor="14.0" AnchorPane.topAnchor="203.0" />
<Label layoutX="18.0" layoutY="281.0" text="Cemu Settings" AnchorPane.leftAnchor="18.0" AnchorPane.topAnchor="287.0">
<font>
<Font name="System Bold" size="14.0" />
</font>

View File

@ -126,6 +126,10 @@ public class MainWindowController {
private String selectedGameTitleID;
private String selectedGameTitle;
private String color;
private String version = "0.1.2";
private String buildNumber = "001";
@SuppressWarnings("unused")
private String versionName = "";
private int xPos = -200;
private int yPos = 17;
private int xPosHelper;
@ -153,8 +157,7 @@ public class MainWindowController {
private ImageView add_circle_black = new ImageView(new Image("recources/icons/ic_add_circle_black_24dp_1x.png"));
private ImageView info_black = new ImageView(new Image("recources/icons/ic_info_black_24dp_1x.png"));
private ImageView settings_black = new ImageView(new Image("recources/icons/ic_settings_black_24dp_1x.png"));
private ImageView cached_black = new ImageView(new Image("recources/icons/ic_cached_black_24dp_1x.png"));
private ImageView cached_black = new ImageView(new Image("recources/icons/ic_cached_black_24dp_1x.png"));
private ImageView add_circle_white = new ImageView(new Image("recources/icons/ic_add_circle_white_24dp_1x.png"));
private ImageView info_white = new ImageView(new Image("recources/icons/ic_info_white_24dp_1x.png"));
private ImageView settings_white = new ImageView(new Image("recources/icons/ic_settings_white_24dp_1x.png"));
@ -415,7 +418,7 @@ public class MainWindowController {
Alert alert = new Alert(AlertType.INFORMATION);
alert.setTitle("about");
alert.setHeaderText("cemu_UI");
alert.setContentText("cemu_UI by @Seil0 \npre release 0.1.1 \nwww.kellerkinder.xyz");
alert.setContentText("cemu_UI by @Seil0 \npre release "+version+" ("+buildNumber+") \nwww.kellerkinder.xyz");
alert.initOwner(main.primaryStage);
alert.showAndWait();
}
@ -742,6 +745,8 @@ public class MainWindowController {
settingsBtn.setGraphic(settings_white);
addBtn.setGraphic(add_circle_white);
reloadRomsBtn.setGraphic(cached_white);
menuHam.getStyleClass().add("jfx-hamburgerW");
}else{
aboutBtn.setStyle("-fx-text-fill: BLACK;");
settingsBtn.setStyle("-fx-text-fill: BLACK;");
@ -756,6 +761,8 @@ public class MainWindowController {
settingsBtn.setGraphic(settings_black);
addBtn.setGraphic(add_circle_black);
reloadRomsBtn.setGraphic(cached_black);
menuHam.getStyleClass().add("jfx-hamburgerB");
}
for(int i=0; i<gameCover.size(); i++){
@ -813,7 +820,7 @@ public class MainWindowController {
fadeTransition.setToValue(1.0);
//slide in in 400ms
TranslateTransition translateTransition = new TranslateTransition(Duration.millis(400), sideMenuVBox);
translateTransition.setFromX(-150);
translateTransition.setFromX(-175);
translateTransition.setToX(0);
//in case both animations are used (add (fadeTransition, translateTransition) in the second line under this command)
ParallelTransition parallelTransition = new ParallelTransition();
@ -830,7 +837,7 @@ public class MainWindowController {
//slide out in 400ms
TranslateTransition translateTransition = new TranslateTransition(Duration.millis(400), sideMenuVBox);
translateTransition.setFromX(0);
translateTransition.setToX(-150);
translateTransition.setToX(-175);
//in case both animations are used (add (fadeTransition, translateTransition) in the second line under this command)
ParallelTransition parallelTransition = new ParallelTransition();
parallelTransition.getChildren().addAll(translateTransition);//(fadeTransition, translateTransition);

View File

@ -0,0 +1,4 @@
.jfx-hamburgerW StackPane { -fx-background-color: white;
-fx-background-radius: 5px; }
.jfx-hamburgerB StackPane { -fx-background-color: black;
-fx-background-radius: 5px; }

View File

@ -1 +0,0 @@
/* JavaFX CSS - Leave this comment until you have at least create one rule which uses -fx-Property */