refactor(ui): tokenize spacing
This commit is contained in:
parent
4939153e81
commit
f60c20060d
6 changed files with 34 additions and 18 deletions
|
@ -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)
|
||||||
|
|
|
@ -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(),
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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),
|
||||||
|
|
|
@ -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),
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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,
|
||||||
|
|
|
@ -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
|
Loading…
Reference in a new issue