fix: adjust the styling of dropdown and multiselect components to mat…

…ch the theme (#102)

* fix: use multiselect wrapper component on all multiselect dropdowns

* fix: use unstyled dropdowns that match the theme

* feat: add hover effect to dropdown and multiselect

* refactor: remove unused pt styles

* refactor: remove unused pt export

src/assets/app.scss

@@ -86,3 +86,10 @@ h3 {
 .p-overlaypanel .p-overlaypanel-content {
   padding: 0;
 }
+
+.p-dropdown:not(.p-disabled):hover {
+  border-color: var(--primary-color);
+}
+.p-multiselect:not(.p-disabled):hover {
+  border-color: var(--primary-color);
+}

src/components/base/MultiSelect.vue

@@ -38,6 +38,9 @@ const dropdownLabel = computed(() => {
       <Icon v-show="allSelected" icon="prime:check" class="p-checkbox-icon h-5 w-5" data-pc-section="headercheckboxicon"/>
       <span :class="['ml-[7.5rem] absolute w-20 z-[1001]', allSelected ? 'text-highlight' : 'text-black']">{{ t('select_all') }}</span>
     </template>
+    <template v-for="(_, slot) in $slots" v-slot:[slot]="slotData">
+      <slot :name="slot" v-bind="slotData"></slot>
+    </template>
   </MultiSelect>
 </template>
 

src/components/workflows/WorkflowsTimeline.vue

@@ -5,7 +5,6 @@ import { computed, onMounted, ref, watch } from "vue"
 import { EvaluationMetrics, getMaxValueByMetric } from '@/helpers/metrics'
 import { useI18n } from "vue-i18n"
 import type { DropdownOption, EvaluationResultsDocumentWide, Workflow, GroundTruth } from "@/types"
-import { DropdownPassThroughStyles } from '@/helpers/pt'
 import workflowsStore from '@/store/workflows-store'
 import filtersStore from '@/store/filters-store'
 import timelineStore from "@/store/timeline-store"
@@ -47,11 +46,9 @@ watch(selectedMetric,
       <Dropdown
         v-model="selectedMetric"
         :options="metrics"
-        :pt="DropdownPassThroughStyles"
         optionLabel="label"
         placeholder="Select a metric"
-        class="grow-0"
-        unstyled
+        class="w-full md:w-56"
       />
     </div>
     <TrendLegend class="ml-auto mb-4"/>

src/components/workflows/filters/Filters.vue

@@ -2,8 +2,11 @@
 import filtersStore from "@/store/filters-store"
 import workflowsStore from "@/store/workflows-store"
 import { computed, onMounted } from "vue"
-import MultiSelect from "primevue/multiselect"
+import BaseMultiSelect from "@/components/base/MultiSelect.vue"
 import type { FilterOption } from "@/types"
+import { useI18n } from "vue-i18n"
+
+const { t } = useI18n()
 
 const gtOptions = computed(() => workflowsStore.gt.map(({ id, label }) => ({ value: id, label })))
 
@@ -15,12 +18,11 @@ onMounted(() => {
 <template>
   <div class="flex items-center">
     <span class="font-semibold mr-4">{{ $t('documents')}} ({{ $t('ground_truth')}}):</span>
-    <MultiSelect
-        :model-value="filtersStore.gt"
+    <BaseMultiSelect
+        v-model="filtersStore.gt"
         @update:model-value="filtersStore.gt = $event"
         :options="gtOptions"
-        optionLabel="label"
-        placeholder="Select Ground Truth"
+        :placeholder="t('select_ground_truth')"
         panel-class="max-w-[500px]"
         :max-selected-labels="1"
         filter
@@ -29,7 +31,7 @@ onMounted(() => {
       <template #option="{ option }: { option: FilterOption }">
         <span class="truncate">{{ option.label }}</span>
       </template>
-    </MultiSelect>
+    </BaseMultiSelect>
   </div>
 
 </template>

src/components/workflows/timeline/TimelineSorting.vue

@@ -4,7 +4,6 @@ import { computed, ref, watch } from "vue"
 import Dropdown from "primevue/dropdown"
 import { GTTimelineSortingOptions, sortByOption } from "@/helpers/sorting"
 import { useI18n } from "vue-i18n"
-import { DropdownPassThroughStyles } from "@/helpers/pt"
 
 const { t } = useI18n()
 
@@ -41,15 +40,14 @@ function updateSortedList(event: any) {
 
 </script>
 <template>
-  <div>
+  <div class="w-full">
     <p class="font-semibold mb-2">{{ t('sort_by')}}:</p>
     <Dropdown
     v-model="selectedSortOption"
     @update:model-value="updateSortedList($event)"
     :options="sortOptions"
-    :pt="DropdownPassThroughStyles"
     option-label="label"
-    unstyled
+    class="w-full md:w-56"
     />
   </div>
 </template>

src/helpers/pt.ts

@@ -7,79 +7,10 @@ const TRANSITIONS = {
   }
 }
 
-const DropdownPassThroughStyles = {
-  root: ({ props }) => ({
-    class: [
-      'cursor-pointer inline-flex relative select-none',
-      'bg-white border border-gray-300 transition-colors duration-200 ease-in-out rounded-md',
-      'dark:bg-gray-900 dark:border-primary-900/40 dark:hover:border-primary-300',
-      'w-full md:w-56',
-      'hover:border-primary focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]',
-      { 'opacity-60 select-none pointer-events-none cursor-default': props.disabled }
-    ]
-  }),
-  input: ({ props }) => ({
-    class: [
-      'cursor-pointer block flex flex-auto overflow-hidden text-ellipsis whitespace-nowrap relative',
-      'bg-transparent border-0 text-gray-800',
-      'dark:text-white/80',
-      'p-3 transition duration-200 bg-transparent rounded appearance-none font-sans text-base',
-      'focus:outline-none focus:shadow-none',
-      { 'pr-7': props.showClear }
-    ]
-  }),
-  trigger: {
-    class: ['flex items-center justify-center shrink-0', 'bg-transparent text-gray-500 w-12 rounded-tr-lg rounded-br-lg']
-  },
-  wrapper: {
-    class: ['max-h-[200px] overflow-auto', 'bg-white text-gray-700 border-0 rounded-md shadow-lg', 'dark:bg-gray-900 dark:text-white/80']
-  },
-  list: {
-    class: 'py-3 list-none m-0'
-  },
-  item: ({ context }) => ({
-    class: [
-      'cursor-pointer font-normal overflow-hidden relative whitespace-nowrap',
-      'm-0 p-3 border-0  transition-shadow duration-200 rounded-none',
-      {
-        'text-gray-700 hover:text-gray-700 hover:bg-gray-200 dark:text-white/80 dark:hover:bg-gray-800': !context.focused && !context.selected,
-        'bg-gray-300 text-gray-700 dark:text-white/80 dark:bg-gray-800/90 hover:text-gray-700 hover:bg-gray-200 dark:text-white/80 dark:hover:bg-gray-800': context.focused && !context.selected,
-        'bg-primary-100 text-primary dark:bg-primary-400 dark:text-white/80': context.focused && context.selected,
-        'bg-primary-50 text-primary dark:bg-primary-300 dark:text-white/80': !context.focused && context.selected
-      }
-    ]
-  }),
-  itemgroup: {
-    class: ['m-0 p-3 text-gray-800 bg-white font-bold', 'dark:bg-gray-900 dark:text-white/80', 'cursor-auto']
-  },
-  header: {
-    class: ['p-3 border-b border-gray-300 text-gray-700 bg-gray-100 mt-0 rounded-tl-lg rounded-tr-lg', 'dark:bg-gray-800 dark:text-white/80 dark:border-primary-900/40']
-  },
-  filtercontainer: {
-    class: 'relative'
-  },
-  filterinput: {
-    class: [
-      'pr-7 -mr-7',
-      'w-full',
-      'font-sans text-base text-gray-700 bg-white py-3 px-3 border border-gray-300 transition duration-200 rounded-lg appearance-none',
-      'dark:bg-gray-900 dark:border-primary-900/40 dark:hover:border-primary-300 dark:text-white/80',
-      'hover:border-primary focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]'
-    ]
-  },
-  filtericon: {
-    class: '-mt-2 absolute top-1/2'
-  },
-  clearicon: {
-    class: 'text-gray-500 right-12 -mt-2 absolute top-1/2'
-  },
-}
-
 const OverlayPanelDropdownStyles = {
   root: 'bg-white border border-gray-300 rounded-md'
 }
 
 export {
-  DropdownPassThroughStyles,
   OverlayPanelDropdownStyles
 }

src/locales/de.json

@@ -98,5 +98,6 @@
   "year_desc": "Zeitraum (neuster - ältester)",
   "select_a_label": "Kennzeichnung auswählen",
   "select_a_script_type": "Skript-Typ auswählen",
-  "no_labelling": "Keine Kennzeichnung"
+  "no_labelling": "Keine Kennzeichnung",
+  "select_ground_truth": "Ground Truth auswählen"
 }

src/locales/en.json

@@ -93,5 +93,6 @@
   "year_desc": "Time period (latest - oldest)",
   "select_a_label": "Select a label",
   "select_a_script_type": "Select a script-type",
-  "no_labelling": "No labelling"
+  "no_labelling": "No labelling",
+  "select_ground_truth": "Select Ground Truth"
 }