From ff67f76c6f98f24fe80dd2c46666c0cdb2bbf5c9 Mon Sep 17 00:00:00 2001 From: Masaki Kiyotaka Date: Sat, 24 Sep 2022 03:13:41 +0900 Subject: [PATCH 1/6] apply to edge to edge search screen --- .../confsched2022/feature/sessions/Search.kt | 91 +++++++++++++------ 1 file changed, 63 insertions(+), 28 deletions(-) diff --git a/feature/sessions/src/main/java/io/github/droidkaigi/confsched2022/feature/sessions/Search.kt b/feature/sessions/src/main/java/io/github/droidkaigi/confsched2022/feature/sessions/Search.kt index b011e810f..21e953af5 100644 --- a/feature/sessions/src/main/java/io/github/droidkaigi/confsched2022/feature/sessions/Search.kt +++ b/feature/sessions/src/main/java/io/github/droidkaigi/confsched2022/feature/sessions/Search.kt @@ -11,17 +11,12 @@ import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.Spacer -import androidx.compose.foundation.layout.WindowInsets -import androidx.compose.foundation.layout.WindowInsetsSides import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.height -import androidx.compose.foundation.layout.only import androidx.compose.foundation.layout.padding -import androidx.compose.foundation.layout.safeDrawing import androidx.compose.foundation.layout.size import androidx.compose.foundation.layout.width -import androidx.compose.foundation.layout.windowInsetsPadding import androidx.compose.foundation.layout.wrapContentHeight import androidx.compose.foundation.lazy.LazyColumn import androidx.compose.foundation.lazy.items @@ -34,11 +29,15 @@ import androidx.compose.material.ExperimentalMaterialApi import androidx.compose.material.IconButton import androidx.compose.material.rememberBottomSheetScaffoldState import androidx.compose.material3.CircularProgressIndicator +import androidx.compose.material3.Divider import androidx.compose.material3.ExperimentalMaterial3Api import androidx.compose.material3.Icon import androidx.compose.material3.MaterialTheme import androidx.compose.material3.Text import androidx.compose.material3.TextField +import androidx.compose.material3.TextFieldDefaults +import androidx.compose.material3.TopAppBar +import androidx.compose.material3.TopAppBarDefaults import androidx.compose.material3.surfaceColorAtElevation import androidx.compose.runtime.Composable import androidx.compose.runtime.LaunchedEffect @@ -51,6 +50,7 @@ import androidx.compose.ui.ExperimentalComposeUiApi import androidx.compose.ui.Modifier import androidx.compose.ui.focus.FocusRequester import androidx.compose.ui.focus.focusRequester +import androidx.compose.ui.graphics.Color import androidx.compose.ui.platform.LocalSoftwareKeyboardController import androidx.compose.ui.res.painterResource import androidx.compose.ui.res.stringResource @@ -182,23 +182,23 @@ private fun SearchScreen( val searchWord = rememberSaveable { mutableStateOf("") } KaigiScaffold( modifier = modifier, - topBar = {}, + topBar = { + if (uiModel.state is Success) { + SearchTextFieldTopAppBar( + searchWord = searchWord.value, + onSearchWordChange = {searchWord.value = it}, + onSearchTextAreaClicked = onSearchTextAreaClicked, + onBackClick = onBackIconClick + ) + } + }, content = { Column( - modifier = Modifier.windowInsetsPadding( - WindowInsets.safeDrawing.only(WindowInsetsSides.Vertical) - ) + modifier = Modifier.padding(paddingValues = it) ) { when (uiModel.state) { is Error -> TODO() is Success -> { - SearchTextField( - searchWord = searchWord.value, - onSearchWordChange = { searchWord.value = it }, - onSearchTextAreaClicked = onSearchTextAreaClicked, - ) { - onBackIconClick() - } SearchFilter( modifier = Modifier .fillMaxWidth() @@ -225,6 +225,46 @@ private fun SearchScreen( ) } +@OptIn(ExperimentalMaterial3Api::class) +@Composable +fun SearchTextFieldTopAppBar( + modifier: Modifier = Modifier, + backgroundColor: Color = MaterialTheme.colorScheme.surfaceVariant, + searchWord: String, + onSearchWordChange: (String) -> Unit, + onSearchTextAreaClicked: () -> Unit, + onBackClick: () -> Unit, +) { + Column { + TopAppBar( + modifier = modifier, + navigationIcon = { + IconButton(onClick = onBackClick) { + Icon( + painter = painterResource(id = R.drawable.ic_baseline_arrow_back_24), + contentDescription = "back" + ) + } + }, + title = { + SearchTextField( + modifier = Modifier + .background(color = backgroundColor), + searchWord = searchWord, + onSearchWordChange = onSearchWordChange, + onSearchTextAreaClicked = onSearchTextAreaClicked + ) + }, + colors = TopAppBarDefaults + .smallTopAppBarColors(containerColor = backgroundColor) + ) + Divider( + thickness = 1.dp, + color = MaterialTheme.colorScheme.outline + ) + } +} + @OptIn(ExperimentalMaterial3Api::class, ExperimentalComposeUiApi::class) @Composable private fun SearchTextField( @@ -232,7 +272,6 @@ private fun SearchTextField( onSearchWordChange: (String) -> Unit, onSearchTextAreaClicked: () -> Unit, modifier: Modifier = Modifier, - onBackClick: () -> Unit = {}, ) { val keyboardController = LocalSoftwareKeyboardController.current val focusRequester = remember { FocusRequester() } @@ -255,17 +294,10 @@ private fun SearchTextField( .height(64.dp) .background(color = MaterialTheme.colorScheme.surfaceVariant) .focusRequester(focusRequester), + textStyle = MaterialTheme.typography.bodyLarge, placeholder = { Text(stringResource(Strings.search_placeholder)) }, singleLine = true, keyboardActions = KeyboardActions(onDone = { keyboardController?.hide() }), - leadingIcon = { - Icon( - painter = painterResource(id = R.drawable.ic_baseline_arrow_back_24), - contentDescription = "arrow_back_icon", - modifier = modifier - .clickable { onBackClick() } - ) - }, trailingIcon = { IconButton( onClick = { onSearchWordChange("") } @@ -276,10 +308,13 @@ private fun SearchTextField( ) } }, - onValueChange = { - onSearchWordChange(it) - }, + onValueChange = onSearchWordChange, interactionSource = interactionSource, + colors = TextFieldDefaults.textFieldColors( + focusedIndicatorColor = Color.Transparent, + unfocusedIndicatorColor = Color.Transparent, + disabledIndicatorColor = Color.Transparent + ) ) } From 7a1618d127eee571566626539474ecb4c7274576 Mon Sep 17 00:00:00 2001 From: Masaki Kiyotaka Date: Sat, 24 Sep 2022 03:49:01 +0900 Subject: [PATCH 2/6] fix for lint error --- .../github/droidkaigi/confsched2022/feature/sessions/Search.kt | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/feature/sessions/src/main/java/io/github/droidkaigi/confsched2022/feature/sessions/Search.kt b/feature/sessions/src/main/java/io/github/droidkaigi/confsched2022/feature/sessions/Search.kt index 21e953af5..74e6f6372 100644 --- a/feature/sessions/src/main/java/io/github/droidkaigi/confsched2022/feature/sessions/Search.kt +++ b/feature/sessions/src/main/java/io/github/droidkaigi/confsched2022/feature/sessions/Search.kt @@ -186,7 +186,7 @@ private fun SearchScreen( if (uiModel.state is Success) { SearchTextFieldTopAppBar( searchWord = searchWord.value, - onSearchWordChange = {searchWord.value = it}, + onSearchWordChange = { searchWord.value = it }, onSearchTextAreaClicked = onSearchTextAreaClicked, onBackClick = onBackIconClick ) From 8f49d1c34ea96a2da46a03ab626539e26f7039fd Mon Sep 17 00:00:00 2001 From: Masaki Kiyotaka Date: Sat, 24 Sep 2022 10:27:59 +0900 Subject: [PATCH 3/6] fix Ordering parameters properly --- .../droidkaigi/confsched2022/feature/sessions/Search.kt | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/feature/sessions/src/main/java/io/github/droidkaigi/confsched2022/feature/sessions/Search.kt b/feature/sessions/src/main/java/io/github/droidkaigi/confsched2022/feature/sessions/Search.kt index 74e6f6372..505c61f7e 100644 --- a/feature/sessions/src/main/java/io/github/droidkaigi/confsched2022/feature/sessions/Search.kt +++ b/feature/sessions/src/main/java/io/github/droidkaigi/confsched2022/feature/sessions/Search.kt @@ -228,12 +228,12 @@ private fun SearchScreen( @OptIn(ExperimentalMaterial3Api::class) @Composable fun SearchTextFieldTopAppBar( - modifier: Modifier = Modifier, - backgroundColor: Color = MaterialTheme.colorScheme.surfaceVariant, searchWord: String, onSearchWordChange: (String) -> Unit, onSearchTextAreaClicked: () -> Unit, onBackClick: () -> Unit, + modifier: Modifier = Modifier, + backgroundColor: Color = MaterialTheme.colorScheme.surfaceVariant, ) { Column { TopAppBar( @@ -313,7 +313,7 @@ private fun SearchTextField( colors = TextFieldDefaults.textFieldColors( focusedIndicatorColor = Color.Transparent, unfocusedIndicatorColor = Color.Transparent, - disabledIndicatorColor = Color.Transparent + disabledIndicatorColor = Color.Transparent, ) ) } From f01947b8a483cd3bfb66da6a5072ab1d872d3d25 Mon Sep 17 00:00:00 2001 From: Masaki Kiyotaka Date: Sat, 24 Sep 2022 11:26:36 +0900 Subject: [PATCH 4/6] change TextField padding start --- .../confsched2022/feature/sessions/Search.kt | 54 ++++++++++++------- 1 file changed, 34 insertions(+), 20 deletions(-) diff --git a/feature/sessions/src/main/java/io/github/droidkaigi/confsched2022/feature/sessions/Search.kt b/feature/sessions/src/main/java/io/github/droidkaigi/confsched2022/feature/sessions/Search.kt index 505c61f7e..35ec5e724 100644 --- a/feature/sessions/src/main/java/io/github/droidkaigi/confsched2022/feature/sessions/Search.kt +++ b/feature/sessions/src/main/java/io/github/droidkaigi/confsched2022/feature/sessions/Search.kt @@ -9,6 +9,7 @@ import androidx.compose.foundation.interaction.PressInteraction import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.PaddingValues import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.fillMaxSize @@ -22,7 +23,9 @@ import androidx.compose.foundation.lazy.LazyColumn import androidx.compose.foundation.lazy.items import androidx.compose.foundation.rememberScrollState import androidx.compose.foundation.shape.RoundedCornerShape +import androidx.compose.foundation.text.BasicTextField import androidx.compose.foundation.text.KeyboardActions +import androidx.compose.foundation.text.KeyboardOptions import androidx.compose.material.BottomSheetScaffold import androidx.compose.material.BottomSheetValue import androidx.compose.material.ExperimentalMaterialApi @@ -34,7 +37,6 @@ import androidx.compose.material3.ExperimentalMaterial3Api import androidx.compose.material3.Icon import androidx.compose.material3.MaterialTheme import androidx.compose.material3.Text -import androidx.compose.material3.TextField import androidx.compose.material3.TextFieldDefaults import androidx.compose.material3.TopAppBar import androidx.compose.material3.TopAppBarDefaults @@ -51,6 +53,7 @@ import androidx.compose.ui.Modifier import androidx.compose.ui.focus.FocusRequester import androidx.compose.ui.focus.focusRequester import androidx.compose.ui.graphics.Color +import androidx.compose.ui.graphics.SolidColor import androidx.compose.ui.platform.LocalSoftwareKeyboardController import androidx.compose.ui.res.painterResource import androidx.compose.ui.res.stringResource @@ -58,12 +61,15 @@ import androidx.compose.ui.semantics.CustomAccessibilityAction import androidx.compose.ui.semantics.clearAndSetSemantics import androidx.compose.ui.semantics.customActions import androidx.compose.ui.semantics.semantics +import androidx.compose.ui.text.TextStyle +import androidx.compose.ui.text.input.VisualTransformation import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp import androidx.hilt.navigation.compose.hiltViewModel import dev.icerock.moko.resources.compose.stringResource import io.github.droidkaigi.confsched2022.designsystem.components.KaigiScaffold import io.github.droidkaigi.confsched2022.designsystem.theme.KaigiTheme +import io.github.droidkaigi.confsched2022.designsystem.theme.Typography import io.github.droidkaigi.confsched2022.model.DroidKaigi2022Day import io.github.droidkaigi.confsched2022.model.DroidKaigiSchedule import io.github.droidkaigi.confsched2022.model.Filters @@ -272,6 +278,7 @@ private fun SearchTextField( onSearchWordChange: (String) -> Unit, onSearchTextAreaClicked: () -> Unit, modifier: Modifier = Modifier, + textStyle: TextStyle = Typography.titleMedium, ) { val keyboardController = LocalSoftwareKeyboardController.current val focusRequester = remember { FocusRequester() } @@ -287,34 +294,41 @@ private fun SearchTextField( } } } - TextField( + + BasicTextField( value = searchWord, modifier = modifier .fillMaxWidth(1.0f) .height(64.dp) .background(color = MaterialTheme.colorScheme.surfaceVariant) .focusRequester(focusRequester), - textStyle = MaterialTheme.typography.bodyLarge, - placeholder = { Text(stringResource(Strings.search_placeholder)) }, + onValueChange = onSearchWordChange, + textStyle = textStyle.copy(color = MaterialTheme.colorScheme.onSurface), + cursorBrush = SolidColor(MaterialTheme.colorScheme.primary), singleLine = true, keyboardActions = KeyboardActions(onDone = { keyboardController?.hide() }), - trailingIcon = { - IconButton( - onClick = { onSearchWordChange("") } - ) { - Icon( - painter = painterResource(id = R.drawable.ic_delete), - contentDescription = "search_word_delete_icon", - ) - } - }, - onValueChange = onSearchWordChange, interactionSource = interactionSource, - colors = TextFieldDefaults.textFieldColors( - focusedIndicatorColor = Color.Transparent, - unfocusedIndicatorColor = Color.Transparent, - disabledIndicatorColor = Color.Transparent, - ) + decorationBox = @Composable { innerTextField -> TextFieldDefaults.TextFieldDecorationBox( + value = searchWord, + visualTransformation = VisualTransformation.None, + innerTextField = innerTextField, + placeholder = { Text(stringResource(Strings.search_placeholder)) }, + trailingIcon = { + IconButton( + onClick = { onSearchWordChange("") } + ) { + Icon( + painter = painterResource(id = R.drawable.ic_delete), + contentDescription = "search_word_delete_icon", + ) + } + }, + singleLine = true, + enabled = true, + colors = TextFieldDefaults.textFieldColors(), + interactionSource = remember { MutableInteractionSource() }, + contentPadding = PaddingValues(top = 16.dp, bottom = 16.dp, start = 0.dp, end = 16.dp) + )} ) } From 7545f0d3c8652cc2d3096bfa1bded577e9ee61e4 Mon Sep 17 00:00:00 2001 From: Masaki Kiyotaka Date: Sat, 24 Sep 2022 11:41:55 +0900 Subject: [PATCH 5/6] fix max line length --- .../droidkaigi/confsched2022/feature/sessions/Search.kt | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/feature/sessions/src/main/java/io/github/droidkaigi/confsched2022/feature/sessions/Search.kt b/feature/sessions/src/main/java/io/github/droidkaigi/confsched2022/feature/sessions/Search.kt index 35ec5e724..247248502 100644 --- a/feature/sessions/src/main/java/io/github/droidkaigi/confsched2022/feature/sessions/Search.kt +++ b/feature/sessions/src/main/java/io/github/droidkaigi/confsched2022/feature/sessions/Search.kt @@ -327,7 +327,12 @@ private fun SearchTextField( enabled = true, colors = TextFieldDefaults.textFieldColors(), interactionSource = remember { MutableInteractionSource() }, - contentPadding = PaddingValues(top = 16.dp, bottom = 16.dp, start = 0.dp, end = 16.dp) + contentPadding = PaddingValues( + top = 16.dp, + bottom = 16.dp, + start = 0.dp, + end = 16.dp + ) )} ) } From 45ec0f940412a5ed73f0490ff803bbef86d26e67 Mon Sep 17 00:00:00 2001 From: Masaki Kiyotaka Date: Sat, 24 Sep 2022 14:54:34 +0900 Subject: [PATCH 6/6] apply spotless --- .../confsched2022/feature/sessions/Search.kt | 53 ++++++++++--------- 1 file changed, 27 insertions(+), 26 deletions(-) diff --git a/feature/sessions/src/main/java/io/github/droidkaigi/confsched2022/feature/sessions/Search.kt b/feature/sessions/src/main/java/io/github/droidkaigi/confsched2022/feature/sessions/Search.kt index 247248502..6b19c0c48 100644 --- a/feature/sessions/src/main/java/io/github/droidkaigi/confsched2022/feature/sessions/Search.kt +++ b/feature/sessions/src/main/java/io/github/droidkaigi/confsched2022/feature/sessions/Search.kt @@ -25,7 +25,6 @@ import androidx.compose.foundation.rememberScrollState import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.foundation.text.BasicTextField import androidx.compose.foundation.text.KeyboardActions -import androidx.compose.foundation.text.KeyboardOptions import androidx.compose.material.BottomSheetScaffold import androidx.compose.material.BottomSheetValue import androidx.compose.material.ExperimentalMaterialApi @@ -308,32 +307,34 @@ private fun SearchTextField( singleLine = true, keyboardActions = KeyboardActions(onDone = { keyboardController?.hide() }), interactionSource = interactionSource, - decorationBox = @Composable { innerTextField -> TextFieldDefaults.TextFieldDecorationBox( - value = searchWord, - visualTransformation = VisualTransformation.None, - innerTextField = innerTextField, - placeholder = { Text(stringResource(Strings.search_placeholder)) }, - trailingIcon = { - IconButton( - onClick = { onSearchWordChange("") } - ) { - Icon( - painter = painterResource(id = R.drawable.ic_delete), - contentDescription = "search_word_delete_icon", - ) - } - }, - singleLine = true, - enabled = true, - colors = TextFieldDefaults.textFieldColors(), - interactionSource = remember { MutableInteractionSource() }, - contentPadding = PaddingValues( - top = 16.dp, - bottom = 16.dp, - start = 0.dp, - end = 16.dp + decorationBox = @Composable { innerTextField -> + TextFieldDefaults.TextFieldDecorationBox( + value = searchWord, + visualTransformation = VisualTransformation.None, + innerTextField = innerTextField, + placeholder = { Text(stringResource(Strings.search_placeholder)) }, + trailingIcon = { + IconButton( + onClick = { onSearchWordChange("") } + ) { + Icon( + painter = painterResource(id = R.drawable.ic_delete), + contentDescription = "search_word_delete_icon", + ) + } + }, + singleLine = true, + enabled = true, + colors = TextFieldDefaults.textFieldColors(), + interactionSource = remember { MutableInteractionSource() }, + contentPadding = PaddingValues( + top = 16.dp, + bottom = 16.dp, + start = 0.dp, + end = 16.dp + ) ) - )} + } ) }