feature update

sa-si-dev · May 9, 2021 · 36fbf2d · 36fbf2d
1 parent 6579f84
commit 36fbf2d
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 16 deletions.
diff --git a/docs/assets/sample-grid/grids-config.js b/docs/assets/sample-grid/grids-config.js
@@ -15,6 +15,7 @@ const gridsConfig = {
  name: 'First Name',
  key: 'first_name',
  width: '150px',
+ alwaysShow: true,
  filter: {},
  },
  {
@@ -23,7 +24,6 @@ const gridsConfig = {
  resizable: false,
  width: '150px',
  key: 'last_name',
- alwaysShow: true,
  filter: {},
  },
  {

diff --git a/src/grid-core.js b/src/grid-core.js
@@ -95,6 +95,7 @@ export class GridCoreComponent {
 
  <div class="grid-comp-rows-loader"></div>
  <div class="grid-comp-no-rows">${this.i18n('no.rows')}</div>
+ <div class="grid-comp-more-right-column-shadow"></div>
  <div class="grid-comp-col-resizing-line"></div>
  </div>
 
@@ -253,6 +254,7 @@ export class GridCoreComponent {
  let classNames = 'grid-comp-col';
  let textContainerClassNames = 'grid-comp-col-text-container';
  let rightSection = '';
+ let rightOutSection = '';
  let sortIcon = '';
  let resizable = colData.resizable;
  let sortable = colData.sortable;
@@ -279,7 +281,7 @@ export class GridCoreComponent {
 
  if (colData.sticky) {
  classNames += ' grid-comp-col-sticky';
- rightSection += '<span class="grid-comp-col-sticky-shadow"></span>';
+ rightOutSection += '<span class="grid-comp-col-sticky-shadow"></span>';
  }
 
  if (resizable) {
@@ -306,6 +308,7 @@ export class GridCoreComponent {
  </div>
  ${rightSection}
  </div>
+ ${rightOutSection}
  </th>`;
 
  return html;
@@ -347,7 +350,7 @@ export class GridCoreComponent {
  let value = key ? rowData[colData.key] : '';
  let classNames = 'grid-comp-col';
  let textTooltip = this.getTooltipAttrText(value, true);
- let rightSection = '';
+ let rightOutSection = '';
  let colStyle = {};
 
  let colAttrData = {
@@ -374,7 +377,7 @@ export class GridCoreComponent {
 
  if (colData.sticky) {
  classNames += ' grid-comp-col-sticky';
- rightSection += '<span class="grid-comp-col-sticky-shadow"></span>';
+ rightOutSection += '<span class="grid-comp-col-sticky-shadow"></span>';
  }
 
  if (colData.align) {
@@ -384,8 +387,8 @@ export class GridCoreComponent {
  html = `<td class="${classNames}" ${DomUtils.getAttributesText(colAttrData)}>
  <div class="grid-comp-col-content" ${DomUtils.getStyleText(colStyle)}>
  ${html}
- ${rightSection}
  </div>
+ ${rightOutSection}
  </td>`;
 
  return html;
@@ -977,6 +980,8 @@ export class GridCoreComponent {
  this.addEvent(this.$pageNavPrev, 'click', 'onPageNavPrevClick');
  this.addEvent(this.$pageNavNext, 'click', 'onPageNavNextClick');
 
+ this.addEvent(this.$tableContainer, 'scroll', 'onTableContainerScroll');
+
  if (this.showFilters) {
  this.addEvent(this.$filtersButton, 'click', 'onFiltersButtonClick');
  this.addEvent(this.$filtersBoxCancelButton, 'click', 'onFiltersBoxCancelButtonClick');
@@ -1156,6 +1161,10 @@ export class GridCoreComponent {
  onExportButtonClick(e) {
  this.exportRows(e.target);
  }
+
+ onTableContainerScroll() {
+ this.setTableColumnShadow();
+ }
  /** dom event methods - end */
 
  /** before event methods - start */
@@ -1185,6 +1194,7 @@ export class GridCoreComponent {
  this.renderFooter();
  this.setVisibleColumns();
  this.setBodyHeight();
+ this.setTableColumnShadow();
 
  if (this.showFilters) {
  this.renderFiltersBox();
@@ -1795,6 +1805,16 @@ export class GridCoreComponent {
  reqData[`${d.key}[${d.criteria}]`] = d.value;
  });
  }
+
+ setTableColumnShadow() {
+ let $tableContainer = this.$tableContainer;
+ let scrollLeft = $tableContainer.scrollLeft;
+ let hasLeftColumn = scrollLeft > 0;
+ let hasRightColumn = $tableContainer.scrollWidth > $tableContainer.clientWidth + scrollLeft;
+
+ DomUtils.toggleClass(this.$wrapper, 'has-left-column', hasLeftColumn);
+ DomUtils.toggleClass(this.$wrapper, 'has-right-column', hasRightColumn);
+ }
  /** set methods - end */
 
  /** get methods - start */

diff --git a/src/sass/partials/grid.scss b/src/sass/partials/grid.scss
@@ -59,6 +59,7 @@
  margin-top: -#{$resizeButtonSize / 2};
  opacity: 0;
  cursor: col-resize;
+ z-index: $minZIndex + 1;
 }
 
 .grid-comp-table-wrapper {
@@ -87,12 +88,26 @@
 }
 
 .grid-comp-col-sticky-shadow {
+ display: none;
  position: absolute;
  top: 0;
- right: -#{$stickyColShadowWidth + $colPaddingRight};
- width: $stickyColShadowWidth;
- height: 100%;
- background: $stickyColShadowBg;
+ right: 0;
+ bottom: 0;
+ width: 10px;
+ box-shadow: $boxShadow7;
+ pointer-events: none;
+}
+
+.grid-comp-more-right-column-shadow {
+ display: none;
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ width: 40px;
+ z-index: $minZIndex + 6;
+ background: $stickyColRightShadowBg;
+ pointer-events: none;
 }
 
 .grid-comp-col-content {
@@ -163,10 +178,6 @@
  .grid-comp-col-content {
  background-color: $rowHoverBg;
  }
-
- .grid-comp-col-sticky-shadow {
- background: $stickyColShadowBgHover;
- }
  }
  }
 }
@@ -245,6 +256,18 @@
  }
  }
 
+ &.has-left-column {
+ .grid-comp-col-sticky-shadow {
+ display: block;
+ }
+ }
+
+ &.has-right-column {
+ .grid-comp-more-right-column-shadow {
+ display: block;
+ }
+ }
+
  &.show-more-filters-tags {
  .grid-comp-filters-tags-more-button {
  .grid-comp-icon {

diff --git a/src/sass/partials/variable.scss b/src/sass/partials/variable.scss
@@ -42,16 +42,15 @@ $resizeButtonSize: $iconSize;
 $headerIconButtonSize: 36px;
 $minZIndex: 1;
 
-$stickyColShadowWidth: 10px;
-$stickyColShadowBg: linear-gradient(to right, $primaryBg, transparent);
-$stickyColShadowBgHover: linear-gradient(to right, $rowHoverBg, transparent);
+$stickyColRightShadowBg: linear-gradient(to left, $primaryBg, transparent);
 
 $boxShadow1: 0 -1px 7px 0 rgba(0, 0, 0, 0.07);
 $boxShadow2: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
 $boxShadow3: 0 -4px 8px 0 rgba(0, 0, 0, 0.2);
 $boxShadow4: inset 0px 11px 8px -10px rgba(0, 0, 0, 0.16);
 $boxShadow5: inset 0px -11px 7px -12px rgba(0, 0, 0, 0.16);
 $boxShadow6: 2px 2px 8px rgba(0, 0, 0, 0.22);
+$boxShadow7: 5px 0px 7px 0 rgba(0, 0, 0, 0.07);
 
 $dropdownArrowWidth: 30px;
 $dropdownArrowSize: 8px;