[cloudstack] branch 4.17 updated: UI: Fixes suffix icon on project selector not work (#6671)

[sh...@apache.org]

This is an automated email from the ASF dual-hosted git repository.

shwstppr pushed a commit to branch 4.17
in repository https://gitbox.apache.org/repos/asf/cloudstack.git


The following commit(s) were added to refs/heads/4.17 by this push:
     new c8494354ca UI: Fixes suffix icon on project selector not work (#6671)
c8494354ca is described below

commit c8494354ca8a43fff9cea5d8a0af722f429e082a
Author: Hoang Nguyen <ho...@unitech.vn>
AuthorDate: Thu Aug 25 23:44:31 2022 +0700

    UI: Fixes suffix icon on project selector not work (#6671)
    
    * fix the animation suffix icon of select
    
    * move style code
---
 ui/src/components/header/ProjectMenu.vue        | 2 +-
 ui/src/components/header/SamlDomainSwitcher.vue | 2 +-
 ui/src/style/ant-overwrite/ant-form.less        | 8 ++++++++
 ui/src/views/AutogenView.vue                    | 2 +-
 4 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/ui/src/components/header/ProjectMenu.vue b/ui/src/components/header/ProjectMenu.vue
index 7388f0c1c9..722bc2877d 100644
--- a/ui/src/components/header/ProjectMenu.vue
+++ b/ui/src/components/header/ProjectMenu.vue
@@ -33,7 +33,7 @@
             <span>{{ $t('label.projects') }}</span>
           </template>
           <span class="custom-suffix-icon">
-            <ProjectOutlined v-if="!loading" />
+            <ProjectOutlined v-if="!loading" class="ant-select-suffix" />
             <LoadingOutlined v-else />
           </span>
         </a-tooltip>
diff --git a/ui/src/components/header/SamlDomainSwitcher.vue b/ui/src/components/header/SamlDomainSwitcher.vue
index 269a873f57..9bad8fd52f 100644
--- a/ui/src/components/header/SamlDomainSwitcher.vue
+++ b/ui/src/components/header/SamlDomainSwitcher.vue
@@ -36,7 +36,7 @@
             <span>{{ $t('label.domain') }}</span>
           </template>
           <span class="custom-suffix-icon">
-            <BlockOutlined v-if="!loading" />
+            <BlockOutlined v-if="!loading" class="ant-select-suffix" />
             <LoadingOutlined v-else />
           </span>
         </a-tooltip>
diff --git a/ui/src/style/ant-overwrite/ant-form.less b/ui/src/style/ant-overwrite/ant-form.less
index 0c838c6994..52a2086fb4 100644
--- a/ui/src/style/ant-overwrite/ant-form.less
+++ b/ui/src/style/ant-overwrite/ant-form.less
@@ -18,3 +18,11 @@
 .ant-form .ant-form-item {
   margin-bottom: 6px;
 }
+
+.ant-select-arrow .ant-select-suffix svg {
+  transition: transform .3s, -webkit-transform .3s;
+}
+
+.ant-select-open .ant-select-arrow .ant-select-suffix svg {
+  transform: rotateZ(-180deg);
+}
diff --git a/ui/src/views/AutogenView.vue b/ui/src/views/AutogenView.vue
index 39967fe84c..842df0fcc6 100644
--- a/ui/src/views/AutogenView.vue
+++ b/ui/src/views/AutogenView.vue
@@ -64,7 +64,7 @@
                     :filterOption="(input, option) => {
                       return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
                     }" >
-                    <template #suffixIcon><filter-outlined /></template>
+                    <template #suffixIcon><filter-outlined class="ant-select-suffix" /></template>
                     <a-select-option
                       v-if="['Admin', 'DomainAdmin'].includes($store.getters.userInfo.roletype) && ['vm', 'iso', 'template'].includes($route.name)"
                       key="all"