Merge pull request #3443 from 3scale/pf4_tables

🦋 Upgrade all legacy tables with Patternfly
3scale · Jul 19, 2023 · 47f367a · 47f367a
2 parents 42871e7 + ee6afab
commit 47f367a
Show file tree

Hide file tree

Showing 108 changed files with 1,557 additions and 1,473 deletions.
diff --git a/app/assets/javascripts/bulk_operations.js b/app/assets/javascripts/bulk_operations.js
@@ -1,7 +1,7 @@
 ;(function($) {
 
   var handle_checkboxes = function () {
-    var table = $('table.data'),
+    var table = $('table'),
         selectTotalEntries = $('#bulk-operations a.select-total-entries');
 
     // select all checkbox
@@ -61,7 +61,7 @@
         $(this).wrapInner('<button>');
         $(this).find('button').colorbox({
           href: function(){
-            var urlParts = [operation.data('url'), $('table.data tbody .select :checked').serialize()],
+            var urlParts = [operation.data('url'), $('table tbody .select :checked').serialize()],
                 url      = null;
 
             // url address might already inludes some parameters
@@ -73,7 +73,7 @@
 
             // if total entries action was selected
             // add selected_total_entries parameter to the url
-            var selectTotalEntries = $('#bulk-operations a.select-total-entries');            
+            var selectTotalEntries = $('#bulk-operations a.select-total-entries');
             if (selectTotalEntries.length && selectTotalEntries.attr('data-selected-total-entries')) {
               url += '&selected_total_entries=true';
             }
@@ -110,7 +110,7 @@
         $this.data('default-text', $this.text());
         // new text for the link
         var newText = '(only select the ';
-        newText += $('table.data tr.selected').length;
+        newText += $('table tr.selected').length;
         newText += ' ';
         newText += $this.data('association-name');
         newText += ' on this page)';

diff --git a/app/assets/stylesheets/provider/_access_tokens.scss b/app/assets/stylesheets/provider/_access_tokens.scss
diff --git a/app/assets/stylesheets/provider/_alerts.scss b/app/assets/stylesheets/provider/_alerts.scss
diff --git a/app/assets/stylesheets/provider/_buttons.scss b/app/assets/stylesheets/provider/_buttons.scss
@@ -31,7 +31,7 @@
 
 }
 
-table.data .less-important-button,
+table .less-important-button,
 form.formtastic .button-group button.less-important-button,
 .less-important-button {
   @include internal-potato-button($secondary-button-color, $secondary-button-bg-color, $secondary-button-border-color);
@@ -42,11 +42,11 @@ table [type='submit']:not(.action):not(.pf-c-button) {
   @include internal-potato-button($important-button-color, $important-button-bg-color, $important-button-border-color);
 }
 
-table.data .important-button, .important-button, .formtastic .important-button {
+table .important-button, .important-button, .formtastic .important-button {
   @include internal-potato-button($important-button-color, $important-button-bg-color, $important-button-border-color);
 }
 
-table.data .disabled-button, .disabled-button {
+table .disabled-button, .disabled-button {
   @include internal-potato-button($disabled-button-color, $disabled-button-bg-color, $disabled-button-border-color);
   cursor: default;
 }

diff --git a/app/assets/stylesheets/provider/_colorbox.scss b/app/assets/stylesheets/provider/_colorbox.scss
@@ -44,10 +44,6 @@
       }
     }
   }
-
-  table.data + form {
-    margin: line-height-times(1) 0;
-  }
 }
 
 #cboxOverlay{

diff --git a/app/assets/stylesheets/provider/_colors.scss b/app/assets/stylesheets/provider/_colors.scss
@@ -98,9 +98,6 @@ $submenu-border-color: $border-color;
 
 $chart-background-color: $white;
 
-$log-entries-error-bg-color: $error-background-color;
-$log-entries-warning-bg-color: rgba($warning-color, 0.1);
-
 $sample-data-color: $white;
 $sample-data-bg-color: $lochMaraBlue;
 $sample-data-border-color: $lochMaraBlue;

diff --git a/app/assets/stylesheets/provider/_commons.scss b/app/assets/stylesheets/provider/_commons.scss
@@ -176,15 +176,6 @@ pre code {
   }
 }
 
-.u-code {
-  white-space: nowrap;
-}
-
-.u-unselectable {
-  -moz-user-select: none;     /* Firefox all */
-  -webkit-user-select: none;  /* Chrome & Safari */
-}
-
 .u-divider {
   height: line-height-times(1);
   margin: line-height-times(1/2) 0;
@@ -224,3 +215,7 @@ hr, {
     padding: line-height-times(1);
   }
 }
+
+.pf-m-force-float-right {
+  float: right !important; /* scss-lint:disable ImportantRule */
+}
diff --git a/app/assets/stylesheets/provider/_finance.scss b/app/assets/stylesheets/provider/_finance.scss
@@ -1,39 +1,3 @@
-table.invoice,
-table.finance_data {
-  @include white-box-shadow;
-  border-collapse: collapse;
-  color: $font-color;
-  margin-bottom: line-height-times(1);
-  width: 100%;
-}
-
-table.invoice thead,
-table.finance_data thead {
-  border-top: $border-width solid $border-color;
-  background-color: $light-background-color;
-}
-
-table.invoice tr td,
-table.invoice tr th {
-  border-bottom: 1px solid $border-color;
-  padding: line-height-times(1);
-  word-break: normal;
-}
-
-table.finance_data tbody tr td {
-  padding: line-height-times(1);
-}
-
-table.invoice caption,
-table.finance_data caption {
-  background-color: $light-background-color;
-  border-bottom: 0;
-  box-shadow: $whiteBoxShadow;
-  font-weight: $font-weight-bold;
-  padding: line-height-times(1);
-  text-align: left;
-}
-
 #actions form.button-to.remote {
   @include white-box-shadow;
   display: block;

diff --git a/app/assets/stylesheets/provider/_forms.scss b/app/assets/stylesheets/provider/_forms.scss
@@ -39,6 +39,11 @@ form.formtastic fieldset.inputs input[type='password'] {
   }
 }
 
+// HACK: overrides form.button-to min height so that it fits pf-c-table
+.pf-c-table form.button-to button.unset-min-height {
+  height: unset;
+}
+
 .error input[type='text'],
 .error textarea,
 .error select,
@@ -57,7 +62,7 @@ textarea {
 }
 
 // TODO: where is this applied and why isn't it wrapper around form?
-button:not(.pf-c-button, .pf-c-nav__link, .pf-c-dropdown__menu-item) {
+button:not(.pf-c-button, .pf-c-nav__link, .pf-c-dropdown__menu-item, .pf-c-select__menu-item) {
   min-width: line-height-times(2);
   width: auto;
 }
@@ -76,16 +81,15 @@ td.delta input[type='text'] {
   min-width: 0;
 }
 
-th input[type='text'],
-th select,
-td input[type='text'],
-td select {
-  //max-width: calc(100% - #{line-height-times(2)});
-  min-width: line-height-times(4);
-
-  &#search_month_number,
-  &#search_year {
-    width: calc(50% - #{line-height-times(2)});
+table tr.search {
+  th input[type='text'],
+  th select,
+  td input[type='text'],
+  td select {
+    &#search_month_number,
+    &#search_year {
+      width: 45%;
+    }
   }
 }
 

diff --git a/app/assets/stylesheets/provider/_invoices.scss b/app/assets/stylesheets/provider/_invoices.scss
@@ -1,15 +1,3 @@
-table.invoice tr th {
-    width: 50%;
-}
-
-#buyer_details, #provider_details {
-    display: float;
-    width: 48%;
-}
-
-#buyer_details {  float: right; }
-#provider_details {  float: left; }
-
 #actions {
     text-align: center;
     margin-bottom: line-height-times(1);

diff --git a/app/assets/stylesheets/provider/_liquid_docs.scss b/app/assets/stylesheets/provider/_liquid_docs.scss
@@ -1,10 +1,6 @@
 #liquid-docs {
   @include white-box-shadow;
   padding: line-height-times(1);
-
-  table {
-    @extend .data;
-  }
 
   hr {
     margin: line-height-times(2) 0 line-height-times(1/2) 0;

diff --git a/app/assets/stylesheets/provider/_log_entries.scss b/app/assets/stylesheets/provider/_log_entries.scss
diff --git a/app/assets/stylesheets/provider/_search.scss b/app/assets/stylesheets/provider/_search.scss
@@ -1,4 +1,4 @@
-table.data tbody tr.no_results td {
+table tbody tr.no_results td {
   line-height: 4;
   text-align: center;
 

diff --git a/app/assets/stylesheets/provider/_section.scss b/app/assets/stylesheets/provider/_section.scss
@@ -7,7 +7,6 @@
     @include white-box-shadow;
   }
 
-  &#access-tokens p,
   &#service-tokens p {
     @include white-box-shadow;
   }

diff --git a/app/assets/stylesheets/provider/_services.scss b/app/assets/stylesheets/provider/_services.scss
@@ -154,11 +154,3 @@
     display: inline-block;
   }
 }
-
-table.data.notification-settings {
-
-  .spacer {
-    padding-top: line-height-times(1);
-    visibility: hidden;
-  }
-}
diff --git a/app/assets/stylesheets/provider/_tables.scss b/app/assets/stylesheets/provider/_tables.scss
@@ -2,16 +2,6 @@
 $table-columns-width: line-height-times(11);
 $search-header-width: line-height-times(4);
 
-// Utility styles
-// TODO: Move to a separate file
-.u-word-break-all {
-  word-break: break-all;
-}
-
-.u-word-break-word {
-  word-break: break-word;
-}
-
 table:not(.pf-c-table) {
   background-color: $body-background;
   width: 100%;
@@ -26,10 +16,6 @@ table:not(.pf-c-table) {
     height: line-height-times(2);
     padding: line-height-times(1/2, true) line-height-times(1/2) line-height-times(1/2) 0;
     vertical-align: top;
-
-    &.u-underline {
-      border-bottom: $border-width solid $border-color;
-    }
   }
 
 
@@ -53,84 +39,7 @@ th.header {
   padding-top: line-height-times(2);
 }
 
-table.data:not(.pf-c-table) {
-  @include white-box-shadow;
-  border: solid $body-background line-height-times(1);
-  border-collapse: collapse;
-  border-color: transparent;
-  margin-bottom: 0;
-  margin-top: 0;
-  width: 100%;
-
-  a.is-inline {
-    display: inline;
-    padding: 0;
-    text-decoration: underline;
-  }
-
-  a {
-    display: block;
-    margin: line-height-times(-1/4) 0;
-    padding: line-height-times(1/4, true) 0;
-  }
-
-  thead {
-    vertical-align: middle;
-
-    th {
-      border-bottom: $border-width solid $border-color;
-      font-weight: $font-weight-bold;
-
-      &.actions,
-      &.right {
-        text-align: right;
-      }
-
-      a.down {
-        background: url('../images/arrow_down.gif')  no-repeat 100% 55%;
-        padding-right: line-height-times(1/2);
-      }
-
-      a.up {
-        background: url('../images/arrow_up.gif') no-repeat 100% 55%;
-        padding-right: line-height-times(1/2);
-      }
-
-      a {
-        &.up,
-        &.down {
-          background: none;
-          padding-right: 0;
-        }
-      }
-
-      &:last-child {
-        padding-right: 0;
-      }
-    }
-  }
-
-  tbody {
-    td.actions {
-      text-align: right;
-    }
-  }
-
-  &.u-sixEqualColumns tr td {
-    word-break: break-word;
-  }
-
-  td,
-  th {
-    border-bottom: $border-width solid $border-color;
-    font-weight: $font-weight-normal;
-  }
-
-  &.notification-settings,
-  &.StatsMethodsTable {
-    box-shadow: none;
-  }
-}
+// TODO: seek and destroy .is-inline, .StatsMethodsTable
 
 table:not(.pf-c-table) a.action,
 table:not(.pf-c-table) button.action {
@@ -273,7 +182,7 @@ table#contracts_table tr td.thhead {
   padding-top: 0;
 }
 
-table#backend_api_configs,table#mapping_rules {
+table#mapping_rules {
   tr th a, tr td.actions a {
     display: inline-block;
   }