Merge pull request galaxyproject#17015 from ElectronicBlueberry/multi…

…select-style

Restyle Vue Multiselect and Adapt Option Order

client/src/components/Form/Elements/FormSelect.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, type ComputedRef, onMounted, watch } from "vue";
+import { computed, type ComputedRef, onMounted, type PropType, watch } from "vue";
 import Multiselect from "vue-multiselect";
 
 import { useMultiselect } from "@/composables/useMultiselect";
@@ -14,30 +14,62 @@ interface SelectOption {
     value: SelectValue;
 }
 
-const props = withDefaults(
-    defineProps<{
-        id?: string;
-        disabled?: boolean;
-        multiple?: boolean;
-        optional?: boolean;
-        options: Array<SelectOption>;
-        placeholder?: string;
-        value?: Array<SelectValue> | Record<string, unknown> | string | number;
-    }>(),
-    {
-        id: `form-select-${uid()}`,
-        disabled: false,
-        multiple: false,
-        optional: false,
-        placeholder: "Select value",
-        value: null,
-    }
-);
+const props = defineProps({
+    id: { type: String, default: `form-select-${uid()}` },
+    disabled: {
+        type: Boolean,
+        default: false,
+    },
+    multiple: {
+        type: Boolean,
+        default: false,
+    },
+    optional: {
+        type: Boolean,
+        default: false,
+    },
+    options: {
+        type: Array as PropType<Array<SelectOption>>,
+        required: true,
+    },
+    placeholder: {
+        type: String,
+        default: "Select Value",
+    },
+    value: {
+        type: String as PropType<SelectValue | SelectValue[]>,
+        default: null,
+    },
+});
 
 const emit = defineEmits<{
     (e: "input", value: SelectValue | Array<SelectValue>): void;
 }>();
 
+/**
+ * When there are more options than this, push selected options to the end
+ */
+const optionReorderThreshold = 8;
+
+const reorderedOptions = computed(() => {
+    if (props.options.length <= optionReorderThreshold) {
+        return props.options;
+    } else {
+        const selectedOptions: SelectOption[] = [];
+        const unselectedOptions: SelectOption[] = [];
+
+        props.options.forEach((option) => {
+            if (selectedValues.value.includes(option.value)) {
+                selectedOptions.push(option);
+            } else {
+                unselectedOptions.push(option);
+            }
+        });
+
+        return [...unselectedOptions, ...selectedOptions];
+    }
+});
+
 /**
  * Configure deselect label
  */
@@ -133,7 +165,7 @@ onMounted(() => {
         :deselect-label="deselectLabel"
         label="label"
         :multiple="multiple"
-        :options="props.options"
+        :options="reorderedOptions"
         :placeholder="placeholder"
         :selected-label="selectedLabel"
         select-label="Click to select"

client/src/style/scss/multiselect.scss

@@ -1,33 +1,86 @@
 .multiselect {
     font-weight: normal;
+
     .multiselect__content-wrapper {
-        background: darken($white, 2%);
         overflow-x: hidden;
     }
+
     .multiselect__input {
         background: transparent;
         padding-left: 0;
         padding-top: 2px;
-        margin-bottom: 10px;
-        font-size: 14px;
+        margin-bottom: 8px;
+        font-size: $font-size-base;
     }
+
     .multiselect__option {
+        padding: 0.5rem;
+        min-height: unset;
         white-space: normal;
         font-size: $font-size-base;
+
+        &::after {
+            line-height: unset;
+            font-size: $font-size-base;
+            height: 100%;
+            display: flex;
+            align-items: center;
+        }
     }
+
     .multiselect__option--highlight {
-        background-color: $brand-info;
+        background-color: $brand-primary;
         color: $white;
+
+        &::after {
+            background: unset;
+            font-weight: bold;
+        }
     }
+
     .multiselect__option--selected {
-        background: $brand-primary;
-        color: $brand-light;
+        background: $brand-secondary;
+        color: $brand-primary;
+
+        &::after {
+            color: darken($brand-secondary, 40%);
+        }
+
+        &.multiselect__option--highlight {
+            background: $brand-danger;
+
+            &::after {
+                background: unset;
+            }
+        }
+    }
+
+    .multiselect__placeholder {
+        margin-bottom: 8px;
     }
+
     .multiselect__tag {
-        min-height: 0;
+        min-height: unset;
         white-space: normal;
         word-break: break-all;
+        background: $brand-primary;
+        margin-right: 0.25rem;
+        margin-bottom: 0.1rem;
+
+        .multiselect__tag-icon {
+            color: $white;
+
+            &:hover,
+            &:focus {
+                background: $brand-info;
+            }
+
+            &::after {
+                color: inherit;
+            }
+        }
     }
+
     .multiselect__tags {
         background: transparent;
         border: $border-default;