Address design comments on the change server screen (#196)
* Address design comments on the change server screen * Update screenshots * Address review comments.
This commit is contained in:
Jorge Martin Espinosa
GitHub
parent
40e96bd9d3
commit
ff5694239c
51 changed files with 167 additions and 105 deletions
|
|
@ -68,4 +68,4 @@ val ElementGreen = Color(0xFF0DBD8B)
|
|||
val ElementOrange = Color(0xFFD9B072)
|
||||
val Vermilion = Color(0xFFFF5B55)
|
||||
|
||||
val LinkColor = Color(0xFF054F6E)
|
||||
val LinkColor = Color(0xFF0086E6)
|
||||
|
|
|
|||
|
|
@ -30,6 +30,7 @@ import androidx.compose.ui.geometry.Offset
|
|||
import androidx.compose.ui.input.pointer.pointerInput
|
||||
import androidx.compose.ui.platform.LocalUriHandler
|
||||
import androidx.compose.ui.text.AnnotatedString
|
||||
import androidx.compose.ui.text.ExperimentalTextApi
|
||||
import androidx.compose.ui.text.ParagraphStyle
|
||||
import androidx.compose.ui.text.TextLayoutResult
|
||||
import androidx.compose.ui.text.TextStyle
|
||||
|
|
@ -40,14 +41,15 @@ import io.element.android.libraries.designsystem.theme.components.Text
|
|||
import kotlinx.collections.immutable.ImmutableMap
|
||||
import kotlinx.collections.immutable.persistentMapOf
|
||||
|
||||
@OptIn(ExperimentalTextApi::class)
|
||||
@Composable
|
||||
fun ClickableLinkText(
|
||||
text: AnnotatedString,
|
||||
linkAnnotationTag: String,
|
||||
onClick: () -> Unit,
|
||||
onLongClick: () -> Unit,
|
||||
interactionSource: MutableInteractionSource,
|
||||
modifier: Modifier = Modifier,
|
||||
linkAnnotationTag: String = "",
|
||||
onClick: () -> Unit = {},
|
||||
onLongClick: () -> Unit = {},
|
||||
style: TextStyle = LocalTextStyle.current,
|
||||
inlineContent: ImmutableMap<String, InlineTextContent> = persistentMapOf(),
|
||||
) {
|
||||
|
|
@ -71,12 +73,14 @@ fun ClickableLinkText(
|
|||
) { offset ->
|
||||
layoutResult.value?.let { layoutResult ->
|
||||
val position = layoutResult.getOffsetForPosition(offset)
|
||||
val linkAnnotations =
|
||||
val linkUrlAnnotations = text.getUrlAnnotations(position, position)
|
||||
.map { AnnotatedString.Range(it.item.url, it.start, it.end, linkAnnotationTag) }
|
||||
val linkStringAnnotations = linkUrlAnnotations +
|
||||
text.getStringAnnotations(linkAnnotationTag, position, position)
|
||||
if (linkAnnotations.isEmpty()) {
|
||||
if (linkStringAnnotations.isEmpty()) {
|
||||
onClick()
|
||||
} else {
|
||||
uriHandler.openUri(linkAnnotations.first().item)
|
||||
uriHandler.openUri(linkStringAnnotations.first().item)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -16,9 +16,6 @@
|
|||
|
||||
package io.element.android.libraries.designsystem.components.dialogs
|
||||
|
||||
import androidx.compose.foundation.layout.Arrangement
|
||||
import androidx.compose.foundation.layout.Row
|
||||
import androidx.compose.foundation.layout.fillMaxWidth
|
||||
import androidx.compose.material3.AlertDialog
|
||||
import androidx.compose.material3.AlertDialogDefaults
|
||||
import androidx.compose.material3.MaterialTheme
|
||||
|
|
@ -29,28 +26,33 @@ import androidx.compose.ui.graphics.Color
|
|||
import androidx.compose.ui.graphics.Shape
|
||||
import androidx.compose.ui.res.stringResource
|
||||
import androidx.compose.ui.tooling.preview.Preview
|
||||
import androidx.compose.ui.tooling.preview.PreviewParameter
|
||||
import androidx.compose.ui.unit.Dp
|
||||
import io.element.android.libraries.designsystem.ElementTextStyles
|
||||
import io.element.android.libraries.designsystem.preview.ElementPreviewDark
|
||||
import io.element.android.libraries.designsystem.preview.ElementPreviewLight
|
||||
import io.element.android.libraries.designsystem.theme.components.Text
|
||||
import io.element.android.libraries.designsystem.utils.BooleanProvider
|
||||
import io.element.android.libraries.ui.strings.R as StringR
|
||||
|
||||
@Composable
|
||||
fun ConfirmationDialog(
|
||||
title: String,
|
||||
content: String,
|
||||
onSubmitClicked: () -> Unit,
|
||||
onDismiss: () -> Unit,
|
||||
modifier: Modifier = Modifier,
|
||||
submitText: String = stringResource(id = StringR.string.ok),
|
||||
cancelText: String = stringResource(id = StringR.string.action_cancel),
|
||||
thirdButtonText: String? = null,
|
||||
onSubmitClicked: () -> Unit = {},
|
||||
onCancelClicked: () -> Unit = {},
|
||||
emphasizeSubmitButton: Boolean = false,
|
||||
onCancelClicked: () -> Unit = onDismiss,
|
||||
onThirdButtonClicked: () -> Unit = {},
|
||||
onDismiss: () -> Unit = {},
|
||||
shape: Shape = AlertDialogDefaults.shape,
|
||||
containerColor: Color = AlertDialogDefaults.containerColor,
|
||||
iconContentColor: Color = AlertDialogDefaults.iconContentColor,
|
||||
titleContentColor: Color = AlertDialogDefaults.titleContentColor,
|
||||
// According to the design team, `primary` should be used here instead of the default `onSurface`
|
||||
titleContentColor: Color = MaterialTheme.colorScheme.primary,
|
||||
textContentColor: Color = AlertDialogDefaults.textContentColor,
|
||||
tonalElevation: Dp = AlertDialogDefaults.TonalElevation,
|
||||
) {
|
||||
|
|
@ -79,9 +81,16 @@ fun ConfirmationDialog(
|
|||
TextButton(
|
||||
onClick = {
|
||||
onSubmitClicked()
|
||||
}
|
||||
},
|
||||
) {
|
||||
Text(submitText)
|
||||
Text(
|
||||
submitText,
|
||||
style = if (emphasizeSubmitButton) {
|
||||
ElementTextStyles.Bold.subheadline
|
||||
} else {
|
||||
MaterialTheme.typography.labelLarge
|
||||
}
|
||||
)
|
||||
}
|
||||
},
|
||||
shape = shape,
|
||||
|
|
@ -95,17 +104,22 @@ fun ConfirmationDialog(
|
|||
|
||||
@Preview
|
||||
@Composable
|
||||
internal fun ConfirmationDialogLightPreview() = ElementPreviewLight { ContentToPreview() }
|
||||
internal fun ConfirmationDialogLightPreview(@PreviewParameter(BooleanProvider::class) emphasizeSubmitButton: Boolean) =
|
||||
ElementPreviewLight { ContentToPreview(emphasizeSubmitButton) }
|
||||
|
||||
@Preview
|
||||
@Composable
|
||||
internal fun ConfirmationDialogDarkPreview() = ElementPreviewDark { ContentToPreview() }
|
||||
internal fun ConfirmationDialogDarkPreview(@PreviewParameter(BooleanProvider::class) emphasizeSubmitButton: Boolean) =
|
||||
ElementPreviewDark { ContentToPreview(emphasizeSubmitButton) }
|
||||
|
||||
@Composable
|
||||
private fun ContentToPreview() {
|
||||
private fun ContentToPreview(emphasizeSubmitButton: Boolean) {
|
||||
ConfirmationDialog(
|
||||
title = "Title",
|
||||
content = "Content",
|
||||
thirdButtonText = "Disable"
|
||||
thirdButtonText = "Disable",
|
||||
onSubmitClicked = {},
|
||||
onDismiss = {},
|
||||
emphasizeSubmitButton = emphasizeSubmitButton,
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -24,6 +24,7 @@ import io.element.android.libraries.designsystem.Azure
|
|||
import io.element.android.libraries.designsystem.Black_800
|
||||
import io.element.android.libraries.designsystem.Black_950
|
||||
import io.element.android.libraries.designsystem.DarkGrey
|
||||
import io.element.android.libraries.designsystem.Gray_300
|
||||
import io.element.android.libraries.designsystem.Gray_400
|
||||
import io.element.android.libraries.designsystem.Gray_450
|
||||
import io.element.android.libraries.designsystem.SystemGrey5Dark
|
||||
|
|
@ -59,7 +60,7 @@ val materialColorSchemeDark = darkColorScheme(
|
|||
surface = Black_800,
|
||||
onSurface = Color.White,
|
||||
surfaceVariant = Black_950,
|
||||
onSurfaceVariant = Color.White,
|
||||
onSurfaceVariant = Gray_300,
|
||||
// TODO surfaceTint = primary,
|
||||
// TODO inverseSurface = ColorDarkTokens.InverseSurface,
|
||||
// TODO inverseOnSurface = ColorDarkTokens.InverseOnSurface,
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue