Skip to content

Possible solution to Text Color issue #20 #21

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 7 commits into
base: master
Choose a base branch
from
Open

Possible solution to Text Color issue #20 #21

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
f6f5fb2
Change text colors to required colors
giripriyadarshan Dec 15, 2022
02a0dea
Ability to change the font weight and size
giripriyadarshan Dec 15, 2022
19be182
Changes to Search Field
giripriyadarshan Dec 15, 2022
bcc2d9a
Added control to dialog background color
giripriyadarshan Dec 15, 2022
9daa776
Icons color adapts to nearby elements
giripriyadarshan Dec 15, 2022
bb98dcb
Allows low level control on error status
giripriyadarshan Dec 15, 2022
1c11708
Bug fix: isPhoneNumber() was not updating phoneNumberState and others
giripriyadarshan Dec 16, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
45 changes: 41 additions & 4 deletions app/src/main/java/com/togitech/togii/MainActivity.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,11 @@ 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 androidx.compose.ui.platform.LocalTextInputService
import com.togitech.ccp.component.*
import com.togitech.togii.ui.theme.TogiiTheme

Expand Down Expand Up @@ -60,13 +63,46 @@ 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,
shape = RoundedCornerShape(24.dp)
bottomStyle = false,
shape = RoundedCornerShape(24.dp),
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,
),
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 = {
Expand All @@ -76,19 +112,20 @@ fun CountryCodePick() {
} else {
fullPhoneNumber.value = "Error"
onlyPhoneNumber.value = "Error"
errorStatus.value = true
}
}) {
Text(text = "Check")
}

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
)
}
}
49 changes: 30 additions & 19 deletions ccp/src/main/java/com/togitech/ccp/component/TogiCodePicker.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.*
Expand All @@ -22,12 +23,10 @@ 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.font.FontFamily
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.TextStyle
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
Expand All @@ -46,6 +45,8 @@ fun TogiCodeDialog(
pickedCountry: (CountryData) -> Unit,
showFlag: Boolean = true,
showCountryName: Boolean = false,
textStyleDefault: TextStyle = TextStyle.Default,
backgroundColor: Color = MaterialTheme.colors.background,

) {
val context = LocalContext.current
Expand Down Expand Up @@ -82,22 +83,26 @@ fun TogiCodeDialog(
if (showCountryCode) {
Text(
text = isPickCountry.countryPhoneCode,
fontWeight = FontWeight.Bold,
modifier = Modifier.padding(start = 6.dp),
fontSize = 18.sp,
color = MaterialTheme.colors.onSurface
style = textStyleDefault,
)
Icon(
imageVector = Icons.Default.ArrowDropDown,
contentDescription = null,
tint = textStyleDefault.color
)
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 = MaterialTheme.colors.onSurface
style = textStyleDefault,
)
Icon(
imageVector = Icons.Default.ArrowDropDown,
contentDescription = null,
tint = textStyleDefault.color
)
Icon(imageVector = Icons.Default.ArrowDropDown, contentDescription = null)
}
}

