feat(xo-6): handle header width

vatesfr · Dec 11, 2024 · c670c8a · c670c8a
1 parent 077a198
commit c670c8a
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 14 deletions.
diff --git a/@xen-orchestra/web-core/lib/components/table/ColumnTitle.vue b/@xen-orchestra/web-core/lib/components/table/ColumnTitle.vue
@@ -3,12 +3,12 @@
   <MenuList :disabled placement="bottom-start" border>
     <template #trigger="{ open, isOpen }">
       <th
-        :class="{ interactive, disabled, focus: isOpen }"
+        :class="[headerClass, { interactive, disabled, focus: isOpen }]"
         class="column-header"
         @click="ev => (interactive ? open(ev) : noop())"
       >
-        <div class="content">
-          <span class="label">
+        <div class="content text-ellipsis">
+          <span v-tooltip class="label">
             <VtsIcon :icon accent="current" />
             <slot />
           </span>
@@ -58,6 +58,7 @@ const props = withDefaults(
     icon?: IconDefinition
     interactive?: boolean
     disabled?: boolean
+    headerClass?: string
   }>(),
   {
     disabled: false,

diff --git a/@xen-orchestra/web-core/lib/components/ui/panel/UiPanel.vue b/@xen-orchestra/web-core/lib/components/ui/panel/UiPanel.vue
@@ -44,6 +44,7 @@ const slots = defineSlots<{
     flex-direction: column;
     padding: 0.8rem;
     gap: 0.8rem;
+    cursor: default;
   }
 
   &.error {

diff --git a/@xen-orchestra/web/src/components/pif/PifPanel.vue b/@xen-orchestra/web/src/components/pif/PifPanel.vue
@@ -257,6 +257,7 @@ const getPifData = (type: keyof XoPif) => {
     case 'netmask':
     case 'dns':
     case 'gateway':
+    case 'ip':
       return value === '' ? '-' : props.pif.netmask
     case 'mode':
       return value === 'None' ? '-' : value

diff --git a/@xen-orchestra/web/src/components/pif/PifStatus.vue b/@xen-orchestra/web/src/components/pif/PifStatus.vue
@@ -1,11 +1,12 @@
 <template>
   <UiInfo class="pif-status text-ellipsis" :accent="getStatusProps(status).accent">
-    <p class="text-ellipsis" :class="{ card }">{{ getStatusProps(status).text }}</p>
+    <p v-tooltip class="text-ellipsis" :class="{ card }">{{ getStatusProps(status).text }}</p>
   </UiInfo>
 </template>
 
 <script setup lang="ts">
 import UiInfo from '@core/components/ui/info/UiInfo.vue'
+import { vTooltip } from '@core/directives/tooltip.directive'
 import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
 import { faCheck, faExclamation } from '@fortawesome/free-solid-svg-icons'
 import { computed } from 'vue'

diff --git a/@xen-orchestra/web/src/components/pif/PifTable.vue b/@xen-orchestra/web/src/components/pif/PifTable.vue
@@ -40,7 +40,7 @@
                 <UiButtonIcon size="small" accent="info" :icon="getHeaderIcon(column.id)" />
                 {{ column.label }}
               </th>
-              <ColumnTitle v-else id="network" :class="`col-${column.id}`" :icon="getHeaderIcon(column.id)">
+              <ColumnTitle v-else id="network" :header-class="`col-${column.id}`" :icon="getHeaderIcon(column.id)">
                 {{ column.label }}
               </ColumnTitle>
             </template>
@@ -225,21 +225,24 @@ const selectRow = (rowId: XoPif['id']) => {
 
     .table {
       .col-checkbox,
-      .col-more,
-      .col-vlan {
+      .col-more {
         width: 4.5rem;
       }
 
-      .col-network,
-      .col-status,
-      .col-ip,
-      .col-mac {
+      :deep(.col-vlan) {
+        width: 8.5rem;
+      }
+
+      :deep(.col-network, .col-status, .col-ip, .col-mac),
+      :deep(.col-status),
+      :deep(.col-ip),
+      :deep(.col-mac) {
         width: 20rem;
       }
 
-      .col-device,
-      .col-mode {
-        width: 9.5rem;
+      :deep(.col-device),
+      :deep(.col-mode) {
+        width: 11rem;
       }
     }