From 60843528344d8a33569555782a3119d76f9a0fc6 Mon Sep 17 00:00:00 2001 From: Jin <22962980+JYC333@users.noreply.github.com> Date: Mon, 31 Mar 2025 02:44:30 +0200 Subject: [PATCH] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20reformat=20week=20number?= =?UTF-8?q?=20ui?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/public/app/widgets/buttons/calendar.ts | 39 ++++++++--------- src/public/stylesheets/calendar.css | 51 +++++++++------------- 2 files changed, 37 insertions(+), 53 deletions(-) diff --git a/src/public/app/widgets/buttons/calendar.ts b/src/public/app/widgets/buttons/calendar.ts index 97445a507..b27bce867 100644 --- a/src/public/app/widgets/buttons/calendar.ts +++ b/src/public/app/widgets/buttons/calendar.ts @@ -29,7 +29,7 @@ const DROPDOWN_TPL = `
@@ -59,13 +59,8 @@ const DROPDOWN_TPL = `
-
-
-
-
-
-
-
+
+
`; const DAYS_OF_WEEK = [t("calendar.sun"), t("calendar.mon"), t("calendar.tue"), t("calendar.wed"), t("calendar.thu"), t("calendar.fri"), t("calendar.sat")]; @@ -82,7 +77,6 @@ interface WeekCalculationOptions { export default class CalendarWidget extends RightDropdownButtonWidget { private $month!: JQuery; private $weekHeader!: JQuery; - private $weekNumbers!: JQuery; private $monthSelect!: JQuery; private $yearSelect!: JQuery; private $next!: JQuery; @@ -105,7 +99,6 @@ export default class CalendarWidget extends RightDropdownButtonWidget { this.$month = this.$dropdownContent.find('[data-calendar-area="month"]'); this.$weekHeader = this.$dropdownContent.find(".calendar-week"); - this.$weekNumbers = this.$dropdownContent.find(".calendar-week-numbers"); this.manageFirstDayOfWeek(); this.initWeekCalculation(); @@ -195,7 +188,7 @@ export default class CalendarWidget extends RightDropdownButtonWidget { // Generate the list of days of the week taking into consideration the user's selected first day of week. let localeDaysOfWeek = [...DAYS_OF_WEEK]; const daysToBeAddedAtEnd = localeDaysOfWeek.splice(0, this.firstDayOfWeek); - localeDaysOfWeek = [...localeDaysOfWeek, ...daysToBeAddedAtEnd]; + localeDaysOfWeek = ['', ...localeDaysOfWeek, ...daysToBeAddedAtEnd]; this.$weekHeader.html(localeDaysOfWeek.map((el) => `${el}`).join('')); } @@ -271,7 +264,7 @@ export default class CalendarWidget extends RightDropdownButtonWidget { // Mo Tu We Th Fr Sa Su let dayOffset = day - this.firstDayOfWeek; if (dayOffset < 0) dayOffset = 7 + dayOffset; - $newDay.css("marginLeft", dayOffset * 14.28 + "%"); + $newDay.css("marginLeft", dayOffset * 12.5 + "%"); } const dateNoteId = dateNotesForMonth[utils.formatDateISO(this.date)]; @@ -308,14 +301,23 @@ export default class CalendarWidget extends RightDropdownButtonWidget { const dateNotesForMonth: DateNotesForMonth = await server.get(`special-notes/notes-for-month/${month}`); this.$month.empty(); - this.$weekNumbers.empty(); const currentMonth = this.date.getMonth(); - const weekNumbers: Set = new Set(); while (this.date.getMonth() === currentMonth) { + // this is to avoid issues with summer/winter time const safeDate = new Date(Date.UTC(this.date.getFullYear(), this.date.getMonth(), this.date.getDate())); - weekNumbers.add(this.getWeekNumber(safeDate)); + const weekNumber = this.getWeekNumber(safeDate); + + // Add week number if it's first day of week or first day of month + if (this.date.getDay() === this.firstDayOfWeek || this.date.getDate() === 1) { + const weekNumberText = 'W' + String(weekNumber).padStart(2, '0'); + const $weekNumber = $("") + .addClass("calendar-date calendar-week-number") + .attr("data-calendar-week-number", weekNumberText) + .html(`${weekNumberText}`); + this.$month.append($weekNumber); + } const $day = this.createDay(dateNotesForMonth, this.date.getDate(), this.date.getDay()); @@ -329,13 +331,6 @@ export default class CalendarWidget extends RightDropdownButtonWidget { this.$monthSelect.text(MONTHS[this.date.getMonth()]); this.$yearSelect.val(this.date.getFullYear()); - - for (const weekNumber of weekNumbers) { - const $weekNumber = $("
") - .addClass("calendar-week-number") - .text(weekNumber); - this.$weekNumbers.append($weekNumber); - } } async entitiesReloadedEvent({ loadResults }: EventData<"entitiesReloaded">) { diff --git a/src/public/stylesheets/calendar.css b/src/public/stylesheets/calendar.css index 85b73381e..a1745d737 100644 --- a/src/public/stylesheets/calendar.css +++ b/src/public/stylesheets/calendar.css @@ -71,32 +71,6 @@ /* Disable the dropdown arrow */ } -.calendar-container { - display: flex; -} - -.calendar-dropdown-widget .calendar-week-numbers { - width: 30px; - border-right: 1px solid var(--main-border-color); - padding-right: 5px; - margin-right: 5px; - padding-top: 2.4rem; -} - -.calendar-dropdown-widget .calendar-week-number { - /* height: 2.4rem; */ - /* line-height: 2.4rem; */ - text-align: center; - color: var(--muted-text-color); - font-size: 0.9em; -} - -.calendar-main { - flex: 1; - display: flex; - flex-direction: column; -} - .calendar-dropdown-widget .calendar-week { display: flex; flex-wrap: wrap; @@ -104,10 +78,10 @@ .calendar-dropdown-widget .calendar-week span { flex-direction: column; - flex: 0 0 14.28%; + flex: 0 0 12.5%; font-size: 1rem; font-weight: bold; - max-width: 14.28%; + max-width: 12.5%; padding-top: 5px; padding-bottom: 5px; text-align: center; @@ -119,13 +93,28 @@ flex-wrap: wrap; } +.calendar-dropdown-widget .calendar-week-number { + position: relative; +} + +.calendar-dropdown-widget .calendar-week-number::after { + content: ''; + position: absolute; + top: 0; + right: 0; + bottom: 0; + width: 1px; + background-color: var(--main-border-color); + z-index: 2; +} + .calendar-dropdown-widget .calendar-date { align-items: center; color: var(--main-text-color); display: flex; flex-direction: column; - flex: 0 0 14.28%; - max-width: 14.28%; + flex: 0 0 12.5%; + max-width: 12.5%; padding: 0.4rem 0; font-size: 120%; } @@ -155,4 +144,4 @@ .calendar-dropdown-widget .calendar-date:not(.calendar-date-active) { cursor: pointer; -} +} \ No newline at end of file