Как изменить стиль CSS библиотеки JFoenix Color Picker?

Question

Я делаю какую-то функцию в своем приложении с JavaFX и Scene Builder.

. Я могу выбрать цвет, нажимая на JFoenix Color Picker, и затем этот цвет применяется к фону моей метки

Iсделал JFOenix Color Picker похожим на иконку.Я изменил стандартную форму Color Picker на свое изображение

Проблема № 1: Color Picker полностью заполняется белым цветом, когда я запускаю программу в первый раз, а затем он становится похож на мой значок, когда я двигаю мышьповерх него.

Проблема № 2: Когда я щелкаю свой значок с помощью Color Picker, работает эффект ряби, но мне не нужен какой-либо эффект ряби или анимация, когда я нажимаю на Color Picker

Problem #3: JFoenix Color Picker также применяет выбранный цвет к своему собственному фону, и он снова становится изображением значка, когда я снова наведу на него курсор мыши

Проблема № 4: Когда Color Picker помещается в панель стека Диалоговое окно Color Pickerокно появляется только когда я щелкаю на левой стороне значка, похоже, что правая часть значка Color Picker отключена, но мне нужно, чтобы диалоговое окно Color Picker появлялось, когда я щелкаю по любой части значка Color Picker

Я искал в CSS-файлах JFoniex Color Picker, но нет документации по настройкеправильно выбрать цвет в CSS.

Пожалуйста, помогите мне как можно больше

* У меня была идея использовать кнопку переключения (я знаю, как настроить ее в соответствии со своими потребностями) и переместить палитру цветов назад эту кнопку переключенияи сделать непрозрачность 0. Но я не знаю, как сделать диалоговое окно Color Picker открытым, когда я нажимаю на кнопку переключения.Любые идеи?

Я использую метод, который вызывается, когда я нажимаю Color Picker, чтобы заполнить фон метки цветом.

Класс контроллера:

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

Видео

Экран Строителя Сцены

Answer 1

РЕДАКТИРОВАТЬ: @Topaco написал решение выше, но я решил свои проблемы другим способом: я сделал переключатель, и его стиль выглядит как значок.Я поместил JFOenix Color Picker над этой кнопкой переключения и установил непрозрачность Color PIcker на 0. Похоже, я нажимаю кнопку переключения со значком, но на самом деле я нажимаю на Color Picker, потому что он находится над кнопкой переключения ВЫШЕ.

JFoenixПалитра цветов не помещается ни в одну панель.Он помещается только в Grid Pane как Stack Pane кнопок переключения.Выбор цвета брошен вперед.Кнопка переключения расположена назад

Answer 2

Класс скина JFXColorPicker содержит панель и метку с классами стилей color-label и color-box соответственно.Метка содержится на панели.

В следующих css отображается значок без фона (= выбранный цвет) и без текста (= шестнадцатеричное значение выбранногоцвет)

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

Первая часть отключает текст.Средняя часть отвечает за отображение значка.Последняя часть отключает фон.

При этом css наблюдаемых проблем не возникает:

• Нет белого цвета, нет скрытого значка
• Ripple-эффект может быть отключен опционально (программно)
• Выбранный цвет опционально не отображается в фоновом режиме
• Нет проблем в StackPane s

Мой тестовый набор состоит из BorderPane, содержащий StackPane в центре.StackPane содержит кнопки JFXColorPicker и 3.Правая часть BorderPane содержит панель, цвет которой контролируется палитрой цветов.На следующих рисунках показан FXML в Scenebuilder (рис. 1), приложение сразу после запуска (рис. 2), приложение после нажатия палитры цветов (рис. 3) и приложение после изменения цвета (рис. 4).):

Рис.1:

Рис.2:

Рис.3:

Рис.4:

---

В следующем css отображается значок с фоном (= выбранный цвет) и с пульсацией , но без текста (= шестнадцатеричное значение выбранного цвета)

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

На следующем рисунке показано применение после изменения цвета.

Рис.5:

---

Для отображения значка с фоном (= выбранный цвет), но без пульсации и без текста (= шестнадцатеричное значение выбранного цвета), к контроллеру необходимо добавить следующий метод:

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

где jfxColorPicker обозначает цветсредство выбора в FXML.

Метод должен вызываться в main -методе после выполнения show -метода:

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

---

Класс кожи JFXColorPicker расположен по адресу JFoenix-master\jfoenix\src\main\java\com\jfoenix\skins\JFXColorPickerSkin.java.Здесь взаимодействие органов управления может быть изучено.