Beautify MoreDialog or Options sheet

This commit is contained in:
Rahul Patel
2024-07-30 02:36:13 +05:30
parent 1124a100d8
commit c5bb93da02

View File

@@ -33,6 +33,7 @@ import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.ColorFilter
import androidx.compose.ui.graphics.toArgb
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.platform.ComposeView
import androidx.compose.ui.platform.LocalContext
@@ -50,7 +51,10 @@ import coil.compose.SubcomposeAsyncImage
import coil.request.ImageRequest
import com.aurora.Constants
import com.aurora.Constants.URL_TOS
import com.aurora.extensions.accentColor
import com.aurora.extensions.browse
import com.aurora.extensions.darkenColor
import com.aurora.extensions.lightenColor
import com.aurora.store.R
import com.aurora.store.data.providers.AuthProvider
import com.aurora.store.view.theme.AuroraTheme
@@ -64,6 +68,11 @@ class MoreDialogFragment : DialogFragment() {
@Inject
lateinit var authProvider: AuthProvider
var primaryColor: Color = Color.White
var onPrimaryColor: Color = Color.Black
var secondaryColor: Color = Color.White
var onSecondaryColor: Color = Color.Black
private data class Option(
@StringRes val title: Int,
@DrawableRes val icon: Int,
@@ -81,30 +90,36 @@ class MoreDialogFragment : DialogFragment() {
setViewCompositionStrategy(ViewCompositionStrategy.DisposeOnViewTreeLifecycleDestroyed)
setContent {
AuroraTheme {
val backgroundColor = if (isSystemInDarkTheme()) {
MaterialTheme.colorScheme.onSecondary
if (isSystemInDarkTheme()) {
primaryColor = Color(darkenColor(requireContext().accentColor(), 0.25f))
onPrimaryColor = Color(lightenColor(primaryColor.toArgb()))
secondaryColor = Color(darkenColor(requireContext().accentColor(), 0.15f))
onSecondaryColor = Color(lightenColor(primaryColor.toArgb()))
primaryColor to onPrimaryColor to secondaryColor to onSecondaryColor
} else {
MaterialTheme.colorScheme.surfaceVariant
primaryColor = Color(lightenColor(requireContext().accentColor(), 0.85f))
onPrimaryColor = Color(darkenColor(primaryColor.toArgb()))
secondaryColor = Color(lightenColor(requireContext().accentColor(), 0.95f))
onSecondaryColor = Color(darkenColor(primaryColor.toArgb()))
primaryColor to onPrimaryColor to secondaryColor to onSecondaryColor
}
val onBackgroundColor = if (isSystemInDarkTheme()) {
MaterialTheme.colorScheme.onSurface
} else {
MaterialTheme.colorScheme.onSecondary
}
val tintColor = if (isSystemInDarkTheme()) Color.White else Color.Black
Column(
modifier = Modifier
.fillMaxWidth()
.background(color = backgroundColor)
.background(color = primaryColor)
.verticalScroll(rememberScrollState())
.padding(10.dp),
verticalArrangement = Arrangement.spacedBy(5.dp, Alignment.CenterVertically)
) {
AppBar(tintColor = tintColor)
AccountHeader(backgroundColor = onBackgroundColor)
AppBar(
backgroundColor = primaryColor,
onBackgroundColor = onPrimaryColor
)
AccountHeader(
backgroundColor = secondaryColor,
onBackgroundColor = onSecondaryColor
)
Column(
modifier = Modifier
.clip(
@@ -115,17 +130,22 @@ class MoreDialogFragment : DialogFragment() {
bottomEnd = 20.dp
)
)
.background(color = onBackgroundColor)
.background(color = secondaryColor)
) {
getOptions().fastForEach { option -> OptionItem(option = option) }
getOptions().fastForEach { option ->
OptionItem(
option = option,
tintColor = onSecondaryColor
)
}
}
getExtraOptions().fastForEach { option ->
OptionItem(
option = option,
tintColor = tintColor
tintColor = onPrimaryColor
)
}
Footer(tintColor)
Footer(onPrimaryColor)
}
}
}
@@ -133,20 +153,20 @@ class MoreDialogFragment : DialogFragment() {
}
@Composable
fun AppBar(tintColor: Color) {
fun AppBar(backgroundColor: Color = Color.Transparent, onBackgroundColor: Color) {
Box(contentAlignment = Alignment.CenterEnd) {
Text(
modifier = Modifier.fillMaxWidth(),
text = stringResource(id = R.string.app_name),
style = MaterialTheme.typography.titleMedium,
color = tintColor,
color = onBackgroundColor,
textAlign = TextAlign.Center
)
IconButton(onClick = { findNavController().navigateUp() }) {
Icon(
painter = painterResource(id = R.drawable.ic_cancel),
contentDescription = stringResource(id = R.string.action_cancel),
tint = tintColor
tint = onBackgroundColor
)
}
}
@@ -176,7 +196,7 @@ class MoreDialogFragment : DialogFragment() {
}
@Composable
private fun AccountHeader(backgroundColor: Color) {
private fun AccountHeader(backgroundColor: Color, onBackgroundColor: Color = Color.White) {
Column(
modifier = Modifier
.fillMaxWidth()
@@ -215,12 +235,14 @@ class MoreDialogFragment : DialogFragment() {
Text(
text = if (authProvider.isAnonymous) "anonymous" else authProvider.authData!!.userProfile!!.name,
fontWeight = FontWeight.SemiBold,
fontSize = 16.sp
fontSize = 16.sp,
color = onBackgroundColor
)
Text(
text = if (authProvider.isAnonymous) "anonymous@gmail.com" else authProvider.authData!!.userProfile!!.email,
fontWeight = FontWeight.Normal,
fontSize = 14.sp
fontSize = 14.sp,
color = onBackgroundColor
)
}
}
@@ -230,7 +252,7 @@ class MoreDialogFragment : DialogFragment() {
) {
Text(
text = stringResource(id = R.string.manage_account),
color = Color.Black
color = onBackgroundColor
)
}
}