Merge pull request #124 from itsme-zeix/refine-command-bar-ui

Update CommandBar UI, ResultDisplay UI & default window size

docs/index.md

@@ -8,10 +8,9 @@ title: AgentAssist
 
 ![Ui](images/Ui.png)
 
-**AgentAssist is a desktop application, designed for banking sales agents to help with managing their contact 
-details.** 
-While it 
-has a GUI, most of the user interactions happen using a CLI (Command Line Interface).
+**AgentAssist is a desktop application, designed for banking sales agents to help with managing their contact
+details.**
+While it has a GUI, most of the user interactions happen using a CLI (Command Line Interface).
 
 * If you are interested in using AgentAssist, head over to the [_Quick Start_ section of the **User Guide**](UserGuide.
   html#quick-start).

src/main/java/seedu/address/commons/core/GuiSettings.java

@@ -12,8 +12,8 @@
  */
 public class GuiSettings implements Serializable {
 
-    private static final double DEFAULT_HEIGHT = 600;
-    private static final double DEFAULT_WIDTH = 740;
+    private static final double DEFAULT_HEIGHT = 800;
+    private static final double DEFAULT_WIDTH = 1200;
 
     private final double windowWidth;
     private final double windowHeight;

src/main/java/seedu/address/ui/CommandBox.java

@@ -1,13 +1,18 @@
 package seedu.address.ui;
 
+import org.kordamp.ikonli.javafx.FontIcon;
+
 import javafx.collections.ObservableList;
 import javafx.fxml.FXML;
 import javafx.scene.control.TextArea;
+import javafx.scene.layout.HBox;
 import javafx.scene.layout.Region;
+import javafx.scene.paint.Color;
 import seedu.address.logic.commands.CommandResult;
 import seedu.address.logic.commands.exceptions.CommandException;
 import seedu.address.logic.parser.exceptions.ParseException;
 
+
 /**
  * The UI component that is responsible for receiving user command inputs.
  */
@@ -22,6 +27,10 @@ public class CommandBox extends UiPart<Region> {
 
     @FXML
     private TextArea commandTextArea;
+    @FXML
+    private FontIcon commandTextIcon;
+    @FXML
+    private HBox commandTextContainer;
 
     /**
      * Creates a {@code CommandBox} with the given {@code CommandExecutor}.
@@ -33,7 +42,16 @@ public CommandBox(CommandExecutor commandExecutor) {
         commandTextArea.textProperty().addListener((unused1, unused2, unused3) -> {
             setStyleToDefault();
         });
-        initaliseEventHandler();
+
+        commandTextArea.focusedProperty().addListener((obs, oldVal, newVal) -> {
+            if (newVal) {
+                setStyleToFocused();
+            } else {
+                setStyleToUnfocused();
+            }
+        });
+
+        initialiseEventHandler();
     }
 
     /**
@@ -59,7 +77,27 @@ private void handleCommandEntered() {
      * Sets the command box style to use the default style.
      */
     private void setStyleToDefault() {
+        commandTextIcon.setIconColor(Color.WHITE);
         commandTextArea.getStyleClass().remove(ERROR_STYLE_CLASS);
+        commandTextArea.setStyle("-fx-text-fill: white;");
+    }
+
+    /** Sets the command box style to indicate the command box is focused. */
+    private void setStyleToFocused() {
+        commandTextIcon.setIconColor(Color.WHITE);
+        if (commandTextArea.getStyleClass().contains(ERROR_STYLE_CLASS)) {
+            return;
+        }
+        commandTextArea.setStyle("-fx-text-fill: white;");
+    }
+
+    /** Sets the command box style to indicate the command box is not focused. */
+    private void setStyleToUnfocused() {
+        commandTextIcon.setIconColor(Color.GREY);
+        if (commandTextArea.getStyleClass().contains(ERROR_STYLE_CLASS)) {
+            return;
+        }
+        commandTextArea.setStyle("-fx-text-fill: grey;");
     }
 
     /**
@@ -89,7 +127,7 @@ public interface CommandExecutor {
     /**
      * Initialises the Event Handler for the input of commands.
      */
-    private void initaliseEventHandler() {
+    private void initialiseEventHandler() {
         commandTextArea.setOnKeyPressed(event -> {
             switch (event.getCode()) {
             case ENTER:

src/main/java/seedu/address/ui/HelpWindow.java

@@ -53,7 +53,7 @@ public class HelpWindow extends UiPart<Stage> {
     public HelpWindow(Stage root) {
         super(FXML, root);
         root.setTitle("Help");
-        root.getScene().getStylesheets().add("view/HelpWindow.css");
+        root.getScene().getStylesheets().add("view/css/HelpWindow.css");
         Label titleLabel = new Label("Command Summary");
         titleLabel.getStyleClass().add("help-title");
         mainContainer.getChildren().add(0, titleLabel);

src/main/java/seedu/address/ui/UiManager.java

@@ -6,6 +6,7 @@
 import javafx.scene.control.Alert;
 import javafx.scene.control.Alert.AlertType;
 import javafx.scene.image.Image;
+import javafx.scene.text.Font;
 import javafx.stage.Stage;
 import seedu.address.MainApp;
 import seedu.address.commons.core.LogsCenter;
@@ -40,6 +41,8 @@ public void start(Stage primaryStage) {
         primaryStage.getIcons().add(getImage(ICON_APPLICATION));
 
         try {
+            Font.loadFont(getClass().getResourceAsStream("@/resources/fonts/JetBrainsMonoNL-Medium.ttf"), 10);
+
             mainWindow = new MainWindow(primaryStage, logic);
             mainWindow.show(); //This should be called before creating other UI parts
             mainWindow.fillInnerParts();
@@ -65,7 +68,7 @@ void showAlertDialogAndWait(Alert.AlertType type, String title, String headerTex
     private static void showAlertDialogAndWait(Stage owner, AlertType type, String title, String headerText,
                                                String contentText) {
         final Alert alert = new Alert(type);
-        alert.getDialogPane().getStylesheets().add("view/DarkTheme.css");
+        alert.getDialogPane().getStylesheets().add("view/css/DarkTheme.css");
         alert.initOwner(owner);
         alert.setTitle(title);
         alert.setHeaderText(headerText);

src/main/resources/view/CommandBox.fxml

@@ -1,14 +1,20 @@
 <?xml version="1.0" encoding="UTF-8"?>
 
 <?import java.net.URL?>
-<?import javafx.scene.control.TextField?>
 <?import javafx.scene.control.TextArea?>
+<?import javafx.scene.layout.HBox?>
 <?import javafx.scene.layout.StackPane?>
 
-<StackPane styleClass="stack-pane" xmlns="http://javafx.com/javafx/17" xmlns:fx="http://javafx.com/fxml/1">
+<?import org.kordamp.ikonli.javafx.FontIcon?>
+
+<StackPane styleClass="stack-panel" xmlns="http://javafx.com/javafx/22" xmlns:fx="http://javafx.com/fxml/1">
   <stylesheets>
-    <URL value="@DarkTheme.css" />
+    <URL value="@/view/css/CommandBox.css" />
   </stylesheets>
-  <TextArea fx:id="commandTextArea" promptText="Enter command here..." wrapText="true" maxHeight="200"/>
-</StackPane>
 
+  <HBox fx:id="commandTextContainer" alignment="CENTER_LEFT" spacing="5" xmlns="http://javafx.com/javafx/17" xmlns:fx="http://javafx.com/fxml">
+    <FontIcon fx:id="commandTextIcon" iconLiteral="fas-terminal"/>
+    <TextArea fx:id="commandTextArea" maxHeight="200" promptText="Enter command here..." wrapText="true" HBox.hgrow="ALWAYS" />
+  </HBox>
+
+</StackPane>

src/main/resources/view/HelpWindow.fxml

@@ -17,7 +17,7 @@
   <scene>
     <Scene>
       <stylesheets>
-        <URL value="@HelpWindow.css" />
+        <URL value="@css/HelpWindow.css" />
       </stylesheets>
 
       <VBox fx:id="mainContainer" alignment="CENTER" spacing="10" styleClass="help-window">

src/main/resources/view/MainWindow.fxml

@@ -20,8 +20,8 @@
   <scene>
     <Scene>
       <stylesheets>
-        <URL value="@DarkTheme.css" />
-        <URL value="@Extensions.css" />
+        <URL value="@css/DarkTheme.css" />
+        <URL value="@css/Extensions.css" />
       </stylesheets>
 
       <VBox>

src/main/resources/view/ResultDisplay.fxml

@@ -1,9 +1,14 @@
 <?xml version="1.0" encoding="UTF-8"?>
 
+<?import java.net.URL?>
+
 <?import javafx.scene.control.TextArea?>
 <?import javafx.scene.layout.StackPane?>
 
-<StackPane fx:id="placeHolder" styleClass="pane-with-border" xmlns="http://javafx.com/javafx/17"
-    xmlns:fx="http://javafx.com/fxml/1">
-  <TextArea fx:id="resultDisplay" editable="false" styleClass="result-display"/>
+<StackPane styleClass="stack-pane" xmlns="http://javafx.com/javafx/17" xmlns:fx="http://javafx.com/fxml/1">
+  <stylesheets>
+    <URL value="@css/ResultDisplay.css" />
+  </stylesheets>
+
+  <TextArea fx:id="resultDisplay" editable="false" styleClass="result-display" wrapText="true"/>
 </StackPane>

src/main/resources/view/css/CommandBox.css

@@ -0,0 +1,55 @@
+#commandTextContainer {
+    -fx-background-color: #1C1C1C;
+    -fx-border-color: #1C1C1C;
+    -fx-border-width: 1px;
+
+    -fx-padding: 10 15 10 15;
+
+    -fx-pref-height: 50px;
+    -fx-min-height: 50px;
+    -fx-max-height: 50px;
+}
+
+#commandTextIcon {
+    -fx-icon-size: 15;
+    -fx-icon-color: white;
+}
+
+#commandTextArea {
+
+    -fx-background-color: #1C1C1C;
+    -fx-control-inner-background: #1C1C1C;
+
+    -fx-font-family: "Jetbrains Mono";
+    -fx-font-size: 13pt;
+    -fx-prompt-text-fill: #656565;
+    -fx-text-fill: white;
+
+    -fx-pref-height: 35px;
+    -fx-max-height: 35px;
+    -fx-min-height: 35px;
+    -fx-padding: 0 0 0 -5px;
+
+    -fx-border-width: 0;
+
+}
+
+#commandTextArea .content {
+    -fx-background-radius: 0;
+    -fx-background-color: #1C1C1C;
+    -fx-border-width: 0;
+}
+
+#commandTextArea .viewport {
+    -fx-background-color: #1C1C1C;
+    -fx-border-width: 0;
+}
+
+#commandTextArea:focused {
+    -fx-prompt-text-fill: grey;
+    -fx-border-width: 0;
+}
+
+.scroll-pane {
+    -fx-background-color: transparent;
+}

src/main/resources/view/DarkTheme.css → src/main/resources/view/css/DarkTheme.css

@@ -146,17 +146,6 @@
     -fx-background-color: derive(#1d1d1d, 30%);
 }
 
-.result-display {
-    -fx-background-color: transparent;
-    -fx-font-family: "Segoe UI Light";
-    -fx-font-size: 13pt;
-    -fx-text-fill: white;
-}
-
-.result-display .label {
-    -fx-text-fill: black !important;
-}
-
 .status-bar .label {
     -fx-font-family: "Segoe UI Light";
     -fx-text-fill: white;
@@ -355,35 +344,14 @@
 
 #commandTypeLabel {
     -fx-font-size: 11px;
-    -fx-text-fill: #F70D1A;
-}
-
-#commandTextArea {
-    -fx-background-color: transparent #383838 transparent #383838;
-    -fx-background-insets: 0;
-    -fx-border-color: #383838 #383838 #ffffff #383838;
-    -fx-border-insets: 0;
-    -fx-border-width: 1;
-    -fx-control-inner-background: #383838;
-    -fx-font-family: "Segoe UI Light";
-    -fx-font-size: 13pt;
-    -fx-text-fill: white;
-    -fx-pref-height: 40px;
-    -fx-prompt-text-fill: grey;
-    -fx-min-height: 40px;
-    -fx-max-height: 200px;
+    -fx-text-fill: #1C1C1C;
 }
 
 #filterField, #personListPanel, #personWebpage {
     -fx-effect: innershadow(gaussian, black, 10, 0, 0, 0);
 }
 
-#resultDisplay .content {
-    -fx-background-color: transparent, #383838, transparent, #383838;
-    -fx-background-radius: 0;
-}
-
-#assignedStatusAndTier {
+#assignedTier {
     -fx-hgap: 7;
     -fx-vgap: 3;
 }

src/main/resources/view/css/ResultDisplay.css

@@ -0,0 +1,14 @@
+.result-display {
+    -fx-background-color: #1C1C1C;
+    -fx-control-inner-background: #1C1C1C;
+    -fx-highlight-text-fill: #1C1C1C;
+    -fx-faint-focus-color: #1C1C1C;
+    -fx-font-family: "Segoe UI Light";
+    -fx-font-size: 13pt;
+    -fx-text-fill: white;
+}
+
+#resultDisplay .content {
+    -fx-background-color: #1C1C1C, #1C1C1C, #1C1C1C, #1C1C1C;
+    -fx-background-radius: 0;
+}