fix(components): both Footer/Pagination should always be 100% width (#27

) * fix(components): both Footer/Pagination should always be 100% width * refactor(resizer): update resizer plugin code so that it works in SF
ghiscoding · Jul 24, 2020 · e587ef5 · e587ef5
1 parent 6292f26
commit e587ef5
Show file tree

Hide file tree

Showing 24 changed files with 227 additions and 186 deletions.
diff --git a/examples/webpack-demo-vanilla-bundle/src/app.html b/examples/webpack-demo-vanilla-bundle/src/app.html
@@ -9,12 +9,12 @@ <h4 class="title is-4 has-text-white">Slickgrid-Universal</h4>
       </span>
       <span style="position: relative; top: 5px; margin-left: 5px;">
         <iframe src="//ghbtns.com/github-btn.html?user=ghiscoding&repo=slickgrid-universal&type=star&count=true"
-                allowtransparency="true" scrolling="no" frameborder="0" width="170px" height="20px"></iframe>
+          allowtransparency="true" scrolling="no" frameborder="0" width="170px" height="20px"></iframe>
       </span>
     </a>
 
     <a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false"
-       data-target="navbarBasicExample">
+      data-target="navbarBasicExample">
       <span aria-hidden="true"></span>
       <span aria-hidden="true"></span>
       <span aria-hidden="true"></span>
@@ -67,6 +67,6 @@ <h4 class="title is-4 has-text-white">Slickgrid-Universal</h4>
   </div>
 </nav>
 
-<div class="container is-fluid" style="padding-top: 20px">
+<div class="demo-container container is-fluid" style="padding-top: 20px">
   <view-route></view-route>
 </div>
diff --git a/examples/webpack-demo-vanilla-bundle/src/examples/example01.html b/examples/webpack-demo-vanilla-bundle/src/examples/example01.html
@@ -3,17 +3,13 @@ <h3 class="title is-3">Example 01 - Basic Grids
 </h3>
 
 <h5 class="title is-5">Grid 1</h5>
-<div class="demo-container" style="height: 225px; width: 800px;">
-  <div class="grid1">
-  </div>
+<div class="grid1">
 </div>
 
 <div class="column is-half">
   <hr />
 </div>
 
 <h5 class="title is-5">Grid 2</h5>
-<div class="demo-container" style="height: 225px; width: 800px;">
-  <div class="grid2">
-  </div>
+<div class="grid2">
 </div>
diff --git a/examples/webpack-demo-vanilla-bundle/src/examples/example02.html b/examples/webpack-demo-vanilla-bundle/src/examples/example02.html
@@ -50,7 +50,5 @@ <h3 class="title is-3">
 
 <br>
 
-<div class="demo-container">
-  <div class="grid2">
-  </div>
+<div class="grid2">
 </div>
diff --git a/examples/webpack-demo-vanilla-bundle/src/examples/example03.html b/examples/webpack-demo-vanilla-bundle/src/examples/example03.html
@@ -46,7 +46,5 @@ <h3 class="title is-3">
 
 <br>
 
-<div class="demo-container">
-  <div class="grid3">
-  </div>
+<div class="grid3">
 </div>
diff --git a/examples/webpack-demo-vanilla-bundle/src/examples/example04.html b/examples/webpack-demo-vanilla-bundle/src/examples/example04.html
@@ -17,7 +17,7 @@ <h3 class="title is-3">Example 04 - Pinned (frozen) Columns/Rows</h3>
   </span>
   <span style="margin-left: 15px">
     <button class="button is-small" onclick.delegate="setFrozenColumns(-1)"
-            data-test="remove-frozen-column-button">
+      data-test="remove-frozen-column-button">
       <span class="icon mdi mdi-close"></span>
       <span>Remove Frozen Columns</span>
     </button>
@@ -34,7 +34,5 @@ <h3 class="title is-3">Example 04 - Pinned (frozen) Columns/Rows</h3>
 
 <br>
 
-<div class="demo-container">
-  <div class="grid4">
-  </div>
-</div>
+<div class="grid4">
+</div>
diff --git a/examples/webpack-demo-vanilla-bundle/src/examples/example05.html b/examples/webpack-demo-vanilla-bundle/src/examples/example05.html
@@ -29,7 +29,5 @@ <h6 class="title is-6 italic">
   </div>
 </div>
 
-<div class="demo-container">
-  <div class="grid5">
-  </div>
+<div class="grid5">
 </div>
