Skip to content

Commit bb447e1

Browse files
committed
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.
1 parent 8693934 commit bb447e1

File tree

2 files changed

+33
-9
lines changed

2 files changed

+33
-9
lines changed

client/src/components/Dataset/DatasetState.vue

Lines changed: 29 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
11
<script setup lang="ts">
22
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
3-
import { computed } from "vue";
3+
import { computed, ref } from "vue";
44
55
import { STATES } from "@/components/History/Content/model/states";
66
import { useDatasetStore } from "@/stores/datasetStore";
77
8+
import GTooltip from "@/components/BaseComponents/GTooltip.vue";
9+
810
const datasetStore = useDatasetStore();
911
1012
const props = defineProps<{
@@ -24,13 +26,37 @@ const contentCls = computed(() => {
2426
return `alert-${status}`;
2527
}
2628
});
29+
30+
// Compute short display text - capitalize the state name
31+
const displayText = computed(() => {
32+
if (!dataset.value) {
33+
return "n/a";
34+
}
35+
const state = dataset.value.state;
36+
if (!state) {
37+
return "n/a";
38+
}
39+
40+
// Capitalize first letter and replace underscores with spaces
41+
return state.charAt(0).toUpperCase() + state.slice(1).replace(/_/g, " ");
42+
});
43+
44+
// Get the full descriptive text for tooltip
45+
const tooltipText = computed(() => {
46+
return contentState.value?.text || null;
47+
});
48+
49+
// Ref for the state badge element
50+
const stateBadgeRef = ref<HTMLElement | null>(null);
2751
</script>
2852

2953
<template>
30-
<span v-if="dataset && contentState" class="rounded px-2 py-1 ml-2" :class="contentCls">
54+
<span v-if="dataset && contentState" ref="stateBadgeRef" class="rounded px-2 py-1 ml-2" :class="contentCls">
3155
<span v-if="contentState.icon" class="mr-1">
3256
<FontAwesomeIcon fixed-width :icon="contentState.icon" :spin="contentState.spin" />
3357
</span>
34-
{{ contentState.text || dataset.state || "n/a" }}
58+
{{ displayText }}
59+
60+
<GTooltip v-if="tooltipText" :reference="stateBadgeRef" :text="tooltipText" />
3561
</span>
3662
</template>

client/src/components/Dataset/DatasetView.vue

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -97,7 +97,7 @@ watch(
9797
separator
9898
inline
9999
size="lg"
100-
class="flex-grow-1"
100+
class="flex-grow-1 d-flex flex-wrap align-items-center"
101101
:collapse="headerState"
102102
@click="toggleHeaderCollapse">
103103
<span class="dataset-hid">{{ dataset?.hid }}:</span>
@@ -277,23 +277,21 @@ watch(
277277
opacity: 0;
278278
}
279279
280-
.dataset-hid,
281-
.dataset-state-header {
282-
white-space: nowrap;
283-
}
284-
285280
.dataset-hid {
281+
white-space: nowrap;
286282
margin-right: 0.25rem;
287283
}
288284
289285
.dataset-name {
290286
word-break: break-word;
287+
min-width: 0; // Allow flex item to shrink below content size
291288
}
292289
293290
.dataset-state-header {
294291
font-size: $h5-font-size;
295292
vertical-align: middle;
296293
margin-left: 0.5rem;
294+
flex-shrink: 0; // Prevent state badge from shrinking
297295
}
298296
299297
.tab-content-panel {

0 commit comments

Comments
 (0)