Add updated table styles
- Refer below link for styles:
https://ibm.invisionapp.com/share/D8O06PPE32B#/screens
Signed-off-by: Sukanya Pandey <sukapan1@in.ibm.com>
Change-Id: I6dcc3b8d0fb7ef19388b5bfeaf87fce78725b638
diff --git a/src/assets/styles/bmc/custom/_tables.scss b/src/assets/styles/bmc/custom/_tables.scss
index b3ef056..8b8c4a8 100644
--- a/src/assets/styles/bmc/custom/_tables.scss
+++ b/src/assets/styles/bmc/custom/_tables.scss
@@ -17,6 +17,9 @@
.thead-light th {
border: none;
color: theme-color("dark");
+ &:focus {
+ outline: none;
+ }
}
.status-icon svg {
@@ -60,6 +63,17 @@
fill: theme-color("dark");
}
}
+ .b-table-sort-icon-left {
+ background-position: left calc(1.5rem / 2) center !important;
+ padding-left: calc(1.2rem + 0.65em) !important;
+ &:focus {
+ outline: none;
+ box-shadow: inset 0 0 0 2px theme-color('primary') !important;
+ }
+ &:hover {
+ background-color: theme-color-dark('light');
+ }
+ }
}
.b-table-sticky-header td {
diff --git a/src/assets/styles/bmc/helpers/_functions.scss b/src/assets/styles/bmc/helpers/_functions.scss
index 456caf3..57956c9 100644
--- a/src/assets/styles/bmc/helpers/_functions.scss
+++ b/src/assets/styles/bmc/helpers/_functions.scss
@@ -2,4 +2,8 @@
// theme variant color to use as a background color
@function theme-color-light($variant) {
@return theme-color-level($variant, -11.3);
+}
+
+@function theme-color-dark($variant) {
+ @return theme-color-level($variant, 2);
}
\ No newline at end of file
diff --git a/src/views/AccessControl/Ldap/TableRoleGroups.vue b/src/views/AccessControl/Ldap/TableRoleGroups.vue
index 8df8774..9daf1fd 100644
--- a/src/views/AccessControl/Ldap/TableRoleGroups.vue
+++ b/src/views/AccessControl/Ldap/TableRoleGroups.vue
@@ -34,6 +34,7 @@
selectable
show-empty
no-select-on-click
+ hover
no-sort-reset
sort-icon-left
:items="tableItems"
diff --git a/src/views/AccessControl/LocalUserManagement/LocalUserManagement.vue b/src/views/AccessControl/LocalUserManagement/LocalUserManagement.vue
index 31cc357..9978f4a 100644
--- a/src/views/AccessControl/LocalUserManagement/LocalUserManagement.vue
+++ b/src/views/AccessControl/LocalUserManagement/LocalUserManagement.vue
@@ -32,6 +32,7 @@
selectable
show-empty
no-select-on-click
+ hover
:fields="fields"
:items="tableItems"
:empty-text="$t('global.table.emptyMessage')"
diff --git a/src/views/AccessControl/LocalUserManagement/TableRoles.vue b/src/views/AccessControl/LocalUserManagement/TableRoles.vue
index 6596c50..b4b366a 100644
--- a/src/views/AccessControl/LocalUserManagement/TableRoles.vue
+++ b/src/views/AccessControl/LocalUserManagement/TableRoles.vue
@@ -1,5 +1,5 @@
<template>
- <b-table stacked="sm" small :items="items" :fields="fields">
+ <b-table stacked="sm" hover small :items="items" :fields="fields">
<template v-slot:cell(administrator)="data">
<template v-if="data.value">
<checkmark20 />
diff --git a/src/views/AccessControl/SslCertificates/SslCertificates.vue b/src/views/AccessControl/SslCertificates/SslCertificates.vue
index 5727595..bce50d7 100644
--- a/src/views/AccessControl/SslCertificates/SslCertificates.vue
+++ b/src/views/AccessControl/SslCertificates/SslCertificates.vue
@@ -56,6 +56,7 @@
<b-table
responsive="md"
show-empty
+ hover
:fields="fields"
:items="tableItems"
:empty-text="$t('global.table.emptyMessage')"
diff --git a/src/views/Configuration/NetworkSettings/NetworkSettings.vue b/src/views/Configuration/NetworkSettings/NetworkSettings.vue
index 863f2ab..4a181fd 100644
--- a/src/views/Configuration/NetworkSettings/NetworkSettings.vue
+++ b/src/views/Configuration/NetworkSettings/NetworkSettings.vue
@@ -104,6 +104,7 @@
<b-col lg="9" class="mb-3">
<b-table
responsive="md"
+ hover
:fields="ipv4StaticTableFields"
:items="form.ipv4StaticTableItems"
class="mb-0"
@@ -217,6 +218,7 @@
<b-col lg="4" class="mb-3">
<b-table
responsive
+ hover
:fields="dnsTableFields"
:items="form.dnsStaticTableItems"
class="mb-0"
diff --git a/src/views/Health/EventLogs/EventLogs.vue b/src/views/Health/EventLogs/EventLogs.vue
index cf5d478..af57652 100644
--- a/src/views/Health/EventLogs/EventLogs.vue
+++ b/src/views/Health/EventLogs/EventLogs.vue
@@ -47,6 +47,7 @@
selectable
no-select-on-click
sort-icon-left
+ hover
no-sort-reset
sort-desc
show-empty
diff --git a/src/views/Health/HardwareStatus/HardwareStatusTableBmcManager.vue b/src/views/Health/HardwareStatus/HardwareStatusTableBmcManager.vue
index 91aeac7..1c8bb97 100644
--- a/src/views/Health/HardwareStatus/HardwareStatusTableBmcManager.vue
+++ b/src/views/Health/HardwareStatus/HardwareStatusTableBmcManager.vue
@@ -2,6 +2,7 @@
<page-section :section-title="$t('pageHardwareStatus.bmcManager')">
<b-table
responsive="md"
+ hover
:items="items"
:fields="fields"
show-empty
diff --git a/src/views/Health/HardwareStatus/HardwareStatusTableChassis.vue b/src/views/Health/HardwareStatus/HardwareStatusTableChassis.vue
index 8fdcbfd..961396a 100644
--- a/src/views/Health/HardwareStatus/HardwareStatusTableChassis.vue
+++ b/src/views/Health/HardwareStatus/HardwareStatusTableChassis.vue
@@ -2,6 +2,7 @@
<page-section :section-title="$t('pageHardwareStatus.chassis')">
<b-table
responsive="md"
+ hover
:items="chassis"
:fields="fields"
show-empty
diff --git a/src/views/Health/HardwareStatus/HardwareStatusTableDimmSlot.vue b/src/views/Health/HardwareStatus/HardwareStatusTableDimmSlot.vue
index b72a6cc..76ef2b6 100644
--- a/src/views/Health/HardwareStatus/HardwareStatusTableDimmSlot.vue
+++ b/src/views/Health/HardwareStatus/HardwareStatusTableDimmSlot.vue
@@ -17,6 +17,7 @@
<b-table
sort-icon-left
no-sort-reset
+ hover
sort-by="health"
responsive="md"
show-empty
diff --git a/src/views/Health/HardwareStatus/HardwareStatusTableFans.vue b/src/views/Health/HardwareStatus/HardwareStatusTableFans.vue
index f35ab9d..e955eda 100644
--- a/src/views/Health/HardwareStatus/HardwareStatusTableFans.vue
+++ b/src/views/Health/HardwareStatus/HardwareStatusTableFans.vue
@@ -17,6 +17,7 @@
<b-table
sort-icon-left
no-sort-reset
+ hover
responsive="md"
sort-by="health"
show-empty
diff --git a/src/views/Health/HardwareStatus/HardwareStatusTablePowerSupplies.vue b/src/views/Health/HardwareStatus/HardwareStatusTablePowerSupplies.vue
index 51b579e..4d57fec 100644
--- a/src/views/Health/HardwareStatus/HardwareStatusTablePowerSupplies.vue
+++ b/src/views/Health/HardwareStatus/HardwareStatusTablePowerSupplies.vue
@@ -17,6 +17,7 @@
<b-table
sort-icon-left
no-sort-reset
+ hover
responsive="md"
sort-by="health"
show-empty
diff --git a/src/views/Health/HardwareStatus/HardwareStatusTableProcessors.vue b/src/views/Health/HardwareStatus/HardwareStatusTableProcessors.vue
index 6b2648b..0b2ee60 100644
--- a/src/views/Health/HardwareStatus/HardwareStatusTableProcessors.vue
+++ b/src/views/Health/HardwareStatus/HardwareStatusTableProcessors.vue
@@ -18,6 +18,7 @@
<b-table
sort-icon-left
no-sort-reset
+ hover
responsive="md"
show-empty
:items="processors"
diff --git a/src/views/Health/HardwareStatus/HardwareStatusTableStystem.vue b/src/views/Health/HardwareStatus/HardwareStatusTableStystem.vue
index 724f1c8..89ae511 100644
--- a/src/views/Health/HardwareStatus/HardwareStatusTableStystem.vue
+++ b/src/views/Health/HardwareStatus/HardwareStatusTableStystem.vue
@@ -2,6 +2,7 @@
<page-section :section-title="$t('pageHardwareStatus.system')">
<b-table
responsive="md"
+ hover
show-empty
:items="systems"
:fields="fields"
diff --git a/src/views/Health/Sensors/Sensors.vue b/src/views/Health/Sensors/Sensors.vue
index 7f25025..66bb7d5 100644
--- a/src/views/Health/Sensors/Sensors.vue
+++ b/src/views/Health/Sensors/Sensors.vue
@@ -39,6 +39,7 @@
selectable
no-select-on-click
sort-icon-left
+ hover
no-sort-reset
sticky-header="75vh"
sort-by="status"
diff --git a/src/views/Overview/OverviewEvents.vue b/src/views/Overview/OverviewEvents.vue
index a194039..ac39a2b 100644
--- a/src/views/Overview/OverviewEvents.vue
+++ b/src/views/Overview/OverviewEvents.vue
@@ -12,6 +12,7 @@
per-page="5"
sort-by="id"
sort-desc
+ hover
responsive="md"
stacked="sm"
show-empty