diff --git a/examples/webpack-demo-vanilla-bundle/src/examples/example06.html b/examples/webpack-demo-vanilla-bundle/src/examples/example06.html
@@ -36,7 +36,7 @@ <h6 class="title is-6 italic">
           <div class="field has-addons">
             <p class="control is-expanded">
               <input type="text" class="input search is-small" data-test="search-string"
-                     onkeyup.delegate="searchFile(event)">
+                onkeyup.delegate="searchFile(event)">
             </p>
             <p class="control pointer" onclick.delegate="clearSearch()" data-test="clear-search-string">
               <a class="button is-static is-small">
@@ -50,7 +50,5 @@ <h6 class="title is-6 italic">
   </div>
 </div>
 
-<div class="demo-container">
-  <div class="grid6">
-  </div>
+<div class="grid6">
 </div>
diff --git a/examples/webpack-demo-vanilla-bundle/src/examples/example07.html b/examples/webpack-demo-vanilla-bundle/src/examples/example07.html
@@ -15,7 +15,5 @@ <h3 class="title is-3">
 
 <br />
 
-<div class="demo-container">
-  <div class="grid7">
-  </div>
+<div class="grid7">
 </div>
diff --git a/examples/webpack-demo-vanilla-bundle/src/examples/example08.html b/examples/webpack-demo-vanilla-bundle/src/examples/example08.html
@@ -1,30 +1,29 @@
-<div class="demo-container">
-  <h3 class="title is-3">
-    Example 08 - Column Span &amp; Header Grouping
-  </h3>
+<h3 class="title is-3">
+  Example 08 - Column Span &amp; Header Grouping
+</h3>
 
-  <h4 class="title is-4">Grid 1 <small>(with Header Grouping &amp; Colspan)</small></h4>
-  <div class="grid1">
-  </div>
+<h4 class="title is-4">Grid 1 <small>(with Header Grouping &amp; Colspan)</small></h4>
+<div class="grid1">
+</div>
+
+<hr />
 
-  <hr />
+<div class="title is-4">
+  Grid 2
+  <small>(with Header Grouping &amp; Frozen/Pinned Columns)</small>
 
-  <div class="title is-4">
-    Grid 2
-    <small>(with Header Grouping &amp; Frozen/Pinned Columns)</small>
+  <span style="margin-left: 10px">
+    <button class="button is-small" onclick.delegate="setFrozenColumns2(-1)"
+      data-test="remove-frozen-column-button">
+      <span class="icon mdi mdi-close" style="margin-top: 2px"></span>
+      <span>Remove Frozen Columns</span>
+    </button>
+    <button class="button is-small" onclick.delegate="setFrozenColumns2(2)" data-test="set-3frozen-columns">
+      <span class="icon mdi mdi-pin-outline"></span>
+      <span>Set 3 Frozen Columns</span>
+    </button>
+  </span>
+</div>
 
-    <span style="margin-left: 10px">
-      <button class="button is-small" onclick.delegate="setFrozenColumns2(-1)"
-              data-test="remove-frozen-column-button">
-        <span class="icon mdi mdi-close" style="margin-top: 2px"></span>
-        <span>Remove Frozen Columns</span>
-      </button>
-      <button class="button is-small" onclick.delegate="setFrozenColumns2(2)" data-test="set-3frozen-columns">
-        <span class="icon mdi mdi-pin-outline"></span>
-        <span>Set 3 Frozen Columns</span>
-      </button>
-    </span>
-  </div>
-  <div class="grid2">
-  </div>
+<div class="grid2">
 </div>
diff --git a/examples/webpack-demo-vanilla-bundle/src/examples/example09.html b/examples/webpack-demo-vanilla-bundle/src/examples/example09.html
@@ -4,7 +4,7 @@ <h3 class="title is-3">
 
 <div class="row">
   <button class="button is-small" data-test="clear-filters-sorting"
-          onclick.delegate="clearAllFiltersAndSorts()" title="Clear all Filters & Sorts">
+    onclick.delegate="clearAllFiltersAndSorts()" title="Clear all Filters & Sorts">
     <span>Clear all Filter &amp; Sorts</span>
     Clear all Filter & Sorts
   </button>
@@ -34,17 +34,17 @@ <h3 class="title is-3">
     <span data-test="radioVersion">
       <label class="radio-inline control-label" for="radio2">
         <input type="radio" name="inlineRadioOptions" data-test="version2" id="radio2" checked value.bind="odataVersion"
