CODEWITHSUNDEEP
gluon-mobile
A.Sharma
A.Sharma

Reputation: 2799

Gluon Mobile Dialog Appbar Customization

I have a Settings View with a styled AppBar and when I open a full screen dialog from that View, the AppBar styling follows the global swatch specified. THEN, when I close the dialog box, the Settings View AppBar retains the dialog styling (it should have a white background, but it's green which is the swatch that is specified for the application).

Further Clarification:

The View is a page for Settings and then when you click each setting a dialog pops up with the content set to StackPanes that contain information for that specific setting.

I have tried to add a method that stylizes the AppBar on Dialog close, hide, and hidden event handlers:

public void initView(SettingView viewType) {

    View pane = null;

    try {
        switch (viewType) {
            case PASSWORD_CHANGE:
                pane = getPasswordPane();
                break;
            case PROFILE_CHANGE:
                pane = getProfilePane();
                break;
            case BANK_CHANGE:
                pane = getBankPane();
                break;
            case NOTIFICATION_CHANGE:
                pane = getNotificationPane();
                break;
        }
    } catch (IOException e) {
        System.out.println("IOException: " + e);
    }

    //this.settingsContainer = new Dialog(true);
    this.settingsContainer.setContent(pane);

    MobileApplication.getInstance().removeLayerFactory("$$$DropdownButtonSkin$$$");

    Platform.runLater(new Runnable() {
        @Override
        public void run() {  //None of these change the appbar styling
            settingsContainer.setOnShowing(e -> { setAppBar("Settings");});
            settingsContainer.setOnShown(e -> { setAppBar("Settings");});
            settingsContainer.setOnHiding(e -> { setAppBar("Settings");});
            settingsContainer.setOnHidden(e -> { setAppBar("Settings");});

            //When closing the appbar the color remains to the swatch instead of the customized background
            settingsContainer.setOnCloseRequest(e -> { setAppBar("Settings");});
            settingsContainer.showAndWait();   
        }
    });

}

public AppBar setAppBar(String name) {
    Button menu = MaterialDesignIcon.MENU.button();
    menu.setStyle("-fx-text-fill:darkgreen;");
    menu.setOnMouseClicked(e -> {
        MobileApplication.getInstance().showLayer(Appstar.MENU_LAYER);
    });

    AppBar appBar = MobileApplication.getInstance().getAppBar();
    appBar.clear();
    appBar.setNavIcon(menu);
    appBar.setTitleText(name);
    appBar.setVisible(true);
    appBar.setBackground(new Background(new BackgroundFill(Color.WHITE, new CornerRadii(0), new Insets(0, 0, 0, 0))));
    return appBar;
}

Upvotes: 0

Views: 484

Answers (1)

ItachiUchiha
ItachiUchiha

Reputation: 36762

Considering that you want the same app-bar color on all views (i.e. white in all the views), the easiest way to solve this is to use CSS.

You can set the color of the AppBar on a full-screen dialog by using the custom style-class for the AppBar on a full-screen dialog i.e. dialog-fullscreen along with the base style-class app-bar. Therefore, you can use something like this:

.app-bar.dialog-fullscreen {
    -fx-background-color: green; // OR -primary-swatch-500;
}

For setting the overall app-bar color to white, you can simply use:

.app-bar {
    -fx-background-color: white;
}

Upvotes: 1

Related Questions