diff --git a/feature-sessions/src/main/java/io/github/droidkaigi/confsched2022/feature/sessions/SessionDayTab.kt b/feature-sessions/src/main/java/io/github/droidkaigi/confsched2022/feature/sessions/SessionDayTab.kt index 580a417f..bbc59a07 100644 --- a/feature-sessions/src/main/java/io/github/droidkaigi/confsched2022/feature/sessions/SessionDayTab.kt +++ b/feature-sessions/src/main/java/io/github/droidkaigi/confsched2022/feature/sessions/SessionDayTab.kt @@ -1,73 +1,60 @@ package io.github.droidkaigi.confsched2022.feature.sessions -import androidx.compose.foundation.background -import androidx.compose.foundation.layout.Box +import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.height -import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.material3.MaterialTheme import androidx.compose.material3.Tab import androidx.compose.material3.Text import androidx.compose.runtime.Composable import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier -import androidx.compose.ui.draw.clip import androidx.compose.ui.text.TextStyle import androidx.compose.ui.text.font.FontWeight import androidx.compose.ui.text.style.TextAlign import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.sp import io.github.droidkaigi.confsched2022.model.DroidKaigi2022Day -import io.github.droidkaigi.confsched2022.ui.ifTrue @Composable internal fun SessionDayTab( index: Int, day: DroidKaigi2022Day, - selectedTab: Int, + selected: Boolean, onTabClicked: (index: Int) -> Unit ) { - val isSelected = selectedTab == index Tab( - selected = isSelected, - onClick = { onTabClicked(selectedTab) }, + selected = selected, + onClick = { onTabClicked(index) }, modifier = Modifier.height(56.dp) ) { - Box( - modifier = Modifier - .fillMaxSize() - .clip(RoundedCornerShape(32.dp)) - .ifTrue(isSelected) { - background( - color = MaterialTheme.colorScheme.secondaryContainer - ) - }, - contentAlignment = Alignment.Center + Column( + modifier = Modifier.fillMaxSize(), + horizontalAlignment = Alignment.CenterHorizontally, + verticalArrangement = Arrangement.Center ) { - Column(modifier = Modifier.fillMaxWidth()) { - Text( - text = day.name, - style = TextStyle( - textAlign = TextAlign.Center, - color = MaterialTheme.colorScheme.onSecondaryContainer, - fontSize = 12.sp, - fontWeight = FontWeight(500) - ), - modifier = Modifier.fillMaxWidth() - ) - Text( - text = "${5 + index}", - style = TextStyle( - textAlign = TextAlign.Center, - color = MaterialTheme.colorScheme.onSecondaryContainer, - fontSize = 16.sp, - fontWeight = FontWeight(500) - ), - modifier = Modifier.fillMaxWidth() - ) - } + Text( + text = day.name, + style = TextStyle( + textAlign = TextAlign.Center, + color = MaterialTheme.colorScheme.onSecondaryContainer, + fontSize = 12.sp, + fontWeight = FontWeight(500) + ), + modifier = Modifier.fillMaxWidth() + ) + Text( + text = "${5 + index}", + style = TextStyle( + textAlign = TextAlign.Center, + color = MaterialTheme.colorScheme.onSecondaryContainer, + fontSize = 16.sp, + fontWeight = FontWeight(500) + ), + modifier = Modifier.fillMaxWidth() + ) } } } diff --git a/feature-sessions/src/main/java/io/github/droidkaigi/confsched2022/feature/sessions/Sessions.kt b/feature-sessions/src/main/java/io/github/droidkaigi/confsched2022/feature/sessions/Sessions.kt index 23a01002..1308a15c 100644 --- a/feature-sessions/src/main/java/io/github/droidkaigi/confsched2022/feature/sessions/Sessions.kt +++ b/feature-sessions/src/main/java/io/github/droidkaigi/confsched2022/feature/sessions/Sessions.kt @@ -4,20 +4,24 @@ import androidx.compose.foundation.clickable import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.WindowInsets import androidx.compose.foundation.layout.WindowInsetsSides +import androidx.compose.foundation.layout.fillMaxWidth +import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.only import androidx.compose.foundation.layout.safeDrawing -import androidx.compose.foundation.layout.size import androidx.compose.foundation.layout.windowInsetsPadding +import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.material3.CircularProgressIndicator +import androidx.compose.material3.MaterialTheme +import androidx.compose.material3.Surface import androidx.compose.material3.TabRow import androidx.compose.material3.Text import androidx.compose.runtime.Composable import androidx.compose.runtime.getValue -import androidx.compose.runtime.mutableStateOf -import androidx.compose.runtime.remember -import androidx.compose.runtime.setValue +import androidx.compose.runtime.rememberCoroutineScope import androidx.compose.ui.Modifier import androidx.compose.ui.tooling.preview.Preview +import androidx.compose.ui.unit.dp +import androidx.compose.ui.zIndex import androidx.hilt.navigation.compose.hiltViewModel import com.google.accompanist.pager.ExperimentalPagerApi import com.google.accompanist.pager.HorizontalPager @@ -27,6 +31,8 @@ import io.github.droidkaigi.confsched2022.designsystem.theme.KaigiTheme import io.github.droidkaigi.confsched2022.feature.sessions.SessionsUiModel.ScheduleState.Loaded import io.github.droidkaigi.confsched2022.model.TimetableItemId import io.github.droidkaigi.confsched2022.model.orEmptyContents +import io.github.droidkaigi.confsched2022.ui.pagerTabIndicatorOffset +import kotlinx.coroutines.launch @Composable fun SessionsScreenRoot( @@ -36,14 +42,10 @@ fun SessionsScreenRoot( val viewModel = hiltViewModel() val state: SessionsUiModel by viewModel.uiModel - var tabState by remember { mutableStateOf(0) } - Sessions( uiModel = state, modifier = modifier, - selectedTab = tabState, onTimetableClick = {}, - onTabClicked = { index -> tabState = index }, onToggleFilter = { viewModel.onToggleFilter() }, onFavoriteClick = { timetableItemId, isFavorite -> viewModel.onFavoriteToggle(timetableItemId, isFavorite) @@ -57,10 +59,8 @@ fun SessionsScreenRoot( fun Sessions( uiModel: SessionsUiModel, modifier: Modifier = Modifier, - selectedTab: Int, onNavigationIconClick: () -> Unit, onTimetableClick: (timetableItemId: TimetableItemId) -> Unit, - onTabClicked: (index: Int) -> Unit, onToggleFilter: () -> Unit, onFavoriteClick: (TimetableItemId, Boolean) -> Unit ) { @@ -79,16 +79,27 @@ fun Sessions( ) { val pagerState = rememberPagerState() TabRow( - selectedTabIndex = selectedTab, - indicator = {}, + selectedTabIndex = pagerState.currentPage, + indicator = { + TabIndicator( + modifier = Modifier + .pagerTabIndicatorOffset(pagerState, it) + .zIndex(-1f), + ) + }, divider = {}, ) { + val coroutineScope = rememberCoroutineScope() days.forEachIndexed { index, day -> SessionDayTab( index = index, day = day, - selectedTab = selectedTab, - onTabClicked = onTabClicked + selected = pagerState.currentPage == index, + onTabClicked = { + coroutineScope.launch { + pagerState.animateScrollToPage(it) + } + } ) } } @@ -118,6 +129,19 @@ fun Sessions( } } +@Composable +private fun TabIndicator( + modifier: Modifier = Modifier, +) { + Surface( + color = MaterialTheme.colorScheme.secondaryContainer, + shape = RoundedCornerShape(percent = 50), + modifier = modifier + .fillMaxWidth() + .height(56.dp) + ) {} +} + @Preview(showBackground = true) @Composable fun SessionsPreview() {