#8110 Matrix. Areas have different colors in some themes. (#8118)

* #8110 Matrix. Areas have different colors in some themes. Fixes #8110 * #8110 Matrix. Areas have different colors in some themes. Fixes #8110
surveyjs · Apr 16, 2024 · 422cbd7 · 422cbd7
1 parent 4512328
commit 422cbd7
Show file tree

Hide file tree

Showing 3 changed files with 103 additions and 0 deletions.
diff --git a/src/defaultV2-theme/blocks/sd-table.scss b/src/defaultV2-theme/blocks/sd-table.scss
@@ -412,6 +412,34 @@
   }
 }
 
+//compact styles
+.sd-element--with-frame.sd-element--compact {
+  .sd-table {
+    background-color: $background-dim;
+  }
+  .sd-table-wrapper {
+
+    &:before,
+    &:after {
+      background-color: $background-dim;
+    }
+  }
+
+  .sd-table__cell--actions:not(.sd-table__cell--vertical):last-child {
+    .sd-action-bar {
+      background-color: $background-dim;
+    }
+  }
+
+  .sd-table__cell--actions:not(.sd-table__cell--vertical),
+  .sd-table__cell--empty,
+  .sd-table__cell--row-text,
+  .sd-table__cell--footer-total,
+  .sd-matrix__cell:first-of-type,
+  .sd-matrix tr>td:first-of-type {
+    background-color: $background-dim;
+  }
+}
 .sd-question--table {
 
   &>.sd-question__header,

diff --git a/...ressionTests/tests/defaultV2/etalons/question-matrix-dropdown-columns-theme.png b/...ressionTests/tests/defaultV2/etalons/question-matrix-dropdown-columns-theme.png
diff --git a/visualRegressionTests/tests/defaultV2/themes.ts b/visualRegressionTests/tests/defaultV2/themes.ts
@@ -509,4 +509,79 @@ frameworks.forEach(framework => {
       await takeElementScreenshot("survey-html-theme.png", Selector(".sd-page"), t, comparer);
     });
   });
+
+  test("Matrix many columns", async (t) => {
+    await wrapVisualTest(t, async (t, comparer) => {
+      await t.resizeWindow(800, 600);
+      await initSurvey(framework, {
+        "logoPosition": "right",
+        "focusFirstQuestionAutomatic": false,
+        "pages": [
+          {
+            "name": "page1",
+            "elements": [
+              {
+                "type": "matrixdynamic",
+                "name": "matrix",
+                "columns": [
+                  {
+                    "name": "col1"
+                  },
+                  {
+                    "name": "col2"
+                  },
+                  {
+                    "name": "col3"
+                  },
+                  {
+                    "name": "col5"
+                  },
+                  {
+                    "name": "col6"
+                  },
+                  {
+                    "name": "col6"
+                  },
+                  {
+                    "name": "col7"
+                  },
+                  {
+                    "name": "col8"
+                  },
+                  {
+                    "name": "col9"
+                  },
+                  {
+                    "name": "col10"
+                  },
+                  {
+                    "name": "col11"
+                  },
+                  {
+                    "name": "col12"
+                  }
+                ],
+                "rows": [
+                  "item1",
+                  "item2"
+                ]
+              }
+            ]
+          }
+        ]
+      });
+      //await t.click(Selector("body"), { offsetX: 5, offsetY: 5 });
+      await ClientFunction(() => {
+        (<any>window).survey.isCompact = true;
+        (<any>window).survey.applyTheme({
+          "cssVariables": {
+            "--sjs-general-backcolor-dim": "blue"
+          }
+        });
+      })();
+      const questionRoot = Selector(".sd-body");
+      await takeElementScreenshot("question-matrix-dropdown-columns-theme.png", questionRoot, t, comparer);
+    });
+  });
+
 });