Skip to content

Commit

Permalink
Add smaller screens support for transaction editor screen
Browse files Browse the repository at this point in the history
  • Loading branch information
@AleksandarIlic
AleksandarIlic committed Feb 20, 2024
1 parent a67fb64 commit b26096b
Show file tree
Hide file tree
Showing 6 changed files with 154 additions and 29 deletions.
4 changes: 4 additions & 0 deletions app/detekt-baseline.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,8 @@
<ID>CyclomaticComplexMethod:ProfileDetailsScreen.kt$@Composable private fun ErrorHandler(error: ProfileError?, snackbarHostState: SnackbarHostState)</ID>
<ID>CyclomaticComplexMethod:ProfileDetailsScreen.kt$@Suppress("MagicNumber") @OptIn(ExperimentalFoundationApi::class, ExperimentalMaterial3Api::class) @Composable fun ProfileDetailsScreen( state: ProfileDetailsContract.UiState, onClose: () -&gt; Unit, onPostClick: (String) -&gt; Unit, onPostReplyClick: (String) -&gt; Unit, onPostQuoteClick: (String) -&gt; Unit, onProfileClick: (String) -&gt; Unit, onEditProfileClick: () -&gt; Unit, onMessageClick: (String) -&gt; Unit, onZapProfileClick: (DraftTx) -&gt; Unit, onHashtagClick: (String) -&gt; Unit, onMediaClick: (String, String) -&gt; Unit, onGoToWallet: () -&gt; Unit, onFollowsClick: (String, ProfileFollowsType) -&gt; Unit, eventPublisher: (ProfileDetailsContract.UiEvent) -&gt; Unit, )</ID>
<ID>CyclomaticComplexMethod:ThreadScreen.kt$@OptIn(ExperimentalMaterial3Api::class) @Composable fun ThreadScreen( state: ThreadContract.UiState, onClose: () -&gt; Unit, onPostClick: (String) -&gt; Unit, onPostReplyClick: (String) -&gt; Unit, onPostQuoteClick: (String) -&gt; Unit, onProfileClick: (String) -&gt; Unit, onHashtagClick: (String) -&gt; Unit, onMediaClick: (String, String) -&gt; Unit, onGoToWallet: () -&gt; Unit, onReplyInNoteEditor: (String, Uri?, String) -&gt; Unit, eventPublisher: (ThreadContract.UiEvent) -&gt; Unit, )</ID>
<ID>CyclomaticComplexMethod:TransactionEditor.kt$@Composable private fun TransactionHeaderColumn( modifier: Modifier, uiMode: UiMode, state: CreateTransactionContract.UiState, keyboardVisible: Boolean, onAmountClick: () -&gt; Unit, )</ID>
<ID>CyclomaticComplexMethod:TransactionEditor.kt$@ExperimentalMaterial3Api @ExperimentalComposeUiApi @Composable fun TransactionEditor( modifier: Modifier, state: CreateTransactionContract.UiState, paddingValues: PaddingValues, eventPublisher: (CreateTransactionContract.UiEvent) -&gt; Unit, onCancelClick: () -&gt; Unit, )</ID>
<ID>CyclomaticComplexMethod:WalletDashboardScreen.kt$@OptIn(ExperimentalMaterial3Api::class, ExperimentalFoundationApi::class) @Composable fun WalletDashboardScreen( state: WalletDashboardContract.UiState, onPrimaryDestinationChanged: (PrimalTopLevelDestination) -&gt; Unit, onDrawerDestinationClick: (DrawerScreenDestination) -&gt; Unit, onWalletActivateClick: () -&gt; Unit, onProfileClick: (String) -&gt; Unit, onTransactionClick: (String) -&gt; Unit, onSendClick: () -&gt; Unit, onScanClick: () -&gt; Unit, onReceiveClick: () -&gt; Unit, eventPublisher: (UiEvent) -&gt; Unit, )</ID>
<ID>CyclomaticComplexMethod:WalletTransactionsMediator.kt$WalletTransactionsMediator$override suspend fun load(loadType: LoadType, state: PagingState&lt;Int, WalletTransaction&gt;): MediatorResult</ID>
<ID>DestructuringDeclarationWithTooManyEntries:PrimalDrawer.kt$val (avatarRef, usernameRef, iconRef, identifierRef, statsRef) = createRefs()</ID>
Expand Down Expand Up @@ -61,6 +63,8 @@
<ID>LongMethod:SendPaymentScreen.kt$@OptIn(ExperimentalMaterial3Api::class) @Composable fun SendPaymentScreen( state: SendPaymentContract.UiState, eventPublisher: (SendPaymentContract.UiEvent) -&gt; Unit, onClose: () -&gt; Unit, )</ID>
<ID>LongMethod:ThreadScreen.kt$@OptIn(ExperimentalComposeUiApi::class) @Composable fun ReplyToBottomBar( modifier: Modifier, publishingReply: Boolean, replyToAuthorName: String, replyToAuthorHandle: String, replyTextProvider: () -&gt; String, onPublishReplyClick: () -&gt; Unit, onReplyUpdated: (String) -&gt; Unit, onPhotoImported: (Uri) -&gt; Unit, onExpand: () -&gt; Unit, )</ID>
<ID>LongMethod:ThreadScreen.kt$@OptIn(ExperimentalMaterial3Api::class) @Composable fun ThreadScreen( state: ThreadContract.UiState, onClose: () -&gt; Unit, onPostClick: (String) -&gt; Unit, onPostReplyClick: (String) -&gt; Unit, onPostQuoteClick: (String) -&gt; Unit, onProfileClick: (String) -&gt; Unit, onHashtagClick: (String) -&gt; Unit, onMediaClick: (String, String) -&gt; Unit, onGoToWallet: () -&gt; Unit, onReplyInNoteEditor: (String, Uri?, String) -&gt; Unit, eventPublisher: (ThreadContract.UiEvent) -&gt; Unit, )</ID>
<ID>LongMethod:TransactionEditor.kt$@Composable private fun TransactionHeaderColumn( modifier: Modifier, uiMode: UiMode, state: CreateTransactionContract.UiState, keyboardVisible: Boolean, onAmountClick: () -&gt; Unit, )</ID>
<ID>LongMethod:TransactionEditor.kt$@ExperimentalMaterial3Api @ExperimentalComposeUiApi @Composable fun TransactionEditor( modifier: Modifier, state: CreateTransactionContract.UiState, paddingValues: PaddingValues, eventPublisher: (CreateTransactionContract.UiEvent) -&gt; Unit, onCancelClick: () -&gt; Unit, )</ID>
<ID>LongMethod:WalletActivationScreen.kt$@ExperimentalComposeUiApi @Composable private fun WalletActivationDataInput( data: WalletActivationData, working: Boolean, error: Throwable?, onErrorDismiss: () -&gt; Unit, onDataChanged: (WalletActivationData) -&gt; Unit, onActivationCodeRequest: (WalletActivationData) -&gt; Unit, isKeyboardVisible: Boolean, )</ID>
<ID>LongMethod:WalletActivationScreen.kt$@ExperimentalComposeUiApi @Composable private fun WalletCodeActivationInput( working: Boolean, error: Throwable?, email: String, onCodeChanged: () -&gt; Unit, onCodeConfirmation: (String) -&gt; Unit, isKeyboardVisible: Boolean, )</ID>
<ID>LongMethod:WalletDashboardScreen.kt$@OptIn(ExperimentalMaterial3Api::class, ExperimentalFoundationApi::class) @Composable fun WalletDashboardScreen( state: WalletDashboardContract.UiState, onPrimaryDestinationChanged: (PrimalTopLevelDestination) -&gt; Unit, onDrawerDestinationClick: (DrawerScreenDestination) -&gt; Unit, onWalletActivateClick: () -&gt; Unit, onProfileClick: (String) -&gt; Unit, onTransactionClick: (String) -&gt; Unit, onSendClick: () -&gt; Unit, onScanClick: () -&gt; Unit, onReceiveClick: () -&gt; Unit, eventPublisher: (UiEvent) -&gt; Unit, )</ID>
Expand Down
6 changes: 2 additions & 4 deletions ...main/kotlin/net/primal/android/wallet/transactions/send/create/CreateTransactionScreen.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@ package net.primal.android.wallet.transactions.send.create

