Skip to content

Commit

Permalink
UI: Add TextFieldButton (#138)
Browse files Browse the repository at this point in the history
  • Loading branch information
@ksharma-xyz
ksharma-xyz authored Oct 6, 2024
1 parent e624323 commit ffa2b0f
Show file tree
Hide file tree
Showing 4 changed files with 100 additions and 78 deletions.
3 changes: 3 additions & 0 deletions core/design-system/src/main/kotlin/xyz/ksharma/krail/design/system/components/Text.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.text.style.TextOverflow
import xyz.ksharma.krail.design.system.LocalContentAlpha
import xyz.ksharma.krail.design.system.LocalTextColor
import xyz.ksharma.krail.design.system.LocalTextStyle
Expand All @@ -23,6 +24,7 @@ fun Text(
color: Color? = null,
textAlign: TextAlign = TextAlign.Start,
maxLines: Int = Int.MAX_VALUE,
overflow: TextOverflow = if (maxLines == Int.MAX_VALUE) TextOverflow.Clip else TextOverflow.Ellipsis,
) {
val contentAlpha = LocalContentAlpha.current
CompositionLocalProvider(
Expand All @@ -36,6 +38,7 @@ fun Text(
textAlign = textAlign,
),
maxLines = maxLines,
overflow = overflow,
modifier = modifier,
)
}
Expand Down
72 changes: 72 additions & 0 deletions ...sign-system/src/main/kotlin/xyz/ksharma/krail/design/system/components/TextFieldButton.kt
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,72 @@
package xyz.ksharma.krail.design.system.components

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.runtime.Composable
import androidx.compose.runtime.CompositionLocalProvider
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import xyz.ksharma.krail.design.system.LocalContentAlpha
import xyz.ksharma.krail.design.system.LocalTextColor
import xyz.ksharma.krail.design.system.LocalTextStyle
import xyz.ksharma.krail.design.system.preview.ComponentPreviews
import xyz.ksharma.krail.design.system.theme.KrailTheme
import xyz.ksharma.krail.design.system.tokens.TextFieldTokens
import xyz.ksharma.krail.design.system.tokens.TextFieldTokens.TextFieldHeight

/**
* A button that looks like a text field.
*
* @param modifier The modifier to apply to this component.
* @param enabled Whether the button is enabled.
* @param content The content of the button.
*
* TODO - how to ensure modifiers for TextField and TextFieldButton are consistent?
*/
@Composable
fun TextFieldButton(
modifier: Modifier = Modifier,
enabled: Boolean = true,
content: @Composable () -> Unit,
) {
val contentAlpha = if (enabled) 1f else TextFieldTokens.DisabledLabelOpacity

CompositionLocalProvider(
LocalTextColor provides KrailTheme.colors.onSecondaryContainer,
LocalTextStyle provides KrailTheme.typography.titleLarge,
LocalContentAlpha provides contentAlpha,
) {
Box(
modifier = modifier
.fillMaxWidth()
.height(TextFieldHeight)
.background(
shape = RoundedCornerShape(TextFieldHeight.div(2)),
color = KrailTheme.colors.secondaryContainer
)
.padding(horizontal = 16.dp, vertical = 4.dp),
contentAlignment = Alignment.CenterStart,
) {
content()
}
}
}

// region Previews

@ComponentPreviews
@Composable
private fun TextFieldButtonPreview() {
KrailTheme {
TextFieldButton {
Text(text = "Search")
}
}
}

// endregion
54 changes: 12 additions & 42 deletions ...-planner/ui/src/main/kotlin/xyz/ksharma/krail/trip_planner/ui/components/SearchStopRow.kt
View file
Original file line number Diff line number Diff line change
@@ -1,83 +1,53 @@
package xyz.ksharma.krail.trip_planner.ui.components

import androidx.compose.foundation.ExperimentalFoundationApi
import androidx.compose.foundation.Image
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.Row
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.relocation.BringIntoViewRequester
import androidx.compose.foundation.relocation.bringIntoViewRequester
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.focus.onFocusChanged
import androidx.compose.ui.graphics.ColorFilter
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.platform.LocalSoftwareKeyboardController
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.res.vectorResource
import androidx.compose.ui.unit.dp
import xyz.ksharma.krail.design.system.LocalOnContentColor
import xyz.ksharma.krail.design.system.components.RoundIconButton
import xyz.ksharma.krail.design.system.components.TextField
import xyz.ksharma.krail.design.system.components.Text
import xyz.ksharma.krail.design.system.components.TextFieldButton
import xyz.ksharma.krail.design.system.preview.ComponentPreviews
import xyz.ksharma.krail.design.system.theme.KrailTheme
import xyz.ksharma.krail.trip_planner.ui.R as TripPlannerUiR

@OptIn(ExperimentalFoundationApi::class)
@Composable
fun SearchStopRow(modifier: Modifier = Modifier) {

val bringIntoViewRequester = remember { BringIntoViewRequester() }
val keyboardController = LocalSoftwareKeyboardController.current
var isTextFieldFocused by remember { mutableStateOf(false) }

LaunchedEffect(isTextFieldFocused) {
if (isTextFieldFocused) {
bringIntoViewRequester.bringIntoView()
keyboardController?.show()
}
}

Row(
modifier = modifier
.fillMaxWidth()
.background(
color = KrailTheme.colors.primary,
shape = RoundedCornerShape(topStart = 36.dp, topEnd = 36.dp)
shape = RoundedCornerShape(36.dp)
)
.padding(vertical = 24.dp, horizontal = 16.dp)
.bringIntoViewRequester(bringIntoViewRequester),
.padding(vertical = 24.dp, horizontal = 16.dp),
horizontalArrangement = Arrangement.End,
) {

Column(
modifier = Modifier.weight(0.8f),
verticalArrangement = Arrangement.spacedBy(20.dp)
) {
TextField(
initialText = stringResource(TripPlannerUiR.string.from_text_field_placeholder),
modifier = Modifier
.onFocusChanged {
isTextFieldFocused = it.isFocused
},
)

TextField(
initialText = stringResource(TripPlannerUiR.string.to_text_field_placeholder),
modifier = Modifier
.onFocusChanged {
isTextFieldFocused = it.isFocused
},
)
TextFieldButton {
Text(text = stringResource(TripPlannerUiR.string.from_text_field_placeholder))
}
TextFieldButton{
Text(text = stringResource(TripPlannerUiR.string.to_text_field_placeholder))
}
}

Column(
Expand Down
49 changes: 13 additions & 36 deletions ...anner/ui/src/main/kotlin/xyz/ksharma/krail/trip_planner/ui/savedtrips/SavedTripsScreen.kt
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,10 @@
package xyz.ksharma.krail.trip_planner.ui.savedtrips

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.systemBarsPadding
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.tooling.preview.PreviewLightDark
Expand All @@ -28,37 +22,20 @@ fun SavedTripsScreen(
modifier: Modifier = Modifier,
onEvent: (SavedTripUiEvent) -> Unit = {},
) {
Box(
modifier = modifier
.fillMaxSize()
.background(color = KrailTheme.colors.background)
) {
SavedTripsScreenContent(modifier.fillMaxSize())

SearchStopRow(
modifier = Modifier.align(Alignment.BottomCenter),
)
}
}

@Composable
fun SavedTripsScreenContent(modifier: Modifier = Modifier) {
LazyColumn(modifier = modifier) {

repeat(10) {
item {
Text(
text = stringResource(R.string.saved_trips_screen_title),
style = KrailTheme.typography.headlineLarge,
modifier = Modifier
.fillMaxWidth()
.padding(16.dp)
)
}

LazyColumn {
item {
Text(
text = stringResource(R.string.saved_trips_screen_title),
style = KrailTheme.typography.headlineLarge,
modifier = Modifier
.fillMaxWidth()
.padding(16.dp)
.systemBarsPadding()
)
}

item {
Spacer(modifier = Modifier.height(200.dp))
SearchStopRow(modifier = Modifier.padding(horizontal = 16.dp))
}
}
}
Expand Down

0 comments on commit ffa2b0f

Please sign in to comment.