Improve GUI

Current GUI has inconsistent padding between images, text and borders. The GUI also consists a solid colour background. Let's, * Add colour changes for Tsundere dialogbox and User dialogbox. * Implement appropriate padding changes.
macareonie · Feb 17, 2024 · 8519ccf · 8519ccf
1 parent cb25e8b
commit 8519ccf
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 9 deletions.
diff --git a/src/main/java/tsundere/gui/DialogBox.java b/src/main/java/tsundere/gui/DialogBox.java
@@ -62,6 +62,7 @@ public static DialogBox getUserDialog(String text, Image img) {
     public static DialogBox getTsundereDialog(String text, Image img) {
         var db = new DialogBox(text, img);
         db.flip();
+        db.dialog.setStyle("-fx-background-color: #f2cc50; -fx-background-radius: 15; -fx-label-padding: 1;");
         return db;
     }
 }
diff --git a/src/main/resources/view/DialogBox.fxml b/src/main/resources/view/DialogBox.fxml
@@ -5,19 +5,33 @@
 <?import javafx.scene.image.ImageView?>
 <?import javafx.scene.layout.HBox?>
 <?import javafx.scene.shape.Circle?>
+<?import javafx.scene.text.Font?>
 <?import javafx.scene.layout.StackPane?>
 
-
-<fx:root style=" -fx-border-color:black; -fx-border-width: 1; -fx-border-style: solid;" alignment="TOP_RIGHT" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" prefWidth="400.0" type="javafx.scene.layout.HBox" xmlns="http://javafx.com/javafx/17" xmlns:fx="http://javafx.com/fxml/1">
+<!-- Referenced and adapted dialog from @rehad-a-->
+<fx:root style="" alignment="TOP_RIGHT" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" prefWidth="400.0" type="javafx.scene.layout.HBox" xmlns="http://javafx.com/javafx/17" xmlns:fx="http://javafx.com/fxml/1">
     <children>
-        <Label fx:id="dialog" text="Label" wrapText="true" />
+        <Label fx:id="dialog" minHeight="-Infinity" lineSpacing="1.0" style="-fx-background-color: #50f283; -fx-background-radius: 15; -fx-label-padding: 1;" text="Label" wrapText="true">
+            <padding>
+                <Insets bottom="10.0" left="10.0" right="10.0" top="10.0" />
+            </padding>
+            <HBox.margin>
+                <Insets />
+            </HBox.margin>
+            <font>
+                <Font name="System Bold" size="12.0" />
+            </font>
+        </Label>
         <StackPane>
-            <ImageView style="-fx-effect: dropshadow(three-pass-box, rgba(0,0,0,0.8), 10, 0, 0, 0); " fx:id="displayPicture" fitHeight="99.0" fitWidth="99.0" pickOnBounds="true" preserveRatio="true">
+            <ImageView fx:id="displayPicture" fitHeight="99.0" fitWidth="99.0" pickOnBounds="true" preserveRatio="true">
                 <clip>
                     <Circle radius="50" centerX="50" centerY="50"/>
                 </clip>
             </ImageView>
             <Circle radius="50" centerX="50" centerY="50" stroke="black" fill="transparent"/>
+            <HBox.margin>
+                <Insets right="10.0" left="10.0"/>
+            </HBox.margin>
         </StackPane>
     </children>
     <padding>

diff --git a/src/main/resources/view/MainWindow.fxml b/src/main/resources/view/MainWindow.fxml
@@ -6,13 +6,13 @@
 <?import javafx.scene.layout.AnchorPane?>
 <?import javafx.scene.layout.VBox?>
 
-<AnchorPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="600.0" prefWidth="400.0" xmlns="http://javafx.com/javafx/17" xmlns:fx="http://javafx.com/fxml/1" fx:controller="tsundere.gui.MainWindow">
+<AnchorPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="750.0" prefWidth="500.0" xmlns="http://javafx.com/javafx/17" xmlns:fx="http://javafx.com/fxml/1" fx:controller="tsundere.gui.MainWindow">
     <children>
-        <TextField fx:id="userInput" layoutY="558.0" onAction="#handleUserInput" prefHeight="41.0" prefWidth="324.0" AnchorPane.bottomAnchor="1.0" />
-        <Button style="-fx-background-color: powderblue" fx:id="sendButton" layoutX="324.0" layoutY="558.0" mnemonicParsing="false" onAction="#handleUserInput" prefHeight="41.0" prefWidth="76.0" text="Send" />
-        <ScrollPane fx:id="scrollPane" hbarPolicy="NEVER" hvalue="1.0" prefHeight="557.0" prefWidth="400.0" vvalue="1.0">
+        <TextField fx:id="userInput" layoutY="698.0" onAction="#handleUserInput" prefHeight="51.0" prefWidth="405.0" AnchorPane.bottomAnchor="1.0" />
+        <Button style="-fx-background-color: powderblue" fx:id="sendButton" layoutX="405.0" layoutY="698.0" mnemonicParsing="false" onAction="#handleUserInput" prefHeight="51.0" prefWidth="95.0" text="Send" />
+        <ScrollPane fx:id="scrollPane" hbarPolicy="NEVER" hvalue="1.0" prefHeight="697.0" prefWidth="500.0" vvalue="1.0">
             <content>
-                <VBox style="-fx-background-color: powderblue" fx:id="dialogContainer" prefHeight="552.0" prefWidth="388.0" />
+                <VBox style="-fx-background-color: powderblue" fx:id="dialogContainer" prefHeight="690.0" prefWidth="485.0" />
             </content>
         </ScrollPane>
     </children>