PMCORE-3284:UI - set the color in the icon for custom case list

correction menu

documentation

CR

resources/assets/js/components/headers/MultiviewHeader.vue

@@ -8,7 +8,7 @@
             <h6>
               {{ dataSubtitle.subtitle }}
               <span>
-                <i :class="dataSubtitle.icon"></i>
+                <i :class="dataSubtitle.icon" v-bind:style="setIconColor"></i>
               </span>
             </h6>
           </div>
@@ -43,6 +43,16 @@ export default {
   data() {
     return {};
   },
+  computed : {
+    /**
+     * Set color to icon defined from custom case list
+     */
+    setIconColor() {
+      return {
+        color: this.dataSubtitle.color ? this.dataSubtitle.color : '#000'
+      };
+    }
+  },
   methods: {
     classBtn(cls) {
       return "btn btn-slim btn-force-radius v-btn-header " + cls;
@@ -55,8 +65,6 @@ export default {
 .pm-multiview-header {
   margin-bottom: 7px;
 }
-.pm-multiview-header-title {
-}
 .pm-multiview-header-actions-buttons {
   text-align: end;
 }

resources/assets/js/components/menu/CustomSidebarMenuItem.vue

@@ -28,6 +28,7 @@
                 <custom-sidebar-menu-icon
                     v-if="item.icon && !isMobileItem"
                     :icon="item.icon"
+                    v-bind:style="setIconColor"
                 />
                 <transition name="fade-animation" :appear="isMobileItem">
                     <template
@@ -39,10 +40,15 @@
                     >
                     
                         <span class="vsm--title">
-                            <custom-tooltip
+                            <template v-if="itemHasChild">
-                                :data="item"
+                                <custom-tooltip
-                                ref="tooltip"
+                                    :data="item"
-                            ></custom-tooltip>
+                                    ref="tooltip"
+                                ></custom-tooltip>
+                            </template>
+                            <template v-else>
+                                <span> {{ item.title }} </span>
+                            </template>
                             <b-icon
                                 v-if="item.sortable"
                                 :icon="item.sortIcon"
@@ -281,6 +287,14 @@ export default {
                 return this.item.hidden === true;
             }
         },
+        /**
+         * Set color to icon defined from custom case list
+         */
+        setIconColor() {
+            return {
+                color: this.item.color ? this.item.color : '#fff'
+            };
+        },
     },
     watch: {
         $route() {

resources/assets/js/home/CustomCaseList/CustomCaseList.vue

@@ -468,7 +468,8 @@ export default {
             showEllipsis: false,
             dataSubtitle: {
                 subtitle: this.data.pageName,
-                icon: this.data.pageIcon
+                icon: this.data.pageIcon,
+                color: this.data.color
             },
         };
     },
@@ -806,7 +807,8 @@ export default {
                 }
                 this.dataSubtitle = {
                     subtitle: newData.pageName,
-                    icon: newData.pageIcon
+                    icon: newData.pageIcon,
+                    color: newData.color
                 }
             }
             if (this.typeView === "GRID" && this.$refs["vueTable"]) {

resources/assets/js/home/Home.vue

@@ -401,7 +401,8 @@ export default {
                         pageParent: item.item.page,
                         pageName: item.item.title,
                         pageIcon: item.item.icon,
-                        customListId: item.item.id
+                        customListId: item.item.id,
+                        color: item.item.colorScreen
                     }
                     if (this.config.setting[item.item.page] && this.config.setting[item.item.page]["customCaseList"]) {
                         this.settings = this.config.setting[item.item.page]["customCaseList"][item.item.id];

resources/assets/sass/menu.scss

@@ -112,6 +112,7 @@
 
 .vsm--link_level-2>.vsm--icon {
   margin-top: 0px;
+  padding-left: 20px;
 }
 
 .v-sidebar-menu .vsm--arrow {
@@ -196,8 +197,10 @@
   background-color: transparent !important
 }
 
-.v-sidebar-menu.vsm_collapsed .vsm--link_level-1 .vsm--icon {
+.v-sidebar-menu.vsm_collapsed .vsm--link_level-1 .vsm--icon,
-  margin-right: 0px
+.v-sidebar-menu.vsm_collapsed .vsm--link_level-2 > .vsm--icon {
+  margin-right: 0px;
+  padding-left: 0px;
 }
 
 .v-sidebar-menu.vsm_rtl {