[cloudstack] branch main updated: ui: fixes style ui issues (#6261)

[ro...@apache.org]

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

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


The following commit(s) were added to refs/heads/main by this push:
     new fecc5254de ui: fixes style ui issues (#6261)
fecc5254de is described below

commit fecc5254de495f7074fe1a843d084fc3109f4215
Author: Hoang Nguyen <ho...@unitech.vn>
AuthorDate: Fri Apr 15 21:57:16 2022 +0700

    ui: fixes style ui issues (#6261)
    
    This PR for fixes some UI Bugs
    
     The project selected color is not displayed after switching project
     Project view, the cards are not separated but stick together
     Dashboard: The color of the selected zone is not displayed
     Dark mode: Hover through row tables that are discolored
---
 ui/src/components/header/ProjectMenu.vue     | 20 ++++++++++++++++----
 ui/src/style/dark-mode.less                  |  6 +++---
 ui/src/views/dashboard/CapacityDashboard.vue | 12 ++++++++++--
 ui/src/views/dashboard/UsageDashboard.vue    |  2 +-
 4 files changed, 30 insertions(+), 10 deletions(-)

diff --git a/ui/src/components/header/ProjectMenu.vue b/ui/src/components/header/ProjectMenu.vue
index dfe642183a..7388f0c1c9 100644
--- a/ui/src/components/header/ProjectMenu.vue
+++ b/ui/src/components/header/ProjectMenu.vue
@@ -20,9 +20,8 @@
     <a-select
       v-if="!isDisabled()"
       class="project-select"
-      :defaultValue="$t('label.default.view')"
       :loading="loading"
-      :value="($store.getters.project && 'id' in $store.getters.project) ? ($store.getters.project.displaytext || $store.getters.project.name) : $t('label.default.view')"
+      v-model:value="projectSelected"
       :filterOption="filterProject"
       @change="changeProject"
       @focus="fetchData"
@@ -40,7 +39,10 @@
         </a-tooltip>
       </template>
 
-      <a-select-option v-for="(project, index) in projects" :key="index" :label="project.displaytext || project.name">
+      <a-select-option
+        v-for="(project, index) in projects"
+        :key="index"
+        :label="project.displaytext || project.name">
         <span>
           <resource-icon v-if="project.icon && project.icon.base64image" :image="project.icon.base64image" size="1x" style="margin-right: 5px"/>
           <project-outlined v-else style="margin-right: 5px" />
@@ -71,6 +73,16 @@ export default {
   created () {
     this.fetchData()
   },
+  computed: {
+    projectSelected () {
+      let projectIndex = 0
+      if (this.$store.getters?.project?.id) {
+        projectIndex = this.projects.findIndex(project => project.id === this.$store.getters.project.id)
+      }
+
+      return projectIndex
+    }
+  },
   methods: {
     fetchData () {
       if (this.isDisabled()) {
@@ -135,6 +147,6 @@ export default {
   position: absolute;
   top: 0;
   right: 1px;
-  margin-top: -3px;
+  margin-top: -5px;
 }
 </style>
diff --git a/ui/src/style/dark-mode.less b/ui/src/style/dark-mode.less
index 623aeb1b9b..1b338ea9ae 100644
--- a/ui/src/style/dark-mode.less
+++ b/ui/src/style/dark-mode.less
@@ -283,7 +283,7 @@
       & > tr:hover.ant-table-row-selected > td,
       & > tr.ant-table-row-hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) > td,
       & > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) > td {
-        background-color: @table-body-hover-bgColor;
+        background-color: @table-body-hover-bgColor !important;
       }
 
       & > tr > th.ant-table-column-sort {
@@ -551,7 +551,7 @@
       &-option-active:not(.ant-select-item-option-disabled),
       &:hover:not(.ant-select-item-disabled),
       &-active:hover:not(.ant-select-item-disabled) {
-        background-color: @dropdown-hover-bgColor;
+        background-color: @dropdown-hover-bgColor !important;
       }
     }
   }
@@ -714,7 +714,7 @@
 
     &-item:not(.ant-dropdown-menu-item-selected):hover,
     &-submenu-title:not(.ant-dropdown-menu-item-selected):hover {
-      background-color: @dropdown-hover-bgColor;
+      background-color: @dropdown-hover-bgColor !important;
     }
 
     &-title-content > a,
diff --git a/ui/src/views/dashboard/CapacityDashboard.vue b/ui/src/views/dashboard/CapacityDashboard.vue
index c2c38e7ee3..43c21202c1 100644
--- a/ui/src/views/dashboard/CapacityDashboard.vue
+++ b/ui/src/views/dashboard/CapacityDashboard.vue
@@ -21,9 +21,8 @@
       <div class="capacity-dashboard-wrapper">
         <div class="capacity-dashboard-select">
           <a-select
-            :defaultValue="zoneSelected.name"
             :placeholder="$t('label.select.a.zone')"
-            :value="zoneSelected.name"
+            v-model:value="zoneSelectedKey"
             @change="changeZone"
             showSearch
             optionFilterProp="label"
@@ -164,6 +163,15 @@ export default {
       }
     }
   },
+  computed: {
+    zoneSelectedKey () {
+      if (this.zones.length === 0) {
+        return this.zoneSelected.name
+      }
+      const zoneIndex = this.zones.findIndex(zone => zone.id === this.zoneSelected.id)
+      return zoneIndex
+    }
+  },
   created () {
     this.fetchData()
   },
diff --git a/ui/src/views/dashboard/UsageDashboard.vue b/ui/src/views/dashboard/UsageDashboard.vue
index ec43593109..677414221b 100644
--- a/ui/src/views/dashboard/UsageDashboard.vue
+++ b/ui/src/views/dashboard/UsageDashboard.vue
@@ -252,7 +252,7 @@ export default {
 </script>
 
 <style lang="less" scoped>
-  .usage-dashboard {
+  :deep(.usage-dashboard) {
 
     &-chart-tile {
       margin-bottom: 12px;