TheArchive/session-android
1
0
Fork 0
mirror of https://github.com/oxen-io/session-android.git synced 2024-11-23 18:15:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

Unifying dimensions and rectifying design inconsistencies

Browse Source 
Unifying spacing values and reusing common ones
Identified spacing issues and inconsistencies in design and figma
This commit is contained in:
ThomasSession 2024-07-15 11:40:12 +10:00
parent bb630fc11b
commit 166d0e8beb
18 changed files with 67 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/src/main/java/org/thoughtcrime/securesms/conversation/disappearingmessages/ui/DisappearingMessages.kt
View File

@ -39,7 +39,7 @@ fun DisappearingMessages(
) {
val scrollState = rememberScrollState()
Column(modifier = modifier.padding(horizontal = LocalDimensions.current.margin)) {
Column(modifier = modifier.padding(horizontal = LocalDimensions.current.spacing)) {
Box(modifier = Modifier.weight(1f)) {
Column(
modifier = Modifier

4
app/src/main/java/org/thoughtcrime/securesms/conversation/start/home/StartConversation.kt
View File

@ -73,9 +73,9 @@ internal fun StartConversationScreen(
)
Column(
modifier = Modifier
.padding(horizontal = LocalDimensions.current.margin)
.padding(horizontal = LocalDimensions.current.spacing)
.padding(top = LocalDimensions.current.spacing)
.padding(bottom = LocalDimensions.current.margin)
.padding(bottom = LocalDimensions.current.spacing)
) {
Text(stringResource(R.string.accountIdYours), style = LocalType.current.xl)
Spacer(modifier = Modifier.height(LocalDimensions.current.xxxsSpacing))

2
app/src/main/java/org/thoughtcrime/securesms/conversation/start/invitefriend/InviteFriend.kt
View File

@ -44,7 +44,7 @@ internal fun InviteFriend(
.contentDescription(R.string.AccessibilityId_account_id)
.fillMaxWidth()
.border()
.padding(LocalDimensions.current.smallMargin),
.padding(LocalDimensions.current.spacing),
textAlign = TextAlign.Center,
style = LocalType.current.base
)

10
app/src/main/java/org/thoughtcrime/securesms/conversation/start/newmessage/NewMessage.kt
View File

@ -78,14 +78,14 @@ private fun EnterAccountId(
.imePadding()
) {
Column(
modifier = Modifier.padding(horizontal = LocalDimensions.current.xxsMargin, vertical = LocalDimensions.current.xsMargin),
modifier = Modifier.padding(horizontal = LocalDimensions.current.xsSpacing, vertical = LocalDimensions.current.smallSpacing),
horizontalAlignment = Alignment.CenterHorizontally,
verticalArrangement = Arrangement.spacedBy(LocalDimensions.current.xsMargin)
verticalArrangement = Arrangement.spacedBy(LocalDimensions.current.smallSpacing)
) {
SessionOutlinedTextField(
text = state.newMessageIdOrOns,
modifier = Modifier
.padding(horizontal = LocalDimensions.current.smallMargin)
.padding(horizontal = LocalDimensions.current.spacing)
.contentDescription("Session id input box"),
placeholder = stringResource(R.string.accountIdOrOnsEnter),
onChange = callbacks::onChange,
@ -98,7 +98,7 @@ private fun EnterAccountId(
text = stringResource(R.string.messageNewDescription),
modifier = Modifier
.contentDescription(R.string.AccessibilityId_help_desk_link)
.padding(horizontal = LocalDimensions.current.margin)
.padding(horizontal = LocalDimensions.current.mediumSpacing)
.fillMaxWidth(),
style = LocalType.current.small,
color = LocalColors.current.textSecondary,
@ -111,7 +111,7 @@ private fun EnterAccountId(
PrimaryOutlineButton(
modifier = Modifier
.align(Alignment.CenterHorizontally)
.padding(horizontal = LocalDimensions.current.largeMargin)
.padding(horizontal = LocalDimensions.current.xlargeSpacing)
.fillMaxWidth()
.contentDescription(R.string.next),
onClick = callbacks::onContinue

2
app/src/main/java/org/thoughtcrime/securesms/conversation/v2/MessageDetailActivity.kt
View File

@ -156,7 +156,7 @@ fun MessageDetails(
) {
state.record?.let { message ->
AndroidView(
modifier = Modifier.padding(horizontal = LocalDimensions.current.margin),
modifier = Modifier.padding(horizontal = LocalDimensions.current.spacing),
factory = {
ViewVisibleMessageContentBinding.inflate(LayoutInflater.from(it)).mainContainerConstraint.apply {
bind(

5
app/src/main/java/org/thoughtcrime/securesms/home/EmptyView.kt
View File

@ -14,6 +14,7 @@ import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.tooling.preview.PreviewParameter
import androidx.compose.ui.unit.dp
import network.loki.messenger.R
import org.thoughtcrime.securesms.ui.Divider
import org.thoughtcrime.securesms.ui.theme.LocalDimensions
@ -28,7 +29,7 @@ internal fun EmptyView(newAccount: Boolean) {
Column(
horizontalAlignment = Alignment.CenterHorizontally,
modifier = Modifier
.padding(horizontal = LocalDimensions.current.homeEmptyViewMargin)
.padding(horizontal = 50.dp)
) {
Spacer(modifier = Modifier.weight(1f))
Icon(
@ -50,7 +51,7 @@ internal fun EmptyView(newAccount: Boolean) {
)
}
Divider(modifier = Modifier.padding(vertical = LocalDimensions.current.xsMargin))
Divider(modifier = Modifier.padding(vertical = LocalDimensions.current.smallSpacing))
Text(
stringResource(R.string.conversationsNone),

6
app/src/main/java/org/thoughtcrime/securesms/home/SeedReminder.kt
View File

@ -42,8 +42,8 @@ internal fun SeedReminder(startRecoveryPasswordActivity: () -> Unit) {
Modifier
.background(LocalColors.current.backgroundSecondary)
.padding(
horizontal = LocalDimensions.current.smallMargin,
vertical = LocalDimensions.current.xsMargin
horizontal = LocalDimensions.current.spacing,
vertical = LocalDimensions.current.smallSpacing
)
) {
Column(Modifier.weight(1f)) {
@ -60,7 +60,7 @@ internal fun SeedReminder(startRecoveryPasswordActivity: () -> Unit) {
style = LocalType.current.small
)
}
Spacer(Modifier.width(LocalDimensions.current.xxsMargin))
Spacer(Modifier.width(LocalDimensions.current.xsSpacing))
SlimPrimaryOutlineButton(
text = stringResource(R.string.continue_2),
modifier = Modifier

6
app/src/main/java/org/thoughtcrime/securesms/onboarding/landing/Landing.kt
View File

@ -106,7 +106,7 @@ internal fun LandingScreen(
Column {
Column(modifier = Modifier
.weight(1f)
.padding(horizontal = LocalDimensions.current.onboardingMargin)
.padding(horizontal = LocalDimensions.current.mediumSpacing)
) {
Spacer(modifier = Modifier.weight(1f))
Text(
@ -120,7 +120,7 @@ internal fun LandingScreen(
LazyColumn(
state = listState,
modifier = Modifier
.heightIn(min = LocalDimensions.current.minScrollableViewHeight)
.heightIn(min = 200.dp)
.fillMaxWidth()
.weight(3f),
verticalArrangement = Arrangement.spacedBy(LocalDimensions.current.smallSpacing)
@ -139,7 +139,7 @@ internal fun LandingScreen(
Spacer(modifier = Modifier.weight(1f))
}
Column(modifier = Modifier.padding(horizontal = LocalDimensions.current.largeMargin)) {
Column(modifier = Modifier.padding(horizontal = LocalDimensions.current.xlargeSpacing)) {
PrimaryFillButton(
text = stringResource(R.string.onboardingAccountCreate),
modifier = Modifier

2
app/src/main/java/org/thoughtcrime/securesms/onboarding/loadaccount/LoadAccount.kt
View File

@ -77,7 +77,7 @@ private fun RecoveryPassword(state: State, onChange: (String) -> Unit = {}, onCo
Spacer(modifier = Modifier.height(LocalDimensions.current.smallSpacing))
Column(
modifier = Modifier.padding(horizontal = LocalDimensions.current.largeMargin)
modifier = Modifier.padding(horizontal = LocalDimensions.current.xlargeSpacing)
) {
Row {
Text(

6
app/src/main/java/org/thoughtcrime/securesms/onboarding/messagenotifications/MessageNotifications.kt
View File

@ -56,9 +56,9 @@ internal fun MessageNotificationsScreen(
Column {
Spacer(Modifier.weight(1f))
Column(modifier = Modifier.padding(horizontal = LocalDimensions.current.onboardingMargin)) {
Column(modifier = Modifier.padding(horizontal = LocalDimensions.current.mediumSpacing)) {
Text(stringResource(R.string.notificationsMessage), style = LocalType.current.h4)
Spacer(Modifier.height(LocalDimensions.current.xsMargin))
Spacer(Modifier.height(LocalDimensions.current.smallSpacing))
Text(stringResource(R.string.onboardingMessageNotificationExplaination), style = LocalType.current.base)
Spacer(Modifier.height(LocalDimensions.current.spacing))
}
@ -101,7 +101,7 @@ private fun NotificationRadioButton(
onClick = onClick,
modifier = modifier,
checked = checked,
contentPadding = PaddingValues(horizontal = LocalDimensions.current.margin, vertical = 7.dp)
contentPadding = PaddingValues(horizontal = LocalDimensions.current.mediumSpacing, vertical = 7.dp)
) {
Box(
modifier = Modifier

2
app/src/main/java/org/thoughtcrime/securesms/onboarding/pickname/PickDisplayName.kt
View File

@ -54,7 +54,7 @@ internal fun PickDisplayName(
Spacer(modifier = Modifier.height(LocalDimensions.current.smallSpacing))
Column(
modifier = Modifier.padding(horizontal = LocalDimensions.current.largeMargin)
modifier = Modifier.padding(horizontal = LocalDimensions.current.xlargeSpacing)
) {
Text(stringResource(state.title), style = LocalType.current.h4)
Spacer(Modifier.height(LocalDimensions.current.smallSpacing))

4
app/src/main/java/org/thoughtcrime/securesms/onboarding/ui/ContinueButton.kt
View File

@ -17,8 +17,8 @@ fun ContinuePrimaryOutlineButton(modifier: Modifier, onContinue: () -> Unit) {
modifier = modifier
.contentDescription(R.string.AccessibilityId_continue)
.fillMaxWidth()
.padding(horizontal = LocalDimensions.current.largeMargin)
.padding(bottom = LocalDimensions.current.xxsMargin),
.padding(horizontal = LocalDimensions.current.xlargeSpacing)
.padding(bottom = LocalDimensions.current.xsSpacing),
onClick = onContinue,
)
}

6
app/src/main/java/org/thoughtcrime/securesms/preferences/QRCodeActivity.kt
View File

@ -93,14 +93,14 @@ private fun Tabs(sessionId: String, errors: Flow<String>, onScan: (String) -> Un
fun QrPage(string: String) {
Column(
modifier = Modifier
.background(LocalColors.current.backgroundSecondary)
.padding(horizontal = LocalDimensions.current.margin)
.background(LocalColors.current.background)
.padding(horizontal = LocalDimensions.current.mediumSpacing)
.fillMaxSize()
) {
QrImage(
string = string,
modifier = Modifier
.padding(top = LocalDimensions.current.margin, bottom = LocalDimensions.current.xxsMargin)
.padding(top = LocalDimensions.current.mediumSpacing, bottom = LocalDimensions.current.xsSpacing)
.contentDescription(R.string.AccessibilityId_qr_code),
icon = R.drawable.session
)

4
app/src/main/java/org/thoughtcrime/securesms/preferences/SettingsActivity.kt
View File

@ -429,8 +429,8 @@ class SettingsActivity : PassphraseRequiredActionBarActivity() {
Column {
Row(
modifier = Modifier
.padding(horizontal = LocalDimensions.current.smallMargin)
.padding(top = LocalDimensions.current.xxxsMargin),
.padding(horizontal = LocalDimensions.current.spacing)
.padding(top = LocalDimensions.current.xxsSpacing),
horizontalArrangement = Arrangement.spacedBy(LocalDimensions.current.smallSpacing),
) {
PrimaryOutlineButton(

14
app/src/main/java/org/thoughtcrime/securesms/recoverypassword/RecoveryPassword.kt
View File

@ -48,11 +48,11 @@ internal fun RecoveryPasswordScreen(
onHide:() -> Unit = {}
) {
Column(
verticalArrangement = Arrangement.spacedBy(LocalDimensions.current.xsMargin),
verticalArrangement = Arrangement.spacedBy(LocalDimensions.current.smallSpacing),
modifier = Modifier
.contentDescription(R.string.AccessibilityId_recovery_password)
.verticalScroll(rememberScrollState())
.padding(bottom = LocalDimensions.current.xsMargin)
.padding(bottom = LocalDimensions.current.smallSpacing)
) {
RecoveryPasswordCell(mnemonic, seed, copyMnemonic)
HideRecoveryPasswordCell(onHide)
@ -80,7 +80,7 @@ private fun RecoveryPasswordCell(
SessionShieldIcon()
}
Spacer(modifier = Modifier.height(LocalDimensions.current.xxxsMargin))
Spacer(modifier = Modifier.height(LocalDimensions.current.xxsSpacing))
Text(
stringResource(R.string.recoveryPasswordDescription),
@ -98,7 +98,7 @@ private fun RecoveryPasswordCell(
QrImage(
seed,
modifier = Modifier
.padding(vertical = LocalDimensions.current.smallMargin)
.padding(vertical = LocalDimensions.current.spacing)
.contentDescription(R.string.AccessibilityId_qr_code),
contentPadding = 10.dp,
icon = R.drawable.session_shield
@ -137,9 +137,9 @@ private fun RecoveryPassword(mnemonic: String) {
mnemonic,
modifier = Modifier
.contentDescription(R.string.AccessibilityId_recovery_password_container)
.padding(vertical = LocalDimensions.current.smallMargin)
.padding(vertical = LocalDimensions.current.spacing)
.border()
.padding(LocalDimensions.current.smallMargin),
.padding(LocalDimensions.current.spacing),
textAlign = TextAlign.Center,
style = LocalType.current.extraSmall.monospace(),
color = LocalColors.current.run { if (isLight) text else primary },
@ -162,7 +162,7 @@ private fun HideRecoveryPasswordCell(onHide: () -> Unit = {}) {
style = LocalType.current.base
)
}
Spacer(modifier = Modifier.width(LocalDimensions.current.xxsMargin))
Spacer(modifier = Modifier.width(LocalDimensions.current.xsSpacing))
SlimOutlineButton(
text = stringResource(R.string.hide),
modifier = Modifier

31
app/src/main/java/org/thoughtcrime/securesms/ui/Components.kt
View File

@ -14,12 +14,14 @@ import androidx.compose.foundation.layout.BoxScope
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.RowScope
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.heightIn
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.layout.widthIn
import androidx.compose.foundation.layout.wrapContentHeight
import androidx.compose.foundation.layout.wrapContentSize
import androidx.compose.foundation.lazy.LazyColumn
@ -52,6 +54,7 @@ import androidx.compose.ui.res.stringResource
import androidx.compose.ui.semantics.contentDescription
import androidx.compose.ui.semantics.semantics
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp
import androidx.compose.ui.viewinterop.AndroidView
@ -68,6 +71,7 @@ import org.thoughtcrime.securesms.ui.components.SmallCircularProgressIndicator
import org.thoughtcrime.securesms.ui.theme.LocalColors
import org.thoughtcrime.securesms.ui.theme.LocalDimensions
import org.thoughtcrime.securesms.ui.theme.LocalType
import org.thoughtcrime.securesms.ui.theme.PreviewTheme
import org.thoughtcrime.securesms.ui.theme.divider
import org.thoughtcrime.securesms.ui.theme.radioButtonColors
import org.thoughtcrime.securesms.ui.theme.transparentButtonColors
@ -216,12 +220,15 @@ fun ItemButton(
) {
Box(
modifier = Modifier
.width(80.dp)
.width(50.dp)
.wrapContentHeight()
.align(Alignment.CenterVertically)
) {
icon()
}
Spacer(modifier = Modifier.width(LocalDimensions.current.smallSpacing))
Text(
text,
Modifier
@ -233,10 +240,22 @@ fun ItemButton(
}
}
@Preview
@Composable
fun PrewviewItemButton() {
PreviewTheme {
ItemButton(
textId = R.string.activity_create_group_title,
icon = R.drawable.ic_group,
onClick = {}
)
}
}
@Composable
fun Cell(
padding: Dp = 0.dp,
margin: Dp = LocalDimensions.current.margin,
margin: Dp = LocalDimensions.current.spacing,
content: @Composable () -> Unit
) {
CellWithPaddingAndMargin(padding, margin) { content() }
@ -248,8 +267,8 @@ fun CellNoMargin(content: @Composable () -> Unit) {
@Composable
fun CellWithPaddingAndMargin(
padding: Dp = LocalDimensions.current.smallMargin,
margin: Dp = LocalDimensions.current.margin,
padding: Dp = LocalDimensions.current.spacing,
margin: Dp = LocalDimensions.current.spacing,
content: @Composable () -> Unit
) {
Card(
@ -273,7 +292,7 @@ fun <T> TitledRadioButton(option: RadioOption<T>, onClick: () -> Unit) {
modifier = Modifier
.runIf(option.enabled) { clickable { if (!option.selected) onClick() } }
.heightIn(min = 60.dp)
.padding(horizontal = LocalDimensions.current.margin)
.padding(horizontal = LocalDimensions.current.spacing)
.contentDescription(option.contentDescription)
) {
Column(modifier = Modifier
@ -366,7 +385,7 @@ fun Modifier.fadingEdges(
@Composable
fun Divider(modifier: Modifier = Modifier, startIndent: Dp = 0.dp) {
androidx.compose.material.Divider(
modifier = modifier.padding(horizontal = LocalDimensions.current.xsMargin),
modifier = modifier.padding(horizontal = LocalDimensions.current.smallSpacing),
color = LocalColors.current.divider,
startIndent = startIndent
)

2
app/src/main/java/org/thoughtcrime/securesms/ui/components/QR.kt
View File

@ -108,7 +108,7 @@ fun MaybeScanQrCode(
modifier = Modifier
.background(color = LocalColors.current.backgroundSecondary)
.fillMaxSize()
.padding(LocalDimensions.current.largeMargin),
.padding(LocalDimensions.current.xlargeSpacing),
horizontalAlignment = Alignment.CenterHorizontally
) {
Spacer(modifier = Modifier.weight(1f))

14
app/src/main/java/org/thoughtcrime/securesms/ui/theme/Dimensions.kt
View File

@ -12,19 +12,11 @@ data class Dimensions(
val xsSpacing: Dp = 12.dp,
val smallSpacing: Dp = 16.dp,
val spacing: Dp = 24.dp,
val mediumSpacing: Dp = 36.dp,
val xlargeSpacing: Dp = 64.dp,
val xxxsMargin: Dp = 8.dp,
val xxsMargin: Dp = 12.dp,
val xsMargin: Dp = 16.dp,
val smallMargin: Dp = 24.dp,
val margin: Dp = 32.dp,
val onboardingMargin: Dp = 36.dp,
val largeMargin: Dp = 64.dp,
val homeEmptyViewMargin: Dp = 50.dp,
val dividerIndent: Dp = 80.dp,
val dividerIndent: Dp = 60.dp,
val appBarHeight: Dp = 64.dp,
val minScrollableViewHeight: Dp = 200.dp,
val minLargeItemButtonHeight: Dp = 60.dp,
val indicatorHeight: Dp = 4.dp,