[#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,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()
|
||||
|
|
Loading…
Reference in New Issue