diff --git a/CHANGELOG.md b/CHANGELOG.md index 1e5e5477..b539cc83 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -15,7 +15,9 @@ planned for 2025-04-01 ### Added +- Add CSS support to the digital clock hour/minute/second through the use of the classes `clock-hour-digital`, `clock-minute-digital`, and `clock-second-digital`. - Add Arabic (#3719) and Esperanto translation. +- Mark option `secondsColor` as deprecated in clock module. - Add Greek translation to Alerts module. ### Changed diff --git a/js/app.js b/js/app.js index ffe3616d..20bc856c 100644 --- a/js/app.js +++ b/js/app.js @@ -153,11 +153,23 @@ function App () { */ function checkDeprecatedOptions (userConfig) { const deprecated = require(`${global.root_path}/js/deprecated`); - const deprecatedOptions = deprecated.configs; + // check for deprecated core options + const deprecatedOptions = deprecated.configs; const usedDeprecated = deprecatedOptions.filter((option) => userConfig.hasOwnProperty(option)); if (usedDeprecated.length > 0) { - Log.warn(`WARNING! Your config is using deprecated options: ${usedDeprecated.join(", ")}. Check README and CHANGELOG for more up-to-date ways of getting the same functionality.`); + Log.warn(`WARNING! Your config is using deprecated option(s): ${usedDeprecated.join(", ")}. Check README and CHANGELOG for more up-to-date ways of getting the same functionality.`); + } + + // check for deprecated module options + for (const element of userConfig.modules) { + if (deprecated[element.module] !== undefined && element.config !== undefined) { + const deprecatedModuleOptions = deprecated[element.module]; + const usedDeprecatedModuleOptions = deprecatedModuleOptions.filter((option) => element.config.hasOwnProperty(option)); + if (usedDeprecatedModuleOptions.length > 0) { + Log.warn(`WARNING! Your config for module ${element.module} is using deprecated option(s): ${usedDeprecatedModuleOptions.join(", ")}. Check README and CHANGELOG for more up-to-date ways of getting the same functionality.`); + } + } } } diff --git a/js/deprecated.js b/js/deprecated.js index b0aca56c..10cf7ae0 100644 --- a/js/deprecated.js +++ b/js/deprecated.js @@ -1,3 +1,4 @@ module.exports = { - configs: ["kioskmode"] + configs: ["kioskmode"], + clock: ["secondsColor"] }; diff --git a/modules/default/clock/clock.js b/modules/default/clock/clock.js index 5d2a17c8..14667d02 100644 --- a/modules/default/clock/clock.js +++ b/modules/default/clock/clock.js @@ -23,7 +23,7 @@ Module.register("clock", { analogFace: "simple", // options: 'none', 'simple', 'face-###' (where ### is 001 to 012 inclusive) analogPlacement: "bottom", // options: 'top', 'bottom', 'left', 'right' analogShowDate: "top", // OBSOLETE, can be replaced with analogPlacement and showTime, options: false, 'top', or 'bottom' - secondsColor: "#888888", + secondsColor: "#888888", // DEPRECATED, use CSS instead. Class "clock-second-digital" for digital clock, "clock-second" for analog clock. showSunTimes: false, showMoonTimes: false, // options: false, 'times' (rise/set), 'percent' (lit percent), 'phase' (current phase), or 'both' (percent & phase) @@ -105,6 +105,8 @@ Module.register("clock", { */ const dateWrapper = document.createElement("div"); const timeWrapper = document.createElement("div"); + const hoursWrapper = document.createElement("span"); + const minutesWrapper = document.createElement("span"); const secondsWrapper = document.createElement("sup"); const periodWrapper = document.createElement("span"); const sunWrapper = document.createElement("div"); @@ -114,39 +116,40 @@ Module.register("clock", { // Style Wrappers dateWrapper.className = "date normal medium"; timeWrapper.className = "time bright large light"; - secondsWrapper.className = "seconds dimmed"; + hoursWrapper.className = "clock-hour-digital"; + minutesWrapper.className = "clock-minute-digital"; + secondsWrapper.className = "clock-second-digital dimmed"; sunWrapper.className = "sun dimmed small"; moonWrapper.className = "moon dimmed small"; weekWrapper.className = "week dimmed medium"; // Set content of wrappers. - // The moment().format("h") method has a bug on the Raspberry Pi. - // So we need to generate the timestring manually. - // See issue: https://github.com/MagicMirrorOrg/MagicMirror/issues/181 - let timeString; const now = moment(); if (this.config.timezone) { now.tz(this.config.timezone); } - let hourSymbol = "HH"; - if (this.config.timeFormat !== 24) { - hourSymbol = "h"; - } - - if (this.config.clockBold) { - timeString = now.format(`${hourSymbol}[]mm[]`); - } else { - timeString = now.format(`${hourSymbol}:mm`); - } - if (this.config.showDate) { dateWrapper.innerHTML = now.format(this.config.dateFormat); digitalWrapper.appendChild(dateWrapper); } if (this.config.displayType !== "analog" && this.config.showTime) { - timeWrapper.innerHTML = timeString; + let hourSymbol = "HH"; + if (this.config.timeFormat !== 24) { + hourSymbol = "h"; + } + + hoursWrapper.innerHTML = now.format(hourSymbol); + minutesWrapper.innerHTML = now.format("mm"); + + timeWrapper.appendChild(hoursWrapper); + if (this.config.clockBold) { + minutesWrapper.classList.add("bold"); + } else { + timeWrapper.innerHTML += ":"; + } + timeWrapper.appendChild(minutesWrapper); secondsWrapper.innerHTML = now.format("ss"); if (this.config.showPeriodUpper) { periodWrapper.innerHTML = now.format("A"); @@ -267,7 +270,7 @@ Module.register("clock", { clockSecond.id = "clock-second"; clockSecond.style.transform = `rotate(${second}deg)`; clockSecond.className = "clock-second"; - clockSecond.style.backgroundColor = this.config.secondsColor; + clockSecond.style.backgroundColor = this.config.secondsColor; /* DEPRECATED, to be removed in a future version , use CSS instead */ clockFace.appendChild(clockSecond); } analogWrapper.appendChild(clockFace); diff --git a/modules/default/clock/clock_styles.css b/modules/default/clock/clock_styles.css index e938dd2e..a6751e3d 100644 --- a/modules/default/clock/clock_styles.css +++ b/modules/default/clock/clock_styles.css @@ -78,7 +78,12 @@ left: 50%; margin: -38% -1px 0 0; /* numbers must match negative length & thickness */ padding: 38% 1px 0 0; /* indicator length & thickness */ - background: var(--color-text); + + /* background: #888888 !important; */ + + /* use this instead of secondsColor */ + + /* have to use !important, because the code explicitly sets the color currently */ transform-origin: 50% 100%; } @@ -91,3 +96,15 @@ .module.clock .moon > * { flex: 1; } + +.module.clock .clock-hour-digital { + color: var(--color-text-bright); +} + +.module.clock .clock-minute-digital { + color: var(--color-text-bright); +} + +.module.clock .clock-second-digital { + color: var(--color-text-dimmed); +} diff --git a/tests/e2e/modules/clock_spec.js b/tests/e2e/modules/clock_spec.js index 651b20de..a5a6d2e0 100644 --- a/tests/e2e/modules/clock_spec.js +++ b/tests/e2e/modules/clock_spec.js @@ -38,6 +38,13 @@ describe("Clock module", () => { const timeRegex = /^(?:1[0-2]|[1-9]):[0-5]\d[0-5]\d[ap]m$/; await expect(helpers.testMatch(".clock .time", timeRegex)).resolves.toBe(true); }); + + it("check for discreet elements of clock", async () => { + let elemClock = helpers.waitForElement(".clock-hour-digital"); + await expect(elemClock).not.toBeNull(); + elemClock = helpers.waitForElement(".clock-minute-digital"); + await expect(elemClock).not.toBeNull(); + }); }); describe("with showPeriodUpper config enabled", () => {