Expand All @@ -112,7 +117,9 @@ fun TogiCodeDialog(
pickedCountry(countryItem)
isPickCountry = countryItem
isOpenDialog = false
}
},
textStyleDefault = textStyleDefault,
backgroundColor = backgroundColor,
)
}
}
Expand All @@ -126,6 +133,8 @@ fun CountryDialog(
onSelected: (item: CountryData) -> Unit,
context: Context,
dialogStatus: Boolean,
textStyleDefault: TextStyle = TextStyle.Default,
backgroundColor: Color = MaterialTheme.colors.background,
) {
var searchValue by remember { mutableStateOf("") }
if (!dialogStatus) searchValue = ""
Expand All @@ -134,23 +143,25 @@ fun CountryDialog(
onDismissRequest = onDismissRequest,
content = {
Surface(
color = MaterialTheme.colors.onSurface,
color = textStyleDefault.color,
modifier = Modifier
.fillMaxWidth()
.clip(RoundedCornerShape(25.dp))
) {
Scaffold { scaffold ->
scaffold.calculateBottomPadding()
Column(modifier = Modifier.fillMaxSize()) {
Column(modifier = Modifier
.fillMaxSize()
.background(backgroundColor)) {
SearchTextField(
value = searchValue, onValueChange = { searchValue = it },
textColor = MaterialTheme.colors.onSurface,
fontSize = 16.sp,
textColor = textStyleDefault.color,
fontSize = textStyleDefault.fontSize,
leadingIcon = {
Icon(
imageVector = Icons.Filled.Search,
contentDescription = "Search",
tint = MaterialTheme.colors.onSurface,
tint = textStyleDefault.color,
modifier = Modifier.padding(horizontal = 3.dp)
)
},
Expand Down Expand Up @@ -186,8 +197,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
)
}
}
Expand Down
56 changes: 43 additions & 13 deletions ccp/src/main/java/com/togitech/ccp/component/TogiCountryCodePicker.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -48,7 +49,27 @@ fun TogiCountryCodePicker(
focusedBorderColor: Color = MaterialTheme.colors.primary,
unfocusedBorderColor: Color = MaterialTheme.colors.onSecondary,
cursorColor: Color = MaterialTheme.colors.primary,
bottomStyle: Boolean = false
bottomStyle: Boolean = false,
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,
),
countryCodeDialogBackgroundColor: Color,
changeStatustoErrorIfError: Boolean = true,
turnLiveErrorStatusOn: Boolean = false,
liveErrorStatus: (Boolean) -> Unit = {},
) {
val context = LocalContext.current
var textFieldValue by rememberSaveable { mutableStateOf("") }
Expand All @@ -66,9 +87,9 @@ fun TogiCountryCodePicker(
)
}

countryCodeState = defaultLang
fullNumberState = phoneCode + textFieldValue
phoneNumberState = textFieldValue
countryCodeState = defaultLang


Surface(color = color) {
Expand All @@ -82,7 +103,8 @@ fun TogiCountryCodePicker(
defaultSelectedCountry = getLibCountries.single { it.countryCode == defaultLang },
showCountryCode = showCountryCode,
showFlag = showCountryFlag,
showCountryName = true
showCountryName = true,
backgroundColor = countryCodeDialogBackgroundColor,
)
}
Row(
Expand All @@ -97,15 +119,23 @@ 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,
cursorColor = cursorColor
focusedBorderColor = if (getErrorStatus() && changeStatustoErrorIfError) Color.Red else focusedBorderColor,
unfocusedBorderColor = if (getErrorStatus() && changeStatustoErrorIfError) Color.Red else unfocusedBorderColor,
cursorColor = cursorColor,
),
textStyle = textStyleDefault,
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())), style = textStyleHint) },
keyboardOptions = KeyboardOptions.Default.copy(
keyboardType = KeyboardType.NumberPassword,
autoCorrect = true,
Expand All @@ -124,7 +154,9 @@ fun TogiCountryCodePicker(
},
defaultSelectedCountry = getLibCountries.single { it.countryCode == defaultLang },
showCountryCode = showCountryCode,
showFlag = showCountryFlag
showFlag = showCountryFlag,
textStyleDefault = countryCodeStyle,
backgroundColor = countryCodeDialogBackgroundColor,
)
}
}
Expand All @@ -137,16 +169,14 @@ fun TogiCountryCodePicker(
Icon(
imageVector = Icons.Filled.Clear,
contentDescription = "Clear",
tint = if (getErrorStatus()) Color.Red else MaterialTheme.colors.onSurface
tint = if (getErrorStatus() && changeStatustoErrorIfError) textStyleError.color else textStyleDefault.color,
)
}
})
}
if (getErrorStatus()) Text(
if (getErrorStatus() && changeStatustoErrorIfError) Text(
text = stringResource(id = R.string.invalid_number),
color = MaterialTheme.colors.error,
style = MaterialTheme.typography.caption,
fontWeight = FontWeight.Bold,
style = textStyleError,
modifier = Modifier.padding(top = 0.8.dp)
)
}
Expand Down