[#804][Design system] Paddings - Dimens

* [#804][Design system] Paddings - Dimens

- Initial commit to ensure it meets our requirements
- This solution is now in parallel with a simpler existing Paddings solution
- Provides a way to define default and custom spacing values
- Could be distinguished by a screen size, but other metrics also available (e.g. orientation, aspect ratio, layout direction or screen shape)

* Move spacings change logic to comment

- We've decided to have only one regular spacing group for now, which is suitable for most of current phone devices

* Move Dimens out of internal package

* Link TODO for later Paddings remove

* Link issue of Use Dimens across the app to TODO
This commit is contained in:
Honza Rychnovsky 2023-03-16 13:23:55 +01:00 committed by GitHub
parent 1d74e0bbf2
commit 5cfa3a99e3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 96 additions and 5 deletions

View File

@ -0,0 +1,81 @@
package co.electriccoin.zcash.ui.design.theme
import androidx.compose.runtime.Composable
import androidx.compose.runtime.CompositionLocalProvider
import androidx.compose.runtime.Immutable
import androidx.compose.runtime.staticCompositionLocalOf
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp
@Immutable
data class Dimens(
// Default spacings:
val spacingXtiny: Dp,
val spacingTiny: Dp,
val spacingSmall: Dp,
val spacingDefault: Dp,
val spacingLarge: Dp,
val spacingXlarge: Dp,
val spacingHuge: Dp,
// List of custom spacings:
)
private val defaultDimens = Dimens(
spacingXtiny = 2.dp,
spacingTiny = 4.dp,
spacingSmall = 8.dp,
spacingDefault = 16.dp,
spacingLarge = 24.dp,
spacingXlarge = 32.dp,
spacingHuge = 64.dp,
)
private val normalDimens = defaultDimens
internal var LocalDimens = staticCompositionLocalOf { defaultDimens }
/**
* This is a convenience way on how to provide device specification based spacings. We use Configuration from Compose
* package for this purpose.
*
* For now we use just "normal" sized spacings for phone devices. Here is an example how we could split spacings to
* more groups based on screen size:
*
* val screenLayoutBitMask = LocalConfiguration.current.screenLayout
* val resultDimens = when (screenLayoutBitMask and SCREENLAYOUT_SIZE_MASK) {
* SCREENLAYOUT_SIZE_SMALL -> {
* Twig.info { "Current device screen size: SMALL. Screen is approximately 320x426 dp at least." }
* smallDimens
* }
* SCREENLAYOUT_SIZE_NORMAL -> {
* Twig.info { "Current device screen size: NORMAL. Screen is approximately 320x470 dp at least." }
* normalDimens
* }
* SCREENLAYOUT_SIZE_LARGE -> {
* Twig.info { "Current device screen size: LARGE. Screen is approximately 480x640 dp at least." }
* largeDimens
* }
* SCREENLAYOUT_SIZE_XLARGE -> {
* Twig.info { "Current device screen size: XLARGE. Screen is approximately 720x960 dp at least." }
* xlargeDimens
* }
* else -> {
* Twig.info { "Current device screen size: UNDEFINED - using NORMAL size values." }
* normalDimens
* }
* }
* LocalDimens = staticCompositionLocalOf { resultDimens }
*
*
* Alternatively we could also use different values based on these metrics:
* - landscape/portrait orientation modes
* - long/normal screen aspect ratio (screen is wider/taller than normal)
* - LRT/RTL screen set up
* - rounded/normal screen shape
*/
@Composable
internal fun ProvideDimens(content: @Composable () -> Unit,) {
val resultDimens = normalDimens
CompositionLocalProvider(LocalDimens provides resultDimens, content = content)
}

View File

@ -32,11 +32,13 @@ fun ZcashTheme(
}
CompositionLocalProvider(LocalExtendedColors provides extendedColors) {
MaterialTheme(
colorScheme = baseColors,
typography = Typography,
content = content
)
ProvideDimens {
MaterialTheme(
colorScheme = baseColors,
typography = Typography,
content = content
)
}
}
}
@ -50,6 +52,14 @@ object ZcashTheme {
@Composable
get() = LocalExtendedTypography.current
// TODO [#808]: [Design system] Use Dimens across the app
// TODO [#808]: https://github.com/zcash/secant-android-wallet/issues/808
val dimens: Dimens
@Composable
get() = LocalDimens.current
// TODO [#807]: [Design system] Remove deprecated Paddings class
// TODO [#807]: https://github.com/zcash/secant-android-wallet/issues/807
val paddings: Paddings
@Composable
get() = Paddings()