diff --git a/composeApp/src/commonMain/kotlin/net/codinux/banking/ui/composables/tan/ChipTanFlickerCodeView.kt b/composeApp/src/commonMain/kotlin/net/codinux/banking/ui/composables/tan/ChipTanFlickerCodeView.kt index 6d9ffdc..c1b9d9a 100644 --- a/composeApp/src/commonMain/kotlin/net/codinux/banking/ui/composables/tan/ChipTanFlickerCodeView.kt +++ b/composeApp/src/commonMain/kotlin/net/codinux/banking/ui/composables/tan/ChipTanFlickerCodeView.kt @@ -2,11 +2,11 @@ package net.codinux.banking.ui.composables.tan import androidx.compose.foundation.background import androidx.compose.foundation.layout.* -import androidx.compose.material.Icon -import androidx.compose.material.IconButton +import androidx.compose.material.* import androidx.compose.material.icons.Icons -import androidx.compose.material.icons.filled.Pause -import androidx.compose.material.icons.filled.PlayArrow +import androidx.compose.material.icons.automirrored.filled.DirectionsRun +import androidx.compose.material.icons.automirrored.filled.DirectionsWalk +import androidx.compose.material.icons.filled.* import androidx.compose.runtime.* import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier @@ -27,7 +27,7 @@ private val SpaceBetweenStripesStepSize = 1.dp @Composable -fun ChipTanFlickerCodeView(flickerCode: FlickerCode) { +fun ChipTanFlickerCodeView(flickerCode: FlickerCode, textColor: Color = Color.Black) { val animator = remember { FlickerCodeAnimator() } @@ -68,6 +68,25 @@ fun ChipTanFlickerCodeView(flickerCode: FlickerCode) { ) } + + fun setFrequency(newFrequency: Int) { + frequency = newFrequency + + animator.setFrequency(newFrequency) + } + + fun decreaseFrequency() { + if (frequency - FrequencyStepSize >= FlickerCodeAnimator.MinFrequency) { + setFrequency(frequency - FrequencyStepSize) + } + } + + fun increaseFrequency() { + if (frequency + FrequencyStepSize <= FlickerCodeAnimator.MaxFrequency) { + setFrequency(frequency + FrequencyStepSize) + } + } + fun toggleIsPaused() { isPaused = !isPaused @@ -81,15 +100,25 @@ fun ChipTanFlickerCodeView(flickerCode: FlickerCode) { Column(Modifier.fillMaxWidth()) { Row(Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.Center, verticalAlignment = Alignment.CenterVertically) { - ImageSizeControls(true, true, { decreaseSize() }, { increaseSize() }) + ImageSizeControls(true, true, textColor, { decreaseSize() }, { increaseSize() }) Spacer(Modifier.width(16.dp)) + Text("Geschw.", color = textColor) + + IconButton({ decreaseFrequency() }, enabled = frequency - FrequencyStepSize > 0) { + Icon(Icons.AutoMirrored.Filled.DirectionsWalk, contentDescription = "Frequenz verkleinern", Modifier.size(28.dp), tint = textColor) + } + + IconButton({ increaseFrequency() }, enabled = frequency - FrequencyStepSize > 0) { + Icon(Icons.AutoMirrored.Filled.DirectionsRun, contentDescription = "Frequenz vergrößern", Modifier.size(28.dp), tint = textColor) + } + IconButton({ toggleIsPaused() }) { if (isPaused) { - Icon(Icons.Filled.PlayArrow, "FlickerCode Animation wieder starten") + Icon(Icons.Filled.PlayArrow, "FlickerCode Animation wieder starten", Modifier.size(28.dp), tint = textColor) } else { - Icon(Icons.Filled.Pause, "FlickerCode Animation pausieren") + Icon(Icons.Filled.Pause, "FlickerCode Animation pausieren", Modifier.size(28.dp), tint = textColor) } } } 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 da345bc..1f4b034 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 @@ -12,21 +12,17 @@ import androidx.compose.ui.graphics.Color import androidx.compose.ui.unit.dp @Composable -fun ImageSizeControls(decreaseEnabled: Boolean, increaseEnabled: Boolean, onDecreaseImageSize: () -> Unit, onIncreaseImageSize: () -> Unit) { +fun ImageSizeControls(decreaseEnabled: Boolean, increaseEnabled: Boolean, textColor: Color = Color.Black, onDecreaseImageSize: () -> Unit, onIncreaseImageSize: () -> Unit) { Row(verticalAlignment = Alignment.CenterVertically) { - Text("Größe") - - Spacer(Modifier.width(6.dp)) + Text("Größe", color = textColor) TextButton({ onDecreaseImageSize() }, enabled = decreaseEnabled, modifier = Modifier.width(48.dp), colors = ButtonDefaults.buttonColors(backgroundColor = Color.Transparent)) { - Icon(Icons.Filled.ZoomOut, contentDescription = "Bild verkleiner", Modifier.size(28.dp)) + Icon(Icons.Filled.ZoomOut, contentDescription = "Bild verkleinern", Modifier.size(28.dp), tint = textColor) } - Spacer(Modifier.width(6.dp)) - TextButton({ onIncreaseImageSize() }, enabled = increaseEnabled, modifier = Modifier.width(48.dp), colors = ButtonDefaults.buttonColors(backgroundColor = Color.Transparent)) { - Icon(Icons.Filled.ZoomIn, contentDescription = "Bild vergrößern", Modifier.size(28.dp)) + Icon(Icons.Filled.ZoomIn, contentDescription = "Bild vergrößern", Modifier.size(28.dp), tint = textColor) } } } \ 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 13450b7..cb95c36 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 @@ -9,6 +9,7 @@ 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.graphics.Color import androidx.compose.ui.layout.ContentScale import androidx.compose.ui.text.input.KeyboardType import androidx.compose.ui.unit.dp @@ -18,9 +19,8 @@ import net.codinux.banking.client.model.tan.* 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.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 @@ -135,8 +135,10 @@ fun EnterTanDialog(tanChallengeReceived: TanChallengeReceived, onDismiss: () -> if (challenge.tanImage != null || challenge.flickerCode != null) { Column(Modifier.fillMaxWidth().padding(top = 6.dp)) { + val textColor = Color(0xFF4F4F4F) // to match dialog's text color of Material theme + challenge.flickerCode?.let { flickerCode -> - ChipTanFlickerCodeView(flickerCode) + ChipTanFlickerCodeView(flickerCode, textColor) } challenge.tanImage?.let { tanImage -> @@ -144,7 +146,7 @@ fun EnterTanDialog(tanChallengeReceived: TanChallengeReceived, onDismiss: () -> val imageBytes = Base64.decode(tanImage.imageBytesBase64) Row(Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.Center, verticalAlignment = Alignment.CenterVertically) { - ImageSizeControls(tanImageHeight > minTanImageHeight, tanImageHeight < maxTanImageHeight, { tanImageHeight -= 25 }) { tanImageHeight += 25 } + ImageSizeControls(tanImageHeight > minTanImageHeight, tanImageHeight < maxTanImageHeight, textColor, { tanImageHeight -= 25 }) { tanImageHeight += 25 } } Row(Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.Center, verticalAlignment = Alignment.CenterVertically) {