Skip to content

Commit

Permalink
Update App Demo to use all buttons
Browse files Browse the repository at this point in the history
  • Loading branch information
@shubhamsinghshubham777
shubhamsinghshubham777 committed Apr 7, 2024
1 parent f2ba43b commit 7d630ba
Show file tree
Hide file tree
Showing 4 changed files with 191 additions and 8 deletions.
8 changes: 6 additions & 2 deletions adapt/src/commonMain/kotlin/design/adapt/AdaptButton.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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()
}
}
Expand Down
5 changes: 0 additions & 5 deletions adapt/src/commonMain/kotlin/design/adapt/windows/WindowsButton.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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(
Expand Down
7 changes: 7 additions & 0 deletions sample/composeApp/src/androidMain/kotlin/design/adapt/App.android.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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() }
}
}
179 changes: 178 additions & 1 deletion sample/composeApp/src/commonMain/kotlin/design/adapt/App.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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))
}
}

0 comments on commit 7d630ba

Please sign in to comment.