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.stringResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import app.passwordstore.R
import app.passwordstore.data.passfile.PasswordEntry
import app.passwordstore.ui.APSAppBar
import app.passwordstore.ui.compose.PasswordField
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.totp.UriTotpFinder
@ -43,13 +44,16 @@ fun EditPasswordScreen(
}
) { 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) {
PasswordField(
value = entry.password!!,
label = stringResource(R.string.password),
initialVisibility = false,
modifier = Modifier.padding(bottom = 8.dp).fillMaxWidth(),
modifier = Modifier.padding(bottom = SpacingMedium).fillMaxWidth(),
)
}
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.intl.Locale
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import app.passwordstore.R
import app.passwordstore.data.passfile.PasswordEntry
import app.passwordstore.ui.APSAppBar
import app.passwordstore.ui.compose.CopyButton
import app.passwordstore.ui.compose.PasswordField
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.totp.UriTotpFinder
import kotlinx.coroutines.flow.first
@ -49,14 +50,17 @@ fun ViewPasswordScreen(
}
) { 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) {
PasswordField(
value = entry.password!!,
label = stringResource(R.string.password),
initialVisibility = false,
readOnly = true,
modifier = Modifier.padding(bottom = 8.dp).fillMaxWidth(),
modifier = Modifier.padding(bottom = SpacingMedium).fillMaxWidth(),
)
}
if (entry.hasTotp()) {
@ -67,7 +71,7 @@ fun ViewPasswordScreen(
readOnly = true,
label = { Text("OTP (expires in ${totp.remainingTime.inWholeSeconds}s)") },
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) {
@ -77,7 +81,7 @@ fun ViewPasswordScreen(
readOnly = true,
label = { Text(stringResource(R.string.username)) },
trailingIcon = { CopyButton(entry.username!!, R.string.copy_label) },
modifier = Modifier.padding(bottom = 8.dp).fillMaxWidth(),
modifier = Modifier.padding(bottom = SpacingMedium).fillMaxWidth(),
)
}
ExtraContent(entry = entry)
@ -95,7 +99,7 @@ private fun ExtraContent(entry: PasswordEntry, modifier: Modifier = Modifier) {
readOnly = true,
label = { Text(label.capitalize(Locale.current)) },
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.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.requiredSize
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
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.text.style.TextOverflow
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import app.passwordstore.R
import app.passwordstore.crypto.PGPIdentifier
import app.passwordstore.ui.compose.theme.APSTheme
import app.passwordstore.ui.compose.theme.SpacingLarge
import app.passwordstore.util.extensions.conditional
import kotlinx.collections.immutable.ImmutableList
import kotlinx.collections.immutable.persistentListOf
@ -90,7 +89,7 @@ private fun KeyItem(
}
Row(
modifier =
modifier.padding(16.dp).fillMaxWidth().conditional(onKeySelected != null) {
modifier.padding(SpacingLarge).fillMaxWidth().conditional(onKeySelected != null) {
clickable { onKeySelected?.invoke(identifier) }
},
horizontalArrangement = Arrangement.SpaceBetween,
@ -103,7 +102,7 @@ private fun KeyItem(
maxLines = 1,
)
if (onKeySelected == null) {
IconButton(onClick = { isDeleting = true }, modifier = Modifier.requiredSize(24.dp)) {
IconButton(onClick = { isDeleting = true }) {
Icon(
painter = painterResource(R.drawable.ic_delete_24dp),
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.painter.Painter
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.ThemePreviews
import app.passwordstore.ui.compose.theme.APSTheme
import app.passwordstore.ui.compose.theme.SpacingMedium
@SuppressLint("ComposableLambdaParameterNaming") // The lint doesn't really apply to `actions`
@Composable
@ -39,13 +39,13 @@ public fun APSAppBar(
navigationIcon = {
if (navigationIcon != null) {
IconButton(onClick = onNavigationIconClick) {
Icon(painter = navigationIcon, contentDescription = null)
Icon(painter = navigationIcon, contentDescription = "Back navigation button")
}
}
},
actions = actions,
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.Modifier
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.ThemePreviews
import app.passwordstore.ui.compose.theme.APSTheme
import app.passwordstore.ui.compose.theme.SpacingLarge
public enum class ItemType {
File,
@ -42,7 +42,7 @@ public fun PasswordItem(
.clickable(enabled = true, onClick = onClick)
.background(MaterialTheme.colorScheme.background)
.minimumInteractiveComponentSize()
.padding(horizontal = 16.dp)
.padding(horizontal = SpacingLarge)
.fillMaxWidth(),
horizontalArrangement = Arrangement.SpaceBetween,
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