feat: Add 12-hour clock format support to TimeCard#49
Conversation
Co-authored-by: Sunwuyuan <88357633+Sunwuyuan@users.noreply.github.com> Agent-Logs-Url: https://github.com/ZeroCatDev/Classworks/sessions/5b22f5d2-515c-4a87-84f5-18ef897ede79
Deploying classworks with
|
| Latest commit: |
1bc9d2f
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://8f309292.classworks.pages.dev |
| Branch Preview URL: | https://copilot-add-12h-clock-option.classworks.pages.dev |
There was a problem hiding this comment.
Pull request overview
Adds a user-facing setting to switch the TimeCard display between 24-hour and 12-hour (AM/PM) time formats, addressing the prior lack of 12h support.
Changes:
- Registered new boolean setting
timeCard.use12h(defaultfalse) in the settings registry. - Updated
TimeCard.vueto format hours in 12h mode and compute/render an AM/PM indicator (card + fullscreen). - Added a “12 小时制” toggle to the TimeCard settings dialog and persisted it via
setSetting.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 3 comments.
| File | Description |
|---|---|
| src/utils/settings.js | Registers the new timeCard.use12h setting so it can be persisted and retrieved consistently. |
| src/components/TimeCard.vue | Implements 12h formatting, AM/PM rendering, and adds a UI toggle wired to settings persistence. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| v-if="use12hClock" | ||
| class="ampm-text" | ||
| :style="secondsStyle" | ||
| > {{ amPmString }}</span> |
There was a problem hiding this comment.
AM/PM span content includes a leading literal space (> {{ amPmString }}) while secondsStyle already applies margin-left. This results in double/variable spacing depending on font rendering. Prefer removing the leading whitespace and rely on CSS margin (or handle spacing in one place consistently).
| > {{ amPmString }}</span> | |
| >{{ amPmString }}</span> |
| {{ timeString }}<span class="fullscreen-seconds">{{ secondsString }}</span><span | ||
| v-if="use12hClock" | ||
| class="fullscreen-seconds" | ||
| > {{ amPmString }}</span> |
There was a problem hiding this comment.
Fullscreen AM/PM span also includes a leading literal space (> {{ amPmString }}) while .fullscreen-seconds already has margin-left: 4px;. This can cause unintended extra spacing; keep spacing in CSS or template, but not both.
| > {{ amPmString }}</span> | |
| >{{ amPmString }}</span> |
| >{{ secondsString }}</span> | ||
| >{{ secondsString }}</span><span | ||
| v-if="use12hClock" | ||
| class="ampm-text" |
There was a problem hiding this comment.
class="ampm-text" is introduced for the AM/PM span, but there is no corresponding .ampm-text rule in this component’s scoped styles. Either add a style (if you intend to differentiate AM/PM) or drop the class to avoid dead/unused selectors.
| class="ampm-text" |
The clock card only supported 24h display. This adds a user-toggleable 12h (AM/PM) mode.
Changes
src/utils/settings.js: RegisterstimeCard.use12h(boolean, defaultfalse)TimeCard.vue:timeStringcomputed: converts to 12h (1–12, no leading zero) when enabledamPmStringcomputed: returns'AM'or'PM'setSettingWhen 12h mode is on,
9:05 AMis displayed rather than09:05.Original prompt
📍 Connect Copilot coding agent with Jira, Azure Boards or Linear to delegate work to Copilot in one click without leaving your project management tool.