PTBAS-738: Combine SearchField and Button into one ComboBox

Author: MomdAli

src/main/java/de/doubleslash/keeptime/view/ExternalProjectsSyncController.java

@@ -236,9 +236,8 @@ public void initForDate(LocalDate currentReportDate, List<Work> currentWorkItems
          mappingTableView.scrollTo(items.size() - 1);
       });
 
-      heimatTaskSearchContainer.getChildren().add(heimatTaskSearchPopup.getTextField());
-      heimatTaskSearchContainer.getChildren().add(heimatTaskSearchPopup.getSuggestionsButton());
-      heimatTaskSearchContainer.setSpacing(3);
+      heimatTaskSearchContainer.getChildren().add(heimatTaskSearchPopup.getComboBox());
+      HBox.setHgrow(heimatTaskSearchPopup.getComboBox(), Priority.ALWAYS);
    }
 
    @FXML

src/main/java/de/doubleslash/keeptime/viewpopup/SearchPopup.java

@@ -26,6 +26,7 @@ public class SearchPopup<T> {
    private ObservableList<T> allItems = FXCollections.observableArrayList();
    private Consumer<T> selectionHandler;
    private Function<T, String> displayTextFunction = Object::toString;
+   private final HBox comboBox;
 
    private ObservableList<T> observedItemsForListener = null;
    private final ListChangeListener<T> listChangeListener = c -> filterList(searchField.getText());
@@ -34,6 +35,8 @@ public SearchPopup() {
       popup.setAutoHide(true);
       popup.getContent().add(suggestionList);
 
+      comboBox = new HBox(searchField, showSuggestionsButton);
+
       setupStyle();
 
       showSuggestionsButton.setOnAction(ae -> {
@@ -116,10 +119,10 @@ private void handleSelection(T selected) {
    }
 
    private void setupStyle() {
-      HBox.setHgrow(searchField, Priority.ALWAYS);
       searchField.setPromptText("Select project…");
-      searchField.getStyleClass().add("combo-box");
-
+      searchField.getStyleClass().add("search-popup");
+      HBox.setHgrow(searchField, Priority.ALWAYS);
+      searchField.setMaxWidth(Double.MAX_VALUE); // Allow growing
       suggestionList.getStyleClass().add("scroll-pane");
       suggestionList.setMaxHeight(200);
 
@@ -147,7 +150,10 @@ protected void updateItem(T item, boolean empty) {
          }
       });
 
-      showSuggestionsButton.getStyleClass().add("secondary-button");
+      showSuggestionsButton.getStyleClass().add("search-popup-button");
+
+      comboBox.getStyleClass().add("search-popup-container");
+      comboBox.setAlignment(Pos.CENTER_LEFT);
    }
 
 
@@ -171,12 +177,8 @@ public void setDisplayTextFunction(Function<T, String> func) {
       filterList(searchField.getText());
    }
 
-   public TextField getTextField() {
-      return searchField;
-   }
-
-   public Button getSuggestionsButton() {
-      return showSuggestionsButton;
+   public HBox getComboBox() {
+      return comboBox;
    }
 
    public void show(Node owner) {

src/main/resources/css/dsStyles.css

@@ -205,4 +205,55 @@
 .tree-table-row-cell:selected .tree-table-cell {
     -fx-border-color: #C6C6C6;
     -fx-border-width: 0 0.5px 0 0;
+}
+
+.search-popup-container {
+    -fx-background-color: transparent;
+}
+
+.search-popup {
+    -fx-background-radius: 8 0 0 8;
+    -fx-border-radius: 8 0 0 8;
+    -fx-border-color: #00759E transparent #00759E #00759E;
+    -fx-border-width: 1px 0 1px 1px;
+    -fx-background-color: white;
+    -fx-pref-height: 32px;
+    -fx-min-height: 32px;
+    -fx-max-height: 32px;
+    -fx-font-size: 13px;
+    -fx-text-fill: #00759E;
+    -fx-padding: 0 0 0 8;
+}
+
+.search-popup:focused {
+    -fx-border-color: #0056b3 transparent #0056b3 #0056b3;
+}
+
+.search-popup:hover {
+    -fx-border-color: #00A5E1;
+}
+
+.search-popup-button {
+    -fx-background-radius: 0 8 8 0;
+    -fx-border-radius: 0 8 8 0;
+    -fx-border-color: #00759E #00759E #00759E transparent;
+    -fx-border-width: 1px 1px 1px 0;
+    -fx-background-color: white;
+    -fx-pref-height: 32px;
+    -fx-min-height: 32px;
+    -fx-max-height: 32px;
+    -fx-pref-width: 32px;
+    -fx-font-size: 13px;
+    -fx-cursor: hand;
+    -fx-text-fill: #00759E;
+    -fx-padding: 0;
+    -fx-content-display: center;
+    -fx-alignment: center;
+}
+
+.search-popup-button:hover {
+    -fx-text-fill: #00A5E1;
+}
+.search-popup-button:pressed {
+    -fx-text-fill: #77DDFF;
 }