-
Notifications
You must be signed in to change notification settings - Fork 1.1k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
ui: Allow font-awesome icon usage and optimise icon size inconsistency #9744
base: 4.19
Are you sure you want to change the base?
Conversation
This calls listProjects with details=min in the global header menu. Signed-off-by: Rohit Yadav <[email protected]>
This enables usage of fontawesome (free) solid icons for custom plugins section in config.json. The plugin can be defined as array: ``` "plugins": [ { "name": "HomeLab", "icon": ["fa-solid", "fa-server"], "path": "https://dash.yadav.cloud/dash/" } ], ``` Here the icons is declared as a json array config, where the first parameter is the pack/type name ("fa-solid") and the second parameter is the icons name with the "fa-" prefix. The solid icon can be searched and used from here: https://fontawesome.com/search?q=server&o=r&s=solid Signed-off-by: Rohit Yadav <[email protected]>
This fixes icon size inconsistency when fa os-logo icons are used versus when resource icons are used. This also changes some of the infocard icons to use better icons from font awesome. Signed-off-by: Rohit Yadav <[email protected]>
FYI - this is from Swen (proIO's) email from users ML who found a limitation in plugins/UI icons usage. |
@rohityadavcloud a Jenkins job has been kicked to build UI QA env. I'll keep you posted as I make progress. |
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## 4.19 #9744 +/- ##
============================================
- Coverage 15.08% 15.08% -0.01%
+ Complexity 11194 11184 -10
============================================
Files 5406 5402 -4
Lines 473184 473137 -47
Branches 58549 61651 +3102
============================================
- Hits 71398 71379 -19
+ Misses 393836 393817 -19
+ Partials 7950 7941 -9
Flags with carried forward coverage won't be shown. Click here to find out more. ☔ View full report in Codecov by Sentry. |
UI build: ✔️ |
https://lists.apache.org/thread/0062c2o0dl4vps562bdkpmw0ym8f5yq6 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
clgtm (not sure I can judge the long term policy, though)
@JoaoJandre , will you consider this? |
@rohityadavcloud @DaanHoogland If I understood correctly, this PR is improving which fonts can be used when creating new plugins, and not fixing any bugs. If so, does it need to go into 4.20? It seems to me that if it gets merged as soon as 4.20 is out, new plugins can already start using the fonts, so there would be no need to merge it now. Please correct me if I'm mistaken. |
I think you are right, I understood it as "We cannot add our plugin because of a bug" but let's move this forward then. |
This addresses that issue that plugins customisation in the UI (https://docs.cloudstack.apache.org/en/4.19.1.1/adminguide/ui.html#basic-ui-c
ustomization) isn't able to use all the ant-design-vue icons.
We already use and support fontawesome components such as for Kubernetes menu etc.
This extends the usage of fontawesome (free) solid icons for custom plugins
section in config.json. The plugin can be defined as array:
Here the icons is declared as a json array config, where the first
parameter is the pack/type name ("fa-solid") and the second parameter is
the icons name with the "fa-" prefix.
The solid icon can be searched and used from here:
https://fontawesome.com/search?q=server&o=r&s=solid
This also fixes icon size inconsistency when fa os-logo icons are used versus when resource icons are used. This also changes some of the infocard icons to use better icons from font awesome.
Types of changes
Testing
With the example json snipped defined above, would result in this which uses a font awesome solid icon: