UI Updates for SortableTable (#2597)

* Style updates for sortableTable * remnant logs removed * renant logs removed
reactioncommerce · Jul 31, 2017 · adcd127 · adcd127
1 parent d2b0f3e
commit adcd127
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 18 deletions.
diff --git a/imports/plugins/core/ui/client/components/table/sortableTable.js b/imports/plugins/core/ui/client/components/table/sortableTable.js
@@ -172,19 +172,37 @@ class SortableTable extends Component {
   renderTableFilter() {
     const { filterType } = this.props;
 
-    if (filterType === "both" || filterType === "table") {
-      return (
-        <SortableTableFilter
-          onChange={this.handleFilterInput}
-          value={this.state.filterInput}
-          name="filterInput"
-        />
-      );
+    if (this.getMeteorData().matchingResults !== 0) {
+      if (filterType === "both" || filterType === "table") {
+        return (
+          <SortableTableFilter
+            onChange={this.handleFilterInput}
+            value={this.state.filterInput}
+            name="filterInput"
+          />
+        );
+      }
     }
 
     return null;
   }
 
+  renderPaginationBottom = () => {
+    if (this.getMeteorData().matchingResults === 0) {
+      return false;
+    }
+
+    return true;
+  }
+
+  setMinRows = () => {
+    if (this.getMeteorData().matchingResults === 0) {
+      return 3;
+    }
+
+    return 0;
+  }
+
 
   render() {
     const { ...otherProps } = this.props;
@@ -199,15 +217,17 @@ class SortableTable extends Component {
           defaultFilterMethod={this.customFilter}
           defaultPageSize={otherProps.defaultPageSize}
           filterable={this.renderColumnFilter()}
-          minRows={otherProps.minRows}
+          minRows={this.setMinRows()
+          }
           previousText={otherProps.previousText}
           nextText={otherProps.nextText}
           loadingText={otherProps.loadingText}
-          noDataText={otherProps.noDataText}
+          noDataText={() => <span className="sortableTable-noDataText">{this.props.noDataMessage}</span>}
           pageText={otherProps.pageText}
           ofText={otherProps.ofText}
           rowsText={otherProps.rowsText}
           PaginationComponent={SortableTablePagination}
+          showPaginationBottom={this.renderPaginationBottom()}
           getTrProps={(state, rowInfo, column, instance) => { // eslint-disable-line no-unused-vars
             return {
               onClick: e => { // eslint-disable-line no-unused-vars

diff --git a/imports/plugins/included/default-theme/client/styles/main.less b/imports/plugins/included/default-theme/client/styles/main.less
@@ -135,12 +135,12 @@
 @import "products/products.less";
 @import "products/attributes.less";
 @import "products/productImageGallery.less";
-@import "products/productDetail.less";
+// @import "products/productDetail.less";
 @import "products/tags.less";
-@import "products/variant.less";
+// @import "products/variant.less";
 @import "products/childVariant.less";
 @import "products/variantForm.less";
-@import "products/variantList.less";
+// @import "products/variantList.less";
 @import "products/productGrid.less";
 @import "products/productList.less";
 

diff --git a/imports/plugins/included/default-theme/client/styles/sortableTable.less b/imports/plugins/included/default-theme/client/styles/sortableTable.less
@@ -353,6 +353,8 @@
     -ms-flex: 0;
     flex: 0;
     text-align: center;
+    display: flex;
+    justify-content: center;
 
     .sortableTable-pagination {
       padding-left: 2px;
@@ -366,7 +368,7 @@
     -ms-flex: 0;
     flex: 0;
     text-align: center;
-    padding-top: 8px;
+    padding-top: 17px;
     color: @black20;
 }
 
@@ -394,7 +396,11 @@
 
 .ReactTable .-pagination .-pageInfo {
     display: inline-block;
-    margin: 3px 10px;
+    // margin: 3px 10px;
+    margin-left: 0px;
+    margin-right: 3px;
+    margin-top: 10px;
+    margin-bottom: 10px;
     white-space: nowrap;
 }
 
@@ -412,19 +418,30 @@
 }
 
 .ReactTable .rt-noData {
+    width: 100%;
+    height: 100%;
     display: block;
     position: absolute;
     left: 50%;
     top: 50%;
     -webkit-transform: translate(-50%, -50%);
     transform: translate(-50%, -50%);
-    background: rgba(255, 255, 255, 0.8);
+    background: rgba(255, 255, 255, 0.60);
     -webkit-transition: all .3s ease;
     transition: all .3s ease;
     z-index: 1;
     pointer-events: none;
     padding: 20px;
-    color: rgba(0, 0, 0, 0.5);
+    color: rgba(0, 0, 0, 0.9);
+
+    .sortableTable-noDataText {
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      -webkit-transform: translate(-50%, -50%);
+      transform: translate(-50%, -50%);
+      text-align: center;
+    }
 }
 
 .ReactTable .-loading {
@@ -497,7 +514,7 @@
 
 .ReactTable .select-wrap select {
     padding: 5px 15px 5px 7px;
-    min-width: 100px;
+    // min-width: 100px;
 }
 
 .ReactTable .select-wrap:after {