search

tech-advantage / ngx-icon-picker

An Icon Picker Directive/Component for Angular 13+ which manages Font Awesome, Bootstrap Glyphicon, Font Awesome5 and Material.
MIT License
25 stars 33 forks source link

Enhancement: Specify classes instead of bootstrap #25

Closed Thorski closed 4 years ago

Thorski commented 4 years ago

Very nice picker, thank you.

For those like myself not using bootstrap classes, it would be nice to be able to specify these classes instead of having them hard coded: btn btn-default form-control input-sm and any others I missed :)

For the icons in the grid I realize I can style them with ip-button-icon. It just would be a tad more convenient to use classes I already have.

For the input box there is no way to style it (unless I define form-control and input-sm classes). Ideally I would like to be able to pass classes that will be used.

Thank you!

Thorski commented 4 years ago

Add: customizable font size in search box.

greg7859 commented 4 years ago

Could you send me an example to valid the change?

Thorski commented 4 years ago

something like [ipStyleClass]="myButtonStyles" // define classes for buttons instead of btn btn-default [ipSearchStyleClass]="mySearchStyles" // define classes for search box instead of form-control

And make sure can override the font size, right now it is hard because .icon-picker * { box-sizing: border-box; margin: 0; font-size: 11px; }

Maybe take it out of icon-picker so mySearchStyles can override it, or add a ipSearchFont?

-- Thor

greg7859 commented 4 years ago

Ok, I thought you wanted to use another framework like bulma, semantic, ...

I will try to do that in a cup of days

greg7859 commented 4 years ago

I added 3 parameters:

To explain how to use it, I created 2 examples:

For both, I use the framework to replace boostrap

Do you want to test this change?

Thorski commented 4 years ago

Sure! How do I test it?

Thanks!!

greg7859 commented 4 years ago

To test, you have to clone this repository and checkout the branch issue-25. Then, go to in the repository folder (for example /tmp/ngx-icon-picker) and type npm install and npm run build The library will be build

Go in your project and type npm install /tmp/ngx-icon-picker. The 1.2.0 will be installed in your project.

Hope it helps you!

Thorski commented 4 years ago

Thank you it works very well. It is still hard to overwrite the hard coded 11px size in the .icon-picker class due to view encapsulation. I have to use important.

[ipInputSearchStyleClass]="'my-input-search1'"

.my-input-search1 { font-size: 1rem !important; }

Thank you!

On Wed, Apr 8, 2020 at 8:30 AM Gregory Cochin notifications@github.com wrote:

To test, you have to clone this repository and checkout the branch issue-25. Then, go to in the repository folder (for example /tmp/ngx-icon-picker) and type npm install and npm run build The library will be build

Go in your project and type npm install /tmp/ngx-icon-picker. The 1.2.0 will be installed in your project.

Hope it helps you!

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/tech-advantage/ngx-icon-picker/issues/25#issuecomment-610930430, or unsubscribe https://github.com/notifications/unsubscribe-auth/AG3GL66VEVZ7OR4KUDEANWTRLRU7FANCNFSM4L2URXSA .

greg7859 commented 4 years ago

I removed the .icon-picker * declaration in scss file.

Could you tell me if it works in your case?

Thorski commented 4 years ago

Works great thank you

On Thu, Apr 9, 2020 at 5:10 AM Gregory Cochin notifications@github.com wrote:

I removed the .icon-picker * declaration in scss file.

Could you tell me if it works in your case?

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/tech-advantage/ngx-icon-picker/issues/25#issuecomment-611421229, or unsubscribe https://github.com/notifications/unsubscribe-auth/AG3GL6ZFDXT6H4RJFMKJLYTRLWGHDANCNFSM4L2URXSA .

greg7859 commented 4 years ago

This version (1.2.0) was deployed on npmjs repository. Enjoy it!

Thorski commented 4 years ago

Thank you so much!

On Thu, Apr 9, 2020 at 1:07 PM Gregory Cochin notifications@github.com wrote:

This version (1.2.0) was deployed on npmjs repository. Enjoy it!

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/tech-advantage/ngx-icon-picker/issues/25#issuecomment-611641491, or unsubscribe https://github.com/notifications/unsubscribe-auth/AG3GL662MTS6WU7JIXNPSLTRLX6DZANCNFSM4L2URXSA .