Redesigns Portfolio View to help with self-navigation (#167)

frontend/assets/css/overrides.css

@@ -54,3 +54,7 @@ div.p-chips .p-chips-multiple-container {
 div.p-chips .p-chips-multiple-container .p-chips-token {
   margin-right: 0;
 }
+
+div.p-accordion .p-accordion-header:not(.p-disabled).p-highlight .p-accordion-header-link {
+  background-color: #f5f5f5
+}

frontend/components/BulkActionsDrawer.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+const { t } = useI18n()
+
+const prefix = 'components/BulkActionsDrawer'
+const statePrefix = `${prefix}[${useStateIDGenerator().id()}]`
+const tt = (s: string) => t(`${prefix}.${s}`)
+
+const open = useState<boolean>(`${statePrefix}.open`, () => false)
+const icon = computed(() => open.value ? 'pi pi-chevron-left' : 'pi pi-chevron-right')
+const classes = computed(() => open.value ? 'border-2 border-primary' : 'p-button-outlined border-round')
+</script>
+
+<template>
+  <span class="p-buttonset w-fit">
+    <PVButton
+      :label="tt('Bulk Actions')"
+      class="p-button-sm"
+      :class="classes"
+      :icon="icon"
+      icon-pos="right"
+      @click="() => { open = !open}"
+    />
+    <template v-if="open">
+      <slot />
+    </template>
+  </span>
+</template>

frontend/components/CommonAccordionHeader.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+interface Props {
+  heading: string
+  subHeading?: string | undefined
+  icon?: string | undefined
+}
+const props = defineProps<Props>()
+</script>
+
+<template>
+  <div class="flex justify-content-between align-items-center w-full flex-wrap px-2">
+    <div class="flex gap-1 flex-column">
+      <div class="text-lg font-bold">
+        {{ props.heading }}
+      </div>
+      <div
+        v-if="props.subHeading"
+        class="text-sm font-light"
+      >
+        {{ props.subHeading }}
+      </div>
+    </div>
+    <i
+      v-if="props.icon"
+      :class="props.icon"
+    />
+    <slot />
+  </div>
+</template>

frontend/components/DownloadButton.vue

@@ -5,7 +5,7 @@ const { t } = useI18n()
 
 interface Props {
   value: string
-  cta: string
+  cta?: string | undefined
   fileName: string
 }
 const props = defineProps<Props>()

frontend/components/analysis/StatusChip.vue

@@ -24,28 +24,25 @@ const status = computed(() => {
   }
   return tt('Running')
 })
-const bg = computed(() => {
+const severity = computed(() => {
   if (props.analysis.completedAt !== undefined) {
     if (props.analysis.failureMessage !== undefined) {
-      return 'bg-red-400'
+      return 'danger'
     } else {
-      return 'bg-green-200'
+      return 'success'
     }
   }
   if (isStale(props.analysis)) {
-    return 'bg-red-200'
+    return 'danger'
   }
-  return 'bg-yellow-200'
+  return 'warn'
 })
 </script>
 
 <template>
-  <div
-    :class="bg"
-    class="p-1 align-self-stretch flex align-items-center justify-content-center border-round-lg"
+  <PVInlineMessage
+    :severity="severity"
   >
-    <span>
-      {{ status }}
-    </span>
-  </div>
+    {{ status }}
+  </PVInlineMessage>
 </template>

frontend/components/modal/Group.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts" />
 
 <template>
-  <div>
+  <div id="modal-group">
     <ModalError />
     <ModalLoading />
     <ModalPermissionDenied />