fix(styling): better support of auto width on drop menu

ghiscoding · Nov 29, 2021 · 44a979d · 44a979d
1 parent 80b4d56
commit 44a979d
Show file tree

Hide file tree

Showing 21 changed files with 68 additions and 75 deletions.
diff --git a/src/app/examples/grid-angular.component.ts b/src/app/examples/grid-angular.component.ts
@@ -229,7 +229,6 @@ export class GridAngularComponent implements OnInit {
         field: 'id',
         formatter: () => `<div class="fake-hyperlink">Action <i class="fa fa-caret-down"></i></div>`,
         cellMenu: {
-          width: 175,
           commandTitle: 'Commands',
           commandItems: [
             {

diff --git a/src/app/examples/grid-composite-editor.component.ts b/src/app/examples/grid-composite-editor.component.ts
@@ -321,7 +321,6 @@ export class GridCompositeEditorComponent implements OnInit {
         formatter: () => `<div class="button-style margin-auto" style="width: 35px;"><span class="fa fa-chevron-down text-primary"></span></div>`,
         cellMenu: {
           hideCloseButton: false,
-          width: 175,
           commandTitle: 'Commands',
           commandItems: [
             {

diff --git a/src/app/examples/grid-contextmenu.component.ts b/src/app/examples/grid-contextmenu.component.ts
@@ -185,7 +185,6 @@ export class GridContextMenuComponent implements OnInit, OnDestroy {
         formatter: actionFormatter,
         cellMenu: {
           hideCloseButton: false,
-          width: 200,
           // you can override the logic of when the menu is usable
           // for example say that we want to show a menu only when then Priority is set to 'High'.
           // Note that this ONLY overrides the usability itself NOT the text displayed in the cell,
@@ -354,7 +353,6 @@ export class GridContextMenuComponent implements OnInit, OnDestroy {
   getContextMenuOptions(): ContextMenu {
     return {
       hideCloseButton: false,
-      width: 200,
       // optionally and conditionally define when the the menu is usable,
       // this should be used with a custom formatter to show/hide/disable the menu
       menuUsabilityOverride: (args) => {

diff --git a/src/app/examples/grid-custom-tooltip.component.ts b/src/app/examples/grid-custom-tooltip.component.ts
@@ -270,7 +270,6 @@ export class GridCustomTooltipComponent implements OnInit {
         excludeFromExport: true,
         cellMenu: {
           hideCloseButton: false,
-          width: 175,
           commandTitle: 'Commands',
           commandItems: [
             // array of command item objects, you can also use the "positionOrder" that will be used to sort the items in the list

diff --git a/src/app/examples/grid-menu.component.ts b/src/app/examples/grid-menu.component.ts
@@ -89,7 +89,7 @@ export class GridMenuComponent implements OnInit, OnDestroy {
         menuUsabilityOverride: (args) => true,
 
         // all titles optionally support translation keys, if you wish to use that feature then use the title properties with the 'Key' suffix (e.g: titleKey)
-        // example "customTitle" for a plain string OR "customTitleKey" to use a translation key
+        // example "commandTitle" for a plain string OR "commandTitleKey" to use a translation key
         commandTitleKey: 'CUSTOM_COMMANDS',
         iconCssClass: 'fa fa-ellipsis-v', // defaults to "fa-bars"
         hideForceFitButton: true,

diff --git a/src/app/examples/grid-resize-by-content.component.ts b/src/app/examples/grid-resize-by-content.component.ts
@@ -262,7 +262,6 @@ export class GridResizeByContentComponent implements OnInit {
         formatter: () => `<div class="button-style margin-auto" style="width: 35px;"><span class="fa fa-chevron-down text-primary"></span></div>`,
         cellMenu: {
           hideCloseButton: false,
-          width: 175,
           commandTitle: 'Commands',
           commandItems: [
             {

diff --git a/src/app/modules/angular-slickgrid/global-grid-options.ts b/src/app/modules/angular-slickgrid/global-grid-options.ts
@@ -50,7 +50,6 @@ export const GlobalGridOptions: Partial<GridOption> = {
     iconExportCsvCommand: 'fa fa-download',
     iconExportExcelCommand: 'fa fa-file-excel-o text-success',
     iconExportTextDelimitedCommand: 'fa fa-download',
-    width: 200,
   },
   customFooterOptions: {
     dateFormat: 'YYYY-MM-DD, hh:mm a',

diff --git a/test/cypress/integration/example01.spec.js b/test/cypress/integration/example01.spec.js
@@ -41,7 +41,7 @@ describe('Example 1 - Basic Grids', { retries: 1 }, () => {
 
     cy.get('.slick-header-menu')
       .should('be.visible')
-      .children('.slick-header-menu-item:nth-child(4)')
+      .children('.slick-header-menu-item:nth-of-type(4)')
       .children('.slick-header-menu-content')
       .should('contain', 'Sort Descending')
       .click();
@@ -66,7 +66,7 @@ describe('Example 1 - Basic Grids', { retries: 1 }, () => {
 
     cy.get('.slick-header-menu')
       .should('be.visible')
-      .children('.slick-header-menu-item:nth-child(3)')
+      .children('.slick-header-menu-item:nth-of-type(3)')
       .children('.slick-header-menu-content')
       .should('contain', 'Sort Ascending')
       .click();
@@ -85,7 +85,7 @@ describe('Example 1 - Basic Grids', { retries: 1 }, () => {
 
   it('should hover over the "Duration" column of 2nd grid, Sort Ascending and have 2 sorts', () => {
     cy.get('#grid2')
-      .find('.slick-header-column:nth-child(2)')
+      .find('.slick-header-column:nth-of-type(2)')
       .trigger('mouseover')
       .children('.slick-header-menu-button')
       .invoke('show')
@@ -94,7 +94,7 @@ describe('Example 1 - Basic Grids', { retries: 1 }, () => {
     cy.get('#grid2')
       .find('.slick-header-menu')
       .should('be.visible')
-      .children('.slick-header-menu-item:nth-child(4)')
+      .children('.slick-header-menu-item:nth-of-type(4)')
       .click();
 
     cy.get('#grid2')
@@ -238,7 +238,7 @@ describe('Example 1 - Basic Grids', { retries: 1 }, () => {
 
     cy.get('#grid1')
       .get('.slick-grid-menu:visible')
-      .find('span.close')
+      .find('.close')
       .click({ force: true });
 
     cy.get('#grid1')
@@ -286,7 +286,7 @@ describe('Example 1 - Basic Grids', { retries: 1 }, () => {
 
     cy.get('#grid2')
       .get('.slick-grid-menu:visible')
-      .find('span.close')
+      .find('.close')
       .click({ force: true });
 
     cy.get('#grid2')
@@ -328,7 +328,7 @@ describe('Example 1 - Basic Grids', { retries: 1 }, () => {
 
     cy.get('#grid1')
       .get('.slick-grid-menu:visible')
-      .find('span.close')
+      .find('.close')
       .click({ force: true });
 
     cy.get('#grid1')
@@ -356,7 +356,7 @@ describe('Example 1 - Basic Grids', { retries: 1 }, () => {
 
     cy.get('.slick-columnpicker')
       .find('.slick-columnpicker-list')
-      .children('li:nth-child(3)')
+      .children('li:nth-of-type(3)')
       .children('label')
       .should('contain', '% Complete')
       .click();
@@ -372,7 +372,7 @@ describe('Example 1 - Basic Grids', { retries: 1 }, () => {
 
     cy.get('#grid2')
       .get('.slick-columnpicker:visible')
-      .find('span.close')
+      .find('.close')
       .trigger('click')
       .click();
   });
@@ -445,7 +445,7 @@ describe('Example 1 - Basic Grids', { retries: 1 }, () => {
 
     cy.get('#grid1')
       .get('.slick-grid-menu:visible')
-      .find('span.close')
+      .find('.close')
       .click({ force: true });
   });
 });
diff --git a/test/cypress/integration/example03.spec.js b/test/cypress/integration/example03.spec.js
@@ -157,7 +157,7 @@ describe('Example 3 - Grid with Editors', { retries: 1 }, () => {
 
     cy.get('.slick-header-menu')
       .should('be.visible')
-      .children('.slick-header-menu-item:nth-child(6)')
+      .children('.slick-header-menu-item:nth-of-type(6)')
       .children('.slick-header-menu-content')
       .should('contain', 'Remove Filter')
       .click();

diff --git a/test/cypress/integration/example05.spec.js b/test/cypress/integration/example05.spec.js
@@ -699,7 +699,7 @@ describe('Example 5 - OData Grid', () => {
 
       cy.get('.slick-header-menu')
         .should('be.visible')
-        .children('.slick-header-menu-item:nth-child(6)')
+        .children('.slick-header-menu-item:nth-of-type(6)')
         .children('.slick-header-menu-content')
         .should('contain', 'Remove Filter')
         .click();

diff --git a/test/cypress/integration/example06.spec.js b/test/cypress/integration/example06.spec.js
@@ -177,7 +177,7 @@ describe('Example 6 - GraphQL Grid', { retries: 1 }, () => {
 
     cy.get('.slick-header-menu')
       .should('be.visible')
-      .children('.slick-header-menu-item:nth-child(6)')
+      .children('.slick-header-menu-item:nth-of-type(6)')
       .children('.slick-header-menu-content')
       .should('contain', 'Remove Filter')
       .click();
@@ -207,7 +207,7 @@ describe('Example 6 - GraphQL Grid', { retries: 1 }, () => {
 
     cy.get('.slick-header-menu')
       .should('be.visible')
-      .children('.slick-header-menu-item:nth-child(6)')
+      .children('.slick-header-menu-item:nth-of-type(6)')
       .children('.slick-header-menu-content')
       .should('contain', 'Remove Filter')
       .click();
@@ -238,7 +238,7 @@ describe('Example 6 - GraphQL Grid', { retries: 1 }, () => {
 
     cy.get('.slick-header-menu')
       .should('be.visible')
-      .children('.slick-header-menu-item:nth-child(6)')
+      .children('.slick-header-menu-item:nth-of-type(6)')
       .children('.slick-header-menu-content')
       .should('contain', 'Remove Filter')
       .click();
@@ -411,27 +411,27 @@ describe('Example 6 - GraphQL Grid', { retries: 1 }, () => {
 
       cy.get('.slick-header-menu')
         .should('be.visible')
-        .children('.slick-header-menu-item:nth-child(3)')
+        .children('.slick-header-menu-item:nth-of-type(3)')
         .children('.slick-header-menu-content')
         .should('contain', 'Sort Ascending');
 
       cy.get('.slick-header-menu')
-        .children('.slick-header-menu-item:nth-child(4)')
+        .children('.slick-header-menu-item:nth-of-type(4)')
         .children('.slick-header-menu-content')
         .should('contain', 'Sort Descending');
 
       cy.get('.slick-header-menu')
-        .children('.slick-header-menu-item:nth-child(6)')
+        .children('.slick-header-menu-item:nth-of-type(6)')
         .children('.slick-header-menu-content')
         .should('contain', 'Remove Filter');
 
       cy.get('.slick-header-menu')
-        .children('.slick-header-menu-item:nth-child(7)')
+        .children('.slick-header-menu-item:nth-of-type(7)')
         .children('.slick-header-menu-content')
         .should('contain', 'Remove Sort');
 
       cy.get('.slick-header-menu')
-        .children('.slick-header-menu-item:nth-child(8)')
+        .children('.slick-header-menu-item:nth-of-type(8)')
         .children('.slick-header-menu-content')
         .should('contain', 'Hide Column');
     });
@@ -459,7 +459,7 @@ describe('Example 6 - GraphQL Grid', { retries: 1 }, () => {
       cy.get('.slick-grid-menu-list li:nth(1)')
         .contains('Customer Information - Gender');
 
-      cy.get('.slick-grid-menu [data-dismiss=slick-grid-menu] > span.close')
+      cy.get('.slick-grid-menu [data-dismiss=slick-grid-menu].close')
         .click({ force: true });
     });
 
@@ -519,27 +519,27 @@ describe('Example 6 - GraphQL Grid', { retries: 1 }, () => {
 
       cy.get('.slick-header-menu')
         .should('be.visible')
-        .children('.slick-header-menu-item:nth-child(3)')
+        .children('.slick-header-menu-item:nth-of-type(3)')
         .children('.slick-header-menu-content')
         .should('contain', 'Trier par ordre croissant');
 
       cy.get('.slick-header-menu')
-        .children('.slick-header-menu-item:nth-child(4)')
+        .children('.slick-header-menu-item:nth-of-type(4)')
         .children('.slick-header-menu-content')
         .should('contain', 'Trier par ordre décroissant');
 
       cy.get('.slick-header-menu')
-        .children('.slick-header-menu-item:nth-child(6)')
+        .children('.slick-header-menu-item:nth-of-type(6)')
         .children('.slick-header-menu-content')
         .should('contain', 'Supprimer le filtre');
 
       cy.get('.slick-header-menu')
-        .children('.slick-header-menu-item:nth-child(7)')
+        .children('.slick-header-menu-item:nth-of-type(7)')
         .children('.slick-header-menu-content')
         .should('contain', 'Supprimer le tri');
 
       cy.get('.slick-header-menu')
-        .children('.slick-header-menu-item:nth-child(8)')
+        .children('.slick-header-menu-item:nth-of-type(8)')
         .children('.slick-header-menu-content')
         .should('contain', 'Cacher la colonne');
     });
@@ -567,7 +567,7 @@ describe('Example 6 - GraphQL Grid', { retries: 1 }, () => {
       cy.get('.slick-grid-menu-list li:nth(1)')
         .contains('Information Client - Sexe');
 
-      cy.get('.slick-grid-menu [data-dismiss=slick-grid-menu] > span.close')
+      cy.get('.slick-grid-menu [data-dismiss=slick-grid-menu].close')
         .click({ force: true });
     });
 

diff --git a/test/cypress/integration/example07.spec.js b/test/cypress/integration/example07.spec.js
@@ -364,7 +364,7 @@ describe('Example 7 - Header Button Plugin', { retries: 1 }, () => {
 
       cy.get('#grid7-2 .slick-header-menu')
         .should('be.visible')
-        .children('.slick-header-menu-item:nth-child(6)')
+        .children('.slick-header-menu-item:nth-of-type(6)')
         .children('.slick-header-menu-content')
         .should('contain', 'Remove Filter')
         .click();
@@ -394,7 +394,7 @@ describe('Example 7 - Header Button Plugin', { retries: 1 }, () => {
 
       cy.get('#grid7-2 .slick-header-menu')
         .should('be.visible')
-        .children('.slick-header-menu-item:nth-child(3)')
+        .children('.slick-header-menu-item:nth-of-type(3)')
         .children('.slick-header-menu-content')
         .should('contain', 'Sort Ascending')
         .click();