Finish implementing CSS for GUI

PeterHW963 · Sep 18, 2024 · 8d9ce40 · 8d9ce40
1 parent af848c4
commit 8d9ce40
Show file tree

Hide file tree

Showing 6 changed files with 24 additions and 25 deletions.
diff --git a/src/main/java/DialogBox.java b/src/main/java/DialogBox.java
@@ -47,6 +47,7 @@ private void flip() {
         Collections.reverse(tmp);
         getChildren().setAll(tmp);
         setAlignment(Pos.TOP_LEFT);
+        dialog.getStyleClass().add("reply-label");
     }
 
     public static DialogBox getUserDialog(String text, Image img) {

diff --git a/src/main/java/Main.java b/src/main/java/Main.java
@@ -19,11 +19,9 @@ public void start(Stage stage) {
             FXMLLoader fxmlLoader = new FXMLLoader(Main.class.getResource("/view/MainWindow.fxml"));
             AnchorPane ap = fxmlLoader.load();
             Scene scene = new Scene(ap);
+            stage.setMinHeight(220);
+            stage.setMinWidth(417);
             stage.setScene(scene);
-            stage.setMinWidth(400);
-            stage.setMinHeight(600);
-            stage.setMaxHeight(600);
-            stage.setMaxWidth(400);
             fxmlLoader.<MainWindow>getController().setNether(nether); // inject the Nether instance
             stage.show();
         } catch (IOException e) {

diff --git a/src/main/resources/css/dialog-box.css b/src/main/resources/css/dialog-box.css
@@ -1,9 +1,14 @@
 .label {
-    -fx-background-color: linear-gradient(to bottom right, #00ffbf, #00ddff);
-    -fx-border-color: #d55e00 #009e73 #cc79a7 #0072b2;
-    -fx-border-width: 2px;
+    background: #fad9a7;
+    -fx-background-color: background;
+    -fx-border-color: black;
+    -fx-border-width: 1px;
     -fx-background-radius: 1em 1em 0 1em;
     -fx-border-radius: 1em 1em 0 1em;
+    -fx-padding: 6px;
+    -fx-border-insets: 0px 7px 0px 7px;
+    -fx-background-insets: 0px 7px 0px 7px;
+    -fx-text-fill: ladder(background, white 49%, black 50%);
 }
 
 .reply-label {

diff --git a/src/main/resources/css/main.css b/src/main/resources/css/main.css
@@ -5,7 +5,8 @@
 
 .text-field {
     -fx-background-color: orange;
-    -fx-font: 20px "Arial";
+    -fx-font: 16px "Arial";
+    -fx-prompt-text-fill: #5c5c5c;
     -fx-background-radius: 0;
     -fx-border-radius: 0;
 }
@@ -18,13 +19,11 @@
 }
 
 .button:hover {
-    -fx-background-color: orange;
-    -fx-font-size: 18px;
+    -fx-background-color: #ffb258;
 }
 
 .button:pressed {
-    -fx-background-color:#fab156;
-    -fx-font-size: 20px;
+    -fx-background-color: #f8c48a;
 }
 
 .scroll-pane,

diff --git a/src/main/resources/view/DialogBox.fxml b/src/main/resources/view/DialogBox.fxml
@@ -5,16 +5,13 @@
 <?import javafx.scene.image.ImageView?>
 <?import javafx.scene.layout.HBox?>
 
-<fx:root 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">
+<fx:root alignment="TOP_RIGHT" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" prefWidth="400.0" spacing="10.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" minHeight="-Infinity"/>
-        <ImageView fx:id="displayPicture" fitHeight="99.0" fitWidth="99.0" pickOnBounds="true" preserveRatio="true" />
+        <Label fx:id="dialog" minHeight="-Infinity" stylesheets="@../css/dialog-box.css" text="Label" wrapText="true">
+         <HBox.margin>
+            <Insets right="3.0" />
+         </HBox.margin></Label>
+        <ImageView fx:id="displayPicture" fitHeight="80.0" fitWidth="80.0" pickOnBounds="true" preserveRatio="true" />
     </children>
     <padding>
         <Insets bottom="15.0" left="5.0" right="5.0" top="15.0" />

diff --git a/src/main/resources/view/MainWindow.fxml b/src/main/resources/view/MainWindow.fxml
@@ -6,15 +6,14 @@
 <?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="MainWindow">
+<AnchorPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="600.0" prefWidth="400.0" stylesheets="@../css/main.css" xmlns="http://javafx.com/javafx/17" xmlns:fx="http://javafx.com/fxml/1" fx:controller="MainWindow">
     <children>
-        <TextField fx:id="userInput" layoutY="558.0" onAction="#handleUserInput" prefHeight="41.0" prefWidth="324.0" AnchorPane.bottomAnchor="1.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="76.0" />
-        <Button fx:id="sendButton" layoutX="324.0" layoutY="558.0" mnemonicParsing="false" onAction="#handleUserInput" prefHeight="41.0" prefWidth="76.0" text="Send" AnchorPane.bottomAnchor="1.0" AnchorPane.rightAnchor="0.0" />
+        <TextField fx:id="userInput" layoutY="558.0" onAction="#handleUserInput" prefHeight="43.0" prefWidth="324.0" AnchorPane.bottomAnchor="-1.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="76.0" promptText="Enter your command here..."/>
+        <Button fx:id="sendButton" layoutX="324.0" layoutY="558.0" mnemonicParsing="false" onAction="#handleUserInput" prefHeight="42.0" prefWidth="76.0" text="Send" AnchorPane.bottomAnchor="0.0" AnchorPane.rightAnchor="0.0" />
         <ScrollPane fx:id="scrollPane" fitToWidth="true" hbarPolicy="NEVER" hvalue="1.0" prefHeight="557.0" prefWidth="400.0" vvalue="1.0" AnchorPane.bottomAnchor="43.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
             <content>
                 <VBox fx:id="dialogContainer" prefHeight="552.0" prefWidth="388.0" />
             </content>
         </ScrollPane>
     </children>
 </AnchorPane>
-