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
DaanHoogland,
JoaoJandre,
shwstppr 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.12% 15.12% -0.01%
+ Complexity 11255 11253 -2
============================================
Files 5407 5407
Lines 473799 473799
Branches 57767 57767
============================================
- Hits 71670 71665 -5
- Misses 394130 394136 +6
+ Partials 7999 7998 -1
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 |
DaanHoogland
left a comment
DaanHoogland
left a comment
There was a problem hiding this comment.
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. |
|
@JoaoJandre it's considered a UI bug as font-awesome works for normal tabs but not plugin section in the navigation. But it's considered minor as this is the case for the last many releases, it's not a regression. |
|
This pull request has merge conflicts. Dear author, please fix the conflicts and sync your branch with the base branch. |
|
@rohityadavcloud , i resolved a conflict here. Hope it is alright like this by you. |
|
@DaanHoogland a Jenkins job has been kicked to build UI QA env. I'll keep you posted as I make progress. |
|
UI build: ✔️ |
vishesh92
left a comment
vishesh92
left a comment
There was a problem hiding this comment.
clgtm. Verified changes in UI for List View and info card.
shwstppr
left a comment
shwstppr
left a comment
There was a problem hiding this comment.
LGTM. Checked different views, looking fine to me
|
Thanks @DaanHoogland @vishesh92 @shwstppr |
|
thx everybody for the effort! :-) |
apache#9744) Signed-off-by: Rohit Yadav <[email protected]> Co-authored-by: dahn <[email protected]>
* 4.20: VR: apply iptables rules when add/remove static routes (#10064) Certificate and VM hostname validation improvements (#10051) set ulimit for server according to redhat spec (#10040) kvm-storage: provide isVMMigrate information to storage plugins (#10093) Allow config drive deletion of migrated VM, on host maintenance (#10045) linstor: improve heartbeat check with also asking linstor (#10105) server: simplify role change validation (#9173) UI: create VPC network offering with conserve mode (#10082) server: fix typo removeaccessvpn in VirtualRouterElement (#10086) UI: remove duplicated Instance Name in Public IP details page (#10087) UI: Fixes in the Usage UI (#10000) SAML2: add cookie with HttpOnly too #10013 (#10047) ui: Allow font-awesome icon usage and optimise icon size inconsistency (#9744)
apache#9744) Signed-off-by: Rohit Yadav <[email protected]> Co-authored-by: dahn <[email protected]>
8 participants
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:
