feat(xo-lite): fix ui

vatesfr · Dec 2, 2024 · 32a2c76 · 32a2c76
1 parent 19e904a
commit 32a2c76
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 16 deletions.
diff --git a/@xen-orchestra/lite/src/components/pool/network/PoolHostInternalNetworkTable.vue b/@xen-orchestra/lite/src/components/pool/network/PoolHostInternalNetworkTable.vue
@@ -23,6 +23,10 @@
             <th v-if="column.id === 'checkbox'" class="checkbox">
               <UiCheckbox :v-model="areAllSelected" accent="info" @update:model-value="toggleSelect" />
             </th>
+            <th v-else-if="column.id === 'more'" class="more">
+              <UiButtonIcon size="small" accent="info" :icon="getHeaderIcon(column.id)" />
+              {{ column.label }}
+            </th>
             <ColumnTitle v-else id="networks" :icon="getHeaderIcon(column.id)"> {{ column.label }}</ColumnTitle>
           </template>
         </tr>
@@ -31,7 +35,7 @@
         <tr v-for="row of rows" :key="row.id">
           <td v-for="column of row.visibleColumns" :key="column.id" class="typo p2-regular">
             <UiCheckbox v-if="column.id === 'checkbox'" v-model="selected" accent="info" :value="row.id" />
-            <!--            MAYBE NEED TO REMOVE `as XenApiNetwork` -->
+            <!--             NEED TO REMOVE `as XenApiNetwork` -->
             <div
               v-if="column.id === 'name_label' && (row.value as XenApiNetwork).name_label"
               v-tooltip="{ placement: 'bottom-end' }"
@@ -76,6 +80,7 @@ import VtsIcon from '@core/components/icon/VtsIcon.vue'
 import ColumnTitle from '@core/components/table/ColumnTitle.vue'
 import VtsTable from '@core/components/table/VtsTable.vue'
 import UiButton from '@core/components/ui/button/UiButton.vue'
+import UiButtonIcon from '@core/components/ui/button-icon/UiButtonIcon.vue'
 import UiCheckbox from '@core/components/ui/checkbox/UiCheckbox.vue'
 import UiQuerySearchBar from '@core/components/ui/query-search-bar/UiQuerySearchBar.vue'
 import UiTableActions from '@core/components/ui/table-actions/UiTableActions.vue'
@@ -148,3 +153,10 @@ watchEffect(() => {
   }
 })
 </script>
+
+<style scoped lang="postcss">
+.checkbox,
+.more {
+  width: 4.8rem;
+}
+</style>
diff --git a/@xen-orchestra/lite/src/components/pool/network/PoolNetworksTable.vue b/@xen-orchestra/lite/src/components/pool/network/PoolNetworksTable.vue
@@ -24,6 +24,10 @@
             <th v-if="column.id === 'checkbox'" class="checkbox">
               <UiCheckbox :v-model="areAllSelected" accent="info" @update:model-value="toggleSelect" />
             </th>
+            <th v-else-if="column.id === 'more'" class="more">
+              <UiButtonIcon size="small" accent="info" :icon="getHeaderIcon(column.id)" />
+              {{ column.label }}
+            </th>
             <ColumnTitle v-else id="networks" :icon="getHeaderIcon(column.id)"> {{ column.label }}</ColumnTitle>
           </template>
         </tr>
@@ -34,6 +38,7 @@
             <div>
               <UiCheckbox v-if="column.id === 'checkbox'" v-model="selected" accent="info" :value="row.id" />
             </div>
+            <!--             NEED TO REMOVE `as any` -->
             <div v-if="column.id === 'name_label'" v-tooltip="{ placement: 'bottom-end' }" class="text-ellipsis">
               {{ (row.value as any).network.name_label }}
             </div>
@@ -87,6 +92,7 @@ import VtsIcon from '@core/components/icon/VtsIcon.vue'
 import ColumnTitle from '@core/components/table/ColumnTitle.vue'
 import VtsTable from '@core/components/table/VtsTable.vue'
 import UiButton from '@core/components/ui/button/UiButton.vue'
+import UiButtonIcon from '@core/components/ui/button-icon/UiButtonIcon.vue'
 import UiCheckbox from '@core/components/ui/checkbox/UiCheckbox.vue'
 import UiInfo from '@core/components/ui/info/UiInfo.vue'
 import UiQuerySearchBar from '@core/components/ui/query-search-bar/UiQuerySearchBar.vue'
@@ -182,3 +188,10 @@ watchEffect(() => {
   }
 })
 </script>
+
+<style scoped lang="postcss">
+.checkbox,
+.more {
+  width: 4.8rem;
+}
+</style>
diff --git a/@xen-orchestra/lite/src/views/pool/PoolNetworkView.vue b/@xen-orchestra/lite/src/views/pool/PoolNetworkView.vue
@@ -37,28 +37,15 @@ watchEffect(() => {
 
 <style lang="postcss" scoped>
 .pool-network-view {
-  display: flex;
-
   .card {
-    display: flex;
-    flex-direction: column;
-    gap: 4rem;
+    border: solid 0.1rem var(--color-neutral-border);
     margin: 0.8rem;
 
-    .networks-content,
-    .host-internal-networks-content {
+    .networks-content {
       display: flex;
       flex-direction: column;
       gap: 2.4rem;
     }
-
-    .ui-info {
-      align-items: center;
-    }
-
-    .checkbox-header {
-      width: 4.8rem;
-    }
   }
 }
 </style>