import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.imePadding
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Scaffold
import androidx.compose.runtime.Composable
Expand Down Expand Up @@ -65,9 +64,8 @@ fun CreateTransactionScreen(
when (state.transaction.status) {
DraftTxStatus.Draft -> {
TransactionEditor(
modifier = Modifier
.fillMaxSize()
.padding(paddingValues),
modifier = Modifier.fillMaxSize(),
paddingValues = paddingValues,
state = state,
eventPublisher = eventPublisher,
onCancelClick = onClose,
Expand Down
164 changes: 140 additions & 24 deletions ...rc/main/kotlin/net/primal/android/wallet/transactions/send/create/ui/TransactionEditor.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,11 @@ import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.calculateEndPadding
import androidx.compose.foundation.layout.calculateStartPadding
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
Expand All @@ -36,11 +39,15 @@ import androidx.compose.ui.ExperimentalComposeUiApi
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.focus.onFocusChanged
import androidx.compose.ui.layout.onSizeChanged
import androidx.compose.ui.platform.LocalDensity
import androidx.compose.ui.platform.LocalLayoutDirection
import androidx.compose.ui.platform.LocalSoftwareKeyboardController
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.input.ImeAction
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import java.math.BigDecimal
Expand Down Expand Up @@ -70,6 +77,7 @@ import net.primal.android.wallet.utils.CurrencyConversionUtils.toSats
fun TransactionEditor(
modifier: Modifier,
state: CreateTransactionContract.UiState,
paddingValues: PaddingValues,
eventPublisher: (CreateTransactionContract.UiEvent) -> Unit,
onCancelClick: () -> Unit,
) {
Expand All @@ -89,14 +97,34 @@ fun TransactionEditor(
)
}

val density = LocalDensity.current
var uiMode by remember { mutableStateOf<UiMode?>(null) }

val layoutDirection = LocalLayoutDirection.current
Column(
modifier = modifier,
modifier = modifier
.padding(
top = paddingValues.calculateTopPadding(),
bottom = if (keyboardVisible) 8.dp else paddingValues.calculateBottomPadding(),
start = paddingValues.calculateStartPadding(layoutDirection),
end = paddingValues.calculateEndPadding(layoutDirection),
)
.onSizeChanged {
with(density) {
if (uiMode == null) {
uiMode = it.height
.toDp()
.toUiMode()
}
}
},
verticalArrangement = Arrangement.SpaceBetween,
horizontalAlignment = Alignment.CenterHorizontally,
) {
Column(horizontalAlignment = Alignment.CenterHorizontally) {
TransactionHeaderColumn(
modifier = Modifier.fillMaxWidth(),
uiMode = uiMode ?: UiMode.Normal,
state = state,
keyboardVisible = keyboardVisible,
onAmountClick = {
Expand Down Expand Up @@ -131,31 +159,51 @@ fun TransactionEditor(
}

var minAmountAlertVisible by remember { mutableStateOf(false) }
TransactionActionsRow(
state = state,
keyboardVisible = keyboardVisible,
isNumericPadOn = isNumericPadOn,
onCancelClick = onCancelClick,
onActionClick = {
if (isNumericPadOn) {
if (state.isTxSatisfiesMinAmount()) {
isNumericPadOn = false
eventPublisher(CreateTransactionContract.UiEvent.AmountApplied)
val actionsRowHidden = (uiMode == UiMode.Compact || uiMode == UiMode.Unsupported) && keyboardVisible
if (!actionsRowHidden) {
TransactionActionsRow(
state = state,
uiMode = uiMode ?: UiMode.Normal,
keyboardVisible = keyboardVisible,
isNumericPadOn = isNumericPadOn,
onCancelClick = onCancelClick,
onActionClick = {
if (isNumericPadOn) {
if (state.isTxSatisfiesMinAmount()) {
isNumericPadOn = false
eventPublisher(CreateTransactionContract.UiEvent.AmountApplied)
} else {
minAmountAlertVisible = true
}
} else {
minAmountAlertVisible = true
sendPayment()
}
} else {
sendPayment()
}
},
)
},
)
}

if (minAmountAlertVisible) {
MinTxAmountAlertDialog(onDismissRequest = { minAmountAlertVisible = false })
}
}
}

private enum class UiMode {
Normal,
Comfortable,
Compact,
Unsupported,
}

private fun Dp.toUiMode(): UiMode {
return when {
this > 730.dp -> UiMode.Normal
this < 730.dp && this > 680.dp -> UiMode.Comfortable
this < 680.dp && this > 580.dp -> UiMode.Compact
else -> UiMode.Unsupported
}
}

@ExperimentalMaterial3Api
@ExperimentalComposeUiApi
@Composable
Expand Down Expand Up @@ -221,6 +269,7 @@ private fun TransactionMainContent(
@Composable
private fun TransactionActionsRow(
state: CreateTransactionContract.UiState,
uiMode: UiMode,
keyboardVisible: Boolean,
isNumericPadOn: Boolean,
onCancelClick: () -> Unit,
Expand All @@ -229,7 +278,17 @@ private fun TransactionActionsRow(
Row(
modifier = Modifier
.fillMaxWidth(0.8f)
.padding(bottom = if (keyboardVisible) 0.dp else 32.dp),
.padding(
bottom = if (keyboardVisible) {
0.dp
} else {
when (uiMode) {
UiMode.Normal -> 32.dp
UiMode.Comfortable -> 8.dp
else -> 4.dp
}
},
),
horizontalArrangement = Arrangement.SpaceBetween,
) {
PrimalLoadingButton(
Expand Down Expand Up @@ -266,15 +325,60 @@ private fun TransactionActionsRow(
@Composable
private fun TransactionHeaderColumn(
modifier: Modifier,
uiMode: UiMode,
state: CreateTransactionContract.UiState,
keyboardVisible: Boolean,
onAmountClick: () -> Unit,
) {
val verticalPadding = animateDpAsState(targetValue = if (keyboardVisible) 4.dp else 16.dp, label = "verticalMargin")
val avatarSize = animateDpAsState(targetValue = if (keyboardVisible) 56.dp else 88.dp, label = "avatarSize")
val verticalPadding = animateDpAsState(
targetValue = if (keyboardVisible) {
4.dp
} else {
when (uiMode) {
UiMode.Normal, UiMode.Comfortable -> 16.dp
else -> 4.dp
}
},
label = "verticalMargin",
)
val avatarSize = animateDpAsState(
targetValue = if (keyboardVisible) {
when (uiMode) {
UiMode.Normal -> 64.dp
UiMode.Comfortable -> 48.dp
UiMode.Compact -> 40.dp
else -> 0.dp
}
} else {
88.dp
},
label = "avatarSize",
)
val iconSize = animateDpAsState(targetValue = if (keyboardVisible) 36.dp else 56.dp, label = "iconSize")
val headerSpacing = animateDpAsState(targetValue = if (keyboardVisible) 0.dp else 32.dp, label = "headerSpacing")
val amountSpacing = animateDpAsState(targetValue = if (keyboardVisible) 16.dp else 48.dp, label = "amountSpacing")
val headerSpacing = animateDpAsState(
targetValue = if (keyboardVisible) {
0.dp
} else {
when (uiMode) {
UiMode.Normal -> 32.dp
UiMode.Comfortable -> 24.dp
else -> 8.dp
}
},
label = "headerSpacing",
)
val amountSpacing = animateDpAsState(
targetValue = if (keyboardVisible) {
16.dp
} else {
when (uiMode) {
UiMode.Normal -> 48.dp
UiMode.Comfortable -> 32.dp
else -> 24.dp
}
},
label = "amountSpacing",
)

Column(
modifier = modifier,
Expand Down Expand Up @@ -333,8 +437,20 @@ private fun TransactionHeaderColumn(

BtcAmountText(
modifier = Modifier
.padding(start = 32.dp)
.height(72.dp)
.padding(
start = when (uiMode) {
UiMode.Normal -> 32.dp
UiMode.Comfortable -> 26.dp
else -> 18.dp
},
)
.height(
when (uiMode) {
UiMode.Normal -> 72.dp
UiMode.Comfortable -> 64.dp
else -> 56.dp
},
)
.clickable(
interactionSource = remember { MutableInteractionSource() },
indication = null,
Expand Down
5 changes: 4 additions & 1 deletion ...rc/main/kotlin/net/primal/android/wallet/transactions/send/create/ui/TransactionFailed.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ package net.primal.android.wallet.transactions.send.create.ui

import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
Expand Down Expand Up @@ -33,7 +34,9 @@ fun TransactionFailed(
)

PrimalLoadingButton(
modifier = Modifier.width(200.dp),
modifier = Modifier
.width(200.dp)
.padding(bottom = 16.dp),
text = stringResource(id = R.string.wallet_create_transaction_close_button),
containerColor = AppTheme.extraColorScheme.surfaceVariantAlt1,
onClick = onCloseClick,
Expand Down
2 changes: 2 additions & 0 deletions ...c/main/kotlin/net/primal/android/wallet/transactions/send/create/ui/TransactionSending.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ package net.primal.android.wallet.transactions.send.create.ui

import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.runtime.Composable
import androidx.compose.runtime.remember
Expand Down Expand Up @@ -47,6 +48,7 @@ fun TransactionSending(
PrimalLoadingButton(
modifier = Modifier
.width(200.dp)
.padding(bottom = 16.dp)
.alpha(0f),
)
}
Expand Down
2 changes: 2 additions & 0 deletions ...c/main/kotlin/net/primal/android/wallet/transactions/send/create/ui/TransactionSuccess.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.TopAppBarDefaults
Expand Down Expand Up @@ -103,6 +104,7 @@ fun TransactionSuccess(
PrimalLoadingButton(
modifier = Modifier
.width(200.dp)
.padding(bottom = 16.dp)
.then(if (isClosing) Modifier.alpha(0.0f) else Modifier),
text = stringResource(id = R.string.wallet_create_transaction_done_button),
containerColor = walletSuccessDimColor,
Expand Down

0 comments on commit b26096b

Please sign in to comment.