[FEATURE] Request: Enable Per-Project CSS Customization in FUXA Without Code Modifications

[mauroalexandre]

Overview

I recently discovered an innovative feature in a market competitor's tool that greatly impressed me, and I believe integrating a similar functionality into FUXA could provide substantial benefits. This feature would allow users to customize CSS styles directly through the user interface for each project, enhancing flexibility and user experience without the need for direct code alterations.

Proposal

I propose that FUXA implements a feature that enables per-project CSS customization. This would allow users to tailor the appearance of their projects according to their specific needs or preferences, all without having to modify the underlying codebase.

Demonstration

To better illustrate how this feature could enhance FUXA, I have prepared a video demonstration detailing the proposed functionality and its potential impacts. Please find the video attached below for a comprehensive overview.

Conclusion

Implementing this feature could significantly improve user satisfaction by providing greater control over project aesthetics and functionality. I look forward to your feedback and hope for a positive review of this proposal.

Pul request here

https://github.com/user-attachments/assets/947b9f3e-bb8c-4cd7-9ea4-d2ff72370b78

[Kiruthick-Roxx]

I was also looking for this kind of feature not only for the header, but also for the objects in the view. Like individual css and scripts for SVG images that can be assigned with parameters to be read and also mouse events.

[MatthewReed303]

@Kiruthick-Roxx check out the new widget feature. You can now use CSS and Scripting inside the SVG and bind to tags. I will add to the Wiki in the next few days how to use.

Here is an example SVG to have a look how it works. Note: pn is the binding for tags. I have to do upload as a zip since github is changing it.

dynamicIndicatorTestButtonSVG-init-edit.zip

[Kiruthick-Roxx]

Hi, Thanks for the reply. I'll try this feature and it would be helpful if you can add the wiki along with a video of how it can be done.

[MatthewReed303]

@Kiruthick-Roxx Just import the example SVG using the Image link

You can then see how it works. Use the Latest docker image, you may have to delete old image and pull the latest.

[Kiruthick-Roxx]

@MatthewReed303 , Will this feature work in normal installation of Fuxa also except for the docker release?

[MatthewReed303]

@Kiruthick-Roxx it's in the latest docker release now. Just pull the latest docker image, you may have to delete the old image. Are you using docker or docker compose?

[Kiruthick-Roxx]

@MatthewReed303, I'm not even using the docker version of Fuxa. I'm just using the native installation version in the windows machine. To be clear I just cloned the repo and installed it using npm install.

[henjoe]

@Kiruthick-Roxx check out the new widget feature. You can now use CSS and Scripting inside the SVG and bind to tags. I will add to the Wiki in the next few days how to use.

Here is an example SVG to have a look how it works. Note: pn is the binding for tags. I have to do upload as a zip since github is changing it.

dynamicIndicatorTestButtonSVG-init-edit.zip

This is what I am waiting for! Good job guys!

I already tested it, thought I dont know yet how to use it, but by just looking at the code, it seems like this new features allows you import svg file under the htmlImageComponent, what I notice is when I import svg (just a plain svg, for example a logo) it gives me error, something like it is looking for some properties that is not available on my svg.

Before, I can import normal svg file using the image control without error, it will be better thay I can still do this with the latest features.

[unocelli]

@henjoe Hi, please open an issue with the problem you encountered importing a svg.

[henjoe]

@henjoe Hi, please open an issue with the problem you encountered importing a svg.

I will brother, I need to check more, I might using it wrong. 😅

[unocelli]

@mauroalexandre Good job! Thanks a lot