Cómo cambiar el estilo CSS de la biblioteca JFoenix Color Picker?

kentforth:

Estoy haciendo alguna función en mi aplicación con JavaFX y escena del constructor

Puedo elegir un color al hacer clic en JFoenix Color Picker y luego este color se aplica a mi sello de fondo

Hice JFOenix Selector de color se parece a un icono. Había cambiado la apariencia standart del Selector de color a mi imagen

Problema # 1: Selector de color está totalmente llena de color blanco cuando Lanch un primer tiempo del programa y luego se convierta en el icono se parece a mi cuando muevo el ratón sobre él.

Problema # 2: Al hacer clic en el icono Mis trabajos con efecto dominó selector de color, pero yo no necesito ningún efecto dominó o animación al hacer clic en el Selector de color

Problema # 3: JFoenix Selector de color también se aplica el color elegido para su propio fondo y de apariencia convertirse en imagen de icono de nuevo cuando me muevo del ratón sobre él de nuevo

Problema # 4: Cuando Selector de color se coloca en la ventana Pila Panel El Selector de color de diálogo aparece sólo cuando hago clic en el lado izquierdo del icono, se ve como parte derecha del icono Selector de color está desactivada, pero necesito ventana Selector de color de diálogo para ser apareció al hacer clic en cualquier parte del icono del selector de colores

Yo estaba buscando en los archivos CSS de JFoniex Color Picker, pero no hay ninguna documentación de cómo personalizar adecuadamente Color Picker en el CSS.

Por favor, ayudarme tanto como sea posible

* Tenía una idea de utilizar el botón de conmutación (sé cómo personalizarlo a mis propias necesidades) y el lugar Selector de color de este botón de activación hacia atrás y hacer opacidad 0. Pero no sé cómo hacer que la ventana de diálogo Selector de color abierta Cuando haga clic en el botón de alternar. ¿Algunas ideas?

Yo uso el método que se llama cuando hago clic en Selector de color de fondo de la etiqueta de relleno con el color.

clase controlador:

@FXML  private Label category1;
@FXML  private JFXColorPicker colorPickerCategory;

@FXML
  void changeCategoryColor(ActionEvent event) {

    Color selectedColor = colorPickerCategory.getValue();
    category1.setBackground(new Background(new BackgroundFill(Paint.valueOf(selectedColor.toString()), CornerRadii.EMPTY, Insets.EMPTY)));

  }

CSS:

.jfx-color-picker .color-box {
    -fx-background-image: url("resources/palette.png");
    -fx-background-color: transparent;
    -fx-background-repeat: no-repeat;
    -fx-background-position: center;
    -fx-background-size: contain;
}


.jfx-color-picker:armed,
.jfx-color-picker:hover,
.jfx-color-picker:focused,
.jfx-color-picker {
    -fx-background-color: transparent, transparent, transparent, transparent;
    -fx-background-insets: 0px;
}


.color-picker > .color-picker-label > .picker-color > .picker-color-rect {
    -fx-stroke: null;
    -fx-fill : null;
}

.color-picker {
    -fx-background-color: transparent;
    -fx-color-label-visible: false;
}
.color-picker  .color-picker-label  .picker-color  {
    -fx-alignment: center;
}

.color-picker .color-picker-label .text {
    -fx-fill: transparent;
}

.jfx-color-picker:default{
    -fx-background-color: transparent;
}

Vídeo

Pantalla escena Constructor

Topaco:

La clase piel del JFXColorPickercontiene un panel y una etiqueta que tienen las clases de estilo color-labely color-box, respectivamente. La etiqueta está contenida en el panel.

Los siguientes cssmuestra el icono sin fondo (= Color seleccionado) y sin texto (= valor hexadecimal de color seleccionado)

.jfx-color-picker {
    -fx-focus-traversable: false;
    -fx-color-label-visible: false;
}

.jfx-color-picker .color-label {
    -fx-background-image: url("resources/palette.png");
    -fx-background-color: transparent;
    -fx-background-repeat: no-repeat;
    -fx-background-position: center;
    -fx-background-size: contain;
}

.jfx-color-picker .color-box {
    visibility: hidden;
}

The first part disables the text. The middle part is responsible for the display of the icon. The last part disables the background.

With that css the observed problems don't occur:

No white color, no hidden icon
Ripple-effect can be disabled optionally (programmatically)
Chosen color optionally not displayed in the background
No problems in StackPanes

My testcase consists of a BorderPane containing a StackPane in the center. The StackPane contains the JFXColorPicker and 3 buttons. The right part of the BorderPane contains a pane whose color is controlled by the color picker. The following figures show the FXML in Scenebuilder (Fig. 1), the application immediately after the start (Fig. 2), the application after the color picker is clicked (Fig. 3) and the application after a color change (Fig. 4):

Fig. 1:

Fig. 2:

Fig. 3:

Fig. 4:

The following css displays the icon with background (=selected color) and with ripple but without text (=hex value of selected color)

.jfx-color-picker {
    -fx-focus-traversable: false;
    -fx-color-label-visible: false;
}

.jfx-color-picker .color-label {
    -fx-background-image: url("resources/palette.png");
    -fx-background-color: transparent;
    -fx-background-repeat: no-repeat;
    -fx-background-position: center;
    -fx-background-size: contain;
}

The following figure shows the application after a color change.

Fig. 5:

In order to display the icon with background (=selected color), but without ripple and without text (=hex value of selected color), the following method has to be added to the controller:

public void disableRipple() {
    JFXRippler rippler = (JFXRippler) jfxColorPicker.lookup("JFXRippler");
    rippler.setDisable(true);
}

where jfxColorPicker denotes the color picker in the FXML.

The method has to be called in the main-method after the execution of the show-method:

FXMLLoader loader = new FXMLLoader(getClass().getResource("<path to FXML>"));
...
primaryStage.show();
...
Controller controller = loader.getController();
controller.disableRipple();

La clase de la piel JFXColorPickerse encuentra en JFoenix-master\jfoenix\src\main\java\com\jfoenix\skins\JFXColorPickerSkin.java. Aquí la interacción de los controles puede ser estudiado.

Cómo cambiar el estilo CSS de la biblioteca JFoenix Color Picker?

Supongo que te gusta