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

client/src/components/Dataset/DatasetState.vue

+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>

client/src/components/Dataset/DatasetView.vue

+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 {