refactor(ui): tokenize spacing

This commit is contained in:
Harsh Shandilya 2024-05-29 02:43:15 +05:30
parent 4939153e81
commit f60c20060d
6 changed files with 34 additions and 18 deletions

View file

@ -14,12 +14,13 @@ import androidx.compose.ui.Modifier
import androidx.compose.ui.res.painterResource import androidx.compose.ui.res.painterResource
import androidx.compose.ui.res.stringResource import androidx.compose.ui.res.stringResource
import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import app.passwordstore.R import app.passwordstore.R
import app.passwordstore.data.passfile.PasswordEntry import app.passwordstore.data.passfile.PasswordEntry
import app.passwordstore.ui.APSAppBar import app.passwordstore.ui.APSAppBar
import app.passwordstore.ui.compose.PasswordField import app.passwordstore.ui.compose.PasswordField
import app.passwordstore.ui.compose.theme.APSTheme import app.passwordstore.ui.compose.theme.APSTheme
import app.passwordstore.ui.compose.theme.SpacingLarge
import app.passwordstore.ui.compose.theme.SpacingMedium
import app.passwordstore.util.time.UserClock import app.passwordstore.util.time.UserClock
import app.passwordstore.util.totp.UriTotpFinder import app.passwordstore.util.totp.UriTotpFinder
@ -43,13 +44,16 @@ fun EditPasswordScreen(
} }
) { paddingValues -> ) { paddingValues ->
Box(modifier = modifier.padding(paddingValues)) { Box(modifier = modifier.padding(paddingValues)) {
Column(modifier = Modifier.padding(vertical = 8.dp, horizontal = 16.dp).fillMaxSize()) { Column(
modifier =
Modifier.padding(vertical = SpacingMedium, horizontal = SpacingLarge).fillMaxSize()
) {
if (entry.password != null) { if (entry.password != null) {
PasswordField( PasswordField(
value = entry.password!!, value = entry.password!!,
label = stringResource(R.string.password), label = stringResource(R.string.password),
initialVisibility = false, initialVisibility = false,
modifier = Modifier.padding(bottom = 8.dp).fillMaxWidth(), modifier = Modifier.padding(bottom = SpacingMedium).fillMaxWidth(),
) )
} }
ExtraContent(entry = entry) ExtraContent(entry = entry)

View file

@ -18,13 +18,14 @@ import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.capitalize import androidx.compose.ui.text.capitalize
import androidx.compose.ui.text.intl.Locale import androidx.compose.ui.text.intl.Locale
import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import app.passwordstore.R import app.passwordstore.R
import app.passwordstore.data.passfile.PasswordEntry import app.passwordstore.data.passfile.PasswordEntry
import app.passwordstore.ui.APSAppBar import app.passwordstore.ui.APSAppBar
import app.passwordstore.ui.compose.CopyButton import app.passwordstore.ui.compose.CopyButton
import app.passwordstore.ui.compose.PasswordField import app.passwordstore.ui.compose.PasswordField
import app.passwordstore.ui.compose.theme.APSTheme import app.passwordstore.ui.compose.theme.APSTheme
import app.passwordstore.ui.compose.theme.SpacingLarge
import app.passwordstore.ui.compose.theme.SpacingMedium
import app.passwordstore.util.time.UserClock import app.passwordstore.util.time.UserClock
import app.passwordstore.util.totp.UriTotpFinder import app.passwordstore.util.totp.UriTotpFinder
import kotlinx.coroutines.flow.first import kotlinx.coroutines.flow.first
@ -49,14 +50,17 @@ fun ViewPasswordScreen(
} }
) { paddingValues -> ) { paddingValues ->
Box(modifier = modifier.padding(paddingValues)) { Box(modifier = modifier.padding(paddingValues)) {
Column(modifier = Modifier.padding(vertical = 8.dp, horizontal = 16.dp).fillMaxSize()) { Column(
modifier =
Modifier.padding(vertical = SpacingMedium, horizontal = SpacingLarge).fillMaxSize()
) {
if (entry.password != null) { if (entry.password != null) {
PasswordField( PasswordField(
value = entry.password!!, value = entry.password!!,
label = stringResource(R.string.password), label = stringResource(R.string.password),
initialVisibility = false, initialVisibility = false,
readOnly = true, readOnly = true,
modifier = Modifier.padding(bottom = 8.dp).fillMaxWidth(), modifier = Modifier.padding(bottom = SpacingMedium).fillMaxWidth(),
) )
} }
if (entry.hasTotp()) { if (entry.hasTotp()) {
@ -67,7 +71,7 @@ fun ViewPasswordScreen(
readOnly = true, readOnly = true,
label = { Text("OTP (expires in ${totp.remainingTime.inWholeSeconds}s)") }, label = { Text("OTP (expires in ${totp.remainingTime.inWholeSeconds}s)") },
trailingIcon = { CopyButton(totp.value, R.string.copy_label) }, trailingIcon = { CopyButton(totp.value, R.string.copy_label) },
modifier = Modifier.padding(bottom = 8.dp).fillMaxWidth(), modifier = Modifier.padding(bottom = SpacingMedium).fillMaxWidth(),
) )
} }
if (entry.username != null) { if (entry.username != null) {
@ -77,7 +81,7 @@ fun ViewPasswordScreen(
readOnly = true, readOnly = true,
label = { Text(stringResource(R.string.username)) }, label = { Text(stringResource(R.string.username)) },
trailingIcon = { CopyButton(entry.username!!, R.string.copy_label) }, trailingIcon = { CopyButton(entry.username!!, R.string.copy_label) },
modifier = Modifier.padding(bottom = 8.dp).fillMaxWidth(), modifier = Modifier.padding(bottom = SpacingMedium).fillMaxWidth(),
) )
} }
ExtraContent(entry = entry) ExtraContent(entry = entry)
@ -95,7 +99,7 @@ private fun ExtraContent(entry: PasswordEntry, modifier: Modifier = Modifier) {
readOnly = true, readOnly = true,
label = { Text(label.capitalize(Locale.current)) }, label = { Text(label.capitalize(Locale.current)) },
trailingIcon = { CopyButton(value, R.string.copy_label) }, trailingIcon = { CopyButton(value, R.string.copy_label) },
modifier = modifier.padding(bottom = 8.dp).fillMaxWidth(), modifier = modifier.padding(bottom = SpacingMedium).fillMaxWidth(),
) )
} }
} }

View file

@ -10,7 +10,6 @@ import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.requiredSize
import androidx.compose.foundation.lazy.LazyColumn import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items import androidx.compose.foundation.lazy.items
import androidx.compose.material3.AlertDialog import androidx.compose.material3.AlertDialog
@ -30,10 +29,10 @@ import androidx.compose.ui.res.painterResource
import androidx.compose.ui.res.stringResource import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.style.TextOverflow import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import app.passwordstore.R import app.passwordstore.R
import app.passwordstore.crypto.PGPIdentifier import app.passwordstore.crypto.PGPIdentifier
import app.passwordstore.ui.compose.theme.APSTheme import app.passwordstore.ui.compose.theme.APSTheme
import app.passwordstore.ui.compose.theme.SpacingLarge
import app.passwordstore.util.extensions.conditional import app.passwordstore.util.extensions.conditional
import kotlinx.collections.immutable.ImmutableList import kotlinx.collections.immutable.ImmutableList
import kotlinx.collections.immutable.persistentListOf import kotlinx.collections.immutable.persistentListOf
@ -90,7 +89,7 @@ private fun KeyItem(
} }
Row( Row(
modifier = modifier =
modifier.padding(16.dp).fillMaxWidth().conditional(onKeySelected != null) { modifier.padding(SpacingLarge).fillMaxWidth().conditional(onKeySelected != null) {
clickable { onKeySelected?.invoke(identifier) } clickable { onKeySelected?.invoke(identifier) }
}, },
horizontalArrangement = Arrangement.SpaceBetween, horizontalArrangement = Arrangement.SpaceBetween,
@ -103,7 +102,7 @@ private fun KeyItem(
maxLines = 1, maxLines = 1,
) )
if (onKeySelected == null) { if (onKeySelected == null) {
IconButton(onClick = { isDeleting = true }, modifier = Modifier.requiredSize(24.dp)) { IconButton(onClick = { isDeleting = true }) {
Icon( Icon(
painter = painterResource(R.drawable.ic_delete_24dp), painter = painterResource(R.drawable.ic_delete_24dp),
stringResource(id = R.string.delete), stringResource(id = R.string.delete),

View file

@ -18,10 +18,10 @@ import androidx.compose.ui.draw.shadow
import androidx.compose.ui.graphics.Color import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.painter.Painter import androidx.compose.ui.graphics.painter.Painter
import androidx.compose.ui.graphics.vector.rememberVectorPainter import androidx.compose.ui.graphics.vector.rememberVectorPainter
import androidx.compose.ui.unit.dp
import app.passwordstore.ui.compose.preview.DevicePreviews import app.passwordstore.ui.compose.preview.DevicePreviews
import app.passwordstore.ui.compose.preview.ThemePreviews import app.passwordstore.ui.compose.preview.ThemePreviews
import app.passwordstore.ui.compose.theme.APSTheme import app.passwordstore.ui.compose.theme.APSTheme
import app.passwordstore.ui.compose.theme.SpacingMedium
@SuppressLint("ComposableLambdaParameterNaming") // The lint doesn't really apply to `actions` @SuppressLint("ComposableLambdaParameterNaming") // The lint doesn't really apply to `actions`
@Composable @Composable
@ -39,13 +39,13 @@ public fun APSAppBar(
navigationIcon = { navigationIcon = {
if (navigationIcon != null) { if (navigationIcon != null) {
IconButton(onClick = onNavigationIconClick) { IconButton(onClick = onNavigationIconClick) {
Icon(painter = navigationIcon, contentDescription = null) Icon(painter = navigationIcon, contentDescription = "Back navigation button")
} }
} }
}, },
actions = actions, actions = actions,
colors = TopAppBarDefaults.topAppBarColors(containerColor = backgroundColor), colors = TopAppBarDefaults.topAppBarColors(containerColor = backgroundColor),
modifier = modifier.shadow(8.dp), modifier = modifier.shadow(SpacingMedium),
) )
} }

View file

@ -19,10 +19,10 @@ import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.vector.rememberVectorPainter import androidx.compose.ui.graphics.vector.rememberVectorPainter
import androidx.compose.ui.unit.dp
import app.passwordstore.ui.compose.preview.DevicePreviews import app.passwordstore.ui.compose.preview.DevicePreviews
import app.passwordstore.ui.compose.preview.ThemePreviews import app.passwordstore.ui.compose.preview.ThemePreviews
import app.passwordstore.ui.compose.theme.APSTheme import app.passwordstore.ui.compose.theme.APSTheme
import app.passwordstore.ui.compose.theme.SpacingLarge
public enum class ItemType { public enum class ItemType {
File, File,
@ -42,7 +42,7 @@ public fun PasswordItem(
.clickable(enabled = true, onClick = onClick) .clickable(enabled = true, onClick = onClick)
.background(MaterialTheme.colorScheme.background) .background(MaterialTheme.colorScheme.background)
.minimumInteractiveComponentSize() .minimumInteractiveComponentSize()
.padding(horizontal = 16.dp) .padding(horizontal = SpacingLarge)
.fillMaxWidth(), .fillMaxWidth(),
horizontalArrangement = Arrangement.SpaceBetween, horizontalArrangement = Arrangement.SpaceBetween,
verticalAlignment = Alignment.CenterVertically, verticalAlignment = Alignment.CenterVertically,

View file

@ -0,0 +1,9 @@
package app.passwordstore.ui.compose.theme
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp
public val SpacingSmall: Dp = 4.dp
public val SpacingMedium: Dp = 8.dp
public val SpacingLarge: Dp = 16.dp
public val SpacingLargest: Dp = 24.dp