From caa971c99c0b90cd3db494a4504f69ffbed5a8d5 Mon Sep 17 00:00:00 2001
From: HSoreide <sofie.scisly@gmail.com>
Date: Sat, 22 Apr 2023 17:00:32 +0200
Subject: [PATCH] Improve UI based on customer feedback(21/4-23) and add
help-button to the 'Add ingredients to Fridge' view
---
.../controller/AddIngredientController.java | 30 +++++++--
.../demo/controller/AllRecipesController.java | 2 +-
.../controller/IngredientTileController.java | 1 +
.../demo/controller/RecipeTileController.java | 6 +-
src/main/resources/recipes/Fridge.register | 26 +++++---
src/main/resources/style.css | 34 ++++++++---
src/main/resources/view/AddIngredient.fxml | 39 ++++++++----
src/main/resources/view/IngredientTile.fxml | 6 +-
src/main/resources/view/Recipe.fxml | 13 ++--
src/main/resources/view/RecipeTile.fxml | 61 ++++++++++++-------
src/main/resources/view/SuggestRecipes.fxml | 6 +-
11 files changed, 149 insertions(+), 75 deletions(-)
diff --git a/src/main/java/no/ntnu/idatt1002/demo/controller/AddIngredientController.java b/src/main/java/no/ntnu/idatt1002/demo/controller/AddIngredientController.java
index 108f1343..3566206a 100644
--- a/src/main/java/no/ntnu/idatt1002/demo/controller/AddIngredientController.java
+++ b/src/main/java/no/ntnu/idatt1002/demo/controller/AddIngredientController.java
@@ -6,8 +6,7 @@ import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.fxml.FXML;
import javafx.fxml.Initializable;
-import javafx.scene.control.Label;
-import javafx.scene.control.ListView;
+import javafx.scene.control.*;
import javafx.event.ActionEvent;
import java.io.IOException;
import java.net.URL;
@@ -15,8 +14,8 @@ import java.util.Arrays;
import java.util.List;
import java.util.ResourceBundle;
import java.util.stream.Collectors;
-import javafx.scene.control.Button;
-import javafx.scene.control.TextField;
+
+import javafx.scene.text.Text;
import javafx.util.Duration;
import no.ntnu.idatt1002.demo.data.recipes.FileHandler;
import no.ntnu.idatt1002.demo.data.recipes.FoodItem;
@@ -30,6 +29,9 @@ public class AddIngredientController implements Initializable {
@FXML
private Button addBtn;
+ @FXML
+ private Button helpBtn;
+
@FXML
private ListView<String> listView;
@@ -44,6 +46,25 @@ public class AddIngredientController implements Initializable {
private String statusText = "Added: ";
+ /**
+ * The help method is called whenever the help-button (displayed as a round button with a question mark on it) is
+ * clicked. An alert box appears on the screen with information about how the current window is navigated to
+ * perform the intended use.
+ */
+ @FXML
+ void help () {
+ Alert a = new Alert(Alert.AlertType.INFORMATION);
+ a.setTitle("How to add ingredients to the fridge");
+ String information = "Write a word in the search field and either press 'ENTER' on your keyboard or " +
+ "press the button 'Search' to perform the search. Then click on the food you want to add and " +
+ "press the 'ADD' button. If the food was added to the fridge, it will appear below the 'ADD' button, " +
+ "if not, it was probably in the fridge already!";
+
+ a.setContentText(information);
+ a.showAndWait();
+ }
+
+
@FXML
void addToFridge(ActionEvent event) throws IOException {
IngredientsAtHand ingredientsAtHand = FileHandler.readIngredientsAtHand("Fridge");
@@ -57,6 +78,7 @@ public class AddIngredientController implements Initializable {
if(status.isVisible() && status.getText().isBlank()) {
statusText += String.format("%s", item.label);
+ //status.setStyle("-fx-background-color: rgba(255,255,255,0.5)");
} else if (status.isVisible()){
statusText += String.format(", %s", item.label);
}
diff --git a/src/main/java/no/ntnu/idatt1002/demo/controller/AllRecipesController.java b/src/main/java/no/ntnu/idatt1002/demo/controller/AllRecipesController.java
index 8c4a90b1..30e59521 100644
--- a/src/main/java/no/ntnu/idatt1002/demo/controller/AllRecipesController.java
+++ b/src/main/java/no/ntnu/idatt1002/demo/controller/AllRecipesController.java
@@ -89,7 +89,7 @@ private float percent(int a, int b) {
ArrayList<Recipe> sortedRecipes = recipeRegister.pickBestFits(numberOfRecipes, ingredientsAtHand);
recipes = FXCollections.observableArrayList(sortedRecipes.stream().map(recipe -> {
- return String.format("# %s - %d missing ingredients (%.2f %%)", recipe.getName(), recipe.getMissingIngredients(), percent(recipe.getIngredientList().size() - recipe.getMissingIngredients(),recipe.getIngredientList().size()));
+ return String.format("# %s - %d missing ingredients (%.2f %% covered)", recipe.getName(), recipe.getMissingIngredients(), percent(recipe.getIngredientList().size() - recipe.getMissingIngredients(),recipe.getIngredientList().size()));
}).toList());
allList.setItems(recipes);
diff --git a/src/main/java/no/ntnu/idatt1002/demo/controller/IngredientTileController.java b/src/main/java/no/ntnu/idatt1002/demo/controller/IngredientTileController.java
index ba5e90e7..1e82f77e 100644
--- a/src/main/java/no/ntnu/idatt1002/demo/controller/IngredientTileController.java
+++ b/src/main/java/no/ntnu/idatt1002/demo/controller/IngredientTileController.java
@@ -24,6 +24,7 @@ public class IngredientTileController implements Initializable {
.append(ingredient.getFoodType().label.substring(1));
sb.append(" ").append(ingredient.getAmount()).append(" ").append(ingredient.getUnit().label);
text.setText(String.valueOf(sb));
+ text.setStyle("-fx-font-size: 18");
}
diff --git a/src/main/java/no/ntnu/idatt1002/demo/controller/RecipeTileController.java b/src/main/java/no/ntnu/idatt1002/demo/controller/RecipeTileController.java
index 0e832a02..c088e46e 100644
--- a/src/main/java/no/ntnu/idatt1002/demo/controller/RecipeTileController.java
+++ b/src/main/java/no/ntnu/idatt1002/demo/controller/RecipeTileController.java
@@ -8,7 +8,6 @@ import javafx.scene.Node;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.scene.control.*;
-import javafx.scene.layout.VBox;
import javafx.stage.Stage;
import no.ntnu.idatt1002.demo.data.recipes.FileHandler;
import no.ntnu.idatt1002.demo.data.recipes.Recipe;
@@ -21,14 +20,11 @@ import java.util.ResourceBundle;
public class RecipeTileController implements Initializable {
@FXML
- private Button nameTag;
+ private Label nameTag;
@FXML
private Label missingTag;
- @FXML
- private VBox recipeTile;
-
private RecipeRegister recipeRegister;
diff --git a/src/main/resources/recipes/Fridge.register b/src/main/resources/recipes/Fridge.register
index c39c5a87..a2241d99 100644
--- a/src/main/resources/recipes/Fridge.register
+++ b/src/main/resources/recipes/Fridge.register
@@ -1,9 +1,19 @@
+CARROT
+MILK
+AVOCADO
+CANNED_TOMATO
+CELERY
+BROTH
+BAY_LEAF
+DRY_OREGANO
+WHITE_BEANS
+DRY_THYME
+FRESH_YEAST
+GARLIC_CLOVE
+RED_ONION
+PIE_DOUGH
+BROCCOLI
+LAM
+CHILLI_POWDER
+SAUSAGE
YELLOW_CHEESE
-MINCED_MEAT
-ONION
-HAM
-WHEAT_FLOUR
-ORANGE
-OIL
-POTATO
-OLIVE_OIL
diff --git a/src/main/resources/style.css b/src/main/resources/style.css
index bcdc1493..57dceb0f 100644
--- a/src/main/resources/style.css
+++ b/src/main/resources/style.css
@@ -10,15 +10,13 @@
}
.button-style {
- //-fx-background-color: linear-gradient(#8ca45b, #1e5b5b);
-fx-background-color: white;
-fx-text-fill: black;
-fx-background-radius: 30;
-fx-background-insets: 0;
-fx-font-family: "JetBrains Mono";
-
-fx-font-size: 16;
- //-fx-text-fill: white;
+
}
.welcome-button {
@@ -36,7 +34,7 @@
}
#on-white {
- -fx-background-color: #79b2b2;
+ -fx-background-color: #83b6b6;
-fx-text-fill: black;
}
@@ -80,9 +78,10 @@
}
.list-cell{
- -fx-font-size:18.0;
+ -fx-font-size:20.0;
}
+
.list-cell:even {
-fx-background-color: rgba(255, 255, 255, 0.7);
}
@@ -101,12 +100,17 @@
-fx-alignment: center;
}
-.ingredient:hover {
- -fx-scale-x: 1.05;
- -fx-scale-y: 1.05;
- -fx-scale-z: 1.05;
+/*#ingredient-label {
+ -fx-font-family: "JetBrains Mono Medium";
}
+#ingredient:hover {
+ -fx-text-fill: red;
+ -fx-scale-x: 1.03;
+ -fx-scale-y: 1.03;
+ -fx-scale-z: 1.03;
+}*/
+
.recipe-instructions {
-fx-font-size: 16;
-fx-font-style: italic;
@@ -122,9 +126,19 @@
.scroll-pane > .viewport {
-fx-background-color: transparent;
}
+
.scroll-pane {
- -fx-background-color: rgba(255, 255, 255, 0.25);
+ -fx-background-color: rgba(255, 255, 255, 0.35);
-fx-border-width: 5;
-fx-border-radius: 5;
-fx-border-color: rgba(255, 255, 255, 0.75);
}
+
+#help {
+ -fx-font-size: 30;
+ -fx-font-weight: bold;
+ -fx-background-color: #e09188;
+ -fx-border-width: 5;
+ -fx-border-radius: 30;
+ -fx-border-color: white;
+}
\ No newline at end of file
diff --git a/src/main/resources/view/AddIngredient.fxml b/src/main/resources/view/AddIngredient.fxml
index eb4ecda7..3384b11d 100644
--- a/src/main/resources/view/AddIngredient.fxml
+++ b/src/main/resources/view/AddIngredient.fxml
@@ -5,7 +5,7 @@
<?import javafx.scene.layout.*?>
<?import javafx.scene.text.*?>
-<DialogPane id="dialog-pane" expanded="true" prefHeight="524.0" prefWidth="614.0" stylesheets="@../style.css" xmlns="http://javafx.com/javafx/17.0.2-ea" xmlns:fx="http://javafx.com/fxml/1" fx:controller="no.ntnu.idatt1002.demo.controller.AddIngredientController">
+<DialogPane id="dialog-pane" expanded="true" prefHeight="555.0" prefWidth="614.0" stylesheets="@../style.css" xmlns="http://javafx.com/javafx/17.0.2-ea" xmlns:fx="http://javafx.com/fxml/1" fx:controller="no.ntnu.idatt1002.demo.controller.AddIngredientController">
<content>
<AnchorPane prefHeight="400.0" prefWidth="600.0">
<padding>
@@ -56,9 +56,9 @@
</Pane>
<Pane prefHeight="100.0" prefWidth="614.0">
<children>
- <Label fx:id="status" layoutX="28.0" layoutY="6.0" prefHeight="44.0" prefWidth="558.0" textAlignment="CENTER" wrapText="true">
+ <Label fx:id="status" layoutX="28.0" layoutY="-4.0" prefHeight="44.0" prefWidth="558.0" textAlignment="CENTER" wrapText="true">
<font>
- <Font size="14.0" />
+ <Font size="20.0" />
</font></Label>
</children>
</Pane>
@@ -66,17 +66,30 @@
</VBox>
</children></AnchorPane>
</content>
- <header>
- <Label fx:id="addIngredientPane" alignment="CENTER" contentDisplay="CENTER" styleClass="font" stylesheets="@../style.css" text="Add an ingredient to the fridge">
- <font>
- <Font size="24.0" />
- </font>
- <padding>
- <Insets bottom="25.0" top="20.0" />
- </padding>
- </Label>
- </header>
<buttonTypes>
<ButtonType fx:constant="CLOSE" />
</buttonTypes>
+ <header>
+ <HBox prefHeight="100.0" prefWidth="200.0">
+ <children>
+ <Pane prefHeight="100.0" prefWidth="543.0">
+ <children>
+ <Label layoutX="19.0" layoutY="30.0" prefWidth="516.0" styleClass="head-line" stylesheets="@../style.css" text="Add ingredients to Fridge">
+ <font>
+ <Font size="30.0" />
+ </font>
+ </Label>
+ </children>
+ </Pane>
+ <Pane prefHeight="100.0" prefWidth="102.0">
+ <children>
+ <Button id="help" fx:id="helpBtn" layoutX="9.0" layoutY="14.0" mnemonicParsing="false" onAction="#help" styleClass="button-style" stylesheets="@../style.css" text="?">
+ <font>
+ <Font name="System Bold" size="36.0" />
+ </font></Button>
+ </children>
+ </Pane>
+ </children>
+ </HBox>
+ </header>
</DialogPane>
diff --git a/src/main/resources/view/IngredientTile.fxml b/src/main/resources/view/IngredientTile.fxml
index 4940a578..bd749e3a 100644
--- a/src/main/resources/view/IngredientTile.fxml
+++ b/src/main/resources/view/IngredientTile.fxml
@@ -5,11 +5,11 @@
<?import javafx.scene.layout.*?>
<?import javafx.scene.text.*?>
-<Pane fx:id="ingredientPane" styleClass="ingredient" stylesheets="@../style.css" xmlns="http://javafx.com/javafx/17.0.2-ea" xmlns:fx="http://javafx.com/fxml/1" fx:controller="no.ntnu.idatt1002.demo.controller.IngredientTileController">
+<Pane id="ingredient" fx:id="ingredientPane" mouseTransparent="true" stylesheets="@../style.css" xmlns="http://javafx.com/javafx/17.0.2-ea" xmlns:fx="http://javafx.com/fxml/1" fx:controller="no.ntnu.idatt1002.demo.controller.IngredientTileController">
<children>
- <Label fx:id="text" prefHeight="40.0" prefWidth="250.0" styleClass="font" stylesheets="@../style.css" text="Ingredient">
+ <Label id="ingredient-label" fx:id="text" prefHeight="40.0" prefWidth="250.0" styleClass="font" stylesheets="@../style.css" text="Ingredient">
<font>
- <Font name="Ani" size="14.0" />
+ <Font name="Ani" size="18.0" />
</font>
<padding>
<Insets left="15.0" />
diff --git a/src/main/resources/view/Recipe.fxml b/src/main/resources/view/Recipe.fxml
index 1054e5da..c4e6812c 100644
--- a/src/main/resources/view/Recipe.fxml
+++ b/src/main/resources/view/Recipe.fxml
@@ -27,20 +27,23 @@
</Pane>
<Pane prefHeight="103.0" prefWidth="853.0">
<children>
- <Label fx:id="recipeName" alignment="CENTER" contentDisplay="CENTER" layoutX="44.0" layoutY="38.0" styleClass="head-line" stylesheets="@../style.css" text="RecipeName" textAlignment="CENTER">
+ <Label fx:id="recipeName" alignment="CENTER" contentDisplay="CENTER" layoutX="44.0" layoutY="38.0" styleClass="head-line" stylesheets="@../style.css" text="RecipeName" textAlignment="CENTER" wrapText="true">
<font>
<Font size="36.0" />
</font>
</Label>
</children>
+ <HBox.margin>
+ <Insets right="50.0" />
+ </HBox.margin>
</Pane>
</children>
</HBox>
</top>
<center>
- <HBox prefHeight="100.0" prefWidth="200.0" spacing="50.0" BorderPane.alignment="CENTER">
+ <HBox prefHeight="100.0" prefWidth="200.0" spacing="20.0" BorderPane.alignment="CENTER">
<children>
- <ScrollPane prefHeight="431.0" prefWidth="271.0" stylesheets="@../style.css">
+ <ScrollPane prefHeight="454.0" prefWidth="300.0" stylesheets="@../style.css">
<content>
<AnchorPane prefHeight="449.0" prefWidth="262.0" styleClass="ingredient-pane" stylesheets="@../style.css">
<children>
@@ -52,7 +55,7 @@
</AnchorPane>
</content>
</ScrollPane>
- <ScrollPane prefHeight="429.0" prefWidth="632.0">
+ <ScrollPane prefHeight="460.0" prefWidth="668.0">
<content>
<Pane id="recipe-instructions" stylesheets="@../style.css">
<children>
@@ -74,7 +77,7 @@
<Pane prefHeight="77.0" prefWidth="1130.0" BorderPane.alignment="CENTER" />
</bottom>
<right>
- <Pane prefHeight="454.0" prefWidth="122.0" BorderPane.alignment="CENTER" />
+ <Pane prefHeight="454.0" prefWidth="84.0" BorderPane.alignment="CENTER" />
</right></BorderPane>
</children>
</AnchorPane>
diff --git a/src/main/resources/view/RecipeTile.fxml b/src/main/resources/view/RecipeTile.fxml
index b4f2c070..9f4c0327 100644
--- a/src/main/resources/view/RecipeTile.fxml
+++ b/src/main/resources/view/RecipeTile.fxml
@@ -7,34 +7,49 @@
<VBox fx:id="recipeTile" prefHeight="220.0" prefWidth="280.0" styleClass="recipe-tile" stylesheets="@../style.css" xmlns="http://javafx.com/javafx/17.0.2-ea" xmlns:fx="http://javafx.com/fxml/1" fx:controller="no.ntnu.idatt1002.demo.controller.RecipeTileController">
<children>
- <Pane fx:id="namePane" prefHeight="178.0" prefWidth="268.0">
+ <Pane fx:id="namePane" prefHeight="218.0" prefWidth="268.0">
<children>
- <Button fx:id="nameTag" mnemonicParsing="false" onAction="#tileClick" prefHeight="149.0" prefWidth="268.0" styleClass="tile-button" stylesheets="@../style.css" text="nameOfRecipe">
+ <Button fx:id="tileBtn" alignment="TOP_LEFT" layoutX="-6.0" mnemonicParsing="false" onAction="#tileClick" prefHeight="213.0" prefWidth="280.0" styleClass="tile-button" stylesheets="@../style.css" textAlignment="CENTER">
<font>
- <Font size="24.0" />
+ <Font name="System Bold" size="24.0" />
</font>
+ <graphic>
+ <VBox prefHeight="199.0" prefWidth="95.0">
+ <children>
+ <Pane prefHeight="132.0" prefWidth="248.0" styleClass="font" stylesheets="@../style.css">
+ <children>
+ <Label fx:id="nameTag" alignment="CENTER" contentDisplay="CENTER" prefHeight="135.0" prefWidth="250.0" text="nameOfRecipe" textAlignment="CENTER" wrapText="true">
+ <font>
+ <Font name="System Bold" size="24.0" />
+ </font>
+ </Label>
+ </children>
+ </Pane>
+ <HBox accessibleRole="BUTTON" prefHeight="66.0" prefWidth="268.0">
+ <children>
+ <Label alignment="CENTER" prefHeight="66.0" prefWidth="243.0" text="Missing ingredients:" textAlignment="CENTER" wrapText="true">
+ <font>
+ <Font size="24.0" />
+ </font>
+ <opaqueInsets>
+ <Insets left="20.0" right="20.0" />
+ </opaqueInsets>
+ </Label>
+ <Label id="noMissingIngredients" fx:id="missingTag" alignment="CENTER" contentDisplay="CENTER" prefHeight="69.0" prefWidth="127.0" text="# missing">
+ <font>
+ <Font size="24.0" />
+ </font>
+ </Label>
+ </children>
+ <opaqueInsets>
+ <Insets left="20.0" right="20.0" />
+ </opaqueInsets>
+ </HBox>
+ </children>
+ </VBox>
+ </graphic>
</Button>
</children>
</Pane>
- <HBox prefHeight="88.0" prefWidth="500.0">
- <children>
- <Label alignment="CENTER" prefHeight="63.0" prefWidth="292.0" text="Ingredients missing:">
- <font>
- <Font size="18.0" />
- </font>
- <opaqueInsets>
- <Insets left="20.0" right="20.0" />
- </opaqueInsets>
- </Label>
- <Label id="noMissingIngredients" fx:id="missingTag" alignment="CENTER" contentDisplay="CENTER" prefHeight="69.0" prefWidth="127.0" text="# missing">
- <font>
- <Font size="24.0" />
- </font>
- </Label>
- </children>
- <opaqueInsets>
- <Insets left="20.0" right="20.0" />
- </opaqueInsets>
- </HBox>
</children>
</VBox>
diff --git a/src/main/resources/view/SuggestRecipes.fxml b/src/main/resources/view/SuggestRecipes.fxml
index 7be5df95..adb817c1 100644
--- a/src/main/resources/view/SuggestRecipes.fxml
+++ b/src/main/resources/view/SuggestRecipes.fxml
@@ -30,7 +30,7 @@
</Label>
</children>
</Pane>
- <ListView id="list-cell" fx:id="fridgeList" prefHeight="470.0" prefWidth="378.0" stylesheets="@../style.css">
+ <ListView fx:id="fridgeList" prefHeight="470.0" prefWidth="378.0" styleClass="list-cell" stylesheets="@../style.css">
<VBox.margin>
<Insets right="20.0" />
</VBox.margin></ListView>
@@ -60,7 +60,7 @@
<children>
<Label fx:id="missingList" stylesheets="@../style.css">
<font>
- <Font name="System Bold" size="14.0" />
+ <Font name="System Bold" size="20.0" />
</font>
<padding>
<Insets left="20.0" right="20.0" />
@@ -106,7 +106,7 @@
</BorderPane>
</top>
<center>
- <GridPane fx:id="recipeGrid" hgap="20.0" prefWidth="603.0" vgap="20.0" BorderPane.alignment="CENTER">
+ <GridPane fx:id="recipeGrid" hgap="20.0" prefHeight="443.0" prefWidth="609.0" vgap="20.0" BorderPane.alignment="CENTER">
<columnConstraints>
<ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
<ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
--
GitLab