Skip to content

Commit

Permalink
Use more responsive layouts for media toolkit (#2270)
Browse files Browse the repository at this point in the history
  • Loading branch information
@yschimke
yschimke authored Jun 14, 2024
1 parent 6395aa7 commit 425490f
Show file tree
Hide file tree
Showing 83 changed files with 477 additions and 457 deletions.
2 changes: 1 addition & 1 deletion auth/composables/api/current.api
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@ package com.google.android.horologist.auth.composables.screens {
}

public final class SelectAccountScreenKt {
method @androidx.compose.runtime.Composable public static void SelectAccountScreen(java.util.List<com.google.android.horologist.auth.composables.model.AccountUiModel> accounts, kotlin.jvm.functions.Function2<? super java.lang.Integer,? super com.google.android.horologist.auth.composables.model.AccountUiModel,kotlin.Unit> onAccountClicked, optional androidx.compose.ui.Modifier modifier, optional com.google.android.horologist.compose.layout.ScalingLazyColumnState columnState, optional String title, optional com.google.android.horologist.images.base.paintable.Paintable? defaultAvatar);
method @androidx.compose.runtime.Composable public static void SelectAccountScreen(java.util.List<com.google.android.horologist.auth.composables.model.AccountUiModel> accounts, kotlin.jvm.functions.Function2<? super java.lang.Integer,? super com.google.android.horologist.auth.composables.model.AccountUiModel,kotlin.Unit> onAccountClicked, optional androidx.compose.ui.Modifier modifier, optional String title, optional com.google.android.horologist.images.base.paintable.Paintable? defaultAvatar);
}

public final class SignInPlaceholderScreenKt {
Expand Down
3 changes: 0 additions & 3 deletions ...java/com/google/android/horologist/auth/composables/screens/SelectAccountScreenPreview.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,6 @@ package com.google.android.horologist.auth.composables.screens
import androidx.compose.runtime.Composable
import androidx.wear.compose.ui.tooling.preview.WearPreviewDevices
import com.google.android.horologist.auth.composables.model.AccountUiModel
import com.google.android.horologist.compose.layout.rememberResponsiveColumnState

@WearPreviewDevices
@Composable
Expand All @@ -30,7 +29,6 @@ fun SelectAccountScreenPreview() {
AccountUiModel(email = "thisisaverylongemail@example.com"),
),
onAccountClicked = { _, _ -> },
columnState = rememberResponsiveColumnState(),
)
}