-               onclick.delegate="setOdataVersion(2)"> 2
+          onclick.delegate="setOdataVersion(2)"> 2
       </label>
       <label class="radio-inline control-label" for="radio4">
         <input type="radio" name="inlineRadioOptions" data-test="version4" id="radio4" value.bind="odataVersion"
-               onclick.delegate="setOdataVersion(4)"> 4
+          onclick.delegate="setOdataVersion(4)"> 4
       </label>
     </span>
   </span>
   <label class="checkbox-inline control-label" for="enableCount" style="margin-left: 20px">
     <input type="checkbox" id="enableCount" data-test="enable-count" checked.bind="isCountEnabled"
-           onclick.delegate="changeCountEnableFlag()">
+      onclick.delegate="changeCountEnableFlag()">
     <span style="font-weight: bold">Enable Count</span> (add to OData query)
   </label>
 </div>
@@ -63,7 +63,5 @@ <h3 class="title is-3">
   </div>
 </div>
 
-<div class="demo-container">
-  <div class="grid9">
-  </div>
+<div class="grid9">
 </div>
diff --git a/examples/webpack-demo-vanilla-bundle/src/examples/example10.html b/examples/webpack-demo-vanilla-bundle/src/examples/example10.html
@@ -1,68 +1,67 @@
-<div class="demo-container">
-  <h3 class="title is-3">
-    Example 10 - Grid with GraphQL Backend Service
-  </h3>
-  <h6 class="title is-6 italic">
-    <span style="color: red">(*) NO DATA SHOWN</span>
-    - just change any of Filters/Sorting/Pages and look at the "GraphQL Query" changing :)
-  </h6>
+<h3 class="title is-3">
+  Example 10 - Grid with GraphQL Backend Service
+</h3>
+<h6 class="title is-6 italic">
+  <span style="color: red">(*) NO DATA SHOWN</span>
+  - just change any of Filters/Sorting/Pages and look at the "GraphQL Query" changing :)
+</h6>
 
-  <div class="row">
-    <button class="button is-small" data-test="clear-filters-sorting"
-            onclick.delegate="clearAllFiltersAndSorts()" title="Clear all Filters & Sorts">
-      <span class="icon mdi mdi-close"></span>
-      <span>Clear all Filter &amp; Sorts</span>
-    </button>
-    <button class="button is-small" data-test="set-dynamic-filter"
-            onclick.delegate="setFiltersDynamically()">
-      Set Filters Dynamically
-    </button>
-    <button class="button is-small" data-test="set-dynamic-sorting"
-            onclick.delegate="setSortingDynamically()">
-      Set Sorting Dynamically
-    </button>
+<div class="row">
+  <button class="button is-small" data-test="clear-filters-sorting"
+    onclick.delegate="clearAllFiltersAndSorts()" title="Clear all Filters & Sorts">
+    <span class="icon mdi mdi-close"></span>
+    <span>Clear all Filter &amp; Sorts</span>
+  </button>
+  <button class="button is-small" data-test="set-dynamic-filter"
+    onclick.delegate="setFiltersDynamically()">
+    Set Filters Dynamically
+  </button>
+  <button class="button is-small" data-test="set-dynamic-sorting"
+    onclick.delegate="setSortingDynamically()">
+    Set Sorting Dynamically
+  </button>
 
-    <br />
+  <br />
 
-    <div class="row col-md-12">
-      <span>
-        <label>Programmatically go to first/last page:</label>
-        <button class="button is-small" data-test="goto-first-page" onclick.delegate="goToFirstPage()">
-          <i class="fa fa-caret-left fa-lg"></i>&lt;
-        </button>
-        <button class="button is-small" data-test="goto-last-page" onclick.delegate="goToLastPage()">
-          <i class="fa fa-caret-right fa-lg"></i>&gt;
-        </button>
-      </span>
+  <div class="row col-md-12">
+    <span>
+      <label>Programmatically go to first/last page:</label>
+      <button class="button is-small" data-test="goto-first-page" onclick.delegate="goToFirstPage()">
+        <i class="fa fa-caret-left fa-lg"></i>&lt;
+      </button>
+      <button class="button is-small" data-test="goto-last-page" onclick.delegate="goToLastPage()">
+        <i class="fa fa-caret-right fa-lg"></i>&gt;
+      </button>
+    </span>
 
