How to change CSS style of JFoenix Color Picker library?

user_10191398 0
Viewed 1019

I'm making some function in my application with JavaFX and Scene Builder

I can pick a color when clicking on JFoenix Color Picker and then this color applies to my label background

I made JFOenix Color Picker look like an icon. I had changed the standart appearence of Color Picker to my image

Problem #1: Color Picker is totally filled with white color when I lanch a program first time and then it become looks like my icon when I move the mouse over it.

Problem #2:When I click my icon with Color Picker ripple effect works, but I don't need any ripple effect or animation when I click on Color Picker

Problem #3: JFoenix Color Picker also applies chosen color to it's own background and it's appearence become to icon image again when I move mouse over it again

Problem #4: When Color Picker is placed in Stack Pane The Color Picker dialog window appears only when I click on left side of the icon, it looks like right side of Color Picker icon is disabled, but I need Color Picker dialog window to be appeared when I click to any part of Color Picker icon

I was searching into CSS files of JFoniex Color Picker, but there is no any documentation how to customize properly Color Picker in CSS.

Please, help me as much as you can

*I had an idea to use toggle button(I know how to customize it to my own needs) and place Color Picker backward this toggle button and make opacity 0. But I don't know how to make Color Picker dialog window open When I click on toggle button. Any ideas?

I use method that is called when I click Color Picker to fill label's background with color.

Controller class:

@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;
}

Video

enter image description hereScene Builder Screen

scenebuilder javafx java
2 Answers

The skin-class of the JFXColorPicker contains a pane and a label which have the style classes color-label and color-box, respectively. The label is contained in the pane.

The following css displays the icon without background (=selected color) and 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;
}

.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:

enter image description here

Fig. 2:

enter image description here

Fig. 3:

enter image description here

Fig. 4:

enter image description here

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:

enter image description here

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();

The skin-class of the JFXColorPicker is located at JFoenix-master\jfoenix\src\main\java\com\jfoenix\skins\JFXColorPickerSkin.java. Here the interaction of the controls can be studied.

user_90140970

EDIT: @Topaco wrote solution above, but I solved my problems in other way: I made toggle button and it's style to look like an icon. I placed JFOenix Color Picker above that toggle button and made Color PIcker's opacity to 0. It looks like I click on toggle button with icon, but I actually click on Color Picker because it is placed ABOVE toggle button.

JFoenix Color Picker is not wrapped into any Pane. It is placed just in Grid Pane as Stack Pane of toggle buttons. Color Picker is broght forward. Toggle Button is placed backward

user_101913980
Related