search

JanStevens / angular-growl-2

growl-like notifications for angularJS projects
MIT License
285 stars 97 forks source link

Change growl default style classes (Issue #101) #121

Closed flaviocysne closed 7 years ago

flaviocysne commented 7 years ago

Motivated by the Issue #101, I implemented some basic changes to angular-growl-2 to allow users to define another set of style classes for all growl tags and also for a specific growl.

Global config object should use the format below (samples are using FontAwesome styles just to relate to the issue, but could be used any style class names from any similar icon library):

config: {
...
styleClasses: {
    success: 'fa fa-check-circle',
    info: 'fa fa-info-circle',
    warning: 'fa fa-exclamation-circle',
    error: 'fa fa-times-circle',
    danger: 'fa fa-times-circle'}
...
}

All styleClasses attributes are optional and if not defined will fallback to the actual default value. If a user want to suppress an icon an empty string should be passed as the attribute value for the specific severity.

A specific growl tag could use custom style classes adding some attributes to it, like this:

<growl ... success-class="fa fa-check" info-class="fa fa-info" warning-class="fa fa-exclamation" error-class="fa fa-times" danger-class="fa fa-times">...</growl>

I'll provide a Plunker with samples for these situations.

Hope it will help.

flaviocysne commented 7 years ago

I'm still trying to create a sample in Plunker to demonstrate the changes. It's not working as expected at the moment.

Maybe I'll have to change the angular-growl's CSS and the default template in growlDirective.js. Both icon libraries, Bootstrap and Font-Awesome, use an HTML span to include icons in alert messages.

flaviocysne commented 7 years ago

I'll postpone this pull request until I have some reasonable/stable code to commit and samples to demonstrate the new features.