TT#44518 PbxConfiguration: Fix item background color if in the expanded state

Change-Id: I1cfc5768f161d5e7df60c19ba5e8250c2b4acaf3

src/components/pages/PbxConfiguration/CscPbxDevice.vue

@@ -1,5 +1,5 @@
 <template>
-    <q-item class="csc-entity csc-pbx-device">
+    <q-item :class="itemClasses">
         <q-item-side v-if="!expanded">
             <q-item-tile avatar>
                 <img :src="frontImageUrl" />
@@ -180,6 +180,13 @@
             }
         },
         computed: {
+            itemClasses() {
+                let classes = ['csc-entity', 'csc-pbx-device'];
+                if (this.expanded) {
+                    classes.push('csc-item-expanded');
+                }
+                return classes;
+            },
             isMobile() {
                 return Platform.is.mobile;
             },

src/components/pages/PbxConfiguration/CscPbxGroup.vue

@@ -1,5 +1,5 @@
 <template>
-    <q-item class="csc-list-item csc-pbx-group">
+    <q-item :class="itemClasses">
         <q-item-side
             v-if="!expanded"
         >
@@ -215,6 +215,13 @@
             QAlert
         },
         computed: {
+            itemClasses() {
+                let classes = ['csc-list-item', 'csc-pbx-group'];
+                if (this.expanded) {
+                    classes.push('csc-item-expanded');
+                }
+                return classes;
+            },
             entityTitle() {
                 return this.group.display_name ?
                     this.group.display_name : this.group.username;

src/components/pages/PbxConfiguration/CscPbxSeat.vue

@@ -1,5 +1,5 @@
 <template>
-    <q-item class="csc-list-item csc-pbx-seat">
+    <q-item :class="itemClasses">
         <q-item-side
             v-if="!expanded"
         >
@@ -195,6 +195,13 @@
             QAlert
         },
         computed: {
+            itemClasses() {
+                let classes = ['csc-list-item', 'csc-pbx-seat'];
+                if (this.expanded) {
+                    classes.push('csc-item-expanded');
+                }
+                return classes;
+            },
             entityTitle() {
                 return this.seat.display_name ?
                     this.seat.display_name : this.seat.username;

src/themes/app.common.styl

@@ -1,6 +1,10 @@
 
 @import 'quasar.variables'
 
+.q-list-highlight
+    .csc-item-expanded:hover
+        background-color white
+
 .csc-item-field
     .csc-item-value
         display inline-block