[#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:
parent
1d74e0bbf2
commit
5cfa3a99e3
|
@ -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)
|
||||||
|
}
|
|
@ -32,6 +32,7 @@ fun ZcashTheme(
|
||||||
}
|
}
|
||||||
|
|
||||||
CompositionLocalProvider(LocalExtendedColors provides extendedColors) {
|
CompositionLocalProvider(LocalExtendedColors provides extendedColors) {
|
||||||
|
ProvideDimens {
|
||||||
MaterialTheme(
|
MaterialTheme(
|
||||||
colorScheme = baseColors,
|
colorScheme = baseColors,
|
||||||
typography = Typography,
|
typography = Typography,
|
||||||
|
@ -39,6 +40,7 @@ fun ZcashTheme(
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// Use with eg. ZcashTheme.colors.tertiary
|
// Use with eg. ZcashTheme.colors.tertiary
|
||||||
object ZcashTheme {
|
object ZcashTheme {
|
||||||
|
@ -50,6 +52,14 @@ object ZcashTheme {
|
||||||
@Composable
|
@Composable
|
||||||
get() = LocalExtendedTypography.current
|
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
|
val paddings: Paddings
|
||||||
@Composable
|
@Composable
|
||||||
get() = Paddings()
|
get() = Paddings()
|
||||||
|
|
Loading…
Reference in New Issue