From 323f79d9847b8a61274b33318c06b50b0157f19c Mon Sep 17 00:00:00 2001 From: Ramsey Smith <142836716+ramsey-livefront@users.noreply.github.com> Date: Thu, 28 Mar 2024 14:07:20 -0600 Subject: [PATCH] BIT-1989-settings-about-dialog-landscape-error (#1180) --- .../dialog/BitwardenTwoButtonDialog.kt | 120 ++++++++++++++---- .../components/util/DialogExtensions.kt | 15 +++ 2 files changed, 111 insertions(+), 24 deletions(-) diff --git a/app/src/main/java/com/x8bit/bitwarden/ui/platform/components/dialog/BitwardenTwoButtonDialog.kt b/app/src/main/java/com/x8bit/bitwarden/ui/platform/components/dialog/BitwardenTwoButtonDialog.kt index 3f7e2f48e..f779a4775 100644 --- a/app/src/main/java/com/x8bit/bitwarden/ui/platform/components/dialog/BitwardenTwoButtonDialog.kt +++ b/app/src/main/java/com/x8bit/bitwarden/ui/platform/components/dialog/BitwardenTwoButtonDialog.kt @@ -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, - ) - }, - confirmButton = { - BitwardenTextButton( - label = confirmButtonText, - labelTextColor = confirmTextColor, - onClick = onConfirmClick, - ) - }, - title = title?.let { - { + properties = DialogProperties(usePlatformDefaultWidth = false), + ) { + val configuration = LocalConfiguration.current + val scrollState = rememberScrollState() + Column( + modifier = Modifier + .requiredHeightIn( + max = configuration.maxDialogHeight, + ) + .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( - text = it, + 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 = { Text( + modifier = Modifier + .weight(1f, fill = false) + .verticalScroll(scrollState) + .padding(horizontal = 24.dp) + .fillMaxWidth(), text = message, + color = MaterialTheme.colorScheme.onSurface, style = MaterialTheme.typography.bodyMedium, ) - }, - containerColor = MaterialTheme.colorScheme.surfaceContainerHigh, - ) + 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, + ) + BitwardenTextButton( + modifier = Modifier.padding(horizontal = 4.dp), + label = dismissButtonText, + labelTextColor = dismissTextColor, + onClick = onDismissClick, + ) + } + Spacer(modifier = Modifier.height(24.dp)) + } + } } diff --git a/app/src/main/java/com/x8bit/bitwarden/ui/platform/components/util/DialogExtensions.kt b/app/src/main/java/com/x8bit/bitwarden/ui/platform/components/util/DialogExtensions.kt index 5fbe36031..f1ba50fe0 100644 --- a/app/src/main/java/com/x8bit/bitwarden/ui/platform/components/util/DialogExtensions.kt +++ b/app/src/main/java/com/x8bit/bitwarden/ui/platform/components/util/DialogExtensions.kt @@ -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 + }