#2490: skills-client custom theme support - WIP; disabled visual regr…

…ession validation temporarily
NationalSecurityAgency · May 10, 2024 · 9353618 · 9353618
1 parent 6e8c763
commit 9353618
Show file tree

Hide file tree

Showing 33 changed files with 497 additions and 189 deletions.
diff --git a/dashboard-prime/src/components/header/SkillsBreadcrumbItem.vue b/dashboard-prime/src/components/header/SkillsBreadcrumbItem.vue
@@ -14,7 +14,7 @@ defineProps({
 </script>
 
 <template>
-  <div :data-cy="`breadcrumb-${value}`">
+  <div :data-cy="`breadcrumb-${value}`" class="sd-theme-breadcrumb-item">
     <span v-if="icon" :class="[icon, 'text-color']" aria-hidden="true" class="mr-2"/>
     <span v-if="label" class="text-color-secondary mr-1" data-cy="breadcrumbItemLabel">{{ label }}:</span>
     <span class="font-semibold" :class="valueCss" data-cy="breadcrumbItemValue">{{ value }}</span>

diff --git a/dashboard-prime/src/skills-display/SkillsDisplayInIframe.vue b/dashboard-prime/src/skills-display/SkillsDisplayInIframe.vue
@@ -8,6 +8,7 @@ const appStyleObject = ref({})
 <template>
   <div
     id="skills-display-app"
+    class="skills-client-app"
     ref="content"
     tabindex="-1"
     role="main"

diff --git a/dashboard-prime/src/skills-display/components/SkillsDisplay.vue b/dashboard-prime/src/skills-display/components/SkillsDisplay.vue
@@ -40,14 +40,14 @@ const hasBadges = computed(() => {
       <project-description v-if="showDescription" :description="description" class="mt-3"/>
       <user-overall-progress class="mt-3"/>
 
-      <div class="mt-3 flex gap-4 align-items-stretch">
-        <div class="flex align-items-center">
+      <div class="mt-3 flex flex-column lg:flex-row gap-3 align-items-stretch">
+        <div class=" align-items-center">
           <my-rank />
         </div>
         <div class="flex-1 align-items-center">
           <point-progress-chart />
         </div>
-        <div v-if="hasBadges" class="flex">
+        <div v-if="hasBadges" class="">
           <my-badges :num-badges-completed="userProgress.userProgressSummary.badges.numBadgesCompleted"></my-badges>
         </div>
       </div>

diff --git a/dashboard-prime/src/skills-display/components/SkillsDisplayHome.vue b/dashboard-prime/src/skills-display/components/SkillsDisplayHome.vue
@@ -7,7 +7,7 @@ const route = useRoute()
 </script>
 
 <template>
-  <div>
+  <div class="sd-theme-home">
     <skills-spinner :is-loading="displayAttributes.loadingConfig" class="mt-8"/>
     <router-view v-if="!displayAttributes.loadingConfig" :key="route.path"/>
   </div>

diff --git a/dashboard-prime/src/skills-display/components/badges/MyBadges.vue b/dashboard-prime/src/skills-display/components/badges/MyBadges.vue
@@ -14,11 +14,11 @@ const skillsDisplayInfo = useSkillsDisplayInfo()
 </script>
 
 <template>
-  <Card class="skills-my-rank w-min-20rem"
+  <Card class="skills-my-rank w-min-18rem"
         data-cy="myBadges"
         :pt="{ content: { class: 'py-0' } }">
     <template #subtitle>
-      <div class="text-center" data-cy="myBadgesTitle">
+      <div class="text-center text-xl font-medium" data-cy="myBadgesTitle">
         My Badges
       </div>
     </template>

diff --git a/dashboard-prime/src/skills-display/components/header/PoweredBySkilltree.vue b/dashboard-prime/src/skills-display/components/header/PoweredBySkilltree.vue
@@ -33,8 +33,8 @@ const isHovering = ref(false)
 </script>
 
 <template>
-  <div class="fadein animation-duration-500" data-cy="skillTreePoweredBy">
-    <a :href="appConfig.docsHost" target="_blank" class="skills-page-title-text-color"
+  <div class="fadein animation-duration-500 w-8rem text-left" data-cy="skillTreePoweredBy">
+    <a :href="appConfig.docsHost" target="_blank" class=""
        aria-label="Powered by SkillTree">
       <div
         class="poweredByContainer flex border-1 border-round surface-border py-1 px-2"
@@ -53,11 +53,6 @@ const isHovering = ref(false)
 </template>
 
 <style scoped>
-.poweredByContainer {
-  //width: 7.6rem !important;
-  //cursor: pointer;
-}
-
 .poweredByContainer .poweredByLabel {
   font-size: 0.8rem !important;
   margin-right: -20px !important;

diff --git a/dashboard-prime/src/skills-display/components/header/SkillsDisplayBreadcrumb.vue b/dashboard-prime/src/skills-display/components/header/SkillsDisplayBreadcrumb.vue
@@ -12,7 +12,6 @@ const displayAttributes = useSkillsDisplayAttributesState()
 const skillsDisplayInfo = useSkillsDisplayInfo()
 const route = useRoute()
 const breadcrumbState = useSkillsDisplayBreadcrumbState()
-const disabled = computed(() => themeState.theme.disableBreadcrumb)
 
 onMounted(() => {
   build()
@@ -123,8 +122,7 @@ const getContextUrl = (url) => `${skillsDisplayInfo.getRootUrl()}${url}`
 </script>
 
 <template>
-  <div v-if="!disabled"
-       class="skills-theme-breadcrumb-container flex justify-content-center" data-cy="skillsDisplayBreadcrumbBar">
+  <div class="skills-theme-breadcrumb-container flex justify-content-center" data-cy="skillsDisplayBreadcrumbBar">
     <Breadcrumb :model="breadcrumbState.breadcrumbItems" :pt="{ root: { class: 'border-none px-0 py-1' } }">
       <template #item="{ item, props }">
         <router-link

diff --git a/dashboard-prime/src/skills-display/components/home/UserOverallProgress.vue b/dashboard-prime/src/skills-display/components/home/UserOverallProgress.vue
@@ -43,7 +43,7 @@ const levelStats = computed(() => {
 <template>
   <Card>
     <template #content>
-      <div class="flex text-center">
+      <div class="flex flex-column md:flex-row gap-5 align-items-stretch text-center">
         <div class="flex-1">
           <div>
             <circle-progress

diff --git a/dashboard-prime/src/skills-display/components/progress/CircleProgress.vue b/dashboard-prime/src/skills-display/components/progress/CircleProgress.vue
@@ -97,7 +97,7 @@ const chartOptions = computed(() => {
 
 <template>
   <div class="progress-circle-wrapper">
-    <label class="text-2xl">{{ title }}</label>
+    <label class="text-2xl font-medium">{{ title }}</label>
     <div>
       <apexchart type="radialBar" height="250" :options="chartOptions" :series="series"></apexchart>
     </div>

diff --git a/dashboard-prime/src/skills-display/components/progress/MySkillLevel.vue b/dashboard-prime/src/skills-display/components/progress/MySkillLevel.vue
@@ -13,7 +13,7 @@ const totalLevels = computed(() => props.userProgress.totalLevels)
 
 <template>
   <div class="progress-circle-wrapper" data-cy="overallLevel">
-    <label class="text-2xl" data-cy="overallLevelTitle">My {{ attributes.levelDisplayName }}</label>
+    <label class="text-2xl font-medium" data-cy="overallLevelTitle">My {{ attributes.levelDisplayName }}</label>
     <div class="mt-4">
       <div class="fa-stack skills-icon trophy-stack">
         <i class="fa fa-trophy fa-stack-2x" />

diff --git a/dashboard-prime/src/skills-display/components/progress/SkillsProgressList.vue b/dashboard-prime/src/skills-display/components/progress/SkillsProgressList.vue
@@ -239,12 +239,12 @@ const isLastViewedScrollSupported = computed(() => {
         v-if="(skillsInternal && skillsInternal.length > 0 || searchString || showNoDataMsg)">
     <template #header>
       <div class="px-4 pt-3">
-        <div class="flex"
+        <div class="flex flex-wrap gap-3 flex-column md:flex-row"
              v-if="skillsInternal && skillsInternal.length > 0">
           <div class="flex-1">
-            <div class="flex">
+            <div class="flex gap-2">
               <div class="">
-                <InputGroup>
+                <InputGroup class="p-0">
                   <InputText
                     v-model="searchString"
                     :placeholder="`Search ${attributes.skillDisplayName.toLowerCase()}s`"
@@ -256,32 +256,35 @@ const isLastViewedScrollSupported = computed(() => {
                       text
                       outlined
                       @click="searchString = ''"
-                      class="position-absolute skills-theme-btn" variant="outline-info" style="right: 0rem;"
+                      class="position-absolute skills-theme-btn m-0 h-full"
                       data-cy="clearSkillsSearchInput" />
                   </InputGroupAddon>
                 </InputGroup>
               </div>
-              <div class="ml-2">
+              <div class="">
                 <skill-type-filter @filter-selected="setFilterId" :skills="skillsInternal"
                                    @clear-filter="filterId = ''" />
               </div>
+              <div class="w-min-9rem">
                 <SkillsButton
                   v-if="hasLastViewedSkill && isLastViewedScrollSupported"
                   icon="fas fa-eye"
                   label="Last Viewed"
                   :disabled="lastViewedButtonDisabled"
                   @click.prevent="scrollToLastViewedSkill"
-                  class="skills-theme-btn ml-2"
+                  class="skills-theme-btn"
                   outlined
                   size="small"
                   serverit="info"
                   :aria-label="`Jump to Last Viewed Skill`"
                   data-cy="jumpToLastViewedButton" />
+              </div>
             </div>
           </div>
 
+
           <div class="" data-cy="skillDetailsToggle">
-            <div class="flex align-content-center">
+            <div class="flex flex-row align-content-center">
               <span class="text-muted pr-1 align-content-center">{{ attributes.skillDisplayName }} Details:</span>
               <InputSwitch v-model="showDescriptionsInternal"
                            @change="onDetailsToggle"

diff --git a/dashboard-prime/src/skills-display/components/rank/LevelsBreakdownChart.vue b/dashboard-prime/src/skills-display/components/rank/LevelsBreakdownChart.vue
@@ -154,7 +154,7 @@ const chartOptions = ref({
 </script>
 
 <template>
-  <Card data-cy="levelBreakdownChart" :pt="{ content: { class: 'mb-0 pb-0'}}">
+  <Card data-cy="levelBreakdownChart" :pt="{ content: { class: 'mb-0 pb-0'}}" class="w-min-15rem">
     <template #subtitle>
       <div class="flex">
         <div>

diff --git a/dashboard-prime/src/skills-display/components/rank/MyRank.vue b/dashboard-prime/src/skills-display/components/rank/MyRank.vue
@@ -27,11 +27,11 @@ const toRankDetailsPage = computed(() => {
 </script>
 
 <template>
-<Card class="skills-my-rank w-min-20rem h-full"
+<Card class="skills-my-rank w-min-18rem h-full"
       data-cy="myRank"
       :pt="{ content: { class: 'py-0' } }">
   <template #subtitle>
-    <div class="text-center" data-cy="myRankTitle">
+    <div class="text-center text-xl font-medium" data-cy="myRankTitle">
       My Rank
     </div>
   </template>

diff --git a/dashboard-prime/src/skills-display/components/skill/SkillPage.vue b/dashboard-prime/src/skills-display/components/skill/SkillPage.vue
@@ -60,7 +60,7 @@ const isLoading = computed(() => loadingSkill.value)
       <Card class="mt-3" :pt="{ content: { class: 'p-0' }}">
         <template #content>
           <div class="flex mb-4" v-if="skill && (skill.prevSkillId || skill.nextSkillId) && !skillsDisplayInfo.isCrossProject()">
-            <div>
+            <div class="w-7rem">
               <SkillsButton
                 @click="prevButtonClicked" v-if="skill.prevSkillId"
                 outlined
@@ -72,10 +72,10 @@ const isLoading = computed(() => loadingSkill.value)
               </SkillsButton>
             </div>
             <div class="flex-1 text-center " style="font-size: 0.9rem;" data-cy="skillOrder"><span
-              class="font-italic">{{ attributes.skillDisplayName }}</span> <b>{{ skill.orderInGroup
-              }}</b> <span class="font-italic">of</span> <b>{{ skill.totalSkills }}</b>
+              class="font-italic">{{ attributes.skillDisplayName }}</span> <span class="font-semibold">{{ skill.orderInGroup
+              }}</span> <span class="font-italic">of</span> <span class="font-semibold">{{ skill.totalSkills }}</span>
             </div>
-            <div>
+            <div class="w-7rem text-right">
               <SkillsButton
                 @click="nextButtonClicked"
                 v-if="skill.nextSkillId"

diff --git a/dashboard-prime/src/skills-display/components/subjects/Ribbon.vue b/dashboard-prime/src/skills-display/components/subjects/Ribbon.vue
@@ -54,10 +54,10 @@ const shadowColor1 = tinycolor(props.color).darken(20).toString();
   }
 
   .category-ribbon {
-    width: 75%;
+    width: 80%;
     position: relative;
     text-align: center;
-    padding: 0.25em 0.5em;
+    padding: 0.3em 0.5em;
     margin: 0.5em auto 1em;
   }
   .category-ribbon-content {

diff --git a/dashboard-prime/src/skills-display/components/subjects/SubjectTile.vue b/dashboard-prime/src/skills-display/components/subjects/SubjectTile.vue
@@ -50,7 +50,7 @@ const progress = computed(() => {
 </script>
 
 <template>
-  <Card class="h-full text-center" data-cy="subjectTile">
+  <Card class="h-full text-center" data-cy="subjectTile" :pt="{ body: { class: 'pt-1'}}">
     <template #content>
       <div :data-cy="`subjectTile-${subject.subjectId}`">
         <ribbon :color="ribbonColor" class="subject-tile-ribbon">

diff --git a/dashboard-prime/src/skills-display/components/test/TestSkillsClient.vue b/dashboard-prime/src/skills-display/components/test/TestSkillsClient.vue
@@ -5,11 +5,13 @@ import { useBrowserLocation } from '@vueuse/core'
 import { useLog } from '@/components/utils/misc/useLog.js'
 import { useRoute } from 'vue-router'
 import { useAppConfig } from '@/common-components/stores/UseAppConfig.js'
+import { useTestThemeUtils } from '@/skills-display/components/test/UseTestThemeUtils.js'
 
 const route = useRoute()
 const appConfig = useAppConfig()
 const browserLocation = useBrowserLocation()
 const log = useLog()
+const testThemeUtils = useTestThemeUtils()
 
 // const clientDisplay = ref(null)
 const skillsVersion = 2147483647 // max int
@@ -31,12 +33,17 @@ if (isSummaryOnly) {
 
 log.info(`Running skills-client in test mode with params ${JSON.stringify(options)}`)
 
+
 const constructSkillsDisplay = () => {
   let props = {
     version: skillsVersion,
-    options: options
+    options: options,
   }
 
+  const customTheme = testThemeUtils.constructThemeForTest()
+  if (customTheme) {
+    props.theme = customTheme
+  }
   const clientDisplay = new SkillsDisplayJS(props)
 
   log.debug(`SkillsDisplay.vue: constructSkillsDisplay: ${JSON.stringify(props)}`)

diff --git a/dashboard-prime/src/skills-display/components/test/TestSkillsDisplay.vue b/dashboard-prime/src/skills-display/components/test/TestSkillsDisplay.vue
@@ -3,29 +3,49 @@ import { onMounted } from 'vue'
 import { useRoute } from 'vue-router'
 import { useSkillsDisplayAttributesState } from '@/skills-display/stores/UseSkillsDisplayAttributesState.js'
 import SkillsDisplayHome from '@/skills-display/components/SkillsDisplayHome.vue'
+import { useSkillsDisplayThemeState } from '@/skills-display/stores/UseSkillsDisplayThemeState.js'
+import { useLog } from '@/components/utils/misc/useLog.js'
+import { useTestThemeUtils } from '@/skills-display/components/test/UseTestThemeUtils.js'
 
 const route = useRoute()
 const projectId = route.params.projectId
 const skillsDisplayAttributes = useSkillsDisplayAttributesState()
+const themeState = useSkillsDisplayThemeState()
+const log = useLog()
+const testThemeUtils = useTestThemeUtils()
 
 onMounted(() => {
-  // constructSkillsDisplay()
+
+  log.info('Running skills-display in test mode')
   skillsDisplayAttributes.projectId = projectId
   skillsDisplayAttributes.serviceUrl = ''
   skillsDisplayAttributes.loadingConfig = false
 
   if (route.query.isSummaryOnly && route.query.isSummaryOnly === 'true') {
     skillsDisplayAttributes.isSummaryOnly = true
   }
+
+  if (route.query.disableBackButton && route.query.disableBackButton === 'true') {
+    log.info('Disabled back button')
+    skillsDisplayAttributes.internalBackButton = false
+  }
+
+  const theme = testThemeUtils.constructThemeForTest()
+  if (theme) {
+    themeState.initThemeObjInStyleTag(theme)
+  }
+
 })
 </script>
 
 <template>
-  <div class="my-3">
+  <div class="my-3" :class="{'test-skills-display-theme p-4 border-50 border-round': testThemeUtils.isThemed}">
     <skills-display-home />
   </div>
 </template>
 
 <style scoped>
-
+.test-skills-display-theme {
+  background-color: #626d7d;
+}
 </style>