From f6f5fb23f14cf10ea9c989b62f7d746c4ecd5ece Mon Sep 17 00:00:00 2001 From: Giri Priyadarshan <43517605+giripriyadarshan@users.noreply.github.com> Date: Thu, 15 Dec 2022 15:55:48 +0530 Subject: [PATCH 1/7] Change text colors to required colors --- .../main/java/com/togitech/togii/MainActivity.kt | 5 ++++- .../com/togitech/ccp/component/TogiCodePicker.kt | 15 +++++++++------ .../ccp/component/TogiCountryCodePicker.kt | 15 ++++++++++----- 3 files changed, 23 insertions(+), 12 deletions(-) diff --git a/app/src/main/java/com/togitech/togii/MainActivity.kt b/app/src/main/java/com/togitech/togii/MainActivity.kt index 07876df..d5727cd 100644 --- a/app/src/main/java/com/togitech/togii/MainActivity.kt +++ b/app/src/main/java/com/togitech/togii/MainActivity.kt @@ -66,7 +66,10 @@ fun CountryCodePick() { onValueChange = { phoneNumber.value = it }, unfocusedBorderColor = MaterialTheme.colors.primary, bottomStyle =false, - shape = RoundedCornerShape(24.dp) + shape = RoundedCornerShape(24.dp), + textColorDefault = Color.Blue, // Or any color for the text + textColorHint = Color.Gray, // Or any color for the hint + textColorError = Color.Red, // Or any color for the error ) Spacer(modifier = Modifier.height(10.dp)) Button(onClick = { diff --git a/ccp/src/main/java/com/togitech/ccp/component/TogiCodePicker.kt b/ccp/src/main/java/com/togitech/ccp/component/TogiCodePicker.kt index 05f187b..204ee4c 100644 --- a/ccp/src/main/java/com/togitech/ccp/component/TogiCodePicker.kt +++ b/ccp/src/main/java/com/togitech/ccp/component/TogiCodePicker.kt @@ -46,6 +46,7 @@ fun TogiCodeDialog( pickedCountry: (CountryData) -> Unit, showFlag: Boolean = true, showCountryName: Boolean = false, + textColorDefault: Color = MaterialTheme.colors.onSurface, ) { val context = LocalContext.current @@ -85,7 +86,7 @@ fun TogiCodeDialog( fontWeight = FontWeight.Bold, modifier = Modifier.padding(start = 6.dp), fontSize = 18.sp, - color = MaterialTheme.colors.onSurface + color = textColorDefault ) Icon(imageVector = Icons.Default.ArrowDropDown, contentDescription = null) } @@ -95,7 +96,7 @@ fun TogiCodeDialog( fontWeight = FontWeight.Bold, modifier = Modifier.padding(start = 6.dp), fontSize = 18.sp, - color = MaterialTheme.colors.onSurface + color = textColorDefault ) Icon(imageVector = Icons.Default.ArrowDropDown, contentDescription = null) } @@ -112,7 +113,8 @@ fun TogiCodeDialog( pickedCountry(countryItem) isPickCountry = countryItem isOpenDialog = false - } + }, + textColorDefault = textColorDefault, ) } } @@ -126,6 +128,7 @@ fun CountryDialog( onSelected: (item: CountryData) -> Unit, context: Context, dialogStatus: Boolean, + textColorDefault: Color = MaterialTheme.colors.onSurface, ) { var searchValue by remember { mutableStateOf("") } if (!dialogStatus) searchValue = "" @@ -134,7 +137,7 @@ fun CountryDialog( onDismissRequest = onDismissRequest, content = { Surface( - color = MaterialTheme.colors.onSurface, + color = textColorDefault, modifier = Modifier .fillMaxWidth() .clip(RoundedCornerShape(25.dp)) @@ -144,13 +147,13 @@ fun CountryDialog( Column(modifier = Modifier.fillMaxSize()) { SearchTextField( value = searchValue, onValueChange = { searchValue = it }, - textColor = MaterialTheme.colors.onSurface, + textColor = textColorDefault, fontSize = 16.sp, leadingIcon = { Icon( imageVector = Icons.Filled.Search, contentDescription = "Search", - tint = MaterialTheme.colors.onSurface, + tint = textColorDefault, modifier = Modifier.padding(horizontal = 3.dp) ) }, diff --git a/ccp/src/main/java/com/togitech/ccp/component/TogiCountryCodePicker.kt b/ccp/src/main/java/com/togitech/ccp/component/TogiCountryCodePicker.kt index 856742e..b7fd2a1 100644 --- a/ccp/src/main/java/com/togitech/ccp/component/TogiCountryCodePicker.kt +++ b/ccp/src/main/java/com/togitech/ccp/component/TogiCountryCodePicker.kt @@ -48,7 +48,10 @@ fun TogiCountryCodePicker( focusedBorderColor: Color = MaterialTheme.colors.primary, unfocusedBorderColor: Color = MaterialTheme.colors.onSecondary, cursorColor: Color = MaterialTheme.colors.primary, - bottomStyle: Boolean = false + bottomStyle: Boolean = false, + textColorDefault: Color = MaterialTheme.colors.onBackground, + textColorHint: Color = MaterialTheme.colors.onBackground, + textColorError: Color = MaterialTheme.colors.error, ) { val context = LocalContext.current var textFieldValue by rememberSaveable { mutableStateOf("") } @@ -102,10 +105,11 @@ fun TogiCountryCodePicker( colors = TextFieldDefaults.outlinedTextFieldColors( focusedBorderColor = if (getErrorStatus()) Color.Red else focusedBorderColor, unfocusedBorderColor = if (getErrorStatus()) Color.Red else unfocusedBorderColor, - cursorColor = cursorColor + cursorColor = cursorColor, + textColor = textColorDefault, ), visualTransformation = PhoneNumberTransformation(getLibCountries.single { it.countryCode == defaultLang }.countryCode.uppercase()), - placeholder = { Text(text = stringResource(id = getNumberHint(getLibCountries.single { it.countryCode == defaultLang }.countryCode.lowercase()))) }, + placeholder = { Text(text = stringResource(id = getNumberHint(getLibCountries.single { it.countryCode == defaultLang }.countryCode.lowercase())), color = textColorHint) }, keyboardOptions = KeyboardOptions.Default.copy( keyboardType = KeyboardType.NumberPassword, autoCorrect = true, @@ -124,7 +128,8 @@ fun TogiCountryCodePicker( }, defaultSelectedCountry = getLibCountries.single { it.countryCode == defaultLang }, showCountryCode = showCountryCode, - showFlag = showCountryFlag + showFlag = showCountryFlag, + textColorDefault = textColorDefault ) } } @@ -144,7 +149,7 @@ fun TogiCountryCodePicker( } if (getErrorStatus()) Text( text = stringResource(id = R.string.invalid_number), - color = MaterialTheme.colors.error, + color = textColorError, style = MaterialTheme.typography.caption, fontWeight = FontWeight.Bold, modifier = Modifier.padding(top = 0.8.dp) From 02a0dea803d7f0678cd8ff54d55db095ffde8e8b Mon Sep 17 00:00:00 2001 From: Giri Priyadarshan <43517605+giripriyadarshan@users.noreply.github.com> Date: Thu, 15 Dec 2022 16:20:50 +0530 Subject: [PATCH 2/7] Ability to change the font weight and size --- .../java/com/togitech/togii/MainActivity.kt | 25 +++++++++++++-- .../togitech/ccp/component/TogiCodePicker.kt | 22 ++++++------- .../ccp/component/TogiCountryCodePicker.kt | 32 +++++++++++++------ 3 files changed, 53 insertions(+), 26 deletions(-) diff --git a/app/src/main/java/com/togitech/togii/MainActivity.kt b/app/src/main/java/com/togitech/togii/MainActivity.kt index d5727cd..996d6d7 100644 --- a/app/src/main/java/com/togitech/togii/MainActivity.kt +++ b/app/src/main/java/com/togitech/togii/MainActivity.kt @@ -14,6 +14,8 @@ import androidx.compose.runtime.saveable.rememberSaveable 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.unit.dp import com.google.accompanist.systemuicontroller.rememberSystemUiController import com.togitech.ccp.component.* @@ -67,9 +69,26 @@ fun CountryCodePick() { unfocusedBorderColor = MaterialTheme.colors.primary, bottomStyle =false, shape = RoundedCornerShape(24.dp), - textColorDefault = Color.Blue, // Or any color for the text - textColorHint = Color.Gray, // Or any color for the hint - textColorError = Color.Red, // Or any color for the error + textStyleDefault = TextStyle( + fontWeight = FontWeight.Normal, + color = Color.Yellow, + fontSize = MaterialTheme.typography.body1.fontSize, + ), + textStyleHint = TextStyle( + fontWeight = FontWeight.Thin, + color = Color.Gray, + fontSize = MaterialTheme.typography.body1.fontSize, + ), + textStyleError = TextStyle( + fontWeight = FontWeight.Normal, + color = MaterialTheme.colors.error, + fontSize = MaterialTheme.typography.body1.fontSize, + ), + countryCodeStyle = TextStyle( + fontWeight = FontWeight.Bold, + color = Color.Yellow, + fontSize = MaterialTheme.typography.body1.fontSize, + ), ) Spacer(modifier = Modifier.height(10.dp)) Button(onClick = { diff --git a/ccp/src/main/java/com/togitech/ccp/component/TogiCodePicker.kt b/ccp/src/main/java/com/togitech/ccp/component/TogiCodePicker.kt index 204ee4c..82e261a 100644 --- a/ccp/src/main/java/com/togitech/ccp/component/TogiCodePicker.kt +++ b/ccp/src/main/java/com/togitech/ccp/component/TogiCodePicker.kt @@ -22,8 +22,8 @@ import androidx.compose.ui.graphics.SolidColor import androidx.compose.ui.platform.LocalContext import androidx.compose.ui.res.painterResource import androidx.compose.ui.res.stringResource +import androidx.compose.ui.text.TextStyle import androidx.compose.ui.text.font.FontFamily -import androidx.compose.ui.text.font.FontWeight import androidx.compose.ui.unit.Dp import androidx.compose.ui.unit.TextUnit import androidx.compose.ui.unit.dp @@ -46,7 +46,7 @@ fun TogiCodeDialog( pickedCountry: (CountryData) -> Unit, showFlag: Boolean = true, showCountryName: Boolean = false, - textColorDefault: Color = MaterialTheme.colors.onSurface, + textStyleDefault: TextStyle = TextStyle.Default, ) { val context = LocalContext.current @@ -83,20 +83,16 @@ fun TogiCodeDialog( if (showCountryCode) { Text( text = isPickCountry.countryPhoneCode, - fontWeight = FontWeight.Bold, modifier = Modifier.padding(start = 6.dp), - fontSize = 18.sp, - color = textColorDefault + style = textStyleDefault, ) Icon(imageVector = Icons.Default.ArrowDropDown, contentDescription = null) } if (showCountryName) { Text( text = stringResource(id = getCountryName(isPickCountry.countryCode.lowercase())), - fontWeight = FontWeight.Bold, modifier = Modifier.padding(start = 6.dp), - fontSize = 18.sp, - color = textColorDefault + style = textStyleDefault, ) Icon(imageVector = Icons.Default.ArrowDropDown, contentDescription = null) } @@ -114,7 +110,7 @@ fun TogiCodeDialog( isPickCountry = countryItem isOpenDialog = false }, - textColorDefault = textColorDefault, + textStyleDefault = textStyleDefault, ) } } @@ -128,7 +124,7 @@ fun CountryDialog( onSelected: (item: CountryData) -> Unit, context: Context, dialogStatus: Boolean, - textColorDefault: Color = MaterialTheme.colors.onSurface, + textStyleDefault: TextStyle = TextStyle.Default, ) { var searchValue by remember { mutableStateOf("") } if (!dialogStatus) searchValue = "" @@ -137,7 +133,7 @@ fun CountryDialog( onDismissRequest = onDismissRequest, content = { Surface( - color = textColorDefault, + color = textStyleDefault.color, modifier = Modifier .fillMaxWidth() .clip(RoundedCornerShape(25.dp)) @@ -147,13 +143,13 @@ fun CountryDialog( Column(modifier = Modifier.fillMaxSize()) { SearchTextField( value = searchValue, onValueChange = { searchValue = it }, - textColor = textColorDefault, + textColor = textStyleDefault.color, fontSize = 16.sp, leadingIcon = { Icon( imageVector = Icons.Filled.Search, contentDescription = "Search", - tint = textColorDefault, + tint = textStyleDefault.color, modifier = Modifier.padding(horizontal = 3.dp) ) }, diff --git a/ccp/src/main/java/com/togitech/ccp/component/TogiCountryCodePicker.kt b/ccp/src/main/java/com/togitech/ccp/component/TogiCountryCodePicker.kt index b7fd2a1..0561d54 100644 --- a/ccp/src/main/java/com/togitech/ccp/component/TogiCountryCodePicker.kt +++ b/ccp/src/main/java/com/togitech/ccp/component/TogiCountryCodePicker.kt @@ -19,6 +19,7 @@ import androidx.compose.ui.graphics.Shape import androidx.compose.ui.platform.LocalContext import androidx.compose.ui.platform.LocalTextInputService import androidx.compose.ui.res.stringResource +import androidx.compose.ui.text.TextStyle import androidx.compose.ui.text.font.FontWeight import androidx.compose.ui.text.input.KeyboardType import androidx.compose.ui.unit.dp @@ -49,9 +50,22 @@ fun TogiCountryCodePicker( unfocusedBorderColor: Color = MaterialTheme.colors.onSecondary, cursorColor: Color = MaterialTheme.colors.primary, bottomStyle: Boolean = false, - textColorDefault: Color = MaterialTheme.colors.onBackground, - textColorHint: Color = MaterialTheme.colors.onBackground, - textColorError: Color = MaterialTheme.colors.error, + textStyleDefault: TextStyle = TextStyle.Default, + textStyleHint: TextStyle = TextStyle( + fontWeight = FontWeight.Normal, + color = MaterialTheme.colors.onBackground, + fontSize = MaterialTheme.typography.body1.fontSize, + ), + textStyleError: TextStyle = TextStyle( + fontWeight = FontWeight.Bold, + color = MaterialTheme.colors.error, + fontSize = MaterialTheme.typography.caption.fontSize, + ), + countryCodeStyle: TextStyle = TextStyle( + fontWeight = FontWeight.Bold, + color = MaterialTheme.colors.onBackground, + fontSize = MaterialTheme.typography.body1.fontSize, + ), ) { val context = LocalContext.current var textFieldValue by rememberSaveable { mutableStateOf("") } @@ -106,10 +120,10 @@ fun TogiCountryCodePicker( focusedBorderColor = if (getErrorStatus()) Color.Red else focusedBorderColor, unfocusedBorderColor = if (getErrorStatus()) Color.Red else unfocusedBorderColor, cursorColor = cursorColor, - textColor = textColorDefault, ), + textStyle = textStyleDefault, visualTransformation = PhoneNumberTransformation(getLibCountries.single { it.countryCode == defaultLang }.countryCode.uppercase()), - placeholder = { Text(text = stringResource(id = getNumberHint(getLibCountries.single { it.countryCode == defaultLang }.countryCode.lowercase())), color = textColorHint) }, + placeholder = { Text(text = stringResource(id = getNumberHint(getLibCountries.single { it.countryCode == defaultLang }.countryCode.lowercase())), style = textStyleHint) }, keyboardOptions = KeyboardOptions.Default.copy( keyboardType = KeyboardType.NumberPassword, autoCorrect = true, @@ -129,7 +143,7 @@ fun TogiCountryCodePicker( defaultSelectedCountry = getLibCountries.single { it.countryCode == defaultLang }, showCountryCode = showCountryCode, showFlag = showCountryFlag, - textColorDefault = textColorDefault + textStyleDefault = countryCodeStyle, ) } } @@ -142,16 +156,14 @@ fun TogiCountryCodePicker( Icon( imageVector = Icons.Filled.Clear, contentDescription = "Clear", - tint = if (getErrorStatus()) Color.Red else MaterialTheme.colors.onSurface + tint = if (getErrorStatus()) textStyleError.color else MaterialTheme.colors.onSurface ) } }) } if (getErrorStatus()) Text( text = stringResource(id = R.string.invalid_number), - color = textColorError, - style = MaterialTheme.typography.caption, - fontWeight = FontWeight.Bold, + style = textStyleError, modifier = Modifier.padding(top = 0.8.dp) ) } From 19be182f28487d19cf9afa9db76eddfb61c0ffee Mon Sep 17 00:00:00 2001 From: Giri Priyadarshan <43517605+giripriyadarshan@users.noreply.github.com> Date: Thu, 15 Dec 2022 16:26:16 +0530 Subject: [PATCH 3/7] Changes to Search Field --- .../java/com/togitech/ccp/component/TogiCodePicker.kt | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/ccp/src/main/java/com/togitech/ccp/component/TogiCodePicker.kt b/ccp/src/main/java/com/togitech/ccp/component/TogiCodePicker.kt index 82e261a..4b60c81 100644 --- a/ccp/src/main/java/com/togitech/ccp/component/TogiCodePicker.kt +++ b/ccp/src/main/java/com/togitech/ccp/component/TogiCodePicker.kt @@ -23,11 +23,9 @@ import androidx.compose.ui.platform.LocalContext import androidx.compose.ui.res.painterResource import androidx.compose.ui.res.stringResource import androidx.compose.ui.text.TextStyle -import androidx.compose.ui.text.font.FontFamily import androidx.compose.ui.unit.Dp import androidx.compose.ui.unit.TextUnit import androidx.compose.ui.unit.dp -import androidx.compose.ui.unit.sp import androidx.compose.ui.window.Dialog import com.togitech.ccp.R import com.togitech.ccp.data.CountryData @@ -144,7 +142,7 @@ fun CountryDialog( SearchTextField( value = searchValue, onValueChange = { searchValue = it }, textColor = textStyleDefault.color, - fontSize = 16.sp, + fontSize = textStyleDefault.fontSize, leadingIcon = { Icon( imageVector = Icons.Filled.Search, @@ -185,8 +183,8 @@ fun CountryDialog( Text( stringResource(id = getCountryName(countryItem.countryCode.lowercase())), Modifier.padding(horizontal = 18.dp), - fontSize = 14.sp, - fontFamily = FontFamily.Serif, + style = textStyleDefault, + fontFamily = textStyleDefault.fontFamily ) } } From bcc2d9a18a5780b28319262f8f6ac2b8e2a5a04c Mon Sep 17 00:00:00 2001 From: Giri Priyadarshan <43517605+giripriyadarshan@users.noreply.github.com> Date: Thu, 15 Dec 2022 17:11:50 +0530 Subject: [PATCH 4/7] Added control to dialog background color --- app/src/main/java/com/togitech/togii/MainActivity.kt | 1 + .../main/java/com/togitech/ccp/component/TogiCodePicker.kt | 6 +++++- .../com/togitech/ccp/component/TogiCountryCodePicker.kt | 5 ++++- 3 files changed, 10 insertions(+), 2 deletions(-) diff --git a/app/src/main/java/com/togitech/togii/MainActivity.kt b/app/src/main/java/com/togitech/togii/MainActivity.kt index 996d6d7..0188680 100644 --- a/app/src/main/java/com/togitech/togii/MainActivity.kt +++ b/app/src/main/java/com/togitech/togii/MainActivity.kt @@ -89,6 +89,7 @@ fun CountryCodePick() { color = Color.Yellow, fontSize = MaterialTheme.typography.body1.fontSize, ), + countryCodeDialogBackgroundColor = Color.DarkGray ) Spacer(modifier = Modifier.height(10.dp)) Button(onClick = { diff --git a/ccp/src/main/java/com/togitech/ccp/component/TogiCodePicker.kt b/ccp/src/main/java/com/togitech/ccp/component/TogiCodePicker.kt index 4b60c81..e2d81dd 100644 --- a/ccp/src/main/java/com/togitech/ccp/component/TogiCodePicker.kt +++ b/ccp/src/main/java/com/togitech/ccp/component/TogiCodePicker.kt @@ -2,6 +2,7 @@ package com.togitech.ccp.component import android.content.Context import androidx.compose.foundation.Image +import androidx.compose.foundation.background import androidx.compose.foundation.clickable import androidx.compose.foundation.interaction.MutableInteractionSource import androidx.compose.foundation.layout.* @@ -45,6 +46,7 @@ fun TogiCodeDialog( showFlag: Boolean = true, showCountryName: Boolean = false, textStyleDefault: TextStyle = TextStyle.Default, + backgroundColor: Color = MaterialTheme.colors.background, ) { val context = LocalContext.current @@ -109,6 +111,7 @@ fun TogiCodeDialog( isOpenDialog = false }, textStyleDefault = textStyleDefault, + backgroundColor = backgroundColor, ) } } @@ -123,6 +126,7 @@ fun CountryDialog( context: Context, dialogStatus: Boolean, textStyleDefault: TextStyle = TextStyle.Default, + backgroundColor : Color = MaterialTheme.colors.background, ) { var searchValue by remember { mutableStateOf("") } if (!dialogStatus) searchValue = "" @@ -138,7 +142,7 @@ fun CountryDialog( ) { Scaffold { scaffold -> scaffold.calculateBottomPadding() - Column(modifier = Modifier.fillMaxSize()) { + Column(modifier = Modifier.fillMaxSize().background(backgroundColor)) { SearchTextField( value = searchValue, onValueChange = { searchValue = it }, textColor = textStyleDefault.color, diff --git a/ccp/src/main/java/com/togitech/ccp/component/TogiCountryCodePicker.kt b/ccp/src/main/java/com/togitech/ccp/component/TogiCountryCodePicker.kt index 0561d54..37b5ae8 100644 --- a/ccp/src/main/java/com/togitech/ccp/component/TogiCountryCodePicker.kt +++ b/ccp/src/main/java/com/togitech/ccp/component/TogiCountryCodePicker.kt @@ -66,6 +66,7 @@ fun TogiCountryCodePicker( color = MaterialTheme.colors.onBackground, fontSize = MaterialTheme.typography.body1.fontSize, ), + countryCodeDialogBackgroundColor: Color ) { val context = LocalContext.current var textFieldValue by rememberSaveable { mutableStateOf("") } @@ -99,7 +100,8 @@ fun TogiCountryCodePicker( defaultSelectedCountry = getLibCountries.single { it.countryCode == defaultLang }, showCountryCode = showCountryCode, showFlag = showCountryFlag, - showCountryName = true + showCountryName = true, + backgroundColor = countryCodeDialogBackgroundColor, ) } Row( @@ -144,6 +146,7 @@ fun TogiCountryCodePicker( showCountryCode = showCountryCode, showFlag = showCountryFlag, textStyleDefault = countryCodeStyle, + backgroundColor = countryCodeDialogBackgroundColor, ) } } From 9daa776007b1d6207104b095eea8fb17c320b3a4 Mon Sep 17 00:00:00 2001 From: Giri Priyadarshan <43517605+giripriyadarshan@users.noreply.github.com> Date: Thu, 15 Dec 2022 17:58:54 +0530 Subject: [PATCH 5/7] Icons color adapts to nearby elements --- .../togitech/ccp/component/TogiCodePicker.kt | 18 ++++++++++++++---- .../ccp/component/TogiCountryCodePicker.kt | 2 +- 2 files changed, 15 insertions(+), 5 deletions(-) diff --git a/ccp/src/main/java/com/togitech/ccp/component/TogiCodePicker.kt b/ccp/src/main/java/com/togitech/ccp/component/TogiCodePicker.kt index e2d81dd..af1202f 100644 --- a/ccp/src/main/java/com/togitech/ccp/component/TogiCodePicker.kt +++ b/ccp/src/main/java/com/togitech/ccp/component/TogiCodePicker.kt @@ -86,7 +86,11 @@ fun TogiCodeDialog( modifier = Modifier.padding(start = 6.dp), style = textStyleDefault, ) - Icon(imageVector = Icons.Default.ArrowDropDown, contentDescription = null) + Icon( + imageVector = Icons.Default.ArrowDropDown, + contentDescription = null, + tint = textStyleDefault.color + ) } if (showCountryName) { Text( @@ -94,7 +98,11 @@ fun TogiCodeDialog( modifier = Modifier.padding(start = 6.dp), style = textStyleDefault, ) - Icon(imageVector = Icons.Default.ArrowDropDown, contentDescription = null) + Icon( + imageVector = Icons.Default.ArrowDropDown, + contentDescription = null, + tint = textStyleDefault.color + ) } } @@ -126,7 +134,7 @@ fun CountryDialog( context: Context, dialogStatus: Boolean, textStyleDefault: TextStyle = TextStyle.Default, - backgroundColor : Color = MaterialTheme.colors.background, + backgroundColor: Color = MaterialTheme.colors.background, ) { var searchValue by remember { mutableStateOf("") } if (!dialogStatus) searchValue = "" @@ -142,7 +150,9 @@ fun CountryDialog( ) { Scaffold { scaffold -> scaffold.calculateBottomPadding() - Column(modifier = Modifier.fillMaxSize().background(backgroundColor)) { + Column(modifier = Modifier + .fillMaxSize() + .background(backgroundColor)) { SearchTextField( value = searchValue, onValueChange = { searchValue = it }, textColor = textStyleDefault.color, diff --git a/ccp/src/main/java/com/togitech/ccp/component/TogiCountryCodePicker.kt b/ccp/src/main/java/com/togitech/ccp/component/TogiCountryCodePicker.kt index 37b5ae8..712647c 100644 --- a/ccp/src/main/java/com/togitech/ccp/component/TogiCountryCodePicker.kt +++ b/ccp/src/main/java/com/togitech/ccp/component/TogiCountryCodePicker.kt @@ -159,7 +159,7 @@ fun TogiCountryCodePicker( Icon( imageVector = Icons.Filled.Clear, contentDescription = "Clear", - tint = if (getErrorStatus()) textStyleError.color else MaterialTheme.colors.onSurface + tint = if (getErrorStatus()) textStyleError.color else textStyleDefault.color ) } }) From bb98dcb782a37fd3aa8657ccd3c59fe43c73075a Mon Sep 17 00:00:00 2001 From: Giri Priyadarshan <43517605+giripriyadarshan@users.noreply.github.com> Date: Thu, 15 Dec 2022 21:28:45 +0530 Subject: [PATCH 6/7] Allows low level control on error status And updates the phone numbers as and when it is input rather than the next cycle This implementation allows for more cleaner experience on "few" certain use cases --- .../java/com/togitech/togii/MainActivity.kt | 22 +++++++++++++++---- .../ccp/component/TogiCountryCodePicker.kt | 22 +++++++++++++------ 2 files changed, 33 insertions(+), 11 deletions(-) diff --git a/app/src/main/java/com/togitech/togii/MainActivity.kt b/app/src/main/java/com/togitech/togii/MainActivity.kt index 0188680..86d64da 100644 --- a/app/src/main/java/com/togitech/togii/MainActivity.kt +++ b/app/src/main/java/com/togitech/togii/MainActivity.kt @@ -18,6 +18,7 @@ import androidx.compose.ui.text.TextStyle import androidx.compose.ui.text.font.FontWeight import androidx.compose.ui.unit.dp import com.google.accompanist.systemuicontroller.rememberSystemUiController +import androidx.compose.ui.platform.LocalTextInputService import com.togitech.ccp.component.* import com.togitech.togii.ui.theme.TogiiTheme @@ -62,12 +63,15 @@ fun CountryCodePick() { val phoneNumber = rememberSaveable { mutableStateOf("") } val fullPhoneNumber = rememberSaveable { mutableStateOf("") } val onlyPhoneNumber = rememberSaveable { mutableStateOf("") } + val errorStatus = rememberSaveable { mutableStateOf(false) } + val liveErrorStatus = rememberSaveable { mutableStateOf(false) } + val keyboardController = LocalTextInputService.current TogiCountryCodePicker( text = phoneNumber.value, onValueChange = { phoneNumber.value = it }, unfocusedBorderColor = MaterialTheme.colors.primary, - bottomStyle =false, + bottomStyle = false, shape = RoundedCornerShape(24.dp), textStyleDefault = TextStyle( fontWeight = FontWeight.Normal, @@ -89,7 +93,16 @@ fun CountryCodePick() { color = Color.Yellow, fontSize = MaterialTheme.typography.body1.fontSize, ), - countryCodeDialogBackgroundColor = Color.DarkGray + countryCodeDialogBackgroundColor = Color.DarkGray, + changeStatustoErrorIfError = errorStatus.value, + turnLiveErrorStatusOn = true, + liveErrorStatus = { + liveErrorStatus.value = it + if (!it) { + errorStatus.value = false + keyboardController?.hideSoftwareKeyboard() + } + }, ) Spacer(modifier = Modifier.height(10.dp)) Button(onClick = { @@ -99,6 +112,7 @@ fun CountryCodePick() { } else { fullPhoneNumber.value = "Error" onlyPhoneNumber.value = "Error" + errorStatus.value = true } }) { Text(text = "Check") @@ -106,12 +120,12 @@ fun CountryCodePick() { Text( text = "Full Phone Number: ${fullPhoneNumber.value}", - color = if (getErrorStatus()) Color.Red else Color.Green + color = if (getErrorStatus() && errorStatus.value) Color.Red else Color.Green ) Text( text = "Only Phone Number: ${onlyPhoneNumber.value}", - color = if (getErrorStatus()) Color.Red else Color.Green + color = if (getErrorStatus() && errorStatus.value) Color.Red else Color.Green ) } } diff --git a/ccp/src/main/java/com/togitech/ccp/component/TogiCountryCodePicker.kt b/ccp/src/main/java/com/togitech/ccp/component/TogiCountryCodePicker.kt index 712647c..be2d9dd 100644 --- a/ccp/src/main/java/com/togitech/ccp/component/TogiCountryCodePicker.kt +++ b/ccp/src/main/java/com/togitech/ccp/component/TogiCountryCodePicker.kt @@ -66,7 +66,10 @@ fun TogiCountryCodePicker( color = MaterialTheme.colors.onBackground, fontSize = MaterialTheme.typography.body1.fontSize, ), - countryCodeDialogBackgroundColor: Color + countryCodeDialogBackgroundColor: Color, + changeStatustoErrorIfError: Boolean = true, + turnLiveErrorStatusOn: Boolean = false, + liveErrorStatus: (Boolean) -> Unit = {}, ) { val context = LocalContext.current var textFieldValue by rememberSaveable { mutableStateOf("") } @@ -84,8 +87,6 @@ fun TogiCountryCodePicker( ) } - fullNumberState = phoneCode + textFieldValue - phoneNumberState = textFieldValue countryCodeState = defaultLang @@ -116,11 +117,18 @@ fun TogiCountryCodePicker( if (text != it) { onValueChange(it) } + fullNumberState = phoneCode + textFieldValue + phoneNumberState = textFieldValue + + if (turnLiveErrorStatusOn) { + liveErrorStatus(isPhoneNumber()) + } + }, singleLine = true, colors = TextFieldDefaults.outlinedTextFieldColors( - focusedBorderColor = if (getErrorStatus()) Color.Red else focusedBorderColor, - unfocusedBorderColor = if (getErrorStatus()) Color.Red else unfocusedBorderColor, + focusedBorderColor = if (getErrorStatus() && changeStatustoErrorIfError) Color.Red else focusedBorderColor, + unfocusedBorderColor = if (getErrorStatus() && changeStatustoErrorIfError) Color.Red else unfocusedBorderColor, cursorColor = cursorColor, ), textStyle = textStyleDefault, @@ -159,12 +167,12 @@ fun TogiCountryCodePicker( Icon( imageVector = Icons.Filled.Clear, contentDescription = "Clear", - tint = if (getErrorStatus()) textStyleError.color else textStyleDefault.color + tint = if (getErrorStatus() && changeStatustoErrorIfError) textStyleError.color else textStyleDefault.color, ) } }) } - if (getErrorStatus()) Text( + if (getErrorStatus() && changeStatustoErrorIfError) Text( text = stringResource(id = R.string.invalid_number), style = textStyleError, modifier = Modifier.padding(top = 0.8.dp) From 1c117084a2d2fb637c53f0b9217b59faef534798 Mon Sep 17 00:00:00 2001 From: Giri Priyadarshan <43517605+giripriyadarshan@users.noreply.github.com> Date: Fri, 16 Dec 2022 15:55:52 +0530 Subject: [PATCH 7/7] Bug fix: isPhoneNumber() was not updating phoneNumberState and others --- .../java/com/togitech/ccp/component/TogiCountryCodePicker.kt | 2 ++ 1 file changed, 2 insertions(+) diff --git a/ccp/src/main/java/com/togitech/ccp/component/TogiCountryCodePicker.kt b/ccp/src/main/java/com/togitech/ccp/component/TogiCountryCodePicker.kt index be2d9dd..d08c2dd 100644 --- a/ccp/src/main/java/com/togitech/ccp/component/TogiCountryCodePicker.kt +++ b/ccp/src/main/java/com/togitech/ccp/component/TogiCountryCodePicker.kt @@ -88,6 +88,8 @@ fun TogiCountryCodePicker( } countryCodeState = defaultLang + fullNumberState = phoneCode + textFieldValue + phoneNumberState = textFieldValue Surface(color = color) {