Added button to close FilterBar

This commit is contained in:
dankito 2024-09-26 04:33:45 +02:00
parent 51fe6d621d
commit 6ac2faf207
4 changed files with 34 additions and 16 deletions

View File

@ -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!)")
}
}
}
}

View File

@ -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)
}
}

View File

@ -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)
}
}

View File

@ -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)
}
}