Skip to content
Snippets Groups Projects
Commit caa971c9 authored by HSoreide's avatar HSoreide
Browse files

Improve UI based on customer feedback(21/4-23) and add help-button to the 'Add...

Improve UI based on customer feedback(21/4-23) and add help-button to the 'Add ingredients to Fridge' view
parent 3c32e5b8
No related branches found
No related tags found
2 merge requests!49Improve UI based on customer feedback(21/4-23) and add help-button to the 'Add...,!48Improve UI based on customer feedback(21/4-23) and add help-button to the 'Add...
Pipeline #219152 passed
Showing with 149 additions and 75 deletions
......@@ -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);
}
......
......@@ -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);
......
......@@ -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");
}
......
......@@ -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;
......
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
......@@ -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
......@@ -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>
......@@ -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" />
......
......@@ -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>
......@@ -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>
......@@ -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" />
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment