Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[#789] Fixed Timetable grid item UI #898

Merged
merged 3 commits into from
Sep 1, 2023
Merged

[#789] Fixed Timetable grid item UI #898

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
8146398
[#789] Fixed Timetable grid item UI
Aug 30, 2023
f2f5c00
Merge branch 'main' into Issue-789
takahirom Aug 31, 2023
b1fada1
Merge branch 'main' into Issue-789
takahirom Sep 1, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
103 changes: 62 additions & 41 deletions .../src/main/java/io/github/droidkaigi/confsched2023/sessions/component/TimetableGridItem.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,9 @@ import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.defaultMinSize
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
Expand All @@ -32,6 +30,7 @@ import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.vector.rememberVectorPainter
import androidx.compose.ui.platform.LocalDensity
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.tooling.preview.PreviewParameter
import androidx.compose.ui.unit.Density
import androidx.compose.ui.unit.TextUnit
Expand Down Expand Up @@ -94,7 +93,7 @@ fun TimetableGridItem(
it.copy(fontSize = titleFontSize, lineHeight = titleLineHeight, color = textColor)
}

Box(
Column(
modifier = modifier
.background(
color = if (speakers.isEmpty()) {
Expand All @@ -111,14 +110,24 @@ fun TimetableGridItem(
}
.padding(TimetableGridItemSizes.padding),
) {
Column {
Column(
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Honestly, I was hesitant to use ConstraintLayout, as it's not compatible with other platforms. This alternative seems much better.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes. I had to try multiple iterations to make this solution 😅
Best thing is that now we have the exact Figma UI 🙌🏻

modifier = Modifier.weight(3f),
verticalArrangement = Arrangement.Top,
) {
Text(
modifier = Modifier.weight(2f, fill = false),
text = timetableItem.title.currentLangTitle,
style = titleTextStyle,
overflow = TextOverflow.Ellipsis,
)
Spacer(modifier = Modifier.height(TimetableGridItemSizes.titleToScheduleSpaceHeight))
Row(modifier = Modifier.height(TimetableGridItemSizes.scheduleHeight)) {

Row(
modifier = Modifier
.weight(1.5f, fill = false)
.padding(top = TimetableGridItemSizes.titleToSchedulePadding),
) {
Icon(
modifier = Modifier.height(TimetableGridItemSizes.scheduleHeight),
imageVector = Icons.Default.Schedule,
tint = if (speaker != null) {
hallColor.hallText
Expand All @@ -128,44 +137,58 @@ fun TimetableGridItem(
contentDescription = ScheduleIcon.asString(),
)
Spacer(modifier = Modifier.width(4.dp))
var scheduleTextStyle = MaterialTheme.typography.bodySmall
if (titleTextStyle.fontSize < scheduleTextStyle.fontSize) {
scheduleTextStyle = scheduleTextStyle.copy(fontSize = titleTextStyle.fontSize)
}
Text(
text = "${timetableItem.startsTimeString} - ${timetableItem.endsTimeString}",
style = MaterialTheme.typography.bodySmall,
style = scheduleTextStyle,
color = textColor,
)
}
}

if (timetableItem is Session) {
timetableItem.message?.let {
Spacer(modifier = Modifier.height(TimetableGridItemSizes.titleToScheduleSpaceHeight))
Row(verticalAlignment = Alignment.CenterVertically) {
Icon(
imageVector = Icons.Default.Error,
contentDescription = SessionsStrings.ErrorIcon.asString(),
tint = MaterialTheme.colorScheme.errorContainer,
modifier = Modifier.size(TimetableGridItemSizes.scheduleHeight),
val shouldShowError = timetableItem is Session && timetableItem.message != null

if (speakers.isNotEmpty() || shouldShowError) {
Row(
modifier = Modifier.weight(1f, fill = false),
verticalAlignment = Alignment.CenterVertically,
) {
if (speakers.isNotEmpty()) {
val speakerModifier = Modifier.weight(1f)
if (speakers.size == 1) {
var speakerTextStyle = MaterialTheme.typography.labelMedium
if (titleTextStyle.fontSize < speakerTextStyle.fontSize) {
speakerTextStyle =
speakerTextStyle.copy(fontSize = titleTextStyle.fontSize)
}
SingleSpeaker(
speaker = speakers.first(),
textColor = textColor,
textStyle = speakerTextStyle,
modifier = speakerModifier,
)
Spacer(modifier = Modifier.width(4.dp))
Text(
text = it.currentLangTitle,
color = MaterialTheme.colorScheme.errorContainer,
fontSize = TimetableGridItemSizes.minTitleFontSize,
lineHeight = TimetableGridItemSizes.minTitleLineHeight,
} else {
MultiSpeakers(
speakers = speakers,
modifier = speakerModifier,
)
}
} else {
Spacer(modifier = Modifier.weight(1f))
}
}

Spacer(
modifier = Modifier
.weight(1f)
.defaultMinSize(minHeight = 8.dp),
)

when (speakers.size) {
0 -> Unit
1 -> SingleSpeaker(speaker = speakers.first(), textColor = textColor)
else -> MultiSpeakers(speakers = speakers)
if (shouldShowError) {
Icon(
modifier = Modifier
.size(TimetableGridItemSizes.errorHeight),
imageVector = Icons.Default.Error,
contentDescription = SessionsStrings.ErrorIcon.asString(),
tint = MaterialTheme.colorScheme.errorContainer,
)
}
}
}
}
Expand All @@ -175,6 +198,7 @@ fun TimetableGridItem(
private fun SingleSpeaker(
speaker: TimetableSpeaker,
textColor: Color,
textStyle: TextStyle,
modifier: Modifier = Modifier,
) {
Row(
Expand All @@ -185,7 +209,7 @@ private fun SingleSpeaker(
Spacer(modifier = Modifier.width(8.dp))
Text(
text = speaker.name,
style = MaterialTheme.typography.labelMedium,
style = textStyle,
color = textColor,
)
}
Expand Down Expand Up @@ -249,19 +273,16 @@ private fun calculateFontSizeAndLineHeight(
): Pair<TextUnit, TextUnit> {
// The height of the title that should be displayed.
val titleToScheduleSpaceHeightPx = with(localDensity) {
TimetableGridItemSizes.titleToScheduleSpaceHeight.toPx()
TimetableGridItemSizes.titleToSchedulePadding.toPx()
}
val scheduleHeightPx = with(localDensity) {
TimetableGridItemSizes.scheduleHeight.toPx()
}
val scheduleToSpeakerSpaceHeightPx = with(localDensity) {
TimetableGridItemSizes.scheduleToSpeakerSpaceMinHeight.toPx()
}
val horizontalPaddingPx = with(localDensity) {
(TimetableGridItemSizes.padding * 2).toPx()
}
var displayTitleHeight =
gridItemHeightPx - titleToScheduleSpaceHeightPx - scheduleHeightPx - scheduleToSpeakerSpaceHeightPx - horizontalPaddingPx
gridItemHeightPx - titleToScheduleSpaceHeightPx - scheduleHeightPx - horizontalPaddingPx
displayTitleHeight -= if (speaker != null) {
with(localDensity) { TimetableGridItemSizes.speakerHeight.toPx() }
} else {
Expand Down Expand Up @@ -358,9 +379,9 @@ private fun calculateTitleHeight(
object TimetableGridItemSizes {
val width = 192.dp
val padding = 12.dp
val titleToScheduleSpaceHeight = 4.dp
val titleToSchedulePadding = 4.dp
val scheduleHeight = 16.dp
val scheduleToSpeakerSpaceMinHeight = 8.dp
val errorHeight = 16.dp
val speakerHeight = 32.dp
val minTitleFontSize = 10.sp
val middleTitleLineHeight = 16.sp // base on MaterialTheme.typography.labelSmall.lineHeight
Expand Down
Loading