ui: Allow font-awesome icon usage and optimise icon size inconsistency #9744
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]>
rohityadavcloud
requested review from
shwstppr,
DaanHoogland,
JoaoJandre and
weizhouapache
|
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: ✔️ |
|
QA'd manually this seems to be working okay: (notice the icons) |
https://lists.apache.org/thread/0062c2o0dl4vps562bdkpmw0ym8f5yq6 |
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:
