Add clear button to MobileSearchTextField

Introduce a clear button on the right side of MobileSearchTextField for better user experience. Refactor MobileHomePage to include the new clear button and style it properly in CSS.
dlsc-software-consulting-gmbh · Sep 4, 2024 · 8396903 · 8396903
1 parent 85ab5f6
commit 8396903
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 20 deletions.
diff --git a/components/src/main/java/com/dlsc/jfxcentral2/components/MobileSearchTextField.java b/components/src/main/java/com/dlsc/jfxcentral2/components/MobileSearchTextField.java
@@ -8,6 +8,8 @@
 import javafx.scene.layout.BorderPane;
 import javafx.scene.layout.HBox;
 import javafx.scene.layout.Priority;
+import javafx.scene.layout.Region;
+import javafx.scene.layout.StackPane;
 import org.kordamp.ikonli.javafx.FontIcon;
 import org.kordamp.ikonli.materialdesign.MaterialDesign;
 
@@ -28,8 +30,18 @@ public MobileSearchTextField() {
         BorderPane.setAlignment(icon, Pos.CENTER);
         BorderPane.setMargin(textField, new Insets(0, 10, 0, 10));
 
+        // right side clear button
+        Region arrow = new Region();
+        arrow.getStyleClass().add("arrow");
+        StackPane arrowButton = new StackPane(arrow);
+        arrowButton.getStyleClass().add("arrow-button");
+        arrowButton.setOnMousePressed(e -> textField.clear());
+        arrowButton.visibleProperty().bind(textField.textProperty().isNotEmpty());
+        BorderPane.setAlignment(arrowButton, Pos.CENTER_RIGHT);
+
         setLeft(icon);
         setCenter(textField);
+        setRight(arrowButton);
     }
 
     private final StringProperty text = new SimpleStringProperty();

diff --git a/mobile/src/main/java/com/dlsc/jfxcentral2/mobile/pages/MobileHomePage.java b/mobile/src/main/java/com/dlsc/jfxcentral2/mobile/pages/MobileHomePage.java
@@ -4,40 +4,27 @@
 import com.dlsc.jfxcentral.data.model.Blog;
 import com.dlsc.jfxcentral.data.model.Book;
 import com.dlsc.jfxcentral.data.model.Library;
-import com.dlsc.jfxcentral.data.model.LinksOfTheWeek;
 import com.dlsc.jfxcentral.data.model.ModelObject;
 import com.dlsc.jfxcentral.data.model.Person;
 import com.dlsc.jfxcentral.data.model.RealWorldApp;
 import com.dlsc.jfxcentral.data.model.Tip;
 import com.dlsc.jfxcentral.data.model.Video;
-import com.dlsc.jfxcentral2.components.MobileSearchTextField;
 import com.dlsc.jfxcentral2.components.MobilePageBase;
-
+import com.dlsc.jfxcentral2.components.MobileSearchTextField;
 import com.dlsc.jfxcentral2.mobile.components.LearnCategoryBox;
 import com.dlsc.jfxcentral2.mobile.components.MobileSearchView;
 import com.dlsc.jfxcentral2.mobile.home.CategoryAdvancedView;
 import com.dlsc.jfxcentral2.mobile.home.CategoryPreviewView;
 import com.dlsc.jfxcentral2.mobile.home.HomePageHeader;
-import com.dlsc.jfxcentral2.mobile.home.WeekLinksView;
-import com.dlsc.jfxcentral2.utils.OSUtil;
 import com.dlsc.jfxcentral2.utils.PagePath;
-import com.dlsc.jfxcentral2.utils.StringUtil;
-import javafx.beans.binding.Bindings;
 import javafx.beans.property.ObjectProperty;
 import javafx.beans.property.ReadOnlyObjectWrapper;
-import javafx.geometry.Pos;
 import javafx.scene.Node;
 import javafx.scene.control.Button;
 import javafx.scene.control.ScrollPane;
