Merge pull request #662 from bcgov/sam-student-profile

tabs and subtabs style updated
bcgov · Oct 30, 2024 · 80d14f9 · 80d14f9
2 parents ce1b1b6 + 357558d
commit 80d14f9
Show file tree

Hide file tree

Showing 5 changed files with 54 additions and 39 deletions.
diff --git a/frontend/src/assets/css/global.css b/frontend/src/assets/css/global.css
@@ -153,6 +153,22 @@ th {
   font-weight: bold;
   color: rgb(var(--v-theme-bcGovBlue));
 }
-/* .v-label{
-  padding-top: 8px;
-} */
+.bg-primary .v-btn.v-tab {
+  background-color: rgb(var(--v-theme-primary));
+  border-radius: 4px 4px 0 0;
+  margin: 2px 1px 0 1px;
+}
+.bg-primary .v-btn.v-tab-item--selected {
+  background-color: white;
+  border: solid 1px rgba(var(--v-border-color), var(--v-border-opacity));
+  color: rgb(var(--v-theme-primary));
+  font-weight: bold;
+}
+.v-btn.v-tab-item--selected .v-tab__slider {
+  display: none;
+}
+.v-slide-group.bg-primary {
+  background-color: white !important;
+}
+
+
diff --git a/frontend/src/components/StudentProfile/AuditHistory/StudentAuditHistory.vue b/frontend/src/components/StudentProfile/AuditHistory/StudentAuditHistory.vue
@@ -2,10 +2,20 @@
   <v-card no-body>
     <v-tabs v-model="selectedTab">
       <v-tab value="studentChangeHistory"
-        ><v-chip class="text-none">Student Change History</v-chip></v-tab
+        ><v-chip
+          class="text-none"
+          color="primary"
+          :variant="selectedTab == 'studentChangeHistory' ? 'flat' : 'outlined'"
+          >Student Change History</v-chip
+        ></v-tab
       >
       <v-tab value="optionalProgramChangeHistory"
-        ><v-chip class="text-none"
+        ><v-chip
+          class="text-none"
+          color="primary"
+          :variant="
+            selectedTab == 'optionalProgramChangeHistory' ? 'flat' : 'outlined'
+          "
           >Optional Program Change History</v-chip
         ></v-tab
       >
@@ -70,30 +80,6 @@
             <template v-slot:item.updateDate="{ item }">
               {{ $filters.formatTime(item.updateDate) }}
             </template>
-
-            <!-- Attempt at dynamic rendering of slots -->
-            <!-- <template
-              v-for="header in studentChangeFields.filter(
-                (field) => field.key != 'data-table-expand'
-              )"
-              v-slot:[`item.${header.key}`]="{ item }"
-            >
-              <slot :name="`item.${header.key}`" :value="item[header.key]">
-                <div v-if="header.key == 'activityCode'">
-                  {{ item.data.activityCodeDescription }}
-                </div>
-                <div v-else-if="header.key == 'updateDate'">
-                  {{ $filters.formatTime(item.data.updateDate) }}
-                </div>
-                <div v-else-if="header.key == 'data-table-expand'">EXPAND</div>
-                <div
-                  v-else
-                  :class="item[header.key].changed ? 'value-changed' : ''"
-                >
-                  {{ item[header.key].value }}
-                </div>
-              </slot>
-            </template> -->
           </v-data-table>
         </v-window-item>
 
@@ -183,7 +169,7 @@ export default {
   },
   data: function () {
     return {
-      selectedTab: 0,
+      selectedTab: "studentChangeHistory",
       isEdit: false,
       isDelete: false,
       isAdd: false,

diff --git a/frontend/src/main.js b/frontend/src/main.js
@@ -28,6 +28,7 @@ const bcGovTheme = {
     secondary: "#7490BA",
     bcGovBlue: "#003366",
     bcGovGold: "#FCBA19",
+    bcLightGrey: "#EEEEEE",
     error: "#D8292F",
     info: "#003366",
     success: "#2E8540",

diff --git a/frontend/src/views/Programs.vue b/frontend/src/views/Programs.vue
@@ -91,6 +91,5 @@ export default {
 :deep(a.v-btn),
 :deep(a.v-btn.v-tab-item--selected) {
   text-decoration: none;
-  color: #fff;
 }
 </style>
diff --git a/frontend/src/views/StudentProfile.vue b/frontend/src/views/StudentProfile.vue
@@ -67,7 +67,7 @@
     <!-- Studnet Demo. end-->
     <div class="row m-0">
       <div class="col-12 px-0">
-        <v-card class="p-0" color="#f2f2f2" :disabled="tabLoading">
+        <v-card class="p-0" :disabled="tabLoading">
           <v-window v-model="tab">
             <v-window-item value="gradStatusTab">
               <v-tabs v-model="selectedTab" bg-color="primary" grow>
@@ -99,13 +99,26 @@
                   <v-window-item value="GRAD">
                     <v-tabs v-model="selectedSubTab" color="primary">
                       <v-tab value="gradStatusTab" class="text-none"
-                        ><v-chip class="text-none">GRAD Status</v-chip></v-tab
+                        ><v-chip
+                          class="text-none"
+                          color="primary"
+                          :variant="
+                            selectedSubTab == 'gradStatusTab'
+                              ? 'flat'
+                              : 'outlined'
+                          "
+                          >GRAD Status</v-chip
+                        ></v-tab
                       >
-                      <v-tab
-                        value="requirementDetailsTab"
-                        class="text-none"
-                        color="primary"
-                        ><v-chip class="text-none"
+                      <v-tab value="requirementDetailsTab" class="text-none"
+                        ><v-chip
+                          class="text-none"
+                          color="primary"
+                          :variant="
+                            selectedSubTab == 'requirementDetailsTab'
+                              ? 'flat'
+                              : 'outlined'
+                          "
                           >Requirement Details</v-chip
                         ></v-tab
                       >
@@ -678,7 +691,7 @@ export default {
       // studentUngradReasonSelected: "",
       // studentUngradReasonDescription: "",
       // confirmStudentUndoCompletion: false,
-      selectedSubTab: 0,
+      selectedSubTab: "gradStatus",
       selectedTab: 0,
       projectedGradStatus: [],
       projectedGradStatusWithRegistrations: [],