Standardise margins

This commit is contained in:
Andrew 2024-06-17 14:39:45 +09:30
parent e2eea61c68
commit 2341685fd3
8 changed files with 113 additions and 86 deletions

View File

@ -94,7 +94,7 @@ class LandingActivity: BaseActionBarActivity() {
@Preview
@Composable
private fun LandingScreen(
private fun PreviewLandingScreen(
@PreviewParameter(SessionColorsParameterProvider::class) colors: Colors
) {
PreviewTheme(colors) {
@ -119,7 +119,8 @@ class LandingActivity: BaseActionBarActivity() {
Column {
Column(modifier = Modifier
.weight(1f)
.padding(horizontal = LocalDimensions.current.marginMedium)) {
.padding(horizontal = LocalDimensions.current.marginOnboarding)
) {
Spacer(modifier = Modifier.weight(1f))
Text(
stringResource(R.string.onboardingBubblePrivacyInYourPocket),
@ -132,7 +133,7 @@ class LandingActivity: BaseActionBarActivity() {
LazyColumn(
state = listState,
modifier = Modifier
.heightIn(min = 200.dp)
.heightIn(min = LocalDimensions.current.minScrollableViewHeight)
.fillMaxWidth()
.weight(3f),
verticalArrangement = Arrangement.spacedBy(LocalDimensions.current.itemSpacingSmall)

View File

@ -32,6 +32,7 @@ import org.session.libsession.utilities.TextSecurePreferences
import org.thoughtcrime.securesms.BaseActionBarActivity
import org.thoughtcrime.securesms.onboarding.loading.LoadingManager
import org.thoughtcrime.securesms.onboarding.messagenotifications.startMessageNotificationsActivity
import org.thoughtcrime.securesms.onboarding.ui.ContinueButton
import org.thoughtcrime.securesms.ui.LocalDimensions
import org.thoughtcrime.securesms.ui.PreviewTheme
import org.thoughtcrime.securesms.ui.base
@ -116,45 +117,43 @@ fun PreviewRecoveryPassword() {
@Composable
fun RecoveryPassword(state: LinkDeviceState, onChange: (String) -> Unit = {}, onContinue: () -> Unit = {}) {
Column(
modifier = Modifier.padding(horizontal = LocalDimensions.current.marginLarge)
) {
Spacer(Modifier.weight(1f))
Row {
Column {
Column(
modifier = Modifier.padding(horizontal = LocalDimensions.current.marginLarge)
.weight(1f)
) {
Spacer(Modifier.weight(1f))
Row {
Text(
stringResource(R.string.sessionRecoveryPassword),
style = h4
)
Spacer(Modifier.width(6.dp))
Icon(
painter = painterResource(id = R.drawable.ic_shield_outline),
contentDescription = null,
)
}
Spacer(Modifier.size(28.dp))
Text(
stringResource(R.string.sessionRecoveryPassword),
style = h4
stringResource(R.string.activity_link_enter_your_recovery_password_to_load_your_account_if_you_haven_t_saved_it_you_can_find_it_in_your_app_settings),
style = base
)
Spacer(Modifier.width(6.dp))
Icon(
painter = painterResource(id = R.drawable.ic_shield_outline),
contentDescription = null,
Spacer(Modifier.size(24.dp))
SessionOutlinedTextField(
text = state.recoveryPhrase,
modifier = Modifier
.fillMaxWidth()
.contentDescription(R.string.AccessibilityId_recovery_phrase_input),
placeholder = stringResource(R.string.recoveryPasswordEnter),
onChange = onChange,
onContinue = onContinue,
error = state.error
)
Spacer(Modifier.weight(2f))
}
Spacer(Modifier.size(28.dp))
Text(
stringResource(R.string.activity_link_enter_your_recovery_password_to_load_your_account_if_you_haven_t_saved_it_you_can_find_it_in_your_app_settings),
style = base
)
Spacer(Modifier.size(24.dp))
SessionOutlinedTextField(
text = state.recoveryPhrase,
modifier = Modifier
.fillMaxWidth()
.contentDescription(R.string.AccessibilityId_recovery_phrase_input),
placeholder = stringResource(R.string.recoveryPasswordEnter),
onChange = onChange,
onContinue = onContinue,
error = state.error
)
Spacer(Modifier.weight(2f))
OutlineButton(
stringResource(R.string.continue_2),
modifier = Modifier
.align(Alignment.CenterHorizontally)
.padding(vertical = 20.dp)
.fillMaxWidth(),
onClick = onContinue
)
ContinueButton(modifier = Modifier.align(Alignment.CenterHorizontally), onContinue)
}
}

View File

@ -13,6 +13,7 @@ import androidx.compose.ui.res.stringResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.tooling.preview.PreviewParameter
import network.loki.messenger.R
import org.thoughtcrime.securesms.onboarding.ui.ContinueButton
import org.thoughtcrime.securesms.ui.LocalDimensions
import org.thoughtcrime.securesms.ui.PreviewTheme
import org.thoughtcrime.securesms.ui.SessionColorsParameterProvider
@ -42,7 +43,8 @@ fun MessageNotificationsScreen(
) {
Column {
Spacer(Modifier.weight(1f))
Column(modifier = Modifier.padding(horizontal = LocalDimensions.current.marginMedium)) {
Column(modifier = Modifier.padding(horizontal = LocalDimensions.current.marginOnboarding)) {
Text(stringResource(R.string.notificationsMessage), style = h4)
Spacer(Modifier.height(LocalDimensions.current.marginExtraSmall))
Text(stringResource(R.string.onboardingMessageNotificationExplaination), style = base)
@ -64,16 +66,9 @@ fun MessageNotificationsScreen(
onClick = { setEnabled(false) }
)
}
Spacer(Modifier.weight(1f))
OutlineButton(
stringResource(R.string.continue_2),
modifier = Modifier
.padding(horizontal = LocalDimensions.current.marginLarge)
.contentDescription(R.string.AccessibilityId_continue)
.align(Alignment.CenterHorizontally)
.fillMaxWidth(),
onClick = onContinue
)
Spacer(modifier = Modifier.height(LocalDimensions.current.marginExtraExtraSmall))
ContinueButton(Modifier.align(Alignment.CenterHorizontally), onContinue)
}
}

View File

@ -5,7 +5,6 @@ import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
@ -14,9 +13,10 @@ import androidx.compose.ui.res.stringResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import network.loki.messenger.R
import org.thoughtcrime.securesms.onboarding.ui.ContinueButton
import org.thoughtcrime.securesms.ui.LocalDimensions
import org.thoughtcrime.securesms.ui.PreviewTheme
import org.thoughtcrime.securesms.ui.base
import org.thoughtcrime.securesms.ui.components.OutlineButton
import org.thoughtcrime.securesms.ui.components.SessionOutlinedTextField
import org.thoughtcrime.securesms.ui.contentDescription
import org.thoughtcrime.securesms.ui.h4
@ -31,39 +31,34 @@ fun PreviewDisplayName() {
@Composable
fun DisplayName(state: State, onChange: (String) -> Unit = {}, onContinue: () -> Unit = {}) {
Column(
verticalArrangement = Arrangement.spacedBy(20.dp),
modifier = Modifier
.padding(horizontal = 50.dp)
.padding(bottom = 12.dp)
) {
Spacer(modifier = Modifier.weight(1f))
Text(stringResource(state.title), style = h4)
Text(
stringResource(state.description),
style = base,
modifier = Modifier.padding(bottom = 12.dp))
SessionOutlinedTextField(
text = state.displayName,
Column {
Column(
verticalArrangement = Arrangement.spacedBy(LocalDimensions.current.itemSpacingOnboarding),
modifier = Modifier
.fillMaxWidth()
.contentDescription(R.string.AccessibilityId_enter_display_name),
placeholder = stringResource(R.string.displayNameEnter),
onChange = onChange,
onContinue = onContinue,
error = state.error?.let { stringResource(it) }
)
.padding(horizontal = LocalDimensions.current.marginOnboarding)
.weight(1f)
) {
Spacer(modifier = Modifier.weight(1f))
Text(stringResource(state.title), style = h4)
Text(
stringResource(state.description),
style = base,
modifier = Modifier.padding(bottom = 12.dp))
Spacer(modifier = Modifier.weight(2f))
SessionOutlinedTextField(
text = state.displayName,
modifier = Modifier
.fillMaxWidth()
.contentDescription(R.string.AccessibilityId_enter_display_name),
placeholder = stringResource(R.string.displayNameEnter),
onChange = onChange,
onContinue = onContinue,
error = state.error?.let { stringResource(it) }
)
OutlineButton(
stringResource(R.string.continue_2),
modifier = Modifier
.contentDescription(R.string.AccessibilityId_continue)
.align(Alignment.CenterHorizontally)
.width(262.dp),
onClick = onContinue,
)
Spacer(modifier = Modifier.weight(2f))
}
ContinueButton(Modifier.align(Alignment.CenterHorizontally), onContinue)
}
}

View File

@ -42,7 +42,6 @@ import org.thoughtcrime.securesms.ui.contentDescription
import org.thoughtcrime.securesms.ui.extraSmallMonospace
import org.thoughtcrime.securesms.ui.h8
@Preview
@Composable
fun PreviewRecoveryPasswordScreen(

View File

@ -0,0 +1,36 @@
package org.thoughtcrime.securesms.onboarding.ui
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.stringResource
import network.loki.messenger.R
import org.thoughtcrime.securesms.ui.LocalDimensions
import org.thoughtcrime.securesms.ui.components.OutlineButton
import org.thoughtcrime.securesms.ui.contentDescription
@Composable
fun ContinueButton(modifier: Modifier, onContinue: () -> Unit) {
OutlineButton(
stringResource(R.string.continue_2),
modifier = modifier
.contentDescription(R.string.AccessibilityId_continue)
.fillMaxWidth()
.padding(horizontal = LocalDimensions.current.marginLarge)
.padding(bottom = LocalDimensions.current.marginExtraExtraSmall),
onClick = onContinue,
)
}
@Composable
fun OnboardingButton(text: String, modifier: Modifier, onClick: () -> Unit) {
OutlineButton(
text,
modifier = modifier
.fillMaxWidth()
.padding(horizontal = LocalDimensions.current.marginLarge)
.padding(bottom = LocalDimensions.current.marginExtraExtraSmall),
onClick = onClick,
)
}

View File

@ -10,13 +10,16 @@ data class Dimensions(
val itemSpacingTiny: Dp = 4.dp,
val itemSpacingExtraSmall: Dp = 8.dp,
val itemSpacingSmall: Dp = 16.dp,
val itemSpacingOnboarding: Dp = 20.dp,
val itemSpacingMedium: Dp = 24.dp,
val marginTiny: Dp = 8.dp,
val marginExtraExtraSmall: Dp = 12.dp,
val marginExtraSmall: Dp = 16.dp,
val marginSmall: Dp = 24.dp,
val marginMedium: Dp = 32.dp,
val marginOnboarding: Dp = 36.dp,
val marginLarge: Dp = 64.dp,
val dividerIndent: Dp = 80.dp,
val appBarHeight: Dp = 64.dp
val appBarHeight: Dp = 64.dp,
val minScrollableViewHeight: Dp = 200.dp
)

View File

@ -50,7 +50,6 @@ import org.thoughtcrime.securesms.ui.baseBold
import org.thoughtcrime.securesms.ui.color.Colors
import org.thoughtcrime.securesms.ui.color.LocalColors
import org.thoughtcrime.securesms.ui.color.radioButtonColors
import org.thoughtcrime.securesms.ui.color.slimOutlineButton
import org.thoughtcrime.securesms.ui.contentDescription
import org.thoughtcrime.securesms.ui.extraSmall
import org.thoughtcrime.securesms.ui.h8