Commit bb447e17 authored by Dannon Baker's avatar Dannon Baker
Browse files

DatasetView header display improvements for small screens

Use shorter names for state tag (only in datasetview currently)
add a tooltip with the full state description
Try to adjust wrapping for smaller screens.
parent 86939344
Loading
Loading
Loading
Loading
+29 −3
Original line number Diff line number Diff line
<script setup lang="ts">
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
import { computed } from "vue";
import { computed, ref } from "vue";

import { STATES } from "@/components/History/Content/model/states";
import { useDatasetStore } from "@/stores/datasetStore";

import GTooltip from "@/components/BaseComponents/GTooltip.vue";

const datasetStore = useDatasetStore();

const props = defineProps<{
@@ -24,13 +26,37 @@ const contentCls = computed(() => {
        return `alert-${status}`;
    }
});

// Compute short display text - capitalize the state name
const displayText = computed(() => {
    if (!dataset.value) {
        return "n/a";
    }
    const state = dataset.value.state;
    if (!state) {
        return "n/a";
    }

    // Capitalize first letter and replace underscores with spaces
    return state.charAt(0).toUpperCase() + state.slice(1).replace(/_/g, " ");
});

// Get the full descriptive text for tooltip
const tooltipText = computed(() => {
    return contentState.value?.text || null;
});

// Ref for the state badge element
const stateBadgeRef = ref<HTMLElement | null>(null);
</script>

<template>
    <span v-if="dataset && contentState" class="rounded px-2 py-1 ml-2" :class="contentCls">
    <span v-if="dataset && contentState" ref="stateBadgeRef" class="rounded px-2 py-1 ml-2" :class="contentCls">
        <span v-if="contentState.icon" class="mr-1">
            <FontAwesomeIcon fixed-width :icon="contentState.icon" :spin="contentState.spin" />
        </span>
        {{ contentState.text || dataset.state || "n/a" }}
        {{ displayText }}

        <GTooltip v-if="tooltipText" :reference="stateBadgeRef" :text="tooltipText" />
    </span>
</template>
+4 −6
Original line number Diff line number Diff line
@@ -97,7 +97,7 @@ watch(
                    separator
                    inline
                    size="lg"
                    class="flex-grow-1"
                    class="flex-grow-1 d-flex flex-wrap align-items-center"
                    :collapse="headerState"
                    @click="toggleHeaderCollapse">
                    <span class="dataset-hid">{{ dataset?.hid }}:</span>
@@ -277,23 +277,21 @@ watch(
    opacity: 0;
}

.dataset-hid,
.dataset-state-header {
    white-space: nowrap;
}

.dataset-hid {
    white-space: nowrap;
    margin-right: 0.25rem;
}

.dataset-name {
    word-break: break-word;
    min-width: 0; // Allow flex item to shrink below content size
}

.dataset-state-header {
    font-size: $h5-font-size;
    vertical-align: middle;
    margin-left: 0.5rem;
    flex-shrink: 0; // Prevent state badge from shrinking
}

.tab-content-panel {