From 7d630ba72a0c01821e94a8f2b304adda27f60621 Mon Sep 17 00:00:00 2001 From: Shubham Singh Date: Mon, 8 Apr 2024 00:47:49 +0530 Subject: [PATCH] Update App Demo to use all buttons --- .../kotlin/design/adapt/AdaptButton.kt | 8 +- .../design/adapt/windows/WindowsButton.kt | 5 - .../kotlin/design/adapt/App.android.kt | 7 + .../src/commonMain/kotlin/design/adapt/App.kt | 179 +++++++++++++++++- 4 files changed, 191 insertions(+), 8 deletions(-) diff --git a/adapt/src/commonMain/kotlin/design/adapt/AdaptButton.kt b/adapt/src/commonMain/kotlin/design/adapt/AdaptButton.kt index 442bd6a..45a0e35 100644 --- a/adapt/src/commonMain/kotlin/design/adapt/AdaptButton.kt +++ b/adapt/src/commonMain/kotlin/design/adapt/AdaptButton.kt @@ -17,6 +17,7 @@ package design.adapt import androidx.compose.foundation.interaction.MutableInteractionSource +import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.PaddingValues import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.Spacer @@ -78,10 +79,13 @@ fun AdaptButton( content = { CompositionLocalProvider( LocalContentColor provides configuration.android.colors.contentColor, + LocalTextStyle provides androidx.compose.material3.LocalTextStyle.current, ) { - Row { + Row( + horizontalArrangement = Arrangement.spacedBy(8.dp), + verticalAlignment = Alignment.CenterVertically, + ) { icon?.invoke() - Spacer(modifier = Modifier.width(8.dp)) text?.invoke() } } diff --git a/adapt/src/commonMain/kotlin/design/adapt/windows/WindowsButton.kt b/adapt/src/commonMain/kotlin/design/adapt/windows/WindowsButton.kt index a86e4da..cbe3c72 100644 --- a/adapt/src/commonMain/kotlin/design/adapt/windows/WindowsButton.kt +++ b/adapt/src/commonMain/kotlin/design/adapt/windows/WindowsButton.kt @@ -31,7 +31,6 @@ import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.runtime.Composable import androidx.compose.runtime.CompositionLocalProvider import androidx.compose.runtime.Immutable -import androidx.compose.runtime.LaunchedEffect import androidx.compose.runtime.getValue import androidx.compose.runtime.movableContentOf import androidx.compose.runtime.remember @@ -69,10 +68,6 @@ fun WindowsButton( val isCompactButton = remember(size) { size == WindowsButtonSize.Compact } val isIconOnlyButton = remember(icon, text) { icon != null && text == null } - LaunchedEffect(isPressed) { - println("isPressed: $isPressed") - } - val buttonMargin = remember(isCompactButton, isIconOnlyButton) { if (isCompactButton) { PaddingValues( diff --git a/sample/composeApp/src/androidMain/kotlin/design/adapt/App.android.kt b/sample/composeApp/src/androidMain/kotlin/design/adapt/App.android.kt index 573cfc8..642865e 100644 --- a/sample/composeApp/src/androidMain/kotlin/design/adapt/App.android.kt +++ b/sample/composeApp/src/androidMain/kotlin/design/adapt/App.android.kt @@ -16,13 +16,20 @@ package design.adapt +import android.graphics.Color import android.os.Bundle import androidx.activity.ComponentActivity +import androidx.activity.SystemBarStyle import androidx.activity.compose.setContent +import androidx.activity.enableEdgeToEdge class AppActivity : ComponentActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) + enableEdgeToEdge( + statusBarStyle = SystemBarStyle.light(Color.TRANSPARENT, Color.TRANSPARENT), + navigationBarStyle = SystemBarStyle.light(Color.TRANSPARENT, Color.TRANSPARENT), + ) setContent { App() } } } diff --git a/sample/composeApp/src/commonMain/kotlin/design/adapt/App.kt b/sample/composeApp/src/commonMain/kotlin/design/adapt/App.kt index 0af32d8..2aa95dc 100644 --- a/sample/composeApp/src/commonMain/kotlin/design/adapt/App.kt +++ b/sample/composeApp/src/commonMain/kotlin/design/adapt/App.kt @@ -16,7 +16,184 @@ package design.adapt +import androidx.compose.foundation.ExperimentalFoundationApi +import androidx.compose.foundation.background +import androidx.compose.foundation.layout.Arrangement +import androidx.compose.foundation.layout.Box +import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.ColumnScope +import androidx.compose.foundation.layout.Row +import androidx.compose.foundation.layout.Spacer +import androidx.compose.foundation.layout.fillMaxSize +import androidx.compose.foundation.layout.height +import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.layout.systemBarsPadding +import androidx.compose.foundation.pager.HorizontalPager +import androidx.compose.foundation.pager.rememberPagerState +import androidx.compose.foundation.rememberScrollState +import androidx.compose.foundation.verticalScroll +import androidx.compose.material.icons.Icons +import androidx.compose.material.icons.automirrored.outlined.ArrowBack +import androidx.compose.material.icons.automirrored.outlined.ArrowForward +import androidx.compose.material3.Button +import androidx.compose.material3.IconButton +import androidx.compose.material3.Text import androidx.compose.runtime.Composable +import androidx.compose.runtime.rememberCoroutineScope +import androidx.compose.ui.Alignment +import androidx.compose.ui.Modifier +import androidx.compose.ui.graphics.Color +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 design.adapt.cupertino.IOSButton +import design.adapt.cupertino.MacOSButton +import design.adapt.windows.WindowsButton +import kotlinx.coroutines.launch +@OptIn(ExperimentalFoundationApi::class) @Composable -internal fun App() {} +internal fun App() { + val coroutineScope = rememberCoroutineScope() + val horizontalPagerState = rememberPagerState { 2 } + + AdaptTheme { + Box( + modifier = Modifier + .background(Color.White) + .systemBarsPadding() + .fillMaxSize() + ) { + Column { + AdaptText( + modifier = Modifier.padding(start = 24.dp, top = 24.dp, end = 24.dp), + text = "Adapt Demo", + style = TextStyle( + fontSize = 28.sp, + fontWeight = FontWeight.Bold, + ) + ) + Row( + modifier = Modifier.padding(horizontal = 24.dp, vertical = 16.dp), + verticalAlignment = Alignment.CenterVertically, + ) { + IconButton( + onClick = { + coroutineScope.launch { + horizontalPagerState.animateScrollToPage( + page = horizontalPagerState.currentPage - 1, + ) + } + }, + content = { + AdaptIcon( + imageVector = Icons.AutoMirrored.Outlined.ArrowBack, + contentDescription = null + ) + } + ) + AdaptText( + modifier = Modifier + .padding(horizontal = 24.dp) + .weight(1f), + text = "Tap or Swipe horizontally to see more pages", + style = TextStyle(textAlign = TextAlign.Center), + ) + IconButton( + onClick = { + coroutineScope.launch { + horizontalPagerState.animateScrollToPage( + page = horizontalPagerState.currentPage + 1, + ) + } + }, + content = { + AdaptIcon( + imageVector = Icons.AutoMirrored.Outlined.ArrowForward, + contentDescription = null + ) + } + ) + } + HorizontalPager(state = horizontalPagerState) { page -> + when (page) { + 0 -> ButtonsDemoPage() + else -> IndicatorsDemoPage() + } + } + } + } + } +} + +@Composable +private fun ColumnScaffold( + title: String, + content: @Composable ColumnScope.() -> Unit +) { + Column( + modifier = Modifier + .fillMaxSize() + .verticalScroll(rememberScrollState()) + .padding(horizontal = 24.dp), + verticalArrangement = Arrangement.spacedBy(24.dp), + ) { + AdaptText( + modifier = Modifier.padding(top = 16.dp), + text = title, + style = TextStyle(fontSize = 24.sp, fontWeight = FontWeight.Bold) + ) + content() + Spacer(Modifier.height(24.dp)) + } +} + +@Composable +private fun ButtonsDemoPage() { + ColumnScaffold(title = "Buttons") { + AdaptText(text = "This 👇🏼 button should look native-like on all platforms") + AdaptButton( + onClick = {}, + text = { AdaptText(text = "Adapt Button") } + ) + AdaptText( + text = "This 👇🏼 button should use the Material design system on all platforms" + ) + Button( + onClick = {}, + content = { Text(text = "Android Button") } + ) + AdaptText( + text = "This 👇🏼 button should use iOS' variant of the Cupertino design " + + "system on all platforms", + ) + IOSButton( + onClick = {}, + text = { AdaptText(text = "iOS Button") } + ) + AdaptText( + text = "This 👇🏼 button should use macOS' variant of the Cupertino design " + + "system on all platforms", + ) + MacOSButton( + onClick = {}, + text = { AdaptText(text = "macOS Button") } + ) + AdaptText( + text = "This 👇🏼 button should use the WinUI design system on all platforms", + ) + WindowsButton( + onClick = {}, + text = { AdaptText(text = "Windows Button") } + ) + } +} + +@Composable +fun IndicatorsDemoPage() { + ColumnScaffold(title = "Indicators") { + Spacer(Modifier.height(24.dp)) + } +}