-import javafx.scene.control.ToggleButton;
-import javafx.scene.input.MouseButton;
-import javafx.scene.input.MouseEvent;
 import javafx.scene.layout.HBox;
 import javafx.scene.layout.Priority;
-import javafx.scene.layout.Region;
-import javafx.scene.layout.StackPane;
 import javafx.scene.layout.VBox;
-import javafx.scene.shape.Rectangle;
 import org.apache.commons.lang3.StringUtils;
 
 import java.util.ArrayList;
@@ -79,7 +66,7 @@ private MobileHomePage() {
 
         // search field
         MobileSearchTextField searchTextField = new MobileSearchTextField();
-        searchTextField.setRight(createSearchCancelButton());
+        searchTextField.setRight(createSearchFieldRightNode(searchTextField));
         searchTextField.setPromptText("Search for anything...");
         searchTextField.setOnMousePressed(event -> setContentType(ContentType.SEARCH));
         searchTextField.setOnTouchPressed(event -> setContentType(ContentType.SEARCH));
@@ -107,11 +94,14 @@ private MobileHomePage() {
         });
     }
 
-    private Button createSearchCancelButton() {
-        Button button = new Button("Cancel");
-        button.visibleProperty().bind(contentTypeProperty().isEqualTo(ContentType.SEARCH));
-        button.setOnMouseClicked(evt -> setContentType(ContentType.NORMAL));
-        return button;
+    private HBox createSearchFieldRightNode(MobileSearchTextField searchTextField) {
+        Button cancelButton = new Button("Cancel");
+        cancelButton.visibleProperty().bind(contentTypeProperty().isEqualTo(ContentType.SEARCH));
+        cancelButton.setOnMouseClicked(evt -> setContentType(ContentType.NORMAL));
+
+        HBox rightBox = new HBox(searchTextField.getRight(), cancelButton);
+        rightBox.getStyleClass().add("right-box");
+        return rightBox;
     }
 
     private Node createNormalView() {

diff --git a/mobile/src/main/resources/com/dlsc/jfxcentral2/mobile/mobile.css b/mobile/src/main/resources/com/dlsc/jfxcentral2/mobile/mobile.css
@@ -502,6 +502,11 @@
     -fx-padding: 0px 10px;
 }
 
+.mobile-home-page .mobile-search-text-field .right-box {
+    -fx-alignment: center-right;
+    -fx-spacing: 10px;
+}
+
 .mobile-home-page .content-box {
     -fx-padding: 5px 15px 50px 15px;
     -fx-spacing: 30px;
@@ -615,6 +620,33 @@
     -fx-background-insets: 4px;
 }
 
+.mobile-search-text-field .arrow-button {
+    -fx-background-color: -grey-20;
+    -fx-background-radius: 50%;
+    -button-size: 16px;
+    -fx-min-width: -button-size;
+    -fx-min-height: -button-size;
+    -fx-max-width: -button-size;
+    -fx-max-height: -button-size;
+}
+
+.mobile-search-text-field .arrow-button:pressed {
+    -fx-background-color: -grey-30;
+}
+
+.mobile-search-text-field .arrow-button > .arrow {
+    -fx-shape: "M9.99998 11.2122L6.36343 14.8487L5.15125 13.6366L8.78779 10L5.15125 6.36346L6.36343 5.15128L9.99998 8.78782L13.6365 5.15128L14.8487 6.36346L11.2122 10L14.8487 13.6366L13.6365 14.8487L9.99998 11.2122Z";
+    -fx-background-color: white;
+    -arrow-size: 7px;
+    -fx-min-width: -arrow-size;
+    -fx-min-height: -arrow-size;
+    -fx-max-width: -arrow-size;
+    -fx-max-height: -arrow-size;
+}
+
+/** ----------------------------------
+ * HomePageHeader
+ */
 .home-page-header {
     -fx-alignment: center;
     -fx-background-color: linear-gradient(from 0% 0% to 0% 100%, rgba(247, 249, 255, 1) 0%, rgba(247, 249, 255, 0) 100%);