Merge pull request #8918 from surveyjs/bug/S2538-improve-timer-font

Fixed surveyjs/service#2538 - Timer mode - if set to 'Both' the total is impossible to see
surveyjs · Oct 10, 2024 · fc061be · fc061be
2 parents c678658 + 011d19b
commit fc061be
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 3 deletions.
diff --git a/packages/survey-core/src/defaultV2-theme/blocks/sd-timer.scss b/packages/survey-core/src/defaultV2-theme/blocks/sd-timer.scss
@@ -64,7 +64,10 @@
 }
 
 .sd-timer__text--minor {
-  color: $foreground-light;
+  color: var(--lbr-timer-text-color-secondary, $foreground-dim-light);
+  font-size: var(--lbr-font-default-size, calcFontSize(1));
+  font-style: normal;
   font-weight: 600;
-  font-size: calcFontSize(0.75);
-}
+  line-height: var(--lbr-font-default-line-height, calcLineHeight(1.5));
+  margin-top: calcSize(-0.5);
+}
diff --git a/visualRegressionTests/tests/defaultV2/etalons/survey-timer-both.png b/visualRegressionTests/tests/defaultV2/etalons/survey-timer-both.png
diff --git a/visualRegressionTests/tests/defaultV2/survey.ts b/visualRegressionTests/tests/defaultV2/survey.ts
@@ -497,6 +497,44 @@ frameworks.forEach(framework => {
       await takeElementScreenshot("survey-timer-without-progress.png", Selector("body"), t, comparer);
     });
   });
+  test("Check survey timer both values - page and total", async (t) => {
+    await wrapVisualTest(t, async (t, comparer) => {
+      await t.resizeWindow(1400, 800);
+      const json = {
+        "showTimer": true,
+        "timeLimit": 227,
+        "timeLimitPerPage": 107,
+        "widthMode": "static",
+        "pages": [
+          {
+            "elements": [
+              {
+                "type": "radiogroup",
+                "name": "civilwar",
+                "title": "When was the American Civil War?",
+                "choices": [
+                  "1796-1803",
+                  "1810-1814",
+                  "1861-1865",
+                  "1939-1945"
+                ],
+                "correctAnswer": "1861-1865"
+              },
+            ]
+          }
+        ]
+      };
+      await ClientFunction(() => {
+        const style = document.createElement("style");
+        style.innerHTML = ".sd-timer__progress--animation { transition: none !important; }";
+        document.body.appendChild(style);
+        (<any>window).Survey.SurveyTimer.instance.start = () => { };
+      })();
+      await initSurvey(framework, json);
+      await resetHoverToBody(t);
+      await takeElementScreenshot("survey-timer-both.png", Selector("body"), t, comparer);
+    });
+  });
 
   const notifierJson = {
     "pages": [