From 1f050c2be948b8bb71edb54ba1a17f4bc5d63518 Mon Sep 17 00:00:00 2001 From: Jean-Luc Makiola Date: Mon, 6 Jul 2026 22:24:11 +0200 Subject: [PATCH] feat: make Month week-number a full-height cell like the day cells MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Per on-device review, render the week number as a full-height tonal pill mirroring the day cells' geometry (secondaryContainer tint, same rounded shape and gap), with the number centred — so the gutter reads as part of the grid rather than a floating chip. This diverges from the Week view's small header chip, so revert the shared-badge extraction: restore WeekScreen's private badge and drop ui/common/WeekNumberBadge. Co-Authored-By: Claude Opus 4.8 (1M context) --- .../calendula/ui/common/WeekNumberBadge.kt | 38 ------------------- .../calendula/ui/month/MonthScreen.kt | 27 ++++++++----- .../calendula/ui/week/WeekScreen.kt | 21 +++++++++- 3 files changed, 38 insertions(+), 48 deletions(-) delete mode 100644 app/src/main/java/de/jeanlucmakiola/calendula/ui/common/WeekNumberBadge.kt diff --git a/app/src/main/java/de/jeanlucmakiola/calendula/ui/common/WeekNumberBadge.kt b/app/src/main/java/de/jeanlucmakiola/calendula/ui/common/WeekNumberBadge.kt deleted file mode 100644 index 771adf9..0000000 --- a/app/src/main/java/de/jeanlucmakiola/calendula/ui/common/WeekNumberBadge.kt +++ /dev/null @@ -1,38 +0,0 @@ -package de.jeanlucmakiola.calendula.ui.common - -import androidx.compose.foundation.layout.padding -import androidx.compose.foundation.shape.RoundedCornerShape -import androidx.compose.material3.MaterialTheme -import androidx.compose.material3.Surface -import androidx.compose.material3.Text -import androidx.compose.runtime.Composable -import androidx.compose.ui.Modifier -import androidx.compose.ui.res.stringResource -import androidx.compose.ui.semantics.contentDescription -import androidx.compose.ui.semantics.semantics -import androidx.compose.ui.text.font.FontWeight -import androidx.compose.ui.unit.dp -import de.jeanlucmakiola.calendula.R - -/** - * Calendar-week badge — a filled tonal chip with a bold number, deliberately set - * apart from the surrounding day numbers. Shared by the Week and Month views so - * the week-of-year indicator reads identically wherever it appears. - */ -@Composable -fun WeekNumberBadge(weekNumber: Int, modifier: Modifier = Modifier) { - val label = stringResource(R.string.week_number_label) - Surface( - shape = RoundedCornerShape(8.dp), - color = MaterialTheme.colorScheme.secondaryContainer, - contentColor = MaterialTheme.colorScheme.onSecondaryContainer, - modifier = modifier.semantics { contentDescription = "$label $weekNumber" }, - ) { - Text( - text = weekNumber.toString(), - style = MaterialTheme.typography.titleSmall, - fontWeight = FontWeight.Bold, - modifier = Modifier.padding(horizontal = 8.dp, vertical = 3.dp), - ) - } -} diff --git a/app/src/main/java/de/jeanlucmakiola/calendula/ui/month/MonthScreen.kt b/app/src/main/java/de/jeanlucmakiola/calendula/ui/month/MonthScreen.kt index f73a5f1..14bf928 100644 --- a/app/src/main/java/de/jeanlucmakiola/calendula/ui/month/MonthScreen.kt +++ b/app/src/main/java/de/jeanlucmakiola/calendula/ui/month/MonthScreen.kt @@ -73,7 +73,6 @@ import de.jeanlucmakiola.calendula.ui.common.EventDimAlpha import de.jeanlucmakiola.calendula.ui.common.LocalDimCutoff import de.jeanlucmakiola.calendula.ui.common.rememberCurrentMinute import de.jeanlucmakiola.calendula.ui.common.ViewSwitcherPill -import de.jeanlucmakiola.calendula.ui.common.WeekNumberBadge import de.jeanlucmakiola.calendula.ui.common.calendarSlideTransition import de.jeanlucmakiola.calendula.ui.common.rememberCalendarFadeSpec import de.jeanlucmakiola.calendula.ui.common.rememberReduceMotion @@ -361,8 +360,8 @@ private fun WeekdayHeader(weekStart: DayOfWeek, showWeekNumbers: Boolean) { private val EVENT_ROW_HEIGHT = 20.dp private val DAY_NUMBER_HEIGHT = 22.dp -/** Width of the optional left gutter holding the calendar-week badge (#25); wide - * enough to seat the shared [WeekNumberBadge] with a little breathing room. */ +/** Width of the optional left calendar-week gutter (#25); narrow, since it only + * seats a one- or two-digit week number in a full-height tonal pill. */ private val WEEK_NUMBER_GUTTER = 40.dp private val DAY_NUMBER_GAP = 4.dp private val CELL_TOP_PADDING = 6.dp @@ -564,10 +563,11 @@ private fun MonthWeekRow( } /** - * Left-gutter calendar-week indicator (#25), centred vertically in the row. Uses - * the shared [WeekNumberBadge] so it's identical to the Week view's, and computes - * the ISO week-of-week-based-year on the row's first day — the same basis — so the - * two views always agree. + * Left-gutter calendar-week cell (#25): a full-height tonal pill mirroring the + * day cells' geometry, set apart by the secondaryContainer tint (matching the + * Week view's badge), with the ISO week number centred like a day number. The + * week is computed on the row's first day — the same basis as the Week view — so + * the two agree. */ @Composable private fun WeekNumberGutter(weekStart: LocalDate, modifier: Modifier = Modifier) { @@ -575,11 +575,20 @@ private fun WeekNumberGutter(weekStart: LocalDate, modifier: Modifier = Modifier java.time.LocalDate.of(weekStart.year, weekStart.month.ordinal + 1, weekStart.day) .get(java.time.temporal.IsoFields.WEEK_OF_WEEK_BASED_YEAR) } + val label = stringResource(R.string.week_number_label) Box( - modifier = modifier, + modifier = modifier + .padding(horizontal = CELL_GAP, vertical = 1.dp) + .background(MaterialTheme.colorScheme.secondaryContainer, CELL_SHAPE) + .semantics { contentDescription = "$label $weekNumber" }, contentAlignment = Alignment.Center, ) { - WeekNumberBadge(weekNumber = weekNumber) + Text( + text = weekNumber.toString(), + style = MaterialTheme.typography.titleSmall, + fontWeight = FontWeight.Bold, + color = MaterialTheme.colorScheme.onSecondaryContainer, + ) } } diff --git a/app/src/main/java/de/jeanlucmakiola/calendula/ui/week/WeekScreen.kt b/app/src/main/java/de/jeanlucmakiola/calendula/ui/week/WeekScreen.kt index a2a59de..3af71f0 100644 --- a/app/src/main/java/de/jeanlucmakiola/calendula/ui/week/WeekScreen.kt +++ b/app/src/main/java/de/jeanlucmakiola/calendula/ui/week/WeekScreen.kt @@ -87,7 +87,6 @@ import de.jeanlucmakiola.calendula.ui.common.LocalDimCutoff import de.jeanlucmakiola.calendula.ui.common.NowLine import de.jeanlucmakiola.calendula.ui.common.rememberCurrentMinute import de.jeanlucmakiola.calendula.ui.common.ViewSwitcherPill -import de.jeanlucmakiola.calendula.ui.common.WeekNumberBadge import de.jeanlucmakiola.calendula.ui.common.calendarSlideTransition import de.jeanlucmakiola.calendula.ui.common.rememberCalendarFadeSpec import de.jeanlucmakiola.calendula.ui.common.rememberReduceMotion @@ -508,6 +507,26 @@ private fun WeekDayHeader( } } +/** Calendar-week badge shown in the header gutter, deliberately set apart with a + * filled box and bold number. */ +@Composable +private fun WeekNumberBadge(weekNumber: Int, modifier: Modifier = Modifier) { + val label = stringResource(R.string.week_number_label) + Surface( + shape = RoundedCornerShape(8.dp), + color = MaterialTheme.colorScheme.secondaryContainer, + contentColor = MaterialTheme.colorScheme.onSecondaryContainer, + modifier = modifier.semantics { contentDescription = "$label $weekNumber" }, + ) { + Text( + text = weekNumber.toString(), + style = MaterialTheme.typography.titleSmall, + fontWeight = FontWeight.Bold, + modifier = Modifier.padding(horizontal = 8.dp, vertical = 3.dp), + ) + } +} + @Composable private fun AllDayStrip( state: WeekUiState.Success,