From 6ac2faf2077404c74acd251a1c91f45ae5ad0f3a Mon Sep 17 00:00:00 2001 From: dankito Date: Thu, 26 Sep 2024 04:33:45 +0200 Subject: [PATCH] Added button to close FilterBar --- .../banking/ui/appskeleton/FilterBar.kt | 13 ++++++----- .../banking/ui/composables/CloseButton.kt | 22 +++++++++++++++++++ .../codinux/banking/ui/dialogs/BaseDialog.kt | 8 ++----- .../banking/ui/screens/FullscreenViewBase.kt | 7 ++---- 4 files changed, 34 insertions(+), 16 deletions(-) create mode 100644 composeApp/src/commonMain/kotlin/net/codinux/banking/ui/composables/CloseButton.kt diff --git a/composeApp/src/commonMain/kotlin/net/codinux/banking/ui/appskeleton/FilterBar.kt b/composeApp/src/commonMain/kotlin/net/codinux/banking/ui/appskeleton/FilterBar.kt index 08d07fd..f1fd9d3 100644 --- a/composeApp/src/commonMain/kotlin/net/codinux/banking/ui/appskeleton/FilterBar.kt +++ b/composeApp/src/commonMain/kotlin/net/codinux/banking/ui/appskeleton/FilterBar.kt @@ -14,6 +14,7 @@ import androidx.compose.ui.graphics.Color import androidx.compose.ui.input.key.* import androidx.compose.ui.unit.dp import androidx.compose.ui.zIndex +import net.codinux.banking.ui.composables.CloseButton import net.codinux.banking.ui.config.DI import net.codinux.banking.ui.config.Internationalization import net.codinux.banking.ui.forms.RoundedCornersCard @@ -58,9 +59,15 @@ fun FilterBar() { } } ) { - Column(Modifier.height(230.dp).width(390.dp)) { + Column(Modifier.height(190.dp).width(390.dp)) { RoundedCornersCard(cornerSize = 4.dp, shadowElevation = 24.dp) { Column(Modifier.fillMaxWidth().background(Color.White).padding(16.dp)) { + Row(Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.End, verticalAlignment = Alignment.CenterVertically) { + CloseButton("Filterbar schließen", size = 24.dp) { + uiState.showFilterBar.value = false + } + } + Row(Modifier.fillMaxWidth(), verticalAlignment = Alignment.CenterVertically) { Text("Umsätze", Modifier.width(labelsWidth)) @@ -97,10 +104,6 @@ fun FilterBar() { ) } } - - Row(Modifier.padding(top = 10.dp)) { - Text("Zum Schließen bitte wieder auf das Filter Icon klicken, Zurück Button etc. funtioniert nicht (herzlichen Undank UI Framework!)") - } } } } diff --git a/composeApp/src/commonMain/kotlin/net/codinux/banking/ui/composables/CloseButton.kt b/composeApp/src/commonMain/kotlin/net/codinux/banking/ui/composables/CloseButton.kt new file mode 100644 index 0000000..d3a9254 --- /dev/null +++ b/composeApp/src/commonMain/kotlin/net/codinux/banking/ui/composables/CloseButton.kt @@ -0,0 +1,22 @@ +package net.codinux.banking.ui.composables + +import androidx.compose.foundation.layout.PaddingValues +import androidx.compose.foundation.layout.size +import androidx.compose.material.ButtonDefaults +import androidx.compose.material.Icon +import androidx.compose.material.TextButton +import androidx.compose.material.icons.Icons +import androidx.compose.material.icons.filled.Close +import androidx.compose.runtime.Composable +import androidx.compose.ui.Modifier +import androidx.compose.ui.graphics.Color +import androidx.compose.ui.unit.Dp +import androidx.compose.ui.unit.dp +import net.codinux.banking.ui.config.Style + +@Composable +fun CloseButton(contentDescription: String = "Dialog schließen", color: Color = Style.ListItemHeaderTextColor, size: Dp = 32.dp, onClick: () -> Unit) { + TextButton(onClick, colors = ButtonDefaults.buttonColors(backgroundColor = Color.Transparent), contentPadding = PaddingValues(0.dp), modifier = Modifier.size(size)) { + Icon(Icons.Filled.Close, contentDescription = contentDescription, Modifier.size(size), tint = color) + } +} \ No newline at end of file diff --git a/composeApp/src/commonMain/kotlin/net/codinux/banking/ui/dialogs/BaseDialog.kt b/composeApp/src/commonMain/kotlin/net/codinux/banking/ui/dialogs/BaseDialog.kt index 3778336..8f23510 100644 --- a/composeApp/src/commonMain/kotlin/net/codinux/banking/ui/dialogs/BaseDialog.kt +++ b/composeApp/src/commonMain/kotlin/net/codinux/banking/ui/dialogs/BaseDialog.kt @@ -3,8 +3,6 @@ package net.codinux.banking.ui.dialogs import androidx.compose.foundation.background import androidx.compose.foundation.layout.* import androidx.compose.material.* -import androidx.compose.material.icons.Icons -import androidx.compose.material.icons.filled.Close import androidx.compose.runtime.Composable import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier @@ -42,10 +40,8 @@ fun BaseDialog( Row(Modifier.fillMaxWidth()) { HeaderText(title, Modifier.fillMaxWidth().padding(top = 8.dp, bottom = 16.dp).weight(1f), textAlign = if (centerTitle) TextAlign.Center else TextAlign.Start) - if (DI.platform.isDesktop) { - TextButton(onDismiss, colors = ButtonDefaults.buttonColors(contentColor = Colors.Zinc700, backgroundColor = Color.Transparent)) { - Icon(Icons.Filled.Close, contentDescription = "Close dialog", Modifier.size(32.dp)) - } + if (DI.platform.type != PlatformType.Android) { // for iOS it's also relevant due to the missing back gesture / back button + CloseButton(onClick = onDismiss) } } diff --git a/composeApp/src/commonMain/kotlin/net/codinux/banking/ui/screens/FullscreenViewBase.kt b/composeApp/src/commonMain/kotlin/net/codinux/banking/ui/screens/FullscreenViewBase.kt index 2890069..36a11a9 100644 --- a/composeApp/src/commonMain/kotlin/net/codinux/banking/ui/screens/FullscreenViewBase.kt +++ b/composeApp/src/commonMain/kotlin/net/codinux/banking/ui/screens/FullscreenViewBase.kt @@ -3,8 +3,6 @@ package net.codinux.banking.ui.screens import androidx.compose.foundation.background import androidx.compose.foundation.layout.* import androidx.compose.material.* -import androidx.compose.material.icons.Icons -import androidx.compose.material.icons.filled.Close import androidx.compose.runtime.Composable import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Color @@ -14,6 +12,7 @@ import androidx.compose.ui.window.Dialog import androidx.compose.ui.window.DialogProperties import androidx.compose.ui.zIndex import net.codinux.banking.ui.PlatformType +import net.codinux.banking.ui.composables.CloseButton import net.codinux.banking.ui.composables.text.HeaderText import net.codinux.banking.ui.config.Colors import net.codinux.banking.ui.config.DI @@ -52,9 +51,7 @@ fun FullscreenViewBase( HeaderText(title, Modifier.padding(top = 8.dp, bottom = 16.dp).weight(1f), textColor = Style.ListItemHeaderTextColor) if (DI.platform.type != PlatformType.Android) { // for iOS it's also relevant due to the missing back gesture / back button - TextButton(onClosed, colors = ButtonDefaults.buttonColors(contentColor = Colors.Zinc700, backgroundColor = Color.Transparent)) { - Icon(Icons.Filled.Close, contentDescription = "Close dialog", Modifier.size(32.dp)) - } + CloseButton(onClick = onClosed) } }