#6776 - colored rating

surveyjs · Apr 4, 2024 · 3438507 · 3438507
1 parent d244b7a
commit 3438507
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 0 deletions.
diff --git a/src/defaultV2-theme/blocks/sd-rating.scss b/src/defaultV2-theme/blocks/sd-rating.scss
@@ -343,6 +343,14 @@ legend+sv-ng-rating-item+.sd-rating__item-smiley {
   opacity: 1;
 }
 
+.sd-rating__item-smiley--scale-colored {
+
+  &.sd-rating__item-smiley--selected,
+  &.sd-rating__item-smiley--readonly,
+  &.sd-rating__item-smiley--preview {
+    opacity: 1;
+  }
+}
 .sd-rating__item-star {
   position: relative;
   width: calcSize(6);

diff --git a/visualRegressionTests/tests/defaultV2/etalons/preview-rating-smileys-colored.png b/visualRegressionTests/tests/defaultV2/etalons/preview-rating-smileys-colored.png
diff --git a/visualRegressionTests/tests/defaultV2/etalons/readonly-rating-smileys-colored.png b/visualRegressionTests/tests/defaultV2/etalons/readonly-rating-smileys-colored.png
diff --git a/visualRegressionTests/tests/defaultV2/readonly-preview.ts b/visualRegressionTests/tests/defaultV2/readonly-preview.ts
@@ -208,6 +208,35 @@ frameworks.forEach(framework => {
       await takeElementScreenshot("preview-rating-smileys.png", Selector(".sd-question__content"), t, comparer);
     });
   });
+  test("Rating Smileys colored ReadOnly and Preview", async (t) => {
+    await wrapVisualTest(t, async (t, comparer) => {
+      await t.resizeWindow(800, 600);
+      await initSurvey(framework, {
+        showPreviewBeforeComplete: "showAnsweredQuestions",
+        showQuestionNumbers: "off",
+        questions: [
+          {
+            "type": "rating",
+            "name": "nps-score",
+            "title": "Rating",
+            "rateType": "smileys",
+            "rateMin": 1,
+            "rateMax": 5,
+            "minRateDescription": "Not Satisfied",
+            "maxRateDescription": "Completely Satisfied",
+            "defaultValue": 4,
+            "readOnly": true,
+            "scaleColorMode": "colored",
+          }
+        ]
+      });
+      await takeElementScreenshot("readonly-rating-smileys-colored.png", Selector(".sd-question__content"), t, comparer);
+      await ClientFunction(() => {
+        (<any>window).survey.showPreview();
+      })();
+      await takeElementScreenshot("preview-rating-smileys-colored.png", Selector(".sd-question__content"), t, comparer);
+    });
+  });
   test("Rating Smileys and Stars in matrix ReadOnly and Preview", async (t) => {
     await wrapVisualTest(t, async (t, comparer) => {
       await t.resizeWindow(800, 600);