diff options
Diffstat (limited to 'ui/compose/src/main/kotlin')
6 files changed, 428 insertions, 0 deletions
diff --git a/ui/compose/src/main/kotlin/app/passwordstore/ui/APSAppBar.kt b/ui/compose/src/main/kotlin/app/passwordstore/ui/APSAppBar.kt new file mode 100644 index 00000000..94b646b7 --- /dev/null +++ b/ui/compose/src/main/kotlin/app/passwordstore/ui/APSAppBar.kt @@ -0,0 +1,40 @@ +package app.passwordstore.ui + +import androidx.compose.material3.ExperimentalMaterial3Api +import androidx.compose.material3.Icon +import androidx.compose.material3.IconButton +import androidx.compose.material3.Text +import androidx.compose.material3.TopAppBar +import androidx.compose.material3.TopAppBarDefaults +import androidx.compose.runtime.Composable +import androidx.compose.ui.Modifier +import androidx.compose.ui.draw.shadow +import androidx.compose.ui.graphics.Color +import androidx.compose.ui.graphics.painter.Painter +import androidx.compose.ui.unit.dp + +@Composable +@OptIn(ExperimentalMaterial3Api::class) +public fun APSAppBar( + title: String, + backgroundColor: Color, + navigationIcon: Painter?, + onNavigationIconClick: (() -> Unit)?, + modifier: Modifier = Modifier, +) { + TopAppBar( + title = { Text(text = title) }, + navigationIcon = { + if (navigationIcon != null) { + IconButton(onClick = { onNavigationIconClick?.invoke() }) { + Icon( + painter = navigationIcon, + contentDescription = null, + ) + } + } + }, + colors = TopAppBarDefaults.topAppBarColors(containerColor = backgroundColor), + modifier = modifier.shadow(8.dp), + ) +} diff --git a/ui/compose/src/main/kotlin/app/passwordstore/ui/compose/PasswordField.kt b/ui/compose/src/main/kotlin/app/passwordstore/ui/compose/PasswordField.kt new file mode 100644 index 00000000..d2a04777 --- /dev/null +++ b/ui/compose/src/main/kotlin/app/passwordstore/ui/compose/PasswordField.kt @@ -0,0 +1,82 @@ +package app.passwordstore.ui.compose + +import androidx.annotation.StringRes +import androidx.compose.material3.Icon +import androidx.compose.material3.IconButton +import androidx.compose.material3.Text +import androidx.compose.material3.TextField +import androidx.compose.runtime.Composable +import androidx.compose.runtime.getValue +import androidx.compose.runtime.mutableStateOf +import androidx.compose.runtime.remember +import androidx.compose.runtime.setValue +import androidx.compose.ui.Modifier +import androidx.compose.ui.platform.LocalClipboardManager +import androidx.compose.ui.res.painterResource +import androidx.compose.ui.res.stringResource +import androidx.compose.ui.text.AnnotatedString +import androidx.compose.ui.text.input.PasswordVisualTransformation +import androidx.compose.ui.text.input.VisualTransformation + +@Composable +public fun PasswordField( + value: String, + label: String, + initialVisibility: Boolean, + modifier: Modifier = Modifier, + readOnly: Boolean = false, +) { + var visible by remember { mutableStateOf(initialVisibility) } + TextField( + value = value, + onValueChange = {}, + readOnly = readOnly, + label = { Text(label) }, + visualTransformation = + if (visible) VisualTransformation.None else PasswordVisualTransformation(), + trailingIcon = { + ToggleButton( + visible = visible, + contentDescription = "Toggle password visibility", + onButtonClick = { visible = !visible }, + ) + }, + modifier = modifier, + ) +} + +@Composable +private fun ToggleButton( + visible: Boolean, + contentDescription: String, + onButtonClick: () -> Unit, + modifier: Modifier = Modifier, +) { + IconButton(onClick = onButtonClick, modifier = modifier) { + val icon = + if (visible) painterResource(id = R.drawable.baseline_visibility_off_24) + else painterResource(id = R.drawable.baseline_visibility_24) + Icon( + painter = icon, + contentDescription = contentDescription, + ) + } +} + +@Composable +public fun CopyButton( + textToCopy: String, + @StringRes buttonLabelRes: Int, + modifier: Modifier = Modifier, +) { + val clipboard = LocalClipboardManager.current + IconButton( + onClick = { clipboard.setText(AnnotatedString(textToCopy)) }, + modifier = modifier, + ) { + Icon( + painter = painterResource(R.drawable.ic_content_copy), + contentDescription = stringResource(buttonLabelRes), + ) + } +} diff --git a/ui/compose/src/main/kotlin/app/passwordstore/ui/compose/theme/Color.kt b/ui/compose/src/main/kotlin/app/passwordstore/ui/compose/theme/Color.kt new file mode 100644 index 00000000..7709d136 --- /dev/null +++ b/ui/compose/src/main/kotlin/app/passwordstore/ui/compose/theme/Color.kt @@ -0,0 +1,58 @@ +package app.passwordstore.ui.compose.theme + +import androidx.compose.ui.graphics.Color + +internal val md_theme_light_primary = Color(0xFF006591) +internal val md_theme_light_onPrimary = Color(0xFFffffff) +internal val md_theme_light_primaryContainer = Color(0xFFc7e6ff) +internal val md_theme_light_onPrimaryContainer = Color(0xFF001e30) +internal val md_theme_light_secondary = Color(0xFF4f606e) +internal val md_theme_light_onSecondary = Color(0xFFffffff) +internal val md_theme_light_secondaryContainer = Color(0xFFd3e5f5) +internal val md_theme_light_onSecondaryContainer = Color(0xFF0b1d29) +internal val md_theme_light_tertiary = Color(0xFF006494) +internal val md_theme_light_onTertiary = Color(0xFFffffff) +internal val md_theme_light_tertiaryContainer = Color(0xFFc8e6ff) +internal val md_theme_light_onTertiaryContainer = Color(0xFF001e31) +internal val md_theme_light_error = Color(0xFFba1b1b) +internal val md_theme_light_errorContainer = Color(0xFFffdad4) +internal val md_theme_light_onError = Color(0xFFffffff) +internal val md_theme_light_onErrorContainer = Color(0xFF410001) +internal val md_theme_light_background = Color(0xFFfcfcff) +internal val md_theme_light_onBackground = Color(0xFF1a1c1e) +internal val md_theme_light_surface = Color(0xFFfcfcff) +internal val md_theme_light_onSurface = Color(0xFF1a1c1e) +internal val md_theme_light_surfaceVariant = Color(0xFFdde3ea) +internal val md_theme_light_onSurfaceVariant = Color(0xFF41474d) +internal val md_theme_light_outline = Color(0xFF72787e) +internal val md_theme_light_inverseOnSurface = Color(0xFFf0f0f3) +internal val md_theme_light_inverseSurface = Color(0xFF2e3133) + +internal val md_theme_dark_primary = Color(0xFF85ceff) +internal val md_theme_dark_onPrimary = Color(0xFF00344e) +internal val md_theme_dark_primaryContainer = Color(0xFF004c6f) +internal val md_theme_dark_onPrimaryContainer = Color(0xFFc7e6ff) +internal val md_theme_dark_secondary = Color(0xFFb7c9d9) +internal val md_theme_dark_onSecondary = Color(0xFF21323e) +internal val md_theme_dark_secondaryContainer = Color(0xFF384956) +internal val md_theme_dark_onSecondaryContainer = Color(0xFFd3e5f5) +internal val md_theme_dark_tertiary = Color(0xFF8aceff) +internal val md_theme_dark_onTertiary = Color(0xFF003450) +internal val md_theme_dark_tertiaryContainer = Color(0xFF004b70) +internal val md_theme_dark_onTertiaryContainer = Color(0xFFc8e6ff) +internal val md_theme_dark_error = Color(0xFFffb4a9) +internal val md_theme_dark_errorContainer = Color(0xFF930006) +internal val md_theme_dark_onError = Color(0xFF680003) +internal val md_theme_dark_onErrorContainer = Color(0xFFffdad4) +internal val md_theme_dark_background = Color(0xFF1a1c1e) +internal val md_theme_dark_onBackground = Color(0xFFe1e2e5) +internal val md_theme_dark_surface = Color(0xFF1a1c1e) +internal val md_theme_dark_onSurface = Color(0xFFe1e2e5) +internal val md_theme_dark_surfaceVariant = Color(0xFF41474d) +internal val md_theme_dark_onSurfaceVariant = Color(0xFFc1c7ce) +internal val md_theme_dark_outline = Color(0xFF8b9197) +internal val md_theme_dark_inverseOnSurface = Color(0xFF1a1c1e) +internal val md_theme_dark_inverseSurface = Color(0xFFe1e2e5) + +internal val seed = Color(0xFF003e5b) +internal val error = Color(0xFFba1b1b) diff --git a/ui/compose/src/main/kotlin/app/passwordstore/ui/compose/theme/Theme.kt b/ui/compose/src/main/kotlin/app/passwordstore/ui/compose/theme/Theme.kt new file mode 100644 index 00000000..b11aa7c1 --- /dev/null +++ b/ui/compose/src/main/kotlin/app/passwordstore/ui/compose/theme/Theme.kt @@ -0,0 +1,77 @@ +package app.passwordstore.ui.compose.theme + +import androidx.compose.material3.ColorScheme +import androidx.compose.material3.MaterialTheme +import androidx.compose.material3.darkColorScheme +import androidx.compose.material3.lightColorScheme +import androidx.compose.runtime.Composable + +internal val LightThemeColors = + lightColorScheme( + primary = md_theme_light_primary, + onPrimary = md_theme_light_onPrimary, + primaryContainer = md_theme_light_primaryContainer, + onPrimaryContainer = md_theme_light_onPrimaryContainer, + secondary = md_theme_light_secondary, + onSecondary = md_theme_light_onSecondary, + secondaryContainer = md_theme_light_secondaryContainer, + onSecondaryContainer = md_theme_light_onSecondaryContainer, + tertiary = md_theme_light_tertiary, + onTertiary = md_theme_light_onTertiary, + tertiaryContainer = md_theme_light_tertiaryContainer, + onTertiaryContainer = md_theme_light_onTertiaryContainer, + error = md_theme_light_error, + errorContainer = md_theme_light_errorContainer, + onError = md_theme_light_onError, + onErrorContainer = md_theme_light_onErrorContainer, + background = md_theme_light_background, + onBackground = md_theme_light_onBackground, + surface = md_theme_light_surface, + onSurface = md_theme_light_onSurface, + surfaceVariant = md_theme_light_surfaceVariant, + onSurfaceVariant = md_theme_light_onSurfaceVariant, + outline = md_theme_light_outline, + inverseOnSurface = md_theme_light_inverseOnSurface, + inverseSurface = md_theme_light_inverseSurface, + ) +internal val DarkThemeColors = + darkColorScheme( + primary = md_theme_dark_primary, + onPrimary = md_theme_dark_onPrimary, + primaryContainer = md_theme_dark_primaryContainer, + onPrimaryContainer = md_theme_dark_onPrimaryContainer, + secondary = md_theme_dark_secondary, + onSecondary = md_theme_dark_onSecondary, + secondaryContainer = md_theme_dark_secondaryContainer, + onSecondaryContainer = md_theme_dark_onSecondaryContainer, + tertiary = md_theme_dark_tertiary, + onTertiary = md_theme_dark_onTertiary, + tertiaryContainer = md_theme_dark_tertiaryContainer, + onTertiaryContainer = md_theme_dark_onTertiaryContainer, + error = md_theme_dark_error, + errorContainer = md_theme_dark_errorContainer, + onError = md_theme_dark_onError, + onErrorContainer = md_theme_dark_onErrorContainer, + background = md_theme_dark_background, + onBackground = md_theme_dark_onBackground, + surface = md_theme_dark_surface, + onSurface = md_theme_dark_onSurface, + surfaceVariant = md_theme_dark_surfaceVariant, + onSurfaceVariant = md_theme_dark_onSurfaceVariant, + outline = md_theme_dark_outline, + inverseOnSurface = md_theme_dark_inverseOnSurface, + inverseSurface = md_theme_dark_inverseSurface, + ) + +@Composable +public fun APSTheme( + colors: ColorScheme, + content: @Composable () -> Unit, +) { + MaterialTheme(colorScheme = colors, typography = AppTypography, content = content) +} + +@Composable +public fun APSThemePreview(content: @Composable () -> Unit) { + MaterialTheme(colorScheme = LightThemeColors, typography = AppTypography, content = content) +} diff --git a/ui/compose/src/main/kotlin/app/passwordstore/ui/compose/theme/Type.kt b/ui/compose/src/main/kotlin/app/passwordstore/ui/compose/theme/Type.kt new file mode 100644 index 00000000..b9a07d5d --- /dev/null +++ b/ui/compose/src/main/kotlin/app/passwordstore/ui/compose/theme/Type.kt @@ -0,0 +1,144 @@ +package app.passwordstore.ui.compose.theme + +import androidx.compose.material3.Typography +import androidx.compose.ui.text.TextStyle +import androidx.compose.ui.text.font.Font +import androidx.compose.ui.text.font.FontFamily +import androidx.compose.ui.text.font.FontWeight +import androidx.compose.ui.unit.sp +import app.passwordstore.ui.compose.R + +internal val Manrope = + FontFamily( + Font(R.font.manrope_bold, FontWeight.Bold), + Font(R.font.manrope_extrabold, FontWeight.ExtraBold), + Font(R.font.manrope_extralight, FontWeight.ExtraLight), + Font(R.font.manrope_light, FontWeight.Light), + Font(R.font.manrope_medium, FontWeight.Medium), + Font(R.font.manrope_regular, FontWeight.Normal), + Font(R.font.manrope_semibold, FontWeight.SemiBold), + ) + +internal val AppTypography = + Typography( + displayLarge = + TextStyle( + fontFamily = Manrope, + fontWeight = FontWeight.W400, + fontSize = 57.sp, + lineHeight = 64.sp, + letterSpacing = (-0.25).sp, + ), + displayMedium = + TextStyle( + fontFamily = Manrope, + fontWeight = FontWeight.W400, + fontSize = 45.sp, + lineHeight = 52.sp, + letterSpacing = 0.sp, + ), + displaySmall = + TextStyle( + fontFamily = Manrope, + fontWeight = FontWeight.W400, + fontSize = 36.sp, + lineHeight = 44.sp, + letterSpacing = 0.sp, + ), + headlineLarge = + TextStyle( + fontFamily = Manrope, + fontWeight = FontWeight.W400, + fontSize = 32.sp, + lineHeight = 40.sp, + letterSpacing = 0.sp, + ), + headlineMedium = + TextStyle( + fontFamily = Manrope, + fontWeight = FontWeight.W400, + fontSize = 28.sp, + lineHeight = 36.sp, + letterSpacing = 0.sp, + ), + headlineSmall = + TextStyle( + fontFamily = Manrope, + fontWeight = FontWeight.W400, + fontSize = 24.sp, + lineHeight = 32.sp, + letterSpacing = 0.sp, + ), + titleLarge = + TextStyle( + fontFamily = Manrope, + fontWeight = FontWeight.W400, + fontSize = 22.sp, + lineHeight = 28.sp, + letterSpacing = 0.sp, + ), + titleMedium = + TextStyle( + fontFamily = Manrope, + fontWeight = FontWeight.Medium, + fontSize = 16.sp, + lineHeight = 24.sp, + letterSpacing = 0.1.sp, + ), + titleSmall = + TextStyle( + fontFamily = Manrope, + fontWeight = FontWeight.Medium, + fontSize = 14.sp, + lineHeight = 20.sp, + letterSpacing = 0.1.sp, + ), + labelLarge = + TextStyle( + fontFamily = Manrope, + fontWeight = FontWeight.Medium, + fontSize = 14.sp, + lineHeight = 20.sp, + letterSpacing = 0.1.sp, + ), + bodyLarge = + TextStyle( + fontFamily = Manrope, + fontWeight = FontWeight.W400, + fontSize = 16.sp, + lineHeight = 24.sp, + letterSpacing = 0.5.sp, + ), + bodyMedium = + TextStyle( + fontFamily = Manrope, + fontWeight = FontWeight.W400, + fontSize = 14.sp, + lineHeight = 20.sp, + letterSpacing = 0.25.sp, + ), + bodySmall = + TextStyle( + fontFamily = Manrope, + fontWeight = FontWeight.W400, + fontSize = 12.sp, + lineHeight = 16.sp, + letterSpacing = 0.4.sp, + ), + labelMedium = + TextStyle( + fontFamily = Manrope, + fontWeight = FontWeight.Medium, + fontSize = 12.sp, + lineHeight = 16.sp, + letterSpacing = 0.5.sp, + ), + labelSmall = + TextStyle( + fontFamily = Manrope, + fontWeight = FontWeight.Medium, + fontSize = 11.sp, + lineHeight = 16.sp, + letterSpacing = 0.5.sp, + ), + ) diff --git a/ui/compose/src/main/kotlin/app/passwordstore/ui/compose/theme/utils.kt b/ui/compose/src/main/kotlin/app/passwordstore/ui/compose/theme/utils.kt new file mode 100644 index 00000000..096862dc --- /dev/null +++ b/ui/compose/src/main/kotlin/app/passwordstore/ui/compose/theme/utils.kt @@ -0,0 +1,27 @@ +package app.passwordstore.ui.compose.theme + +import android.content.Context +import android.os.Build +import androidx.compose.foundation.isSystemInDarkTheme +import androidx.compose.material3.ColorScheme +import androidx.compose.material3.dynamicDarkColorScheme +import androidx.compose.material3.dynamicLightColorScheme +import androidx.compose.runtime.Composable + +@Composable +public fun decideColorScheme(context: Context): ColorScheme { + val isDarkTheme = isSystemInDarkTheme() + return if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.S) { + if (isDarkTheme) { + dynamicDarkColorScheme(context) + } else { + dynamicLightColorScheme(context) + } + } else { + if (isDarkTheme) { + DarkThemeColors + } else { + LightThemeColors + } + } +} |