[cloudstack] branch 4.18 updated: ui: Fix project theme on reload or refresh (#7893)

[weizhou]

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

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


The following commit(s) were added to refs/heads/4.18 by this push:
     new 0e9a19f24db ui: Fix project theme on reload or refresh (#7893)
0e9a19f24db is described below

commit 0e9a19f24db7b7585f1b952b403b3f6e619cb53f
Author: Rohit Yadav <rohit.ya...@shapeblue.com>
AuthorDate: Tue Aug 22 17:50:45 2023 +0530

    ui: Fix project theme on reload or refresh (#7893)
    
    * css fixes from main
    
    Signed-off-by: Rohit Yadav <rohit.ya...@shapeblue.com>
    
    * component: when in project, toggle the theme also
    
    Signed-off-by: Rohit Yadav <rohit.ya...@shapeblue.com>
    
    ---------
    
    Signed-off-by: Rohit Yadav <rohit.ya...@shapeblue.com>
---
 ui/src/components/header/ProjectMenu.vue        | 1 +
 ui/src/views/compute/CreateAutoScaleVmGroup.vue | 4 ++--
 ui/src/views/compute/DeployVM.vue               | 4 ++--
 3 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/ui/src/components/header/ProjectMenu.vue 
b/ui/src/components/header/ProjectMenu.vue
index 722bc2877d6..95a12ffeb1d 100644
--- a/ui/src/components/header/ProjectMenu.vue
+++ b/ui/src/components/header/ProjectMenu.vue
@@ -78,6 +78,7 @@ export default {
       let projectIndex = 0
       if (this.$store.getters?.project?.id) {
         projectIndex = this.projects.findIndex(project => project.id === 
this.$store.getters.project.id)
+        this.$store.dispatch('ToggleTheme', projectIndex === undefined ? 
'light' : 'dark')
       }
 
       return projectIndex
diff --git a/ui/src/views/compute/CreateAutoScaleVmGroup.vue 
b/ui/src/views/compute/CreateAutoScaleVmGroup.vue
index 81da8a9b6d7..b9dce0ed500 100644
--- a/ui/src/views/compute/CreateAutoScaleVmGroup.vue
+++ b/ui/src/views/compute/CreateAutoScaleVmGroup.vue
@@ -34,7 +34,7 @@
                   <div style="margin-top: 15px">
                     <span>{{ $t('message.select.a.zone') }}</span><br/>
                     <a-form-item :label="$t('label.zoneid')" name="zoneid" 
ref="zoneid">
-                      <div v-if="zones.length <= 9">
+                      <div v-if="zones.length <= 8">
                         <a-row type="flex" :gutter="[16,18]" justify="start">
                           <div v-for="(zoneItem, idx) in zones" :key="idx">
                             <a-radio-group
@@ -3168,7 +3168,7 @@ export default {
 
   .zone-radio-button {
     width:100%;
-    min-width: 225px;
+    min-width: 345px;
     height: 60px;
     display: flex;
     padding-left: 20px;
diff --git a/ui/src/views/compute/DeployVM.vue 
b/ui/src/views/compute/DeployVM.vue
index bb94c87db74..f31c48ee8d4 100644
--- a/ui/src/views/compute/DeployVM.vue
+++ b/ui/src/views/compute/DeployVM.vue
@@ -34,7 +34,7 @@
                   <div style="margin-top: 15px">
                     <span>{{ $t('message.select.a.zone') }}</span><br/>
                     <a-form-item :label="$t('label.zoneid')" name="zoneid" 
ref="zoneid">
-                      <div v-if="zones.length <= 9">
+                      <div v-if="zones.length <= 8">
                         <a-row type="flex" :gutter="[16, 18]" justify="start">
                           <div v-for="(zoneItem, idx) in zones" :key="idx">
                             <a-radio-group
@@ -2698,7 +2698,7 @@ export default {
 
   .zone-radio-button {
     width:100%;
-    min-width: 225px;
+    min-width: 345px;
     height: 60px;
     display: flex;
     padding-left: 20px;