Added wrapper around each country flag to add a border to each flag f…

…or stronger contrast.
dlsc-software-consulting-gmbh · Nov 12, 2023 · 047108a · 047108a
1 parent 5d5fdbc
commit 047108a
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 15 deletions.
diff --git a/phonenumberfx/src/main/java/com/dlsc/phonenumberfx/PhoneNumberField.java b/phonenumberfx/src/main/java/com/dlsc/phonenumberfx/PhoneNumberField.java
@@ -26,6 +26,7 @@
 import javafx.scene.image.ImageView;
 import javafx.scene.input.KeyCode;
 import javafx.scene.input.KeyEvent;
+import javafx.scene.layout.StackPane;
 import javafx.util.Callback;
 import org.kordamp.ikonli.bootstrapicons.BootstrapIcons;
 import org.kordamp.ikonli.javafx.FontIcon;
@@ -102,8 +103,13 @@ public PhoneNumberField() {
                 imageView.setFitHeight(24);
                 imageView.setFitWidth(24);
                 imageView.setPreserveRatio(true);
+                imageView.getStyleClass().add("flag-image-view");
                 Optional.ofNullable(FLAG_IMAGES.get(code)).ifPresent(imageView::setImage);
-                return imageView;
+
+                StackPane wrapper = new StackPane(imageView);
+                wrapper.getStyleClass().add("flag-wrapper");
+
+                return wrapper;
             }
 
             return new FontIcon(BootstrapIcons.GLOBE2);

diff --git a/phonenumberfx/src/main/java/com/dlsc/phonenumberfx/skins/PhoneNumberFieldSkin.java b/phonenumberfx/src/main/java/com/dlsc/phonenumberfx/skins/PhoneNumberFieldSkin.java
@@ -5,7 +5,6 @@
 import javafx.collections.FXCollections;
 import javafx.collections.ObservableList;
 import javafx.geometry.Bounds;
-import javafx.scene.Node;
 import javafx.scene.control.ComboBox;
 import javafx.scene.control.ListCell;
 import javafx.scene.control.Skin;
@@ -119,7 +118,7 @@ public PhoneNumberEditor(TextField textField) {
             StackPane flagBox = new StackPane();
             flagBox.getStyleClass().add("flag-box");
 
-            Runnable flagUpdater = () -> flagBox.getChildren().setAll(getCountryCodeFlagView(getSkinnable().getCountryCallingCode()));
+            Runnable flagUpdater = () -> flagBox.getChildren().setAll(getSkinnable().getCountryCodeViewFactory().call(getSkinnable().getCountryCallingCode()));
             getSkinnable().countryCallingCodeProperty().addListener(obs -> flagUpdater.run());
             getSkinnable().countryCodeViewFactoryProperty().addListener(obs -> flagUpdater.run());
             flagUpdater.run();
@@ -170,15 +169,15 @@ public String getUserAgentStylesheet() {
         }
 
         @Override
-        protected void updateItem(PhoneNumberField.CountryCallingCode item, boolean empty) {
-            super.updateItem(item, empty);
+        protected void updateItem(PhoneNumberField.CountryCallingCode code, boolean empty) {
+            super.updateItem(code, empty);
 
             int index = -1;
 
-            if (item != null && !empty) {
-                setText(new Locale("en", item.iso2Code()).getDisplayCountry());
-                setGraphic(getCountryCodeFlagView(item));
-                index = getSkinnable().getPreferredCountryCodes().indexOf(item);
+            if (code != null && !empty) {
+                setText(new Locale("en", code.iso2Code()).getDisplayCountry());
+                setGraphic(getSkinnable().getCountryCodeViewFactory().call(code));
+                index = getSkinnable().getPreferredCountryCodes().indexOf(code);
             } else {
                 setText(null);
                 setGraphic(null);
@@ -196,10 +195,5 @@ protected void updateItem(PhoneNumberField.CountryCallingCode item, boolean empt
                 getStyleClass().remove("last");
             }
         }
-
-    }
-
-    private Node getCountryCodeFlagView(PhoneNumberField.CountryCallingCode code) {
-        return getSkinnable().getCountryCodeViewFactory().call(code);
     }
 }
diff --git a/phonenumberfx/src/main/resources/com/dlsc/phonenumberfx/phone-number-field.css b/phonenumberfx/src/main/resources/com/dlsc/phonenumberfx/phone-number-field.css
@@ -63,8 +63,15 @@
     -fx-alignment: center;
 }
 
-.country-calling-code-cell {
+.phone-number-field > .combo-box .list-view .country-calling-code-cell {
     -fx-padding: 5px;
 }
 
+.phone-number-field > .combo-box .list-view .country-calling-code-cell.preferred {
+    -fx-font-weight: bold;
+}
 
+.phone-number-field > .combo-box .list-view .country-calling-code-cell .flag-wrapper {
+    -fx-padding: 1px;
+    -fx-background-color: -fx-selection-bar-text;
+}