This is an automated email from the ASF dual-hosted git repository.
dahn pushed a commit to branch 4.19
in repository https://gitbox.apache.org/repos/asf/cloudstack.git
The following commit(s) were added to refs/heads/4.19 by this push:
new 48767611546 ui: Allow font-awesome icon usage and optimise icon size
inconsistency (#9744)
48767611546 is described below
commit 4876761154667f639ff41c6b62d8a09c7c051b28
Author: Rohit Yadav <[email protected]>
AuthorDate: Mon Dec 9 14:33:37 2024 +0530
ui: Allow font-awesome icon usage and optimise icon size inconsistency
(#9744)
Signed-off-by: Rohit Yadav <[email protected]>
Co-authored-by: dahn <[email protected]>
---
ui/src/components/menu/SMenu.vue | 6 ++++++
ui/src/components/view/InfoCard.vue | 26 ++++++++++++++++++++------
ui/src/components/view/ListView.vue | 6 +++---
ui/src/core/ext.js | 8 ++------
4 files changed, 31 insertions(+), 15 deletions(-)
diff --git a/ui/src/components/menu/SMenu.vue b/ui/src/components/menu/SMenu.vue
index 67603b7b924..f48b4607321 100644
--- a/ui/src/components/menu/SMenu.vue
+++ b/ui/src/components/menu/SMenu.vue
@@ -58,6 +58,12 @@
v-if="item.meta.icon && typeof (item.meta.icon) === 'string'"
:icon="item.meta.icon"
@click="() => { handleClickParentMenu(item) }" />
+ <font-awesome-icon
+ v-else-if="item.meta.icon && Array.isArray(item.meta.icon)"
+ :icon="item.meta.icon"
+ class="anticon"
+ :style="[$store.getters.darkMode ? { color: 'rgba(255, 255, 255,
0.65)' } : { color: '#888' }]"
+ @click="() => { handleClickParentMenu(item) }" />
<span>{{ $t(item.meta.title) }}</span>
</router-link>
</a-menu-item>
diff --git a/ui/src/components/view/InfoCard.vue
b/ui/src/components/view/InfoCard.vue
index 6b42d68ddc3..94570c715b8 100644
--- a/ui/src/components/view/InfoCard.vue
+++ b/ui/src/components/view/InfoCard.vue
@@ -34,12 +34,12 @@
<resource-icon :image="getImage(resource.icon &&
resource.icon.base64image || images.template || images.iso || resourceIcon)"
size="4x" style="margin-right: 5px"/>
</span>
<span v-else>
- <os-logo v-if="resource.ostypeid || resource.ostypename"
:osId="resource.ostypeid" :osName="resource.ostypename" size="4x"
@update-osname="setResourceOsType"/>
+ <os-logo v-if="resource.ostypeid || resource.ostypename"
:osId="resource.ostypeid" :osName="resource.ostypename" size="3x"
@update-osname="setResourceOsType"/>
<render-icon v-else-if="typeof $route.meta.icon ==='string'"
style="font-size: 36px" :icon="$route.meta.icon" />
<font-awesome-icon
v-else-if="$route.meta.icon &&
Array.isArray($route.meta.icon)"
:icon="$route.meta.icon"
- size="4x"
+ size="3x"
class="anticon"
:style="[$store.getters.darkMode ? { color: 'rgba(255,
255, 255, 0.65)' } : { color: '#888' }]" />
<render-icon v-else style="font-size: 36px"
:svgIcon="$route.meta.icon" />
@@ -179,7 +179,10 @@
<div class="resource-detail-item" v-if="('cpunumber' in resource &&
'cpuspeed' in resource) || resource.cputotal">
<div class="resource-detail-item__label">{{ $t('label.cpu') }}</div>
<div class="resource-detail-item__details">
- <appstore-outlined />
+ <font-awesome-icon
+ :icon="['fa-solid', 'fa-microchip']"
+ class="anticon"
+ :style="[$store.getters.darkMode ? { color: 'rgba(255, 255, 255,
0.65)' } : { color: '#888' }]" />
<span v-if="'cpunumber' in resource && 'cpuspeed' in resource">{{
resource.cpunumber }} CPU x {{ (resource.cpuspeed / 1000.0).toFixed(2) }} GHz
<a-tooltip placement="top">
<template #title>
@@ -214,7 +217,11 @@
<div class="resource-detail-item" v-if="'memory' in resource">
<div class="resource-detail-item__label">{{ $t('label.memory')
}}</div>
<div class="resource-detail-item__details">
- <bulb-outlined />{{ resource.memory + ' ' + $t('label.mb.memory')
}}
+ <font-awesome-icon
+ :icon="['fa-solid', 'fa-memory']"
+ class="anticon"
+ :style="[$store.getters.darkMode ? { color: 'rgba(255, 255, 255,
0.65)' } : { color: '#888' }]" />
+ {{ resource.memory + ' ' + $t('label.mb.memory') }}
</div>
<div>
<span v-if="resource.memorykbs && resource.memoryintfreekbs">
@@ -355,7 +362,10 @@
v-for="(eth, index) in resource.nic"
:key="eth.id"
style="margin-left: -24px; margin-top: 5px;">
- <api-outlined />
+ <font-awesome-icon
+ :icon="['fa-solid', 'fa-ethernet']"
+ class="anticon"
+ :style="[$store.getters.darkMode ? { color: 'rgba(255, 255,
255, 0.65)' } : { color: '#888' }]" />
<strong>eth{{ index }}</strong>
<copy-label :label="eth.ip6address ? eth.ipaddress + ', ' +
eth.ip6address : eth.ipaddress" />
<a-tag v-if="eth.isdefault">
@@ -380,7 +390,11 @@
v-for="network in resource.networks"
:key="network.id"
style="margin-top: 5px;">
- <api-outlined />{{ network.name }}
+ <font-awesome-icon
+ :icon="['fa-solid', 'fa-ethernet']"
+ class="anticon"
+ :style="[$store.getters.darkMode ? { color: 'rgba(255, 255,
255, 0.65)' } : { color: '#888' }]" />
+ {{ network.name }}
<span v-if="resource.defaultnetworkid === network.id">
({{ $t('label.default') }})
</span>
diff --git a/ui/src/components/view/ListView.vue
b/ui/src/components/view/ListView.vue
index b6f35c5eeae..61b688dc75a 100644
--- a/ui/src/components/view/ListView.vue
+++ b/ui/src/components/view/ListView.vue
@@ -43,7 +43,7 @@
<span v-if="record.icon && record.icon.base64image">
<resource-icon :image="record.icon.base64image" size="2x"/>
</span>
- <os-logo v-else :osId="record.ostypeid"
:osName="record.osdisplayname" size="2x" />
+ <os-logo v-else :osId="record.ostypeid"
:osName="record.osdisplayname" size="xl" />
</span>
<span style="min-width: 120px" >
<QuickView
@@ -57,12 +57,12 @@
</span>
<span v-if="$showIcon() && !['vm',
'vnfapp'].includes($route.path.split('/')[1])" style="margin-right: 5px">
<resource-icon v-if="$showIcon() && record.icon &&
record.icon.base64image" :image="record.icon.base64image" size="2x"/>
- <os-logo v-else-if="record.ostypename" :osName="record.ostypename"
size="2x" />
+ <os-logo v-else-if="record.ostypename" :osName="record.ostypename"
size="xl" />
<render-icon v-else-if="typeof $route.meta.icon ==='string'"
style="font-size: 16px;" :icon="$route.meta.icon"/>
<render-icon v-else style="font-size: 16px;"
:svgIcon="$route.meta.icon" />
</span>
<span v-else :style="{ 'margin-right': record.ostypename ? '5px' :
'0' }">
- <os-logo v-if="record.ostypename" :osName="record.ostypename"
size="1x" />
+ <os-logo v-if="record.ostypename" :osName="record.ostypename"
size="xl" />
</span>
<span v-if="record.hasannotations">
diff --git a/ui/src/core/ext.js b/ui/src/core/ext.js
index f6cfb353b13..06bea8cd7d2 100644
--- a/ui/src/core/ext.js
+++ b/ui/src/core/ext.js
@@ -18,15 +18,11 @@
import { library } from '@fortawesome/fontawesome-svg-core'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
-// import { fab } from '@fortawesome/free-brands-svg-icons'
-// import { fas } from '@fortawesome/free-solid-svg-icons'
-// import { far } from '@fortawesome/free-regular-svg-icons'
-
import { faCentos, faUbuntu, faDebian, faSuse, faRedhat, faFedora, faLinux,
faFreebsd, faApple, faWindows, faJava } from
'@fortawesome/free-brands-svg-icons'
-import { faCompactDisc, faCameraRetro, faDharmachakra } from
'@fortawesome/free-solid-svg-icons'
+import { fas, faCompactDisc, faCameraRetro, faDharmachakra } from
'@fortawesome/free-solid-svg-icons'
library.add(faCentos, faUbuntu, faDebian, faSuse, faRedhat, faFedora, faLinux,
faFreebsd, faApple, faWindows, faJava)
-library.add(faCompactDisc, faCameraRetro, faDharmachakra)
+library.add(fas, faCompactDisc, faCameraRetro, faDharmachakra)
export default {
install: (app) => {
