Bug 1856990 - Translations UI Error States.

fenix/123.0
iorgamgabriel 5 months ago committed by mergify[bot]
parent 9d659af75d
commit b3fcbcbc56

@ -26,6 +26,7 @@ import androidx.compose.ui.unit.Density
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.IntSize
import androidx.compose.ui.unit.dp
import mozilla.components.concept.engine.translate.TranslationError
import org.mozilla.fenix.theme.FirefoxTheme
private const val BOTTOM_SHEET_HANDLE_WIDTH_PERCENT = 0.1f
@ -125,10 +126,12 @@ internal fun TranslationsOptionsAnimation(
}
}
@Suppress("LongParameterList")
@Composable
internal fun TranslationsDialog(
learnMoreUrl: String,
showFirstTimeTranslation: Boolean,
translationError: TranslationError? = null,
onSettingClicked: () -> Unit,
onLearnMoreClicked: () -> Unit,
onTranslateButtonClick: () -> Unit,
@ -136,6 +139,7 @@ internal fun TranslationsDialog(
TranslationsDialogBottomSheet(
learnMoreUrl = learnMoreUrl,
showFirstTimeTranslation = showFirstTimeTranslation,
translationError = translationError,
onSettingClicked = onSettingClicked,
onLearnMoreClicked = onLearnMoreClicked,
onTranslateButtonClick = onTranslateButtonClick,

@ -38,13 +38,17 @@ import androidx.compose.ui.semantics.heading
import androidx.compose.ui.semantics.semantics
import androidx.compose.ui.text.style.TextDecoration
import androidx.compose.ui.unit.dp
import mozilla.components.concept.engine.translate.TranslationError
import org.mozilla.fenix.R
import org.mozilla.fenix.compose.BetaLabel
import org.mozilla.fenix.compose.LinkText
import org.mozilla.fenix.compose.LinkTextState
import org.mozilla.fenix.compose.annotation.LightDarkPreview
import org.mozilla.fenix.compose.button.PrimaryButton
import org.mozilla.fenix.compose.button.TertiaryButton
import org.mozilla.fenix.compose.button.TextButton
import org.mozilla.fenix.shopping.ui.ReviewQualityCheckInfoCard
import org.mozilla.fenix.shopping.ui.ReviewQualityCheckInfoType
import org.mozilla.fenix.theme.FirefoxTheme
/**
@ -54,6 +58,7 @@ import org.mozilla.fenix.theme.FirefoxTheme
fun TranslationsDialogBottomSheet(
learnMoreUrl: String,
showFirstTimeTranslation: Boolean,
translationError: TranslationError? = null,
onSettingClicked: () -> Unit,
onLearnMoreClicked: () -> Unit,
onTranslateButtonClick: () -> Unit,
@ -83,22 +88,35 @@ fun TranslationsDialogBottomSheet(
TranslationsDialogInfoMessage(onLearnMoreClicked, learnMoreUrl)
}
translationError?.let {
TranslationErrorWarning(translationError)
}
Spacer(modifier = Modifier.height(14.dp))
when (orientation) {
Configuration.ORIENTATION_LANDSCAPE -> {
TranslationsDialogContentInLandscapeMode(onTranslateButtonClick)
}
if (translationError !is TranslationError.CouldNotLoadLanguagesError) {
when (orientation) {
Configuration.ORIENTATION_LANDSCAPE -> {
TranslationsDropdownsInLandscapeMode()
}
else -> {
TranslationsDialogContentInPortraitMode(onTranslateButtonClick)
else -> {
TranslationsDropdownsInPortraitMode()
}
}
Spacer(modifier = Modifier.height(16.dp))
}
TranslationsDialogActionButtons(
onTranslateButtonClick = onTranslateButtonClick,
translationError = translationError,
)
}
}
@Composable
private fun TranslationsDialogContentInPortraitMode(onTranslateButtonClick: () -> Unit) {
private fun TranslationsDropdownsInPortraitMode() {
Column {
TranslationsDropdown(
header = stringResource(id = R.string.translations_bottom_sheet_translate_from),
@ -109,15 +127,11 @@ private fun TranslationsDialogContentInPortraitMode(onTranslateButtonClick: () -
TranslationsDropdown(
header = stringResource(id = R.string.translations_bottom_sheet_translate_to),
)
Spacer(modifier = Modifier.height(16.dp))
TranslationsDialogActionButtons(onTranslateButtonClick)
}
}
@Composable
private fun TranslationsDialogContentInLandscapeMode(onTranslateButtonClick: () -> Unit) {
private fun TranslationsDropdownsInLandscapeMode() {
Column {
Row {
TranslationsDropdown(
@ -131,10 +145,6 @@ private fun TranslationsDialogContentInLandscapeMode(onTranslateButtonClick: ()
header = stringResource(id = R.string.translations_bottom_sheet_translate_to),
)
}
Spacer(modifier = Modifier.height(16.dp))
TranslationsDialogActionButtons(onTranslateButtonClick)
}
}
@ -179,6 +189,51 @@ private fun TranslationsDialogHeader(
}
}
@Composable
private fun TranslationErrorWarning(translationError: TranslationError) {
val modifier = Modifier
.padding(top = 8.dp)
.fillMaxWidth()
when (translationError) {
is TranslationError.CouldNotTranslateError -> {
ReviewQualityCheckInfoCard(
title = stringResource(id = R.string.translation_error_could_not_translate_warning_text),
type = ReviewQualityCheckInfoType.Error,
modifier = modifier,
)
}
is TranslationError.CouldNotLoadLanguagesError -> {
ReviewQualityCheckInfoCard(
title = stringResource(id = R.string.translation_error_could_not_load_languages_warning_text),
type = ReviewQualityCheckInfoType.Error,
modifier = modifier,
)
}
is TranslationError.LanguageNotSupportedError -> {
ReviewQualityCheckInfoCard(
title = stringResource(
id = R.string.translation_error_language_not_supported_warning_text,
"Uzbek",
),
type = ReviewQualityCheckInfoType.Info,
modifier = modifier,
footer = stringResource(
id = R.string.translation_error_language_not_supported_learn_more,
) to LinkTextState(
text = stringResource(id = R.string.translation_error_language_not_supported_learn_more),
url = "https://www.mozilla.org",
onClick = {},
),
)
}
else -> {}
}
}
@Composable
private fun TranslationsDialogInfoMessage(
onLearnMoreClicked: () -> Unit,
@ -241,7 +296,10 @@ private fun TranslationsDropdown(
}
@Composable
private fun TranslationsDialogActionButtons(onTranslateButtonClick: () -> Unit) {
private fun TranslationsDialogActionButtons(
onTranslateButtonClick: () -> Unit,
translationError: TranslationError? = null,
) {
val isTranslationInProgress = remember { mutableStateOf(false) }
Row(
@ -249,8 +307,15 @@ private fun TranslationsDialogActionButtons(onTranslateButtonClick: () -> Unit)
horizontalArrangement = Arrangement.End,
verticalAlignment = Alignment.CenterVertically,
) {
val negativeButtonTitle =
if (translationError is TranslationError.LanguageNotSupportedError) {
stringResource(id = R.string.translations_bottom_sheet_negative_button_error)
} else {
stringResource(id = R.string.translations_bottom_sheet_negative_button)
}
TextButton(
text = stringResource(id = R.string.translations_bottom_sheet_negative_button),
text = negativeButtonTitle,
modifier = Modifier,
onClick = {},
)
@ -265,12 +330,30 @@ private fun TranslationsDialogActionButtons(onTranslateButtonClick: () -> Unit)
icon = painterResource(id = R.drawable.mozac_ic_sync_24),
)
} else {
PrimaryButton(
text = stringResource(id = R.string.translations_bottom_sheet_positive_button),
modifier = Modifier.wrapContentSize(),
) {
isTranslationInProgress.value = true
onTranslateButtonClick()
val positiveButtonTitle =
if (translationError is TranslationError.CouldNotLoadLanguagesError) {
stringResource(id = R.string.translations_bottom_sheet_positive_button_error)
} else {
stringResource(id = R.string.translations_bottom_sheet_positive_button)
}
if (translationError is TranslationError.LanguageNotSupportedError) {
TertiaryButton(
text = positiveButtonTitle,
enabled = false,
modifier = Modifier.wrapContentSize(),
) {
isTranslationInProgress.value = true
onTranslateButtonClick()
}
} else {
PrimaryButton(
text = positiveButtonTitle,
modifier = Modifier.wrapContentSize(),
) {
isTranslationInProgress.value = true
onTranslateButtonClick()
}
}
}
}
@ -283,6 +366,7 @@ private fun TranslationsDialogBottomSheetPreview() {
TranslationsDialogBottomSheet(
learnMoreUrl = "",
showFirstTimeTranslation = true,
translationError = TranslationError.LanguageNotSupportedError(null),
onSettingClicked = {},
onLearnMoreClicked = {},
onTranslateButtonClick = {},

@ -2262,12 +2262,24 @@
<string name="translations_bottom_sheet_translate_to">Translate to</string>
<!-- Button text on the translations dialog to dismiss the dialog and return to the browser. -->
<string name="translations_bottom_sheet_negative_button">Not now</string>
<!-- Button text on the translations dialog when a translation error appears, used to dismiss the dialog and return to the browser. -->
<string name="translations_bottom_sheet_negative_button_error">Done</string>
<!-- Button text on the translations dialog to begin a translation of the website. -->
<string name="translations_bottom_sheet_positive_button">Translate</string>
<!-- Button text on the translations dialog when a translation error appears. -->
<string name="translations_bottom_sheet_positive_button_error">Try again</string>
<!-- Inactive button text on the translations dialog that indicates a translation is currently in progress. This button will be accompanied by a loading icon. -->
<string name="translations_bottom_sheet_translating_in_progress">Translating</string>
<!-- Button content description (not visible, for screen readers etc.) for the translations dialog translate button that indicates a translation is currently in progress. -->
<string name="translations_bottom_sheet_translating_in_progress_content_description">Translating in Progress</string>
<!-- The title of the warning card informs the user that a translation could not be completed. -->
<string name="translation_error_could_not_translate_warning_text">There was a problem translating. Please try again.</string>
<!-- The title of the warning card informs the user that the list of languages cannot be loaded. -->
<string name="translation_error_could_not_load_languages_warning_text">Couldnt load languages. Check your internet connection and try again.</string>
<!-- The title of the warning card informs the user that a language is not supported. The first parameter is the name of the language that is not supported. -->
<string name="translation_error_language_not_supported_warning_text">Sorry, we dont support %1$s yet.</string>
<!-- Button text on the warning card when a language is not supported. The link will take the user to a page to a support page about translations. -->
<string name="translation_error_language_not_supported_learn_more">Learn more</string>
<!-- Translations options dialog -->
<!-- Title of the translation options dialog that allows a user to set their translation options for the site the user is currently on. -->

Loading…
Cancel
Save