ToggleSwitch: Add focused style and toggle using SPACE key

controlsfx/src/main/java/impl/org/controlsfx/skin/ToggleSwitchSkin.java

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2015, 2020, 2021, ControlsFX
+ * Copyright (c) 2015, 2022, ControlsFX
  * All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
@@ -39,6 +39,8 @@
 import javafx.geometry.Pos;
 import javafx.scene.control.Label;
 import javafx.scene.control.SkinBase;
+import javafx.scene.input.KeyCode;
+import javafx.scene.input.KeyEvent;
 import javafx.scene.layout.StackPane;
 import javafx.util.Duration;
 import org.controlsfx.control.ToggleSwitch;
@@ -50,8 +52,8 @@
 /**
  * Basic Skin implementation for the {@link ToggleSwitch}
  */
-public class ToggleSwitchSkin extends SkinBase<ToggleSwitch>
-{
+public class ToggleSwitchSkin extends SkinBase<ToggleSwitch> {
+
     private final StackPane thumb;
     private final StackPane thumbArea;
     private final Label label;
@@ -81,8 +83,13 @@ public ToggleSwitchSkin(ToggleSwitch control) {
         thumb.getStyleClass().setAll("thumb");
         thumbArea.getStyleClass().setAll("thumb-area");
 
-        thumbArea.setOnMouseReleased(event -> mousePressedOnToggleSwitch(control));
-        thumb.setOnMouseReleased(event -> mousePressedOnToggleSwitch(control));
+        control.addEventHandler(KeyEvent.KEY_PRESSED, event -> {
+            if (event.getCode() == KeyCode.SPACE) {
+                toggle(control);
+            }
+        });
+        thumbArea.setOnMouseReleased(event -> toggle(control));
+        thumb.setOnMouseReleased(event -> toggle(control));
         control.selectedProperty().addListener((observable, oldValue, newValue) -> {
             if (newValue.booleanValue() != oldValue.booleanValue())
                 selectedStateChanged();
@@ -103,7 +110,7 @@ private void selectedStateChanged() {
         transition.play();
     }
 
-    private void mousePressedOnToggleSwitch(ToggleSwitch toggleSwitch) {
+    private void toggle(ToggleSwitch toggleSwitch) {
         toggleSwitch.setSelected(!toggleSwitch.isSelected());
     }
 
@@ -112,12 +119,21 @@ private void mousePressedOnToggleSwitch(ToggleSwitch toggleSwitch) {
      * How many milliseconds it should take for the thumb to go from
      * one edge to the other
      */
-    private DoubleProperty thumbMoveAnimationTime = null;
+    private DoubleProperty thumbMoveAnimationTime;
 
     private DoubleProperty thumbMoveAnimationTimeProperty() {
         if (thumbMoveAnimationTime == null) {
             thumbMoveAnimationTime = new StyleableDoubleProperty(200) {
 
+                @Override
+                protected void invalidated() {
+                    double newValue = get();
+                    if (newValue <= 0) {
+                        newValue = 1; // set min duration as 1 for transition to play
+                    }
+                    transition.setDuration(Duration.millis(newValue));
+                }
+
                 @Override
                 public Object getBean() {
                     return ToggleSwitchSkin.this;
@@ -144,13 +160,13 @@ private double getThumbMoveAnimationTime() {
     @Override
     protected void layoutChildren(double contentX, double contentY, double contentWidth, double contentHeight) {
         ToggleSwitch toggleSwitch = getSkinnable();
-        double thumbWidth = snapSize(thumb.prefWidth(-1));
-        double thumbHeight = snapSize(thumb.prefHeight(-1));
+        double thumbWidth = snapSizeX(thumb.prefWidth(-1));
+        double thumbHeight = snapSizeY(thumb.prefHeight(-1));
         thumb.resize(thumbWidth, thumbHeight);
 
-        double thumbAreaWidth = snapSize(thumbArea.prefWidth(-1));
-        double thumbAreaHeight = snapSize(thumbArea.prefHeight(-1));
-        double thumbAreaY = snapPosition(contentY + (contentHeight / 2) - (thumbAreaHeight / 2));
+        double thumbAreaWidth = snapSizeX(thumbArea.prefWidth(-1));
+        double thumbAreaHeight = snapSizeY(thumbArea.prefHeight(-1));
+        double thumbAreaY = snapPositionY(contentY + (contentHeight / 2) - (thumbAreaHeight / 2));
 
         thumbArea.resize(thumbAreaWidth, thumbAreaHeight);
         thumbArea.setLayoutX(contentWidth - thumbAreaWidth);

controlsfx/src/main/resources/org/controlsfx/control/toggleswitch.css

@@ -3,49 +3,76 @@
  * ToggleSwitch                                                                *
  *                                                                             *
  ******************************************************************************/
-.toggle-switch{
+
+.toggle-switch {
     -thumb-move-animation-time: 200;
 }
 
+.toggle-switch:disabled {
+    -fx-opacity: 0.4;
+}
+
 .toggle-switch .label {
     -fx-font-size: 1em;
     -fx-text-fill: -fx-text-base-color;
 }
 
 .toggle-switch .thumb {
-    -fx-background-color: linear-gradient(to bottom, derive(-fx-text-box-border, -20%), derive(-fx-text-box-border, -30%)),
-                            -fx-inner-border,
-                            -fx-body-color;
+    -fx-background-color:
+            linear-gradient(to bottom, derive(-fx-text-box-border, -20%), derive(-fx-text-box-border, -30%)),
+            -fx-inner-border,
+            -fx-body-color;
     -fx-background-insets: 0, 1, 2;
     -fx-background-radius: 1.0em; /* large value to make sure this remains circular */
     -fx-padding: 0.75em;
     -fx-alignment: CENTER;
     -fx-content-display: LEFT;
 }
 
-.toggle-switch .thumb-area{
-    -fx-background-radius: 1em;
-    -fx-background-color: linear-gradient(to bottom, derive(-fx-text-box-border, -20%), derive(-fx-text-box-border, -30%)), #f5f5f5;
-    -fx-background-insets: 0, 1;
+.toggle-switch:hover .thumb {
+    -fx-color: -fx-hover-base;
 }
 
-.toggle-switch:hover .thumb{
-    -fx-color: -fx-hover-base
+.toggle-switch:focused .thumb {
+    -fx-background-color:
+            -fx-focus-color,
+            linear-gradient(to bottom, derive(-fx-text-box-border, -20%), derive(-fx-text-box-border, -30%)),
+            -fx-faint-focus-color,
+            -fx-inner-border,
+            -fx-body-color;
+    -fx-background-insets: -0.2, 0, -1.4, 1, 2;
 }
 
-.toggle-switch:selected .thumb-area{
-    -fx-background-color: linear-gradient(to bottom, derive(-fx-text-box-border, -20%), derive(-fx-text-box-border, -30%)),
-                            linear-gradient(to bottom, derive(#0b99c9, 30%), #0b99c9);
+.toggle-switch .thumb-area {
+    -fx-background-radius: 1em;
+    -fx-background-color:
+            linear-gradient(to bottom, derive(-fx-text-box-border, -20%), derive(-fx-text-box-border, -30%)),
+            #f5f5f5;
     -fx-background-insets: 0, 1;
-
+    -fx-padding: 0.75em 1.333333em 0.75em 1.333333em; /* 7 16 7 16 */
 }
 
-.toggle-switch .thumb-area
-{
-    -fx-padding: 0.75em 1.333333em 0.75em 1.333333em; /* 7 16 7 16 */
+.toggle-switch:focused .thumb-area {
+    -fx-background-color:
+            -fx-focus-color,
+            linear-gradient(to bottom, derive(-fx-text-box-border, -20%), derive(-fx-text-box-border, -30%)),
+            -fx-faint-focus-color,
+            #f5f5f5;
+    -fx-background-insets:  -0.2, 0, -1.4, 1;
 }
 
-.toggle-switch:disabled
-{
-    -fx-opacity: 0.4;
+.toggle-switch:selected .thumb-area {
+    -fx-background-color:
+            linear-gradient(to bottom, derive(-fx-text-box-border, -20%), derive(-fx-text-box-border, -30%)),
+            linear-gradient(to bottom, derive(#0b99c9, 30%), #0b99c9);
+    -fx-background-insets: 0, 1;
 }
+
+.toggle-switch:selected:focused .thumb-area {
+    -fx-background-color:
+            -fx-focus-color,
+            linear-gradient(to bottom, derive(-fx-text-box-border, -20%), derive(-fx-text-box-border, -30%)),
+            -fx-faint-focus-color,
+            linear-gradient(to bottom, derive(#0b99c9, 30%), #0b99c9);
+    -fx-background-insets: -0.2, 0, -1.4, 1;
+}