diff --git a/src/defaultCss/defaultV2Css.ts b/src/defaultCss/defaultV2Css.ts index 8806aa8811..eac8e106fa 100644 --- a/src/defaultCss/defaultV2Css.ts +++ b/src/defaultCss/defaultV2Css.ts @@ -427,6 +427,7 @@ export var defaultV2Css = { detailIconExpanded: "sd-detail-panel__icon--expanded", detailIconId: "icon-expanddetail", detailIconExpandedId: "icon-collapsedetail", + detailPanelCell: "sd-table__cell--detail-panel", actionsCell: "sd-table__cell sd-table__cell--actions", actionsCellDrag: "sd-table__cell--drag", emptyCell: "sd-table__cell--empty", diff --git a/src/defaultV2-theme/blocks/sd-table.scss b/src/defaultV2-theme/blocks/sd-table.scss index 96883469d9..b009526f19 100644 --- a/src/defaultV2-theme/blocks/sd-table.scss +++ b/src/defaultV2-theme/blocks/sd-table.scss @@ -149,6 +149,10 @@ width: calcSize(14); } +.sd-matrixdropdown .sd-table__cell--header.sd-table__cell--action { + min-width: calcSize(2); + width: calcSize(2); +} .sd-matrixdropdown .sd-table__cell--header:not(.sd-table__cell--empty) { min-width: calcSize(14); width: calcSize(14); diff --git a/src/question_matrixdropdownrendered.ts b/src/question_matrixdropdownrendered.ts index 29434bbe19..1cbfc0094c 100644 --- a/src/question_matrixdropdownrendered.ts +++ b/src/question_matrixdropdownrendered.ts @@ -392,10 +392,10 @@ export class QuestionMatrixDropdownRenderedTable extends Base { if (!isShown) return; this.headerRowValue = this.createRenderedRow(this.cssClasses); if (this.allowRowsDragAndDrop) { - this.headerRow.cells.push(this.createHeaderCell(null)); + this.headerRow.cells.push(this.createHeaderCell(null, "action")); } if (this.hasActionCellInRows("start")) { - this.headerRow.cells.push(this.createHeaderCell(null)); + this.headerRow.cells.push(this.createHeaderCell(null, "action")); } if (this.matrix.hasRowText && this.matrix.showHeader) { this.headerRow.cells.push(this.createHeaderCell(null)); @@ -943,12 +943,13 @@ export class QuestionMatrixDropdownRenderedTable extends Base { .toString(); } private createHeaderCell( - column: MatrixDropdownColumn + column: MatrixDropdownColumn, + cellType: string = null ): QuestionMatrixDropdownRenderedCell { let cell = !!column ? this.createTextCell(column.locTitle) : this.createEmptyCell(); cell.column = column; this.setHeaderCell(column, cell); - const cellType = (!!column && column.cellType !== "default") ? column.cellType : this.matrix.cellType; + if (!cellType) cellType = (!!column && column.cellType !== "default") ? column.cellType : this.matrix.cellType; this.setHeaderCellCssClasses(cell, cellType); return cell; } diff --git a/visualRegressionTests/tests/defaultV2/etalons/question-matrix-dropdown-detail-expanded.png b/visualRegressionTests/tests/defaultV2/etalons/question-matrix-dropdown-detail-expanded.png new file mode 100644 index 0000000000..053ed9f73f Binary files /dev/null and b/visualRegressionTests/tests/defaultV2/etalons/question-matrix-dropdown-detail-expanded.png differ diff --git a/visualRegressionTests/tests/defaultV2/etalons/question-matrix-dropdown-detail.png b/visualRegressionTests/tests/defaultV2/etalons/question-matrix-dropdown-detail.png new file mode 100644 index 0000000000..a3d3de803d Binary files /dev/null and b/visualRegressionTests/tests/defaultV2/etalons/question-matrix-dropdown-detail.png differ diff --git a/visualRegressionTests/tests/defaultV2/matrix.ts b/visualRegressionTests/tests/defaultV2/matrix.ts index 1ec522f8bf..c0141ab3ce 100644 --- a/visualRegressionTests/tests/defaultV2/matrix.ts +++ b/visualRegressionTests/tests/defaultV2/matrix.ts @@ -292,6 +292,81 @@ frameworks.forEach(framework => { }); }); + test("Matrix dropdown detail", async (t) => { + await wrapVisualTest(t, async (t, comparer) => { + await t.resizeWindow(1200, 1200); + await initSurvey(framework, { + "logoPosition": "right", + "pages": [ + { + "name": "page1", + "elements": [ + { + "type": "matrixdropdown", + "name": "q", + "title": "Question", + "columns": [ + { + "name": "Column 1", + "title": "Title" + }, + { + "name": "Column 2", + "title": "Title" + }, + { + "name": "Column 3", + "title": "Title" + } + ], + "rows": [ + "Row 1", "Row 2", "Row 3" + ], + "detailElements": [ + { + "type": "text", + "name": "question1", + "titleLocation": "hidden" + }, + { + "type": "text", + "name": "question2", + "titleLocation": "hidden" + }, + { + "type": "text", + "name": "question3", + "titleLocation": "hidden" + } + ], + "detailPanelMode": "underRow", + "choices": [ + 1, + 2, + 3, + 4, + 5 + ], + "cellType": "text" + } + ] + } + ], + "showQuestionNumbers": "off", + "widthMode": "static", + "width": "720px", + focusFirstQuestionAutomatic: false + }); + + const questionRoot = Selector(".sd-row"); + await takeElementScreenshot("question-matrix-dropdown-detail.png", questionRoot, t, comparer); + await t.click(Selector(".sd-table__cell--detail-button").filterVisible().nth(1)); + + await takeElementScreenshot("question-matrix-dropdown-detail-expanded.png", questionRoot, t, comparer); + + }); + }); + test("Matrix dropdown", async (t) => { await wrapVisualTest(t, async (t, comparer) => { await t.resizeWindow(800, 600);