Sulkta-OSS/element-x-ada
3
0
Fork 0
Code Issues 1 Pull requests 10 Projects Releases Packages Wiki Activity Actions

Improve PreferenceText rendering, in particular center the test on the right vertically, add padding in add more previews.

Browse source
This commit is contained in:
Benoit Marty 2023-06-20 12:46:24 +02:00 • committed by Benoit Marty
parent a2615a6408
commit ee033a2aa4
1 changed files with 57 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

74
libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/preferences/PreferenceText.kt
View file

@ -17,6 +17,7 @@
package io.element.android.libraries.designsystem.components.preferences package io.element.android.libraries.designsystem.components.preferences
import androidx.compose.foundation.clickable import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.Row
@ -26,7 +27,6 @@ import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.progressSemantics import androidx.compose.foundation.progressSemantics
import androidx.compose.material.icons.Icons import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.BugReport import androidx.compose.material.icons.filled.BugReport
@ -55,7 +55,7 @@ fun PreferenceText(
tintColor: Color? = null, tintColor: Color? = null,
onClick: () -> Unit = {}, onClick: () -> Unit = {},
) { ) {
val minHeight = if (subtitle == null) preferenceMinHeightOnlyTitle else preferenceMinHeight val minHeight = if (subtitle == null) preferenceMinHeightOnlyTitle else preferenceMinHeight
Box( Box(
modifier = modifier modifier = modifier
.fillMaxWidth() .fillMaxWidth()
@ -69,9 +69,10 @@ fun PreferenceText(
.padding(vertical = preferencePaddingVertical) .padding(vertical = preferencePaddingVertical)
) { ) {
PreferenceIcon(icon = icon, tintColor = tintColor) PreferenceIcon(icon = icon, tintColor = tintColor)
Column(modifier = Modifier Column(
.weight(1f) modifier = Modifier
.align(Alignment.CenterVertically) .weight(1f)
.align(Alignment.CenterVertically)
) { ) {
if (title != null) { if (title != null) {
Text( Text(
@ -92,15 +93,24 @@ fun PreferenceText(
} }
} }
if (currentValue != null) { if (currentValue != null) {
Text(currentValue, style = MaterialTheme.typography.bodyMedium, color = MaterialTheme.colorScheme.secondary) Text(
Spacer(Modifier.width(16.dp)) modifier = Modifier
.align(Alignment.CenterVertically)
.padding(horizontal = 16.dp),
text = currentValue,
style = MaterialTheme.typography.bodyMedium,
color = MaterialTheme.colorScheme.secondary,
)
} else if (loadingCurrentValue) { } else if (loadingCurrentValue) {
CircularProgressIndicator(modifier = Modifier CircularProgressIndicator(
.progressSemantics() modifier = Modifier
.size(20.dp), strokeWidth = 2.dp) .progressSemantics()
Spacer(Modifier.width(16.dp)) .padding(horizontal = 16.dp)
.size(20.dp)
.align(Alignment.CenterVertically),
strokeWidth = 2.dp
)
} }
} }
} }
} }
@ -111,9 +121,39 @@ internal fun PreferenceTextPreview() = ElementThemedPreview { ContentToPreview()
@Composable @Composable
private fun ContentToPreview() { private fun ContentToPreview() {
PreferenceText( Column(
title = "Title", verticalArrangement = Arrangement.spacedBy(2.dp)
subtitle = "Some content", ) {
icon = Icons.Default.BugReport, PreferenceText(
) title = "Title",
icon = Icons.Default.BugReport,
)
PreferenceText(
title = "Title",
subtitle = "Some content",
icon = Icons.Default.BugReport,
)
PreferenceText(
title = "Title",
subtitle = "Some content",
icon = Icons.Default.BugReport,
currentValue = "123",
)
PreferenceText(
title = "Title",
subtitle = "Some content",
icon = Icons.Default.BugReport,
loadingCurrentValue = true,
)
PreferenceText(
title = "Title",
icon = Icons.Default.BugReport,
currentValue = "123",
)
PreferenceText(
title = "Title",
icon = Icons.Default.BugReport,
loadingCurrentValue = true,
)
}
} }