-      <span style="margin-left: 20px">
-        <button class="button is-small" onclick.delegate="switchLanguage()" data-test="language-button">
-          Switch Language
-        </button>
-        <b>Locale:</b>
-        <span style="font-style: italic" data-test="selected-locale" innerhtml.bind="selectedLanguageFile">
-        </span>
+    <span style="margin-left: 20px">
+      <button class="button is-small" onclick.delegate="switchLanguage()" data-test="language-button">
+        Switch Language
+      </button>
+      <b>Locale:</b>
+      <span style="font-style: italic" data-test="selected-locale" innerhtml.bind="selectedLanguageFile">
       </span>
-    </div>
-
+    </span>
   </div>
 
-  <br />
+</div>
+
+<br />
 
-  <div class="columns" style="margin-top: 5px">
-    <div class="column">
-      <div class="notification is-info is-light" data-test="alert-graphql-query">
-        <strong>GraphQL Query:</strong>
-        <span data-test="graphql-query-result" innerhtml.bind="graphqlQuery"></span>
-      </div>
+<div class="columns" style="margin-top: 5px">
+  <div class="column">
+    <div class="notification is-info is-light" data-test="alert-graphql-query">
+      <strong>GraphQL Query:</strong>
+      <span data-test="graphql-query-result" innerhtml.bind="graphqlQuery"></span>
     </div>
-    <div class="column is-narrow">
-      <div class.bind="statusClass" data-test="status">
-        <strong>Status:</strong> <span innerhtml.bind="status"></span>
-      </div>
+  </div>
+  <div class="column is-narrow">
+    <div class.bind="statusClass" data-test="status">
+      <strong>Status:</strong> <span innerhtml.bind="status"></span>
     </div>
   </div>
 </div>
+</div>
 
 <hr />
 

diff --git a/examples/webpack-demo-vanilla-bundle/src/examples/example50.html b/examples/webpack-demo-vanilla-bundle/src/examples/example50.html
@@ -32,7 +32,5 @@ <h3 class="title is-3">Example 50 - SE Tree View</h3>
   </div>
 </div>
 
-<div class="demo-container">
-  <div class="grid50">
-  </div>
+<div class="grid50">
 </div>
diff --git a/examples/webpack-demo-vanilla-bundle/src/examples/example51.html b/examples/webpack-demo-vanilla-bundle/src/examples/example51.html
@@ -32,7 +32,5 @@ <h3 class="title is-3">Example 51 - SE Tree View</h3>
   </div>
 </div>
 
-<div class="demo-container">
-  <div class="grid51">
-  </div>
+<div class="grid51">
 </div>
diff --git a/package.json b/package.json
@@ -30,6 +30,8 @@
       "**/mochawesome/**",
       "**/mocha",
       "**/mocha/**",
+      "**/jest",
+      "**/jest/**",
       "**/cypress",
       "**/cypress/**"
     ]
@@ -62,4 +64,4 @@
     "node": ">=12.13.1",
     "npm": ">=6.12.1"
   }
-}
+}
diff --git a/packages/common/src/interfaces/customFooterOption.interface.ts b/packages/common/src/interfaces/customFooterOption.interface.ts
@@ -1,14 +1,4 @@
 export interface CustomFooterOption {
-  /**
-   * Defaults to "width: calc(100% - ${gridOptions.autoResize.rightPadding}px)", CSS width of the Custom Footer element.
-   * The width is calculated by taking in consideration "autoResize.rightPadding" that might optionally be provided in the grid options
-   *
-   * IMPORTANT NOTE:
-   * This property is already used by the "width" calculation, which is the default CSS styling (width: calc(100% - {rightPadding})),
-   * If you want to use it for something else than the width then make sure to also include the width calculation inside that text styling
-   */
-  cssText?: string;
-
   /** Optionally pass some text to be displayed on the left side (in the "left-footer" css class) */
   leftFooterText?: string;
 

diff --git a/packages/common/src/interfaces/pagination.interface.ts b/packages/common/src/interfaces/pagination.interface.ts
@@ -1,14 +1,4 @@
 export interface Pagination {
-  /**
-   * Defaults to "width: calc(100% - ${gridOptions.autoResize.rightPadding}px)", CSS width of the Pagination element.
-   * The width is calculated by taking in consideration "autoResize.rightPadding" that might optionally be provided in the grid options
-   *
-   * IMPORTANT NOTE:
-   * This property is already used by the "width" calculation, which is the default CSS styling (width: calc(100% - {rightPadding})),
-   * If you want to use it for something else than the width then make sure to also include the width calculation inside that text styling
-   */
-  cssText?: string;
-
   /** Current page number that we are we currently displaying. */
   pageNumber?: number;