mgr/dashboard_v2: table component style improvements

Signed-off-by: Ricardo Marques <rimarques@suse.com>

diff --git a/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/components/table/table.component.scss b/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/components/table/table.component.scss
index 6cce9423b4e45668dfb0d92460d64f89234fd251..fd51ca092a949f2b8f09af15ba0f9e52d01a1bc8 100644 (file)
--- a/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/components/table/table.component.scss
+++ b/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/components/table/table.component.scss
@@ -1,3 +1,5 @@
+@import '../../../../defaults';
+
 .dataTables_wrapper {
   margin-bottom: 25px;
   .separator {
@@ -42,6 +44,10 @@
   th.oadatatablecheckbox {
     width: 16px;
   }
+  .dataTables_length>input {
+    line-height: 25px;
+    text-align: right;
+  }
 }
 .dataTables_header {
   background-color: #f6f6f6;
@@ -69,3 +75,99 @@
     }
   }
 }
+
+::ng-deep .oadatatable {
+  border: $border-color;
+  margin-bottom: 0;
+  max-width: none!important;
+  .datatable-header {
+    background-clip: padding-box;
+    background-color: #f9f9f9;
+    background-image: -webkit-linear-gradient(top,#fafafa 0,#ededed 100%);
+    background-image: -o-linear-gradient(top,#fafafa 0,#ededed 100%);
+    background-image: linear-gradient(to bottom,#fafafa 0,#ededed 100%);
+    background-repeat: repeat-x;
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffafafa', endColorstr='#ffededed', GradientType=0);
+    .sort-asc, .sort-desc {
+      color: $oa-color-blue;
+    }
+    .datatable-header-cell{
+      @include table-cell;
+      text-align: left;
+      font-weight: bold;
+      .datatable-header-cell-label {
+        &:after {
+          font-family: FontAwesome;
+          font-weight: 400;
+          height: 9px;
+          left: 10px;
+          line-height: 12px;
+          position: relative;
+          vertical-align: baseline;
+          width: 12px;
+        }
+      }
+      &.sortable {
+        .datatable-header-cell-label:after {
+          content: " \f0dc";
+        }
+        &.sort-active {
+          &.sort-asc .datatable-header-cell-label:after {
+            content: " \f160";
+          }
+          &.sort-desc .datatable-header-cell-label:after {
+            content: " \f161";
+          }
+        }
+      }
+      &:first-child {
+        border-left: none;
+      }
+    }
+  }
+  .datatable-body {
+    .datatable-body-row {
+      &.datatable-row-even {
+        background-color: #ffffff;
+      }
+      &.datatable-row-odd {
+        background-color: #f6f6f6;
+      }
+      &.active, &.active:hover {
+        background-color: $bg-color-light-blue;
+      }
+      .datatable-body-cell{
+        @include table-cell;
+        &:first-child {
+          border-left: none;
+        }
+        .datatable-body-cell-label {
+          display: block;
+        }
+      }
+    }
+  }
+  .datatable-footer {
+    .selected-count, .page-count {
+      font-style: italic;
+      padding-left: 5px;
+    }
+    .datatable-pager .pager {
+      margin-right: 5px;
+      .pages {
+        & > a, & > span {
+          display: inline-block;
+          padding: 5px 10px;
+          margin-bottom: 5px;
+          border: none;
+        }
+        a:hover {
+          background-color: $oa-color-light-blue;
+        }
+        &.active > a {
+          background-color: $bg-color-light-blue;
+        }
+      }
+    }
+  }
+}

diff --git a/src/pybind/mgr/dashboard_v2/frontend/src/openattic-theme.scss b/src/pybind/mgr/dashboard_v2/frontend/src/openattic-theme.scss
index 08f0330420ba2fa2eedc50f448216aac4d18fc89..0d8665ea8436df38a127bf6873e70241baaf2d1f 100755 (executable)
--- a/src/pybind/mgr/dashboard_v2/frontend/src/openattic-theme.scss
+++ b/src/pybind/mgr/dashboard_v2/frontend/src/openattic-theme.scss
@@ -634,107 +634,6 @@ ul.task-queue-pagination {
   border-top: $border-color;
 }
 
-/* Table
- * Has to be here because the table component uses ngx-datatable component in
- * the template and styles are not inherited by nested components.
- */
-.ngx-datatable.oadatatable {
-  border: $border-color;
-  margin-bottom: 0;
-  max-width: none!important;
-  .datatable-header {
-    background-clip: padding-box;
-    background-color: #f9f9f9;
-    background-image: -webkit-linear-gradient(top,#fafafa 0,#ededed 100%);
-    background-image: -o-linear-gradient(top,#fafafa 0,#ededed 100%);
-    background-image: linear-gradient(to bottom,#fafafa 0,#ededed 100%);
-    background-repeat: repeat-x;
-    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffafafa', endColorstr='#ffededed', GradientType=0);
-    .sort-asc, .sort-desc {
-      color: $oa-color-blue;
-    }
-    .datatable-header-cell{
-      @include table-cell;
-      text-align: center;
-      .datatable-header-cell-label {
-        &:after {
-          font-family: FontAwesome;
-          font-weight: 400;
-          height: 9px;
-          left: 10px;
-          line-height: 12px;
-          position: relative;
-          vertical-align: baseline;
-          width: 12px;
-        }
-      }
-      &.sortable {
-        .datatable-header-cell-label:after {
-          content: " \f0dc";
-        }
-        &.sort-active {
-          &.sort-asc .datatable-header-cell-label:after {
-            content: " \f160";
-          }
-          &.sort-desc .datatable-header-cell-label:after {
-            content: " \f161";
-          }
-        }
-      }
-      &:first-child {
-        border-left: none;
-      }
-    }
-  }
-  .datatable-body {
-    .datatable-body-row {
-      &.datatable-row-even {
-        background-color: #ffffff;
-      }
-      &.datatable-row-odd {
-        background-color: #f6f6f6;
-      }
-      &:hover {
-        background-color: $oa-color-light-blue;
-      }
-      &.active, &.active:hover {
-        background-color: $bg-color-light-blue;
-      }
-      .datatable-body-cell{
-        @include table-cell;
-        &:first-child {
-          border-left: none;
-        }
-        .datatable-body-cell-label {
-          display: block;
-        }
-      }
-    }
-  }
-  .datatable-footer {
-    .selected-count .page-count {
-      padding-left: 5px;
-    }
-    .datatable-pager .pager {
-      margin-right: 5px;
-      .pages {
-        & > a, & > span {
-          display: inline-block;
-          padding: 5px 10px;
-          margin-bottom: 5px;
-          border: none;
-        }
-        a:hover {
-          background-color: $oa-color-light-blue;
-        }
-        &.active > a {
-          background-color: $bg-color-light-blue;
-        }
-      }
-    }
-  }
-}
-
 /* Typo */
 a {
   color: $oa-color-blue;