search

foex-open-source / fos-interactive-grid-add-button

MIT License
9 stars 2 forks source link

Enhancement Request: Add CSS class to stylize the button. #1

Open aragorniiit opened 4 years ago

aragorniiit commented 4 years ago

Thanks for the excellent plugin. I wish there is CSS class attribute to stylize the button. Currently I can only make it hot or not.

Thanks Kishore

stefandobre commented 4 years ago

Hi Kishore,

Glad to hear you're enjoying the plug-in :)

I completely agree with your suggestion. Unfortunately, the underlying APEX widget (widget.toolbar.js) does not expose an option for an extra class name. This is something we've looked at but couldn't come up with an elegant solution. Perhaps we should revisit this issue again and maybe look into injecting the class name via Javascript. (Note to self: We have to reinject it every time the toolbar refreshes)

Until then however, you could try the following:

Give your button a dummy action name, such as style-orange

Screenshot 2020-09-18 at 23 01 15

You will notice that the action name actually gets added to the button's markup as a data attribute.

Screenshot 2020-09-18 at 23 02 34

Now with some inline CSS, we can use this attribute to reference the button. emp represents the static ID of the Interactive Grid.

Screenshot 2020-09-18 at 23 04 33

My two example buttons are now stylized like this:

Screenshot 2020-09-18 at 23 07 37

Let me know if this works for you!

aragorniiit commented 4 years ago

Thanks for the great workaround.

On Fri, Sep 18, 2020 at 5:11 PM Stefan Dobre notifications@github.com wrote:

Hi Kishore,

Glad to hear you're enjoying the plug-in :)

I completely agree with your suggestion. Unfortunately, the underlying APEX widget (widget.toolbar.js) does not expose an option for an extra class name. This is something we've looked at but couldn't come up with an elegant solution. Perhaps we should revisit this issue again and maybe look into injecting the class name via Javascript. (Note to self: We have to reinject it every time the toolbar refreshes)

Until then however, you could try the following:

Give your button a dummy action name, such as style-orange

[image: Screenshot 2020-09-18 at 23 01 15] https://user-images.githubusercontent.com/20504443/93644750-de9e0d00-fa02-11ea-8a82-9b220abd55f1.png

You will notice that the action name actually gets added to the button's markup as a data attribute.

[image: Screenshot 2020-09-18 at 23 02 34] https://user-images.githubusercontent.com/20504443/93644867-11e09c00-fa03-11ea-96c3-589289a1b00e.png

Now with some inline CSS, we can use this attribute to reference the button. emp represents the static ID of the Interactive Grid.

[image: Screenshot 2020-09-18 at 23 04 33] https://user-images.githubusercontent.com/20504443/93644982-5704ce00-fa03-11ea-8532-2ac8f75966a0.png

My two example buttons are now stylized like this:

[image: Screenshot 2020-09-18 at 23 07 37] https://user-images.githubusercontent.com/20504443/93645166-c1b60980-fa03-11ea-81e2-eaea11cacf3a.png

Let me know if this works for you!

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/foex-open-source/fos-interactive-grid-add-button/issues/1#issuecomment-695088091, or unsubscribe https://github.com/notifications/unsubscribe-auth/AHF2UB3LRRTOUEPEQO55PV3SGPEGXANCNFSM4RSPY47Q .