Skip to content

Commit

Permalink
Merge pull request #610 from gini/PP-881-skonto-content-description
Browse files Browse the repository at this point in the history
feature(bank-sdk): Add contentDescription for Skonto
  • Loading branch information
ndubkov-distcotech authored Nov 3, 2024
2 parents 23222f3 + 097e180 commit cd6985a
Show file tree
Hide file tree
Showing 7 changed files with 206 additions and 45 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -88,6 +88,7 @@ import net.gini.android.capture.internal.util.ActivityHelper
import net.gini.android.capture.ui.components.picker.date.GiniDatePickerDialog
import net.gini.android.capture.ui.components.textinput.GiniTextInput
import net.gini.android.capture.ui.components.textinput.amount.GiniAmountTextInput
import net.gini.android.capture.ui.components.tooltip.GiniTooltipBox
import net.gini.android.capture.ui.components.topbar.GiniTopBar
import net.gini.android.capture.ui.components.topbar.GiniTopBarColors
import net.gini.android.capture.ui.theme.GiniTheme
Expand Down Expand Up @@ -414,16 +415,24 @@ private fun NavigationActionBack(
onClick: () -> Unit,
modifier: Modifier = Modifier,
) {
IconButton(
modifier = modifier
.width(24.dp)
.height(24.dp),
onClick = onClick
) {
Icon(
painter = painterResource(id = net.gini.android.capture.R.drawable.gc_action_bar_back),
contentDescription = null,
GiniTooltipBox(
tooltipText = stringResource(
id = R.string.gbs_skonto_screen_content_description_close
)
) {
IconButton(
modifier = modifier
.width(24.dp)
.height(24.dp),
onClick = onClick
) {
Icon(
painter = painterResource(id = net.gini.android.capture.R.drawable.gc_action_bar_back),
contentDescription = stringResource(
id = R.string.gbs_skonto_screen_content_description_close
),
)
}
}
}

Expand All @@ -432,16 +441,24 @@ private fun NavigationActionHelp(
onClick: () -> Unit,
modifier: Modifier = Modifier,
) {
IconButton(
modifier = modifier
.width(24.dp)
.height(24.dp),
onClick = onClick
) {
Icon(
painter = painterResource(R.drawable.gbs_help_question_icon),
contentDescription = null,
GiniTooltipBox(
tooltipText = stringResource(
id = R.string.gbs_skonto_screen_content_description_help
)
) {
IconButton(
modifier = modifier
.width(24.dp)
.height(24.dp),
onClick = onClick
) {
Icon(
painter = painterResource(R.drawable.gbs_help_question_icon),
contentDescription = stringResource(
id = R.string.gbs_skonto_screen_content_description_help
),
)
}
}
}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -95,6 +95,7 @@ import net.gini.android.capture.ui.components.picker.date.GiniDatePickerDialog
import net.gini.android.capture.ui.components.switcher.GiniSwitch
import net.gini.android.capture.ui.components.textinput.GiniTextInput
import net.gini.android.capture.ui.components.textinput.amount.GiniAmountTextInput
import net.gini.android.capture.ui.components.tooltip.GiniTooltipBox
import net.gini.android.capture.ui.components.topbar.GiniTopBar
import net.gini.android.capture.ui.components.topbar.GiniTopBarColors
import net.gini.android.capture.ui.theme.GiniTheme
Expand Down Expand Up @@ -454,38 +455,52 @@ private fun TopAppBar(
}

@Composable
private fun NavigationActionHelp(
private fun NavigationActionBack(
onClick: () -> Unit,
modifier: Modifier = Modifier,
) {
IconButton(
modifier = modifier
.width(24.dp)
.height(24.dp),
onClick = onClick
) {
Icon(
painter = painterResource(R.drawable.gbs_help_question_icon),
contentDescription = null,
GiniTooltipBox(
tooltipText = stringResource(
id = R.string.gbs_skonto_screen_content_description_close
)
) {
IconButton(
modifier = modifier
.width(24.dp)
.height(24.dp),
onClick = onClick
) {
Icon(
painter = painterResource(id = net.gini.android.capture.R.drawable.gc_action_bar_back),
contentDescription = null,
)
}
}
}

@Composable
private fun NavigationActionBack(
private fun NavigationActionHelp(
onClick: () -> Unit,
modifier: Modifier = Modifier,
) {
IconButton(
modifier = modifier
.width(24.dp)
.height(24.dp),
onClick = onClick
) {
Icon(
painter = painterResource(id = net.gini.android.capture.R.drawable.gc_action_bar_back),
contentDescription = null,
GiniTooltipBox(
tooltipText = stringResource(
id = R.string.gbs_skonto_screen_content_description_help
)
) {
IconButton(
modifier = modifier
.width(24.dp)
.height(24.dp),
onClick = onClick
) {
Icon(
painter = painterResource(R.drawable.gbs_help_question_icon),
contentDescription = stringResource(
id = R.string.gbs_skonto_screen_content_description_help
),
)
}
}
}

Expand Down Expand Up @@ -1076,7 +1091,7 @@ private fun ScreenReadyStatePreview() {
onFullAmountChange = {},
onBackClicked = {},
onHelpClicked = {},
isBottomNavigationBarEnabled = true,
isBottomNavigationBarEnabled = false,
onProceedClicked = {},
customBottomNavBarAdapter = null,
onInfoDialogDismissed = {},
Expand Down Expand Up @@ -1104,5 +1119,5 @@ private fun previewState() = SkontoFragmentContract.State.Ready(
skontoEdgeCase = SkontoEdgeCase.PayByCashOnly,
edgeCaseInfoDialogVisible = false,
savedAmount = Amount.parse("3:EUR"),
transactionDialogVisible = true,
transactionDialogVisible = false,
)
Original file line number Diff line number Diff line change
Expand Up @@ -4,32 +4,38 @@ import android.graphics.Bitmap
import androidx.compose.animation.AnimatedVisibility
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.RowScope
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.lazy.items
import androidx.compose.material3.CircularProgressIndicator
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.collectAsState
import androidx.compose.runtime.getValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.asImageBitmap
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import net.gini.android.bank.sdk.R
import net.gini.android.bank.sdk.invoice.colors.InvoicePreviewScreenColors
import net.gini.android.bank.sdk.invoice.colors.section.InvoicePreviewScreenFooterColors
import net.gini.android.capture.ui.components.list.ZoomableLazyColumn
import net.gini.android.capture.ui.components.tooltip.GiniTooltipBox
import net.gini.android.capture.ui.components.topbar.GiniTopBar
import net.gini.android.capture.ui.theme.GiniTheme

Expand Down Expand Up @@ -98,12 +104,10 @@ internal fun InvoiceScreenContent(
title = screenTitle,
colors = colors.topBarColors,
navigationIcon = {
Icon(
NavigationActionBack(
modifier = Modifier
.clickable(onClick = onCloseClicked)
.padding(start = 16.dp, end = 32.dp),
painter = painterResource(id = net.gini.android.capture.R.drawable.gc_close),
contentDescription = null,
onClick = onCloseClicked,
tint = colors.topBarColors.navigationContentColor
)
},
Expand All @@ -119,6 +123,31 @@ internal fun InvoiceScreenContent(
}
}

@Composable
private fun NavigationActionBack(
onClick: () -> Unit,
tint: Color,
modifier: Modifier = Modifier,
) {
GiniTooltipBox(
tooltipText = stringResource(
id = R.string.gbs_skonto_screen_content_description_close
)
) {
IconButton(
modifier = modifier
.width(24.dp)
.height(24.dp),
onClick = onClick
) {
Icon(
painter = painterResource(id = net.gini.android.capture.R.drawable.gc_action_bar_back),
contentDescription = null,
tint = tint
)
}
}
}

@Composable
private fun Footer(
Expand Down
3 changes: 3 additions & 0 deletions bank-sdk/sdk/src/main/res/values-en/strings.xml
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,8 @@
<string name="gbs_articles">Articles</string>
<!-- region Skonto -->
<string name="gbs_skonto_screen_title">Skonto discount</string>
<string name="gbs_skonto_screen_content_description_close">Close</string>
<string name="gbs_skonto_screen_content_description_help">Help</string>
<!-- region Section Invoice Scan -->
<string name="gbs_skonto_section_invoice_preview_title">Invoice</string>
<string name="gbs_skonto_invoice_section_preview_subtitle">Tap to view</string>
Expand Down Expand Up @@ -85,6 +87,7 @@
<string name="gbs_skonto_help_footer_text">Take a photo of your invoice and the app will automatically calculate the Skonto discount. Just review the details, confirm, and enjoy the savings!</string>
<!-- endregion -->
<!-- region Skonto Invoice Preview -->
<string name="gbs_skonto_invoice_preview_content_description_close">Close</string>
<string name="gbs_skonto_invoice_preview_title">Skonto discount details</string>
<string name="gbs_skonto_invoice_preview_expire_date">Expiry date: %1$s</string>
<string name="gbs_skonto_invoice_preview_final_amount">Final amount: %1$s</string>
Expand Down
3 changes: 3 additions & 0 deletions bank-sdk/sdk/src/main/res/values/strings.xml
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,8 @@
<string name="gbs_articles">Artikel</string>
<!-- region Skonto -->
<string name="gbs_skonto_screen_title">Skonto</string>
<string name="gbs_skonto_screen_content_description_close">Schließen</string>
<string name="gbs_skonto_screen_content_description_help">Hilfe</string>
<!-- region Section Invoice Scan -->
<string name="gbs_skonto_section_invoice_preview_title">Rechnung</string>
<string name="gbs_skonto_invoice_section_preview_subtitle">Zur Ansicht hier tippen</string>
Expand Down Expand Up @@ -85,6 +87,7 @@
<string name="gbs_skonto_help_footer_text">Machen Sie einfach ein Foto der Rechnung und die App erkennt automatisch die Rabatte. Überprüfen Sie die Details, bestätigen Sie und sparen Sie mit den Rabatten!</string>
<!-- endregion -->
<!-- region Skonto Invoice Preview -->
<string name="gbs_skonto_invoice_preview_content_description_close">Schließen</string>
<string name="gbs_skonto_invoice_preview_title">Skonto-Details</string>
<string name="gbs_skonto_invoice_preview_expire_date">Ablaufdatum Skonto: %1$s</string>
<string name="gbs_skonto_invoice_preview_final_amount">Betrag nach Abzug: %1$s</string>
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
@file:OptIn(ExperimentalMaterial3Api::class)

package net.gini.android.capture.ui.components.tooltip

import androidx.compose.foundation.layout.padding
import androidx.compose.material3.CaretProperties
import androidx.compose.material3.CaretScope
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.PlainTooltip
import androidx.compose.material3.Text
import androidx.compose.material3.TooltipBox
import androidx.compose.material3.TooltipDefaults
import androidx.compose.material3.rememberTooltipState
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import net.gini.android.capture.ui.theme.GiniTheme

@Composable
fun GiniTooltipBox(
tooltipText: String,
modifier: Modifier = Modifier,
colors: GiniTooltipBoxColors = GiniTooltipBoxColors.contentDescriptionColors(),
content: @Composable () -> Unit,
) {
TooltipBox(
modifier = modifier,
positionProvider = TooltipDefaults.rememberPlainTooltipPositionProvider(8.dp),
tooltip = {
GiniPlainTooltip(
containerColor = colors.containerColor,
contentColor = colors.contentColor,
) {
Text(
modifier = Modifier.padding(horizontal = 4.dp, vertical = 4.dp),
text = tooltipText,
style = GiniTheme.typography.body1
)
}
},
state = rememberTooltipState(),
content = content,
)
}

@Composable
private fun CaretScope.GiniPlainTooltip(
modifier: Modifier = Modifier,
caretProperties: (CaretProperties)? = null,
contentColor: Color,
containerColor: Color,
content: @Composable () -> Unit
) {
PlainTooltip(
modifier = modifier,
caretProperties = caretProperties,
contentColor = contentColor,
containerColor = containerColor,
content = content
)
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
package net.gini.android.capture.ui.components.tooltip

import androidx.compose.foundation.isSystemInDarkTheme
import androidx.compose.runtime.Composable
import androidx.compose.runtime.Immutable
import androidx.compose.ui.graphics.Color

@Immutable
data class GiniTooltipBoxColors(
val containerColor: Color,
val contentColor: Color,
) {
companion object {

@Composable
fun contentDescriptionColors(
containerColor: Color = getContentDescriptionContainerColors(),
contentColor: Color = getContentDescriptionContentColors(),
) = GiniTooltipBoxColors(
containerColor = containerColor,
contentColor = contentColor,
)

@Composable
private fun getContentDescriptionContainerColors() =
if (isSystemInDarkTheme()) Color.White.copy(alpha = 0.9f) else Color.Black

@Composable
private fun getContentDescriptionContentColors() =
if (isSystemInDarkTheme()) Color.Black.copy(alpha = 0.9f) else Color.White
}
}

0 comments on commit cd6985a

Please sign in to comment.