Custom class injections

[elibolonur]

Hi,

Very nice and useful plugin! In the project I am using the plugin, I have the case to call the modal a couple of times to confirm user actions. One of the dialogs is to confirm delete and another one is to save. So to have difference for confirmations I am overriding button colors (red on delete, green on save). The problem in this is that I have to inject different classes for styling (or <style> element inside the dialog initialization). Would you consider adding some custom class name injections in dialog initialization?

For example:

let options = {
    html: false,
    loader: false,
    reverse: false, 
    okText: 'Continue',
    cancelText: 'Close',
    customClass: 'remove-class'
};

and remove-class will be injected to the div.dg-main-content, so we could override all other css thru this custom class. Just as an example, to have another solution like this would be nice :)

[Godofbrowser]

It would be implemented asap.. Very useful. Thanks

[hjortzen]

That's exactly my use case as well and I was going to add that feature next, and possibly (if owner agrees) do a pull request.

My idea was to add an option that can add additional cssClasses to different parts of the dialog. For instance the okButton or cancel-button.

Something like (on top of my head)

options: {
    cssClasses: {
         okButton: 'green-class',
         cancelButton: 'gray-class',
         title: 'my-custom-header-class'
    }
}

With that solution your use case would also be covered, correct?

[elibolonur]

Also a very good idea, highly customisable. But downside with injecting single classes on single elements is to have create single css classes for each / single element. Adding only one custom class on the parent and overriding child elements thru that class is kinda simple imo. Maybe even for theming whole dialog.

But I think having chance to both options would be really nice.

Btw thank you for the fast response @Godofbrowser :)

[Godofbrowser]

@hjortzen that's equally a very good idea. But would mean too much configuration whereas a single css class can handle this and more.

[Godofbrowser]

You're welcome @elibolonur :)

[Godofbrowser]

@hjortzen I think we should go with the single customClass option for now. Unless maybe there's a more specific use case.

Would you still be interested in sending a PR for this? cos as aways, PRs are welcome for our little plugin :)

[hjortzen]

My use case is probably a little different.
To be very specific; my need is to add 'blue' to the list of classes in okButton.
Because in our portal we have a lot of styling already done to buttons which is condensed into the 'blue, red, yellow, gray' classes. This is not styling we wish to repeat.

Also, we'd like to be able to change the heading size (h6) to something that complies better within our portal (h2 or h3), but that is outside the scope of being able to add css classes to components. But related in a way since our styling is done on h2 and h3 and we do not wish to repeat that styling for this specific dialog.

Anyway, I'll start on something regarding the adding of CSS classes and see if I can come up with something. Using filters the DOM wouldn't get too cluttered either. We'll see!

[elibolonur]

Potential solution added on this pull request #26 I guess its solving both hjortzen and my issue. Makes styling pretty flexible also :)