Add rageskahe module

This commit is contained in:
Benoit Marty 2022-12-21 14:36:57 +01:00
parent 0644a5822f
commit 3f7a83c519
64 changed files with 3191 additions and 35 deletions

View file

@ -0,0 +1,40 @@
package io.element.android.x.designsystem.components
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.material3.Checkbox
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
@Composable
fun LabelledCheckbox(
checked: Boolean,
text: String,
modifier: Modifier = Modifier,
onCheckedChange: (Boolean) -> Unit = {},
enabled: Boolean = true,
) {
Row(
modifier = modifier.fillMaxWidth(),
verticalAlignment = Alignment.CenterVertically
) {
Checkbox(
checked = checked,
onCheckedChange = onCheckedChange,
enabled = enabled,
)
Text(text = text)
}
}
@Preview
@Composable
fun LabelledCheckboxPreview() {
LabelledCheckbox(
checked = true,
text = "Some text",
)
}

View file

@ -1,6 +1,7 @@
package io.element.android.x.designsystem.components.dialogs
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
@ -9,21 +10,25 @@ import androidx.compose.material3.Button
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import io.element.android.x.element.resources.R as ElementR
@Composable
fun ConfirmationDialog(
isDisplayed: Boolean,
title: String,
content: String,
modifier: Modifier = Modifier,
submitText: String = "OK",
cancelText: String = "Cancel",
submitText: String = stringResource(id = ElementR.string.ok),
cancelText: String = stringResource(id = ElementR.string.action_cancel),
thirdButtonText: String? = null,
onSubmitClicked: () -> Unit = {},
onCancelClicked: () -> Unit = {},
onThirdButtonClicked: () -> Unit = {},
onDismiss: () -> Unit = {},
) {
if (!isDisplayed) return
AlertDialog(
modifier = modifier,
onDismissRequest = onDismiss,
@ -33,6 +38,31 @@ fun ConfirmationDialog(
text = {
Text(content)
},
dismissButton = {
Row(
modifier = Modifier.padding(all = 8.dp),
horizontalArrangement = Arrangement.Center
) {
Column {
Button(
modifier = Modifier.fillMaxWidth(),
onClick = {
onCancelClicked()
}) {
Text(cancelText)
}
if (thirdButtonText != null) {
Button(
modifier = Modifier.fillMaxWidth(),
onClick = {
onThirdButtonClicked()
}) {
Text(thirdButtonText)
}
}
}
}
},
confirmButton = {
Row(
modifier = Modifier.padding(all = 8.dp),
@ -41,7 +71,6 @@ fun ConfirmationDialog(
Button(
modifier = Modifier.fillMaxWidth(),
onClick = {
onDismiss()
onSubmitClicked()
}
) {
@ -49,20 +78,6 @@ fun ConfirmationDialog(
}
}
},
dismissButton = {
Row(
modifier = Modifier.padding(all = 8.dp),
horizontalArrangement = Arrangement.Center
) {
Button(
modifier = Modifier.fillMaxWidth(),
onClick = {
onDismiss()
}) {
Text(cancelText)
}
}
}
)
}
@ -70,8 +85,8 @@ fun ConfirmationDialog(
@Preview
fun ConfirmationDialogPreview() {
ConfirmationDialog(
isDisplayed = true,
title = "Title",
content = "Content",
thirdButtonText = "Disable"
)
}

View file

@ -0,0 +1,58 @@
package io.element.android.x.designsystem.components.dialogs
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.AlertDialog
import androidx.compose.material3.Button
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import io.element.android.x.element.resources.R as ElementR
@Composable
fun ErrorDialog(
content: String,
modifier: Modifier = Modifier,
title: String = stringResource(id = ElementR.string.dialog_title_error),
submitText: String = stringResource(id = ElementR.string.ok),
onDismiss: () -> Unit = {},
) {
AlertDialog(
modifier = modifier,
onDismissRequest = onDismiss,
title = {
Text(text = title)
},
text = {
Text(content)
},
confirmButton = {
Row(
modifier = Modifier.padding(all = 8.dp),
horizontalArrangement = Arrangement.Center
) {
Button(
modifier = Modifier.fillMaxWidth(),
onClick = {
onDismiss()
}
) {
Text(submitText)
}
}
},
)
}
@Composable
@Preview
fun ErrorDialogPreview() {
ErrorDialog(
content = "Content",
)
}

View file

@ -0,0 +1,5 @@
package io.element.android.x.designsystem.components.preferences
import androidx.compose.ui.unit.dp
internal val preferenceMinHeight = 80.dp

View file

@ -0,0 +1,43 @@
package io.element.android.x.designsystem.components.preferences
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.ColumnScope
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
@Composable
fun PreferenceCategory(
title: String,
modifier: Modifier = Modifier,
content: @Composable ColumnScope.() -> Unit,
) {
Column(
modifier = modifier
.fillMaxWidth()
.padding(horizontal = 16.dp)
) {
Text(
style = MaterialTheme.typography.titleSmall,
text = title
)
content()
}
}
@Composable
@Preview(showBackground = false)
fun PreferenceCategoryPreview() {
PreferenceCategory(
title = "Category title",
) {
PreferenceTextPreview()
PreferenceSwitchPreview()
PreferenceSlidePreview()
}
}

View file

@ -0,0 +1,92 @@
package io.element.android.x.designsystem.components.preferences
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.ColumnScope
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.WindowInsets
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.statusBars
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.ArrowBack
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.material3.TopAppBar
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.sp
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun PreferenceScreen(
title: String,
modifier: Modifier = Modifier,
onBackPressed: () -> Unit = {},
content: @Composable ColumnScope.() -> Unit,
) {
Scaffold(
modifier = modifier,
contentWindowInsets = WindowInsets.statusBars,
topBar = {
PreferenceTopAppBar(
title = title,
onBackPressed = onBackPressed,
)
},
content = {
Column(
modifier = Modifier.padding(it)
) {
content()
}
}
)
}
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun PreferenceTopAppBar(
title: String,
modifier: Modifier = Modifier,
onBackPressed: () -> Unit = {},
) {
TopAppBar(
modifier = modifier,
navigationIcon = {
IconButton(onClick = onBackPressed) {
Icon(
imageVector = Icons.Filled.ArrowBack,
contentDescription = "Back"
)
}
},
title = {
Row(verticalAlignment = Alignment.CenterVertically) {
Text(
fontSize = 16.sp,
fontWeight = FontWeight.SemiBold,
text = title,
maxLines = 1,
overflow = TextOverflow.Ellipsis
)
}
}
)
}
@Composable
@Preview(showBackground = false)
fun PreferenceScreenPreview() {
PreferenceScreen(
title = "Preference screen"
) {
PreferenceCategoryPreview()
}
}

View file

@ -0,0 +1,65 @@
package io.element.android.x.designsystem.components.preferences
import androidx.annotation.FloatRange
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.defaultMinSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Slider
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
@Composable
fun PreferenceSlide(
title: String,
@FloatRange(0.0, 1.0)
value: Float,
modifier: Modifier = Modifier,
summary: String? = null,
steps: Int = 0,
onValueChange: (Float) -> Unit = {},
) {
Box(
modifier = modifier
.fillMaxWidth()
.defaultMinSize(minHeight = preferenceMinHeight),
contentAlignment = Alignment.CenterStart
) {
Column(
modifier = modifier
.fillMaxWidth(),
) {
Text(
modifier = Modifier.fillMaxWidth(),
style = MaterialTheme.typography.bodyLarge,
text = title
)
summary?.let {
Text(
modifier = Modifier.fillMaxWidth(),
style = MaterialTheme.typography.bodyMedium,
text = summary
)
}
Slider(
value = value,
steps = steps,
onValueChange = onValueChange
)
}
}
}
@Composable
@Preview(showBackground = false)
fun PreferenceSlidePreview() {
PreferenceSlide(
title = "Slide",
summary = "Summary",
value = 0.75F
)
}

View file

@ -0,0 +1,51 @@
package io.element.android.x.designsystem.components.preferences
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.defaultMinSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.material3.Checkbox
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
@Composable
fun PreferenceSwitch(
title: String,
isChecked: Boolean,
modifier: Modifier = Modifier,
onCheckedChange: (Boolean) -> Unit = {},
) {
Box(
modifier = modifier
.fillMaxWidth()
.defaultMinSize(minHeight = preferenceMinHeight),
contentAlignment = Alignment.CenterStart
) {
Row(
modifier = modifier
.fillMaxWidth(),
verticalAlignment = Alignment.CenterVertically
) {
Text(
modifier = modifier
.weight(1f),
style = MaterialTheme.typography.bodyLarge,
text = title
)
Checkbox(checked = isChecked, onCheckedChange = onCheckedChange)
}
}
}
@Composable
@Preview(showBackground = false)
fun PreferenceSwitchPreview() {
PreferenceSwitch(
title = "Switch",
isChecked = true
)
}

View file

@ -0,0 +1,43 @@
package io.element.android.x.designsystem.components.preferences
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.defaultMinSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
@Composable
fun PreferenceText(
title: String,
// TODO subtitle
modifier: Modifier = Modifier,
onClick: () -> Unit = {},
) {
Box(
modifier = modifier
.fillMaxWidth()
.defaultMinSize(minHeight = preferenceMinHeight)
.clickable { onClick() },
contentAlignment = Alignment.Center
) {
Text(
modifier = Modifier
.fillMaxWidth(),
style = MaterialTheme.typography.bodyLarge,
text = title
)
}
}
@Composable
@Preview(showBackground = false)
fun PreferenceTextPreview() {
PreferenceText(
title = "Title",
)
}