From d8b0b76a1d3558fb6e880b0652d64587781aa8b6 Mon Sep 17 00:00:00 2001
From: Robert Goldmann <deadlocker@gmx.de>
Date: Sun, 17 Sep 2017 13:24:25 +0200
Subject: [PATCH] #96 - TagInputField --> replaced flowpane with hbox and added
scrollpane, -added help alert for tag input field (explaining schortcuts)
---
.../budgetmaster/logic/utils/Strings.java | 2 +
.../resources/languages/_de.properties | 2 +
.../resources/languages/_en.properties | 2 +
.../ui/controller/NewPaymentController.java | 20 +++++++++
.../budgetmaster/ui/fxml/NewPaymentGUI.fxml | 15 ++++---
src/de/deadlocker8/budgetmaster/ui/style.css | 4 ++
.../budgetmaster/ui/tagField/TagField.java | 45 ++++++++++++-------
7 files changed, 68 insertions(+), 22 deletions(-)
diff --git a/src/de/deadlocker8/budgetmaster/logic/utils/Strings.java b/src/de/deadlocker8/budgetmaster/logic/utils/Strings.java
index 06a0419cd..8cbd6e313 100644
--- a/src/de/deadlocker8/budgetmaster/logic/utils/Strings.java
+++ b/src/de/deadlocker8/budgetmaster/logic/utils/Strings.java
@@ -35,6 +35,7 @@ public class Strings
public static final String TITLE_DATABASE_EXPORT = "title.database.export";
public static final String TITLE_DATABASE_IMPORT = "title.database.import";
public static final String TITLE_DATEPICKER = "title.datepicker";
+ public static final String TITLE_TAGS = "title.tags";
//LOAD
public static final String LOAD_CHARTS = "load.charts";
@@ -148,6 +149,7 @@ public class Strings
public static final String INFO_TITLE_START_AFTER_UPDATE = "info.title.start.after.update";
public static final String INFO_HEADER_TEXT_START_AFTER_UPDATE = "info.header.text.start.after.update";
public static final String INFO_TEXT_START_AFTER_UPDATE = "info.text.start.after.update";
+ public static final String INFO_TAGS = "info.tags";
//WARNING
public static final String WARNING_ENDDATE_BEFORE_STARTDATE = "warning.enddate.before.startdate";
diff --git a/src/de/deadlocker8/budgetmaster/resources/languages/_de.properties b/src/de/deadlocker8/budgetmaster/resources/languages/_de.properties
index f02059656..fa670423f 100644
--- a/src/de/deadlocker8/budgetmaster/resources/languages/_de.properties
+++ b/src/de/deadlocker8/budgetmaster/resources/languages/_de.properties
@@ -33,6 +33,7 @@ title.report.save=Bericht speichern
title.database.export=Datenbank exportieren
title.database.import=Datenbank importieren
title.datepicker=Datum w�hlen
+title.tags=Das Tag-Eingabefeld
# LOAD
load.charts=Lade Diagramme...
@@ -145,6 +146,7 @@ info.text.update.available.now=Jetzt updaten
info.title.start.after.update=Update erfolgreich
info.header.text.start.after.update=BudgetMaster wurde erfolgreich auf Version {0} aktualisiert
info.text.start.after.update=Hinweis: Der BudgetMasterServer muss manuell von dir geupdated werden!
+info.tags=Es erscheinen Vorschl�ge basierend auf bereits verwendeten Tags sobald du zu tippen beginnst.\n\nEnter - F�gt den Inhalt des Eingabefelds als neuen Tag hinzu.\nPfeil nach unten - �ffnet die Vorschl�ge, wenn das Eingabefeld leer ist.
# WARNING
warning.enddate.before.startdate=Das Enddatum darf zeitlich nicht vor dem Startdatum liegen.
diff --git a/src/de/deadlocker8/budgetmaster/resources/languages/_en.properties b/src/de/deadlocker8/budgetmaster/resources/languages/_en.properties
index 44043f556..254b8bdba 100644
--- a/src/de/deadlocker8/budgetmaster/resources/languages/_en.properties
+++ b/src/de/deadlocker8/budgetmaster/resources/languages/_en.properties
@@ -33,6 +33,7 @@ title.report.save=Save Report
title.database.export=Export Database
title.database.import=Import Database
title.datepicker=Choose date
+title.tags=The Tag-Inputfield
# LOAD
load.charts=Loading Charts...
@@ -145,6 +146,7 @@ info.text.update.available.now=Update Now
info.title.start.after.update=Update successfull
info.header.text.start.after.update=Successfully updated BudgetMaster to version {0}
info.text.start.after.update=Note: You have to update the BudgetMasterServer manually!
+info.tags=Suggestions based on already used tags will show up once you start typing.\n\nEnter - Appends the current input field content as a new tag.\nArrow Down - Opens the suggestions if the input field is empty.
# WARNING
warning.enddate.before.startdate=The end date can not be earlier than the start date.
diff --git a/src/de/deadlocker8/budgetmaster/ui/controller/NewPaymentController.java b/src/de/deadlocker8/budgetmaster/ui/controller/NewPaymentController.java
index ed7d03d64..e74ac7d96 100644
--- a/src/de/deadlocker8/budgetmaster/ui/controller/NewPaymentController.java
+++ b/src/de/deadlocker8/budgetmaster/ui/controller/NewPaymentController.java
@@ -24,6 +24,7 @@ import de.deadlocker8.budgetmaster.ui.cells.SmallCategoryCell;
import de.deadlocker8.budgetmaster.ui.tagField.TagField;
import fontAwesome.FontIconType;
import javafx.fxml.FXML;
+import javafx.geometry.Insets;
import javafx.scene.control.Alert.AlertType;
import javafx.scene.control.Button;
import javafx.scene.control.CheckBox;
@@ -68,6 +69,7 @@ public class NewPaymentController extends BaseController implements Styleable
@FXML private Label labelText1, labelText2, labelText3;
@FXML private TextArea textArea;
@FXML private HBox hboxTags;
+ @FXML private Button buttonTagsHelp;
private Stage parentStage;
private Controller controller;
@@ -543,6 +545,18 @@ public class NewPaymentController extends BaseController implements Styleable
{
getStage().close();
}
+
+ @FXML
+ public void showTagsHelp()
+ {
+ AlertGenerator.showAlert(AlertType.INFORMATION,
+ Localization.getString(Strings.TITLE_TAGS),
+ "",
+ Localization.getString(Strings.INFO_TAGS),
+ controller.getIcon(),
+ getStage(),
+ null, false);
+ }
private void toggleRepeatingArea(boolean selected)
{
@@ -645,10 +659,16 @@ public class NewPaymentController extends BaseController implements Styleable
@Override
public void applyStyle()
{
+ buttonTagsHelp.setGraphic(Helpers.getFontIcon(FontIconType.QUESTION, 13, Colors.TEXT));
buttonCancel.setGraphic(Helpers.getFontIcon(FontIconType.TIMES, 17, Color.WHITE));
buttonSave.setGraphic(Helpers.getFontIcon(FontIconType.SAVE, 17, Color.WHITE));
scrollPane.setStyle("-fx-background-color: transparent");
+ buttonTagsHelp.setStyle("-fx-background-color: transparent; -fx-border-radius: 50%; -fx-border-color: " + ConvertTo.toRGBHexWithoutOpacity(Colors.TEXT));
+ buttonTagsHelp.getStyleClass().add("button-hoverable");
+ buttonTagsHelp.setPrefWidth(18);
+ buttonTagsHelp.setPrefHeight(18);
+ buttonTagsHelp.setPadding(new Insets(0));
buttonCancel.setStyle("-fx-background-color: " + ConvertTo.toRGBHexWithoutOpacity(Colors.BACKGROUND_BUTTON_BLUE) + "; -fx-text-fill: white; -fx-font-weight: bold; -fx-font-size: 15;");
buttonSave.setStyle("-fx-background-color: " + ConvertTo.toRGBHexWithoutOpacity(Colors.BACKGROUND_BUTTON_BLUE) + "; -fx-text-fill: white; -fx-font-weight: bold; -fx-font-size: 15;");
}
diff --git a/src/de/deadlocker8/budgetmaster/ui/fxml/NewPaymentGUI.fxml b/src/de/deadlocker8/budgetmaster/ui/fxml/NewPaymentGUI.fxml
index baf57e5d6..74afe775e 100644
--- a/src/de/deadlocker8/budgetmaster/ui/fxml/NewPaymentGUI.fxml
+++ b/src/de/deadlocker8/budgetmaster/ui/fxml/NewPaymentGUI.fxml
@@ -107,11 +107,16 @@
</HBox>
<HBox prefHeight="30.0" prefWidth="465.0">
<children>
- <Label prefHeight="29.0" prefWidth="125.0" text="%payment.new.label.tags">
- <font>
- <Font name="System Bold" size="14.0" />
- </font>
- </Label>
+ <VBox>
+ <children>
+ <Label prefHeight="29.0" prefWidth="125.0" text="%payment.new.label.tags">
+ <font>
+ <Font name="System Bold" size="14.0" />
+ </font>
+ </Label>
+ <Button fx:id="buttonTagsHelp" mnemonicParsing="false" onAction="#showTagsHelp" />
+ </children>
+ </VBox>
<HBox fx:id="hboxTags" alignment="CENTER_LEFT" HBox.hgrow="ALWAYS" />
</children>
</HBox>
diff --git a/src/de/deadlocker8/budgetmaster/ui/style.css b/src/de/deadlocker8/budgetmaster/ui/style.css
index 406269d69..f0c0c1e00 100644
--- a/src/de/deadlocker8/budgetmaster/ui/style.css
+++ b/src/de/deadlocker8/budgetmaster/ui/style.css
@@ -91,4 +91,8 @@
.button-hoverable:hover{
-fx-opacity: 0.6;
-fx-cursor: hand;
+}
+
+.scroll-pane > .viewport {
+ -fx-background-color: transparent;
}
\ No newline at end of file
diff --git a/src/de/deadlocker8/budgetmaster/ui/tagField/TagField.java b/src/de/deadlocker8/budgetmaster/ui/tagField/TagField.java
index fbd61105c..5a23af710 100644
--- a/src/de/deadlocker8/budgetmaster/ui/tagField/TagField.java
+++ b/src/de/deadlocker8/budgetmaster/ui/tagField/TagField.java
@@ -17,10 +17,12 @@ import javafx.geometry.Pos;
import javafx.scene.control.Alert.AlertType;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
+import javafx.scene.control.ScrollPane;
+import javafx.scene.control.ScrollPane.ScrollBarPolicy;
import javafx.scene.control.TextField;
import javafx.scene.input.KeyCode;
-import javafx.scene.layout.FlowPane;
import javafx.scene.layout.HBox;
+import javafx.scene.layout.Priority;
import javafx.scene.layout.VBox;
import javafx.util.Callback;
import tools.AlertGenerator;
@@ -31,7 +33,7 @@ public class TagField extends VBox
{
private ArrayList<Tag> tags;
private ArrayList<Tag> allTags;
- private FlowPane flowPane;
+ private HBox hboxTags;
private TextField textField;
private NewPaymentController parentController;
@@ -41,11 +43,18 @@ public class TagField extends VBox
this.allTags = allAvailableTags;
this.parentController = parentController;
- this.flowPane = initFlowPane();
- this.getChildren().add(flowPane);
+ this.hboxTags = initHboxTags();
+ ScrollPane scrollPane = new ScrollPane();
+ scrollPane.setContent(hboxTags);
+ scrollPane.setVbarPolicy(ScrollBarPolicy.NEVER);
+ scrollPane.setMinHeight(50);
+ scrollPane.setStyle("-fx-background-color: #FFFFFF; -fx-background-radius: 5px; -fx-border-color: #000000; -fx-border-width: 1 1 0 1; -fx-border-radius: 5px 5px 0 0");
+
+ this.getChildren().add(scrollPane);
+ VBox.setVgrow(scrollPane, Priority.ALWAYS);
textField = new TextField();
- textField.setStyle("-fx-background-color: #FFFFFF; -fx-border-color: #000000; -fx-border-width: 1 0 0 0; -fx-background-radius: 5px;");
+ textField.setStyle("-fx-background-color: #FFFFFF; -fx-border-color: #000000; -fx-border-width: 1; -fx-background-radius: 5px; -fx-border-radius: 0 0 5px 5px");
textField.setPromptText(Localization.getString(Strings.TAGFIELD_PLACEHOLDER));
textField.setMaxWidth(Double.MAX_VALUE);
textField.setOnKeyPressed((event)->{
@@ -53,11 +62,15 @@ public class TagField extends VBox
{
addTag(textField.getText().trim());
}
+ else if(event.getCode().equals(KeyCode.DOWN))
+ {
+ textField.setText(" ");
+ textField.setText("");
+ }
});
TextFields.bindAutoCompletion(textField, new Callback<AutoCompletionBinding.ISuggestionRequest, Collection<String>>()
{
-
@Override
public Collection<String> call(org.controlsfx.control.textfield.AutoCompletionBinding.ISuggestionRequest param)
{
@@ -76,20 +89,18 @@ public class TagField extends VBox
});
this.getChildren().add(textField);
- this.setStyle("-fx-background-color: #FFFFFF; -fx-border-color: #000000; -fx-background-radius: 5px; -fx-border-radius: 5px");
- this.setSpacing(5);
+ this.setStyle("-fx-background-color: #FFFFFF; -fx-background-radius: 5px;");
refresh(false);
}
- private FlowPane initFlowPane()
+ private HBox initHboxTags()
{
- FlowPane flowPane = new FlowPane();
- flowPane.setVgap(5);
- flowPane.setMinHeight(30);
- flowPane.setHgap(5);
- flowPane.setPadding(new Insets(5));
- return flowPane;
+ HBox newHboxTags = new HBox();
+ newHboxTags.setSpacing(5);
+ newHboxTags.setPadding(new Insets(5));
+ newHboxTags.setStyle("-fx-background-color: transparent");
+ return newHboxTags;
}
private ArrayList<String> getCompletions(ArrayList<Tag> allTags)
@@ -172,11 +183,11 @@ public class TagField extends VBox
private void refresh(boolean requstFocus)
{
- flowPane.getChildren().clear();
+ hboxTags.getChildren().clear();
for(Tag currentTag : tags)
{
- flowPane.getChildren().add(generateTag(currentTag));
+ hboxTags.getChildren().add(generateTag(currentTag));
}
if(requstFocus)
--
GitLab