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 20f94e0..7e45dfd 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 @@ -123,6 +123,7 @@ import androidx.compose.ui.platform.LocalDensity import androidx.compose.ui.res.stringResource import androidx.compose.ui.semantics.contentDescription import androidx.compose.ui.semantics.semantics +import androidx.compose.ui.text.rememberTextMeasurer import androidx.compose.ui.text.font.FontWeight import androidx.compose.ui.text.style.TextAlign import androidx.compose.ui.text.style.TextOverflow @@ -745,7 +746,7 @@ internal fun WeekdayHeader(weekStart: DayOfWeek, showWeekNumbers: Boolean) { .padding(horizontal = AppBarSpacing.Inset, vertical = 4.dp), ) { // Reserve the gutter so the weekday labels stay over their day columns. - if (showWeekNumbers) Spacer(Modifier.width(WEEK_NUMBER_GUTTER)) + if (showWeekNumbers) Spacer(Modifier.width(rememberWeekNumberGutter())) days.forEach { dow -> val isWeekend = dow == DayOfWeek.SATURDAY || dow == DayOfWeek.SUNDAY val javaDow = java.time.DayOfWeek.of(dow.ordinal + 1) @@ -763,9 +764,34 @@ internal 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 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 +/** Padding between the week-number pill's edge and the number inside it. */ +private val WEEK_NUMBER_PADDING = 6.dp + +/** The widest week number an ISO year reaches; digits are tabular, so one + * measurement of it prices every week in the grid. */ +private const val WEEK_NUMBER_SAMPLE = "53" + +/** + * Width of the optional left calendar-week gutter (#25), measured rather than + * fixed: it is sized to the number it seats at the style the pill draws it in, + * so it follows the font scale instead of reserving slack for it, and spends + * nothing more on a column the grid would rather hand to the seven days (#213). + */ +@Composable +private fun rememberWeekNumberGutter(): Dp { + val measurer = rememberTextMeasurer() + val density = LocalDensity.current + val style = weekNumberStyle() + return remember(style, density, measurer) { + val text = with(density) { measurer.measure(WEEK_NUMBER_SAMPLE, style).size.width.toDp() } + text + (WEEK_NUMBER_PADDING + CELL_GAP) * 2 + } +} + +/** The week number's own style — a step down from the day numbers beside it. */ +@Composable +private fun weekNumberStyle() = + MaterialTheme.typography.labelMedium.copy(fontWeight = FontWeight.Bold) private val DAY_NUMBER_GAP = 4.dp private val CELL_TOP_PADDING = 6.dp /** Named separately because the split style's selection outline draws its own @@ -1487,7 +1513,7 @@ internal fun SplitMonthGrid( WeekNumberGutter( weekStart = week.days.first(), modifier = Modifier - .width(WEEK_NUMBER_GUTTER) + .width(rememberWeekNumberGutter()) .fillMaxHeight(), ) } @@ -2008,7 +2034,7 @@ private fun MonthWeekRow( WeekNumberGutter( weekStart = week.days.first(), modifier = Modifier - .width(WEEK_NUMBER_GUTTER) + .width(rememberWeekNumberGutter()) .fillMaxHeight(), ) } @@ -2423,8 +2449,7 @@ private fun WeekNumberGutter(weekStart: LocalDate, modifier: Modifier = Modifier ) { Text( text = weekNumber.toString(), - style = MaterialTheme.typography.titleSmall, - fontWeight = FontWeight.Bold, + style = weekNumberStyle(), 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 17f1ed6..1867c93 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 @@ -573,7 +573,7 @@ private fun WeekDayHeader( } /** Calendar-week badge shown in the header gutter, deliberately set apart with a - * filled box and bold number. */ + * filled box and bold number — at the month grid's size, so the two agree (#213). */ @Composable private fun WeekNumberBadge(weekNumber: Int, modifier: Modifier = Modifier) { val label = stringResource(R.string.week_number_label) @@ -585,9 +585,9 @@ private fun WeekNumberBadge(weekNumber: Int, modifier: Modifier = Modifier) { ) { Text( text = weekNumber.toString(), - style = MaterialTheme.typography.titleSmall, + style = MaterialTheme.typography.labelMedium, fontWeight = FontWeight.Bold, - modifier = Modifier.padding(horizontal = 8.dp, vertical = 3.dp), + modifier = Modifier.padding(horizontal = 6.dp, vertical = 3.dp), ) } }