BIT-1989-settings-about-dialog-landscape-error (#1180)

This commit is contained in:
Ramsey Smith 2024-03-28 14:07:20 -06:00 committed by Álison Fernandes
parent ed8dfa841e
commit 323f79d984
2 changed files with 111 additions and 24 deletions

View file

@ -1,11 +1,33 @@
package com.x8bit.bitwarden.ui.platform.components.dialog
import androidx.compose.material3.AlertDialog
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.ExperimentalLayoutApi
import androidx.compose.foundation.layout.FlowRow
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.requiredHeightIn
import androidx.compose.foundation.layout.requiredWidthIn
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.verticalScroll
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.LocalConfiguration
import androidx.compose.ui.unit.dp
import androidx.compose.ui.window.Dialog
import androidx.compose.ui.window.DialogProperties
import com.x8bit.bitwarden.ui.platform.components.button.BitwardenTextButton
import com.x8bit.bitwarden.ui.platform.components.util.maxDialogHeight
import com.x8bit.bitwarden.ui.platform.components.util.maxDialogWidth
/**
* Represents a Bitwarden-styled dialog with two buttons.
@ -21,7 +43,9 @@ import com.x8bit.bitwarden.ui.platform.components.button.BitwardenTextButton
* @param confirmTextColor The color of the confirm text.
* @param dismissTextColor The color of the dismiss text.
*/
@OptIn(ExperimentalLayoutApi::class)
@Composable
@Suppress("LongMethod")
fun BitwardenTwoButtonDialog(
title: String?,
message: String,
@ -33,36 +57,84 @@ fun BitwardenTwoButtonDialog(
confirmTextColor: Color? = null,
dismissTextColor: Color? = null,
) {
AlertDialog(
Dialog(
onDismissRequest = onDismissRequest,
dismissButton = {
BitwardenTextButton(
label = dismissButtonText,
labelTextColor = dismissTextColor,
onClick = onDismissClick,
properties = DialogProperties(usePlatformDefaultWidth = false),
) {
val configuration = LocalConfiguration.current
val scrollState = rememberScrollState()
Column(
modifier = Modifier
.requiredHeightIn(
max = configuration.maxDialogHeight,
)
},
confirmButton = {
.requiredWidthIn(
max = configuration.maxDialogWidth,
)
// This background is necessary for the dialog to not be transparent.
.background(
color = MaterialTheme.colorScheme.surfaceContainerHigh,
shape = RoundedCornerShape(28.dp),
),
horizontalAlignment = Alignment.End,
) {
title?.let {
Spacer(modifier = Modifier.height(24.dp))
Text(
modifier = Modifier
.padding(horizontal = 24.dp)
.fillMaxWidth(),
text = title,
color = MaterialTheme.colorScheme.onSurface,
style = MaterialTheme.typography.headlineSmall,
)
Spacer(modifier = Modifier.height(16.dp))
}
if (scrollState.canScrollBackward) {
Box(
modifier = Modifier
.fillMaxWidth()
.height(1.dp)
.background(MaterialTheme.colorScheme.outlineVariant),
)
}
Text(
modifier = Modifier
.weight(1f, fill = false)
.verticalScroll(scrollState)
.padding(horizontal = 24.dp)
.fillMaxWidth(),
text = message,
color = MaterialTheme.colorScheme.onSurface,
style = MaterialTheme.typography.bodyMedium,
)
if (scrollState.canScrollForward) {
Box(
modifier = Modifier
.fillMaxWidth()
.height(1.dp)
.background(MaterialTheme.colorScheme.outlineVariant),
)
}
Spacer(modifier = Modifier.height(12.dp))
FlowRow(
horizontalArrangement = Arrangement.End,
modifier = Modifier.padding(horizontal = 8.dp),
) {
BitwardenTextButton(
modifier = Modifier.padding(horizontal = 4.dp),
label = confirmButtonText,
labelTextColor = confirmTextColor,
onClick = onConfirmClick,
)
},
title = title?.let {
{
Text(
text = it,
style = MaterialTheme.typography.headlineSmall,
BitwardenTextButton(
modifier = Modifier.padding(horizontal = 4.dp),
label = dismissButtonText,
labelTextColor = dismissTextColor,
onClick = onDismissClick,
)
}
},
text = {
Text(
text = message,
style = MaterialTheme.typography.bodyMedium,
)
},
containerColor = MaterialTheme.colorScheme.surfaceContainerHigh,
)
Spacer(modifier = Modifier.height(24.dp))
}
}
}

View file

@ -18,3 +18,18 @@ val Configuration.maxDialogHeight: Dp
else -> Dp.Unspecified
}
/**
* Provides the maximum width [Dp] common for all dialogs with a given [Configuration].
*/
val Configuration.maxDialogWidth: Dp
get() = when (orientation) {
Configuration.ORIENTATION_LANDSCAPE -> 542.dp
Configuration.ORIENTATION_PORTRAIT -> 312.dp
Configuration.ORIENTATION_UNDEFINED -> Dp.Unspecified
@Suppress("DEPRECATION")
Configuration.ORIENTATION_SQUARE,
-> Dp.Unspecified
else -> Dp.Unspecified
}