Expand All @@ -43,7 +41,6 @@ fun SelectAccountScreenPreviewNoAvatar() {
AccountUiModel(email = "thisisaverylongemailaccountsample@example.com"),
),
onAccountClicked = { _, _ -> },
columnState = rememberResponsiveColumnState(),
defaultAvatar = null,
)
}
58 changes: 34 additions & 24 deletions ...c/main/java/com/google/android/horologist/auth/composables/screens/SelectAccountScreen.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,9 @@ import com.google.android.horologist.auth.composables.R
import com.google.android.horologist.auth.composables.chips.AccountChip
import com.google.android.horologist.auth.composables.model.AccountUiModel
import com.google.android.horologist.compose.layout.ScalingLazyColumn
import com.google.android.horologist.compose.layout.ScalingLazyColumnState
import com.google.android.horologist.compose.layout.ScalingLazyColumnDefaults.ItemType
import com.google.android.horologist.compose.layout.ScalingLazyColumnDefaults.padding
import com.google.android.horologist.compose.layout.ScreenScaffold
import com.google.android.horologist.compose.layout.rememberResponsiveColumnState
import com.google.android.horologist.compose.material.Title
import com.google.android.horologist.images.base.paintable.ImageVectorPaintable.Companion.asPaintable
Expand All @@ -46,35 +48,43 @@ public fun SelectAccountScreen(
accounts: List<AccountUiModel>,
onAccountClicked: (index: Int, account: AccountUiModel) -> Unit,
modifier: Modifier = Modifier,
columnState: ScalingLazyColumnState = rememberResponsiveColumnState(),
title: String = stringResource(id = R.string.horologist_select_account_title),
defaultAvatar: Paintable? = Icons.Default.AccountCircle.asPaintable(),
) {
ScalingLazyColumn(
modifier = modifier,
columnState = columnState,
) {
item { Title(title, Modifier.padding(bottom = 8.dp)) }
val columnState = rememberResponsiveColumnState(
contentPadding = padding(
first = ItemType.Text,
last = ItemType.Chip,
),
)

items(accounts.size) { index ->
val account = accounts[index]
MaterialTheme(
typography = MaterialTheme.typography.copy(
button = MaterialTheme.typography.button.copy(
lineBreak = LineBreak(
strategy = LineBreak.Strategy.Balanced,
strictness = LineBreak.Strictness.Normal,
wordBreak = LineBreak.WordBreak.Default,
ScreenScaffold(scrollState = columnState) {
ScalingLazyColumn(
modifier = modifier,
columnState = columnState,
) {
item { Title(title, Modifier.padding(bottom = 8.dp)) }

items(accounts.size) { index ->
val account = accounts[index]
MaterialTheme(
typography = MaterialTheme.typography.copy(
button = MaterialTheme.typography.button.copy(
lineBreak = LineBreak(
strategy = LineBreak.Strategy.Balanced,
strictness = LineBreak.Strictness.Normal,
wordBreak = LineBreak.WordBreak.Default,
),
),
),
),
) {
AccountChip(
account = account,
onClick = { onAccountClicked(index, account) },
colors = ChipDefaults.secondaryChipColors(),
defaultAvatar = defaultAvatar,
)
) {
AccountChip(
account = account,
onClick = { onAccountClicked(index, account) },
colors = ChipDefaults.secondaryChipColors(),
defaultAvatar = defaultAvatar,
)
}
}
}
}
Expand Down
3 changes: 0 additions & 3 deletions ...st/java/com/google/android/horologist/auth/composables/screens/SelectAccountScreenTest.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,6 @@ package com.google.android.horologist.auth.composables.screens
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Face
import com.google.android.horologist.auth.composables.model.AccountUiModel
import com.google.android.horologist.compose.layout.ScalingLazyColumnDefaults
import com.google.android.horologist.images.base.paintable.ImageVectorPaintable.Companion.asPaintable
import com.google.android.horologist.screenshots.rng.WearLegacyScreenTest
import org.junit.Test
Expand All @@ -38,7 +37,6 @@ class SelectAccountScreenTest : WearLegacyScreenTest() {
AccountUiModel(email = "thisisaverylongemail@example.com"),
),
onAccountClicked = { _, _ -> },
columnState = ScalingLazyColumnDefaults.responsive().create(),
)
}
}
Expand All @@ -52,7 +50,6 @@ class SelectAccountScreenTest : WearLegacyScreenTest() {
AccountUiModel(email = "thisisaverylongemailaccountsample@example.com"),
),
onAccountClicked = { _, _ -> },
columnState = ScalingLazyColumnDefaults.responsive().create(),
defaultAvatar = null,
)
}
Expand Down
4 changes: 2 additions & 2 deletions ...logist.auth.composables.screens_SelectAccountScreenTest_selectAccountScreen.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 2 additions & 2 deletions ...uth.composables.screens_SelectAccountScreenTest_selectAccountScreenNoAvatar.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
65 changes: 15 additions & 50 deletions auth/sample/wear/src/main/java/com/google/android/horologist/auth/sample/WearApp.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,91 +37,56 @@ import com.google.android.horologist.auth.sample.screens.tokenshare.customkey.To
import com.google.android.horologist.auth.sample.screens.tokenshare.defaultkey.TokenShareDefaultKeyScreen
import com.google.android.horologist.auth.ui.googlesignin.signin.GoogleSignInScreen
import com.google.android.horologist.compose.layout.AppScaffold
import com.google.android.horologist.compose.layout.ScreenScaffold
import com.google.android.horologist.compose.layout.rememberColumnState

@Composable
fun WearApp(
modifier: Modifier = Modifier,
navController: NavHostController = rememberSwipeDismissableNavController(),
) {
AppScaffold {
AppScaffold(modifier = modifier) {
SwipeDismissableNavHost(
startDestination = Screen.MainScreen.route,
navController = navController,
) {
composable(
route = Screen.MainScreen.route,
) {
val columnState = rememberColumnState()

ScreenScaffold(scrollState = columnState) {
MainScreen(
navigateToRoute = navController::navigate,
modifier = modifier,
columnState = columnState,
)
}
MainScreen(
navigateToRoute = navController::navigate,
)
}
composable(
route = Screen.GoogleSignInPromptSampleScreen.route,
) {
val columnState = rememberColumnState()

ScreenScaffold(scrollState = columnState) {
GoogleSignInPromptSampleScreen(
navController = navController,
columnState = columnState,
modifier = modifier,
)
}
GoogleSignInPromptSampleScreen(
navController = navController,
)
}
composable(route = Screen.StreamlineSignInMenuScreen.route) {
val columnState = rememberColumnState()

ScreenScaffold(scrollState = columnState) {
StreamlineSignInMenuScreen(
navController = navController,
columnState = columnState,
modifier = modifier,
)
}
StreamlineSignInMenuScreen(
navController = navController,
)
}
composable(route = Screen.StreamlineSignInSampleScreen.route) {
val columnState = rememberColumnState()

ScreenScaffold(scrollState = columnState) {
StreamlineSignInSampleScreen(
navController = navController,
columnState = columnState,
modifier = modifier,
)
}
StreamlineSignInSampleScreen(
navController = navController,
)
}
composable(route = Screen.GoogleSignInScreen.route) {
GoogleSignInScreen(
onAuthCancelled = navController::popBackStack,
onAuthSucceed = navController::popBackStack,
modifier = modifier,
viewModel = viewModel(factory = GoogleSignInSampleViewModelFactory),
)
}
composable(route = Screen.GoogleSignOutScreen.route) {
GoogleSignOutScreen(navController = navController)
}
composable(route = Screen.TokenShareDefaultKeyScreen.route) {
val columnState = rememberColumnState()

ScreenScaffold(scrollState = columnState) {
TokenShareDefaultKeyScreen(columnState = columnState, modifier = modifier)
}
TokenShareDefaultKeyScreen()
}
composable(route = Screen.TokenShareCustomKeyScreen.route) {
val columnState = rememberColumnState()

ScreenScaffold(scrollState = columnState) {
TokenShareCustomKeyScreen(columnState = columnState, modifier = modifier)
}
TokenShareCustomKeyScreen()
}
}
}
Expand Down
29 changes: 19 additions & 10 deletions ...sample/wear/src/main/java/com/google/android/horologist/auth/sample/screens/MainScreen.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,9 @@ import com.google.android.horologist.auth.sample.R
import com.google.android.horologist.auth.sample.Screen
import com.google.android.horologist.composables.SectionedList
import com.google.android.horologist.composables.SectionedListScope
import com.google.android.horologist.compose.layout.ScalingLazyColumnState
import com.google.android.horologist.compose.layout.ScalingLazyColumnDefaults.ItemType
import com.google.android.horologist.compose.layout.ScalingLazyColumnDefaults.padding
import com.google.android.horologist.compose.layout.ScreenScaffold
import com.google.android.horologist.compose.layout.rememberResponsiveColumnState
import com.google.android.horologist.compose.material.Chip
import com.google.android.horologist.compose.material.Title
Expand All @@ -35,17 +37,25 @@ import com.google.android.horologist.compose.material.Title
fun MainScreen(
navigateToRoute: (String) -> Unit,
modifier: Modifier = Modifier,
columnState: ScalingLazyColumnState,
) {
SectionedList(
columnState = columnState,
modifier = modifier.fillMaxSize(),
) {
googleSignInSection(navigateToRoute)
val columnState = rememberResponsiveColumnState(
contentPadding = padding(
first = ItemType.Text,
last = ItemType.Chip,
),
)

tokenShareSection(navigateToRoute)
ScreenScaffold(scrollState = columnState) {
SectionedList(
columnState = columnState,
modifier = modifier.fillMaxSize(),
) {
googleSignInSection(navigateToRoute)

commonScreensSection(navigateToRoute)
tokenShareSection(navigateToRoute)

commonScreensSection(navigateToRoute)
}
}
}

Expand Down Expand Up @@ -126,6 +136,5 @@ private fun SectionedListScope.commonScreensSection(navigateToRoute: (String) ->
fun AuthMenuScreenPreview() {
MainScreen(
navigateToRoute = {},
columnState = rememberResponsiveColumnState(),
)
}
Loading

0 comments on commit 425490f

Please sign in to comment.