diff --git a/uicomponent-compose/main/src/main/java/io/github/droidkaigi/feeder/AppContent.kt b/uicomponent-compose/main/src/main/java/io/github/droidkaigi/feeder/AppContent.kt index ebffa700a..f0e53fed5 100644 --- a/uicomponent-compose/main/src/main/java/io/github/droidkaigi/feeder/AppContent.kt +++ b/uicomponent-compose/main/src/main/java/io/github/droidkaigi/feeder/AppContent.kt @@ -126,7 +126,10 @@ fun AppContent( routePath.value = otherTabs.routePath drawerContentState.onSelectDrawerContent(otherTabs) }, - onNavigationIconClick = onNavigationIconClick + onNavigationIconClick = onNavigationIconClick, + onClickContributor = { contributor -> + actions.showChromeCustomTabs(contributor.url) + } ) } chromeCustomTabs() diff --git a/uicomponent-compose/other/build.gradle b/uicomponent-compose/other/build.gradle index 0e84a6e23..a3cdf8b89 100644 --- a/uicomponent-compose/other/build.gradle +++ b/uicomponent-compose/other/build.gradle @@ -17,6 +17,7 @@ android { kotlinOptions { jvmTarget = '1.8' freeCompilerArgs += "-Xopt-in=androidx.compose.material.ExperimentalMaterialApi" + freeCompilerArgs += "-Xopt-in=androidx.compose.foundation.ExperimentalFoundationApi" freeCompilerArgs += "-Xopt-in=kotlinx.coroutines.ExperimentalCoroutinesApi" } buildFeatures { diff --git a/uicomponent-compose/other/src/main/java/io/github/droidkaigi/feeder/contributor/ContributorItem.kt b/uicomponent-compose/other/src/main/java/io/github/droidkaigi/feeder/contributor/ContributorItem.kt new file mode 100644 index 000000000..e02740579 --- /dev/null +++ b/uicomponent-compose/other/src/main/java/io/github/droidkaigi/feeder/contributor/ContributorItem.kt @@ -0,0 +1,73 @@ +package io.github.droidkaigi.feeder.contributor + +import androidx.compose.foundation.clickable +import androidx.compose.foundation.layout.Arrangement +import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.fillMaxHeight +import androidx.compose.foundation.layout.fillMaxSize +import androidx.compose.foundation.layout.fillMaxWidth +import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.layout.size +import androidx.compose.foundation.shape.CircleShape +import androidx.compose.material.Surface +import androidx.compose.material.Text +import androidx.compose.runtime.Composable +import androidx.compose.ui.Alignment +import androidx.compose.ui.Modifier +import androidx.compose.ui.layout.ContentScale +import androidx.compose.ui.text.style.TextAlign +import androidx.compose.ui.tooling.preview.Preview +import androidx.compose.ui.unit.dp +import androidx.compose.ui.unit.sp +import io.github.droidkaigi.feeder.Contributor +import io.github.droidkaigi.feeder.core.NetworkImage +import io.github.droidkaigi.feeder.core.theme.ConferenceAppFeederTheme +import io.github.droidkaigi.feeder.fakeContributors + +@Composable +fun ContributorItem(contributor: Contributor, onClickItem: (Contributor) -> Unit) { + Column( + modifier = Modifier + .padding(top = 22.dp) + .fillMaxHeight() + .clickable { + onClickItem(contributor) + }, + verticalArrangement = Arrangement.Center, + horizontalAlignment = Alignment.CenterHorizontally, + ) { + Surface( + modifier = Modifier + .padding(top = 10.dp) + .size(60.dp), + shape = CircleShape + ) { + NetworkImage( + url = contributor.image, + modifier = Modifier.fillMaxSize(), + contentScale = ContentScale.Fit, + contentDescription = "Contributor Icon" + ) + } + Text( + text = contributor.name, + fontSize = 14.sp, + textAlign = TextAlign.Center, + modifier = Modifier + .padding(vertical = 10.dp, horizontal = 12.dp) + .fillMaxWidth() + ) + } +} + +@Preview(showBackground = true) +@Composable +fun PreviewContributorItem() { + ConferenceAppFeederTheme(false) { + val contributor = fakeContributors().first() + ProvideContributorViewModel(viewModel = fakeContributorViewModel()) { + ContributorItem(contributor = contributor) { + } + } + } +} diff --git a/uicomponent-compose/other/src/main/java/io/github/droidkaigi/feeder/contributor/ContributorList.kt b/uicomponent-compose/other/src/main/java/io/github/droidkaigi/feeder/contributor/ContributorList.kt index 1d0715b86..867bb5d7d 100644 --- a/uicomponent-compose/other/src/main/java/io/github/droidkaigi/feeder/contributor/ContributorList.kt +++ b/uicomponent-compose/other/src/main/java/io/github/droidkaigi/feeder/contributor/ContributorList.kt @@ -1,24 +1,55 @@ package io.github.droidkaigi.feeder.contributor -import androidx.compose.foundation.layout.Column -import androidx.compose.foundation.layout.padding -import androidx.compose.material.Text +import androidx.compose.foundation.layout.fillMaxHeight +import androidx.compose.foundation.lazy.GridCells +import androidx.compose.foundation.lazy.LazyVerticalGrid +import androidx.compose.foundation.lazy.items +import androidx.compose.material.MaterialTheme +import androidx.compose.material.Surface import androidx.compose.runtime.Composable import androidx.compose.ui.Modifier -import androidx.compose.ui.unit.dp +import androidx.compose.ui.tooling.preview.Preview +import dev.chrisbanes.accompanist.insets.LocalWindowInsets +import dev.chrisbanes.accompanist.insets.toPaddingValues +import io.github.droidkaigi.feeder.Contributor +import io.github.droidkaigi.feeder.core.theme.ConferenceAppFeederTheme import io.github.droidkaigi.feeder.core.use @Composable -fun ContributorList() { +fun ContributorList(onClickContributor: (Contributor) -> Unit) { + val ( state, effectFlow, dispatch, ) = use(contributeViewModel()) - Column(Modifier.padding(top = 32.dp)) { - Text("Not implemented yet. Please create this screen!") - state.contributorContents.forEach { - Text(it.name) + + Surface( + color = MaterialTheme.colors.background, + modifier = Modifier.fillMaxHeight() + ) { + LazyVerticalGrid( + cells = GridCells.Fixed(count = 3), + contentPadding = LocalWindowInsets.current.systemBars + .toPaddingValues(top = false, start = false, end = false), + content = { + items(state.contributorContents) { contributor -> + ContributorItem(contributor = contributor, onClickContributor) + } + } + ) + } +} + + +@Preview(showBackground = true) +@Composable +fun PreviewContributorScreen() { + ConferenceAppFeederTheme(false) { + ProvideContributorViewModel(viewModel = fakeContributorViewModel()) { + ContributorList() { + + } } } } diff --git a/uicomponent-compose/other/src/main/java/io/github/droidkaigi/feeder/other/OtherScreen.kt b/uicomponent-compose/other/src/main/java/io/github/droidkaigi/feeder/other/OtherScreen.kt index 6030f2b22..6b2719ef7 100644 --- a/uicomponent-compose/other/src/main/java/io/github/droidkaigi/feeder/other/OtherScreen.kt +++ b/uicomponent-compose/other/src/main/java/io/github/droidkaigi/feeder/other/OtherScreen.kt @@ -31,6 +31,7 @@ import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp import dev.chrisbanes.accompanist.insets.LocalWindowInsets import dev.chrisbanes.accompanist.insets.statusBarsPadding +import io.github.droidkaigi.feeder.Contributor import io.github.droidkaigi.feeder.about.AboutThisApp import io.github.droidkaigi.feeder.contributor.ContributorList import io.github.droidkaigi.feeder.core.ScrollableTabRow @@ -61,6 +62,7 @@ fun OtherScreen( selectedTab: OtherTabs, onSelectTab: (OtherTabs) -> Unit, onNavigationIconClick: () -> Unit, + onClickContributor: (Contributor) -> Unit, ) { val scaffoldState = rememberBackdropScaffoldState(BackdropValue.Concealed) @@ -69,18 +71,21 @@ fun OtherScreen( selectedTab = selectedTab, onSelectTab = onSelectTab, onNavigationIconClick = onNavigationIconClick, + onClickContributor = onClickContributor ) } /** * stateless */ +@ExperimentalMaterialApi @Composable fun OtherScreen( scaffoldState: BackdropScaffoldState, selectedTab: OtherTabs, onSelectTab: (OtherTabs) -> Unit, onNavigationIconClick: () -> Unit, + onClickContributor: (Contributor) -> Unit, ) { Column { val density = LocalDensity.current @@ -102,7 +107,7 @@ fun OtherScreen( modifier = Modifier.fillMaxHeight() ) { FadeThrough(targetState = selectedTab) { selectedTab -> - BackdropFrontLayerContent(selectedTab) + BackdropFrontLayerContent(selectedTab, onClickContributor) } } } @@ -156,10 +161,11 @@ private fun AppBar( @Composable private fun BackdropFrontLayerContent( selectedTab: OtherTabs, + onClickContributor: (Contributor) -> Unit, ) { when (selectedTab) { OtherTabs.AboutThisApp -> AboutThisApp() - OtherTabs.Contributor -> ContributorList() + OtherTabs.Contributor -> ContributorList(onClickContributor) OtherTabs.Staff -> StaffList() else -> { val context = LocalContext.current @@ -196,6 +202,8 @@ fun PreviewOtherScreen() { onSelectTab = { }, onNavigationIconClick = { + }, + onClickContributor = { } ) }