calendar: рескин месячной сетки под макет

По «Календарь · Месяц»: дни недели — серые пилюли; сетка безрамочная с
гридлайнами (0.5dp) вместо скруглённых боксов; номер дня сверху-слева;
сегодня — в зелёном круге (Primary, белый текст); событие — зелёная
пилюля PrimaryLight (до 2 + «+N»), было одно превью/точка. Компактная
модель (месяц + список дня снизу) сохранена. Компилируется.
This commit is contained in:
b-dev-mobile
2026-07-08 10:15:41 +00:00
parent 335468b80f
commit a727e2dbd1
2 changed files with 86 additions and 69 deletions
@@ -9,7 +9,6 @@ import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.aspectRatio
import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.height
@@ -388,49 +387,59 @@ private fun CalendarIconButton(
fun CalendarMonthGrid( fun CalendarMonthGrid(
month: YearMonth, month: YearMonth,
selectedDay: LocalDate, selectedDay: LocalDate,
daysWithEvents: Set<LocalDate>,
eventsByDay: Map<LocalDate, List<CalendarEventItem>>, eventsByDay: Map<LocalDate, List<CalendarEventItem>>,
onSelectDay: (LocalDate) -> Unit, onSelectDay: (LocalDate) -> Unit,
) { ) {
val days = CalendarRepository.monthGridDays(month) val days = CalendarRepository.monthGridDays(month)
val today = LocalDate.now() val today = LocalDate.now()
Column( Column(
modifier = Modifier modifier = Modifier.fillMaxWidth(),
.fillMaxWidth() verticalArrangement = Arrangement.spacedBy(6.dp),
.clip(RoundedCornerShape(12.dp))
.background(F7Colors.Surface)
.border(1.dp, F7Colors.Border, RoundedCornerShape(12.dp))
.padding(8.dp),
verticalArrangement = Arrangement.spacedBy(4.dp),
) { ) {
Row(modifier = Modifier.fillMaxWidth()) { // Заголовок дней недели — серые пилюли (по макету «Календарь · Месяц»)
Row(
modifier = Modifier.fillMaxWidth(),
horizontalArrangement = Arrangement.spacedBy(4.dp),
) {
weekDayLabels.forEach { label -> weekDayLabels.forEach { label ->
Text( Box(
text = label, modifier = Modifier
modifier = Modifier.weight(1f), .weight(1f)
textAlign = TextAlign.Center, .clip(RoundedCornerShape(100.dp))
style = MaterialTheme.typography.labelSmall, .background(F7Colors.Grey2)
color = F7Colors.TextMuted, .padding(vertical = 6.dp),
) contentAlignment = Alignment.Center,
) {
Text(
text = label,
style = MaterialTheme.typography.labelMedium,
fontWeight = FontWeight.Medium,
color = F7Colors.TextSecondary,
)
}
} }
} }
days.chunked(7).forEach { week -> // Гридлайн-сетка без скруглений (по макету)
Row(modifier = Modifier.fillMaxWidth()) { Column(
week.forEach { day -> modifier = Modifier
val inMonth = day.month == month.month .fillMaxWidth()
val selected = day == selectedDay .border(0.5.dp, F7Colors.Grey3),
val hasEvents = daysWithEvents.contains(day) ) {
val dayEvents = eventsByDay[day].orEmpty() days.chunked(7).forEach { week ->
CalendarDayCell( Row(modifier = Modifier.fillMaxWidth()) {
day = day.dayOfMonth, week.forEach { day ->
inMonth = inMonth, val inMonth = day.month == month.month
isToday = day == today, val dayEvents = eventsByDay[day].orEmpty()
selected = selected, CalendarDayCell(
hasEvents = hasEvents, day = day.dayOfMonth,
preview = dayEvents.firstOrNull()?.summary.orEmpty(), inMonth = inMonth,
onClick = { onSelectDay(day) }, isToday = day == today,
modifier = Modifier.weight(1f), selected = day == selectedDay,
) events = dayEvents,
onClick = { onSelectDay(day) },
modifier = Modifier.weight(1f),
)
}
} }
} }
} }
@@ -443,65 +452,74 @@ private fun CalendarDayCell(
inMonth: Boolean, inMonth: Boolean,
isToday: Boolean, isToday: Boolean,
selected: Boolean, selected: Boolean,
hasEvents: Boolean, events: List<CalendarEventItem>,
preview: String,
onClick: () -> Unit, onClick: () -> Unit,
modifier: Modifier = Modifier, modifier: Modifier = Modifier,
) { ) {
val bg = when { val cellBg = when {
isToday -> F7Colors.Green10
selected -> F7Colors.PrimaryLight selected -> F7Colors.PrimaryLight
isToday -> F7Colors.PrimaryLight.copy(alpha = 0.55f)
else -> F7Colors.Surface else -> F7Colors.Surface
} }
val borderColor = when { Column(
selected -> F7Colors.Primary
isToday -> F7Colors.PrimaryDark
else -> F7Colors.BorderLight
}
Box(
modifier = modifier modifier = modifier
.aspectRatio(1f) .heightIn(min = 66.dp)
.padding(2.dp) .border(0.5.dp, F7Colors.Grey3)
.clip(RoundedCornerShape(8.dp)) .background(cellBg)
.background(bg)
.border(1.dp, borderColor, RoundedCornerShape(8.dp))
.clickable(onClick = onClick) .clickable(onClick = onClick)
.padding(2.dp), .padding(horizontal = 4.dp, vertical = 4.dp),
contentAlignment = Alignment.TopCenter, verticalArrangement = Arrangement.spacedBy(2.dp),
) { ) {
Column(horizontalAlignment = Alignment.CenterHorizontally) { // Номер дня сверху-слева; сегодня — в зелёном круге
Box(
modifier = Modifier
.size(22.dp)
.then(if (isToday) Modifier.clip(CircleShape).background(F7Colors.Primary) else Modifier),
contentAlignment = Alignment.Center,
) {
Text( Text(
text = day.toString(), text = day.toString(),
style = MaterialTheme.typography.bodySmall, style = MaterialTheme.typography.bodySmall,
fontWeight = if (isToday) FontWeight.Bold else FontWeight.Normal, fontWeight = if (isToday) FontWeight.SemiBold else FontWeight.Normal,
color = when { color = when {
isToday -> F7Colors.TextOnPrimary
!inMonth -> F7Colors.TextMuted !inMonth -> F7Colors.TextMuted
selected -> F7Colors.PrimaryDark
else -> F7Colors.TextPrimary else -> F7Colors.TextPrimary
}, },
) )
if (hasEvents && inMonth && preview.isNotBlank()) { }
if (inMonth) {
events.take(2).forEach { event ->
CalendarDayEventPill(event.summary.ifBlank { "Событие" })
}
if (events.size > 2) {
Text( Text(
preview, "+${events.size - 2}",
style = MaterialTheme.typography.labelSmall, style = MaterialTheme.typography.labelSmall,
color = F7Colors.PrimaryDark, color = F7Colors.Primary,
maxLines = 1, fontWeight = FontWeight.Medium,
overflow = TextOverflow.Ellipsis,
modifier = Modifier.padding(top = 1.dp),
)
} else if (hasEvents && inMonth) {
Box(
modifier = Modifier
.padding(top = 2.dp)
.size(5.dp)
.clip(CircleShape)
.background(F7Colors.Primary),
) )
} }
} }
} }
} }
@Composable
private fun CalendarDayEventPill(text: String) {
Text(
text = text,
modifier = Modifier
.fillMaxWidth()
.clip(RoundedCornerShape(4.dp))
.background(F7Colors.PrimaryLight)
.padding(horizontal = 4.dp, vertical = 1.dp),
style = MaterialTheme.typography.labelSmall,
color = F7Colors.PrimaryDark,
maxLines = 1,
overflow = TextOverflow.Ellipsis,
)
}
@Composable @Composable
fun CalendarWeekView( fun CalendarWeekView(
selectedDay: LocalDate, selectedDay: LocalDate,
@@ -343,7 +343,6 @@ fun CalendarScreen(
CalendarMonthGrid( CalendarMonthGrid(
month = state.visibleMonth, month = state.visibleMonth,
selectedDay = state.selectedDay, selectedDay = state.selectedDay,
daysWithEvents = vm.daysWithEvents(),
eventsByDay = eventsByDay, eventsByDay = eventsByDay,
onSelectDay = vm::selectDay, onSelectDay = vm::selectDay,
) )