From 06eb1e4dad1b260d1c511bafa8f788199d70ea7d Mon Sep 17 00:00:00 2001
From: utchoang <hoangnm@unitech.vn>
Date: Wed, 24 Aug 2022 16:12:32 +0700
Subject: [PATCH 1/2] fix the animation suffix icon of select

---
 ui/src/components/header/ProjectMenu.vue        | 2 +-
 ui/src/components/header/SamlDomainSwitcher.vue | 2 +-
 ui/src/style/vars.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 7388f0c1c9cf..722bc2877d64 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 269a873f575d..9bad8fd52fe9 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/vars.less b/ui/src/style/vars.less
index 0c3bff4cbda0..e17fb4be9670 100644
--- a/ui/src/style/vars.less
+++ b/ui/src/style/vars.less
@@ -483,4 +483,12 @@ a {
 .ant-dropdown-menu-item:hover,
 .ant-dropdown-menu-submenu-title:hover {
   background-color: color(~`colorPalette("@{primary-color}", 1)`) !important;
+}
+
+.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);
 }
\ No newline at end of file
diff --git a/ui/src/views/AutogenView.vue b/ui/src/views/AutogenView.vue
index 39967fe84c4a..842df0fcc6a4 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"

From 13745b88b952788c08b593900c8308b907568b13 Mon Sep 17 00:00:00 2001
From: utchoang <hoangnm@unitech.vn>
Date: Wed, 24 Aug 2022 16:15:43 +0700
Subject: [PATCH 2/2] move style code

---
 ui/src/style/ant-overwrite/ant-form.less | 8 ++++++++
 ui/src/style/vars.less                   | 8 --------
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/ui/src/style/ant-overwrite/ant-form.less b/ui/src/style/ant-overwrite/ant-form.less
index 0c838c699417..52a2086fb4ff 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/style/vars.less b/ui/src/style/vars.less
index e17fb4be9670..0c3bff4cbda0 100644
--- a/ui/src/style/vars.less
+++ b/ui/src/style/vars.less
@@ -483,12 +483,4 @@ a {
 .ant-dropdown-menu-item:hover,
 .ant-dropdown-menu-submenu-title:hover {
   background-color: color(~`colorPalette("@{primary-color}", 1)`) !important;
-}
-
-.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);
 }
\ No newline at end of file