diff --git a/composeApp/src/commonMain/kotlin/net/codinux/banking/ui/composables/tan/ImageSizeControls.kt b/composeApp/src/commonMain/kotlin/net/codinux/banking/ui/composables/tan/ImageSizeControls.kt index 1f4b034..6a0f4b0 100644 --- a/composeApp/src/commonMain/kotlin/net/codinux/banking/ui/composables/tan/ImageSizeControls.kt +++ b/composeApp/src/commonMain/kotlin/net/codinux/banking/ui/composables/tan/ImageSizeControls.kt @@ -15,7 +15,7 @@ import androidx.compose.ui.unit.dp fun ImageSizeControls(decreaseEnabled: Boolean, increaseEnabled: Boolean, textColor: Color = Color.Black, onDecreaseImageSize: () -> Unit, onIncreaseImageSize: () -> Unit) { Row(verticalAlignment = Alignment.CenterVertically) { - Text("Größe", color = textColor) + Text("Größe", color = textColor, modifier = Modifier.padding(end = 6.dp)) TextButton({ onDecreaseImageSize() }, enabled = decreaseEnabled, modifier = Modifier.width(48.dp), colors = ButtonDefaults.buttonColors(backgroundColor = Color.Transparent)) { Icon(Icons.Filled.ZoomOut, contentDescription = "Bild verkleinern", Modifier.size(28.dp), tint = textColor) diff --git a/composeApp/src/commonMain/kotlin/net/codinux/banking/ui/composables/tan/ImageView.kt b/composeApp/src/commonMain/kotlin/net/codinux/banking/ui/composables/tan/ImageView.kt new file mode 100644 index 0000000..2e2c157 --- /dev/null +++ b/composeApp/src/commonMain/kotlin/net/codinux/banking/ui/composables/tan/ImageView.kt @@ -0,0 +1,41 @@ +package net.codinux.banking.ui.composables.tan + +import androidx.compose.foundation.Image +import androidx.compose.foundation.layout.* +import androidx.compose.runtime.* +import androidx.compose.ui.Alignment +import androidx.compose.ui.Modifier +import androidx.compose.ui.graphics.Color +import androidx.compose.ui.layout.ContentScale +import androidx.compose.ui.unit.dp +import net.codinux.banking.ui.config.Colors +import net.codinux.banking.ui.service.createImageBitmap + +@Composable +fun ImageView( + imageBytes: ByteArray, + contentDescription: String, + initialImageHeight: Int = 300, + minImageHeight: Int = 0, + maxImageHeight: Int? = null, + changeImageSizeStep: Int = 25, + textColor: Color = Colors.MaterialThemeTextColor, +) { + + var imageHeight by remember { mutableStateOf(initialImageHeight) } + + + fun changeImageSize(by: Int) { + imageHeight += by + } + + + Row(Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.Center, verticalAlignment = Alignment.CenterVertically) { + ImageSizeControls(imageHeight > minImageHeight, maxImageHeight == null || imageHeight < maxImageHeight, textColor, { changeImageSize(-changeImageSizeStep) }) { changeImageSize(changeImageSizeStep) } + } + + Row(Modifier.fillMaxWidth().padding(top = 6.dp), horizontalArrangement = Arrangement.Center, verticalAlignment = Alignment.CenterVertically) { + Image(createImageBitmap(imageBytes), contentDescription, Modifier.height(imageHeight.dp), contentScale = ContentScale.FillHeight) + } + +} \ No newline at end of file diff --git a/composeApp/src/commonMain/kotlin/net/codinux/banking/ui/dialogs/EnterTanDialog.kt b/composeApp/src/commonMain/kotlin/net/codinux/banking/ui/dialogs/EnterTanDialog.kt index c4522c9..ec250b2 100644 --- a/composeApp/src/commonMain/kotlin/net/codinux/banking/ui/dialogs/EnterTanDialog.kt +++ b/composeApp/src/commonMain/kotlin/net/codinux/banking/ui/dialogs/EnterTanDialog.kt @@ -1,33 +1,34 @@ package net.codinux.banking.ui.dialogs -import androidx.compose.foundation.Image import androidx.compose.foundation.layout.* import androidx.compose.foundation.text.KeyboardOptions -import androidx.compose.material.* +import androidx.compose.material.MaterialTheme +import androidx.compose.material.Text import androidx.compose.runtime.* import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.focus.FocusRequester import androidx.compose.ui.focus.focusRequester -import androidx.compose.ui.layout.ContentScale import androidx.compose.ui.text.font.FontWeight import androidx.compose.ui.text.input.KeyboardType import androidx.compose.ui.unit.dp import kotlinx.datetime.TimeZone import kotlinx.datetime.toLocalDateTime -import net.codinux.banking.client.model.tan.* +import net.codinux.banking.client.model.tan.ActionRequiringTan +import net.codinux.banking.client.model.tan.AllowedTanFormat +import net.codinux.banking.client.model.tan.EnterTanResult import net.codinux.banking.ui.composables.BankIcon import net.codinux.banking.ui.composables.tan.ChipTanFlickerCodeView -import net.codinux.banking.ui.composables.tan.ImageSizeControls -import net.codinux.banking.ui.config.* +import net.codinux.banking.ui.composables.tan.ImageView import net.codinux.banking.ui.config.Colors +import net.codinux.banking.ui.config.DI +import net.codinux.banking.ui.config.Internationalization import net.codinux.banking.ui.forms.CaptionText import net.codinux.banking.ui.forms.OutlinedTextField import net.codinux.banking.ui.forms.Select import net.codinux.banking.ui.model.Config.NewLine import net.codinux.banking.ui.model.TanChallengeReceived import net.codinux.banking.ui.model.error.ErroneousAction -import net.codinux.banking.ui.service.createImageBitmap import kotlin.io.encoding.Base64 import kotlin.io.encoding.ExperimentalEncodingApi @@ -41,10 +42,6 @@ fun EnterTanDialog(tanChallengeReceived: TanChallengeReceived, onDismiss: () -> val isNotADecoupledTanMethod = !!!isDecoupledMethod - var tanImageHeight by remember { mutableStateOf(250) } - val minTanImageHeight = 100 - val maxTanImageHeight = 500 - var showSelectingTanMediumNotImplementedWarning by remember { mutableStateOf(false) } val textFieldFocus = remember { FocusRequester() } @@ -150,13 +147,7 @@ fun EnterTanDialog(tanChallengeReceived: TanChallengeReceived, onDismiss: () -> tanImage.imageBytesBase64?.let { imageBytesBase64 -> val imageBytes = Base64.decode(imageBytesBase64) - Row(Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.Center, verticalAlignment = Alignment.CenterVertically) { - ImageSizeControls(tanImageHeight > minTanImageHeight, tanImageHeight < maxTanImageHeight, textColor, { tanImageHeight -= 25 }) { tanImageHeight += 25 } - } - - Row(Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.Center, verticalAlignment = Alignment.CenterVertically) { - Image(createImageBitmap(imageBytes), "Bild mit enkodierter TAN", Modifier.height(tanImageHeight.dp), contentScale = ContentScale.FillHeight) - } + ImageView(imageBytes, "Bild mit enkodierter TAN", 250, 100, 500, textColor = textColor) } } } diff --git a/composeApp/src/commonMain/kotlin/net/codinux/banking/ui/screens/CreateEpcQrCodeScreen.kt b/composeApp/src/commonMain/kotlin/net/codinux/banking/ui/screens/CreateEpcQrCodeScreen.kt index 399968d..57f476f 100644 --- a/composeApp/src/commonMain/kotlin/net/codinux/banking/ui/screens/CreateEpcQrCodeScreen.kt +++ b/composeApp/src/commonMain/kotlin/net/codinux/banking/ui/screens/CreateEpcQrCodeScreen.kt @@ -1,6 +1,5 @@ package net.codinux.banking.ui.screens -import androidx.compose.foundation.Image import androidx.compose.foundation.layout.* import androidx.compose.foundation.text.KeyboardOptions import androidx.compose.material.MaterialTheme @@ -10,13 +9,11 @@ import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.focus.FocusRequester import androidx.compose.ui.focus.focusRequester -import androidx.compose.ui.layout.ContentScale import androidx.compose.ui.text.style.TextAlign import androidx.compose.ui.unit.dp import net.codinux.banking.persistence.entities.BankAccountEntity import net.codinux.banking.ui.composables.BankIcon -import net.codinux.banking.ui.composables.tan.ImageSizeControls -import net.codinux.banking.ui.config.Colors +import net.codinux.banking.ui.composables.tan.ImageView import net.codinux.banking.ui.config.DI import net.codinux.banking.ui.extensions.ImeNext import net.codinux.banking.ui.extensions.rememberVerticalScroll @@ -24,7 +21,6 @@ import net.codinux.banking.ui.forms.CaptionText import net.codinux.banking.ui.forms.OutlinedTextField import net.codinux.banking.ui.forms.Select import net.codinux.banking.ui.model.Config.NewLine -import net.codinux.banking.ui.service.createImageBitmap import net.codinux.log.Log private val epcQrCodeService = DI.epcQrCodeService @@ -81,10 +77,6 @@ fun CreateEpcQrCodeScreen(onClosed: () -> Unit) { } } - var imageHeight by remember { mutableStateOf(350) } - val minImageHeight = 100 - val maxImageHeight = 700 - FullscreenViewBase("EPC QR Code erstellen", "Schließen", onClosed = onClosed) { Column(Modifier.fillMaxWidth().rememberVerticalScroll()) { @@ -94,15 +86,9 @@ fun CreateEpcQrCodeScreen(onClosed: () -> Unit) { Text("Mit EPC QR Codes, welche als GiroCode, scan2code, ... vermarktet werden, können Überweisungsdaten ganz einfach von Banking Apps eingelesen werden.") Text("Hier können Sie Ihren eigenen erstellen, so dass jemand Ihre Überweisungsdaten einlesen und Ihnen ganz schnell Geld überweisen kann.") } else { - Row(Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.Center, verticalAlignment = Alignment.CenterVertically) { - ImageSizeControls(imageHeight > minImageHeight, imageHeight < maxImageHeight, Colors.MaterialThemeTextColor, { imageHeight -= 25 }) { imageHeight += 25 } - } + ImageView(epcQrCodeBytes!!, "Erzeugter EPC QR Code", 350, 100, 700) - Row(Modifier.fillMaxWidth().padding(bottom = 8.dp), horizontalArrangement = Arrangement.Center, verticalAlignment = Alignment.CenterVertically) { - Image(createImageBitmap(epcQrCodeBytes!!), "Erzeugter EPC QR Code", Modifier.height(imageHeight.dp), contentScale = ContentScale.FillHeight) - } - - Row(Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.Center) { + Row(Modifier.fillMaxWidth().padding(top = 8.dp), horizontalArrangement = Arrangement.Center) { Text("Scannen Sie diesen Code auf einem anderen Gerät mit einer Banking App, z. B. Bankmeister", textAlign = TextAlign.Center, modifier = Modifier.padding(horizontal = 16.dp).padding(top = 8.dp)) } }