Skip to content

Commit

Permalink
Merge pull request #342 from RyuNen344/feature/contributor-screen
Browse files Browse the repository at this point in the history
"Contributor" screen design #23
  • Loading branch information
takahirom authored Mar 11, 2021
2 parents 9f893a1 + 9819c4f commit 8cbb31e
Show file tree
Hide file tree
Showing 5 changed files with 125 additions and 12 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -126,7 +126,10 @@ fun AppContent(
routePath.value = otherTabs.routePath
drawerContentState.onSelectDrawerContent(otherTabs)
},
onNavigationIconClick = onNavigationIconClick
onNavigationIconClick = onNavigationIconClick,
onClickContributor = { contributor ->
actions.showChromeCustomTabs(contributor.url)
}
)
}
chromeCustomTabs()
Expand Down
1 change: 1 addition & 0 deletions uicomponent-compose/other/build.gradle
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
Original file line number Diff line number Diff line change
@@ -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) {
}
}
}
}
Original file line number Diff line number Diff line change
@@ -1,24 +1,53 @@
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() {
}
}
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -61,6 +62,7 @@ fun OtherScreen(
selectedTab: OtherTabs,
onSelectTab: (OtherTabs) -> Unit,
onNavigationIconClick: () -> Unit,
onClickContributor: (Contributor) -> Unit,
) {
val scaffoldState = rememberBackdropScaffoldState(BackdropValue.Concealed)

Expand All @@ -69,6 +71,7 @@ fun OtherScreen(
selectedTab = selectedTab,
onSelectTab = onSelectTab,
onNavigationIconClick = onNavigationIconClick,
onClickContributor = onClickContributor
)
}

Expand All @@ -81,6 +84,7 @@ fun OtherScreen(
selectedTab: OtherTabs,
onSelectTab: (OtherTabs) -> Unit,
onNavigationIconClick: () -> Unit,
onClickContributor: (Contributor) -> Unit,
) {
Column {
val density = LocalDensity.current
Expand All @@ -102,7 +106,7 @@ fun OtherScreen(
modifier = Modifier.fillMaxHeight()
) {
FadeThrough(targetState = selectedTab) { selectedTab ->
BackdropFrontLayerContent(selectedTab)
BackdropFrontLayerContent(selectedTab, onClickContributor)
}
}
}
Expand Down Expand Up @@ -156,10 +160,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
Expand Down Expand Up @@ -196,6 +201,8 @@ fun PreviewOtherScreen() {
onSelectTab = {
},
onNavigationIconClick = {
},
onClickContributor = {
}
)
}
Expand Down

0 comments on commit 8cbb31e

Please sign in to comment.