From 5cfa3a99e3857e2d5e31494ec70f0a54fd3947ae Mon Sep 17 00:00:00 2001
From: Honza Rychnovsky <rychnovsky.honza@gmail.com>
Date: Thu, 16 Mar 2023 13:23:55 +0100
Subject: [PATCH] [#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
---
 .../zcash/ui/design/theme/Dimens.kt           | 81 +++++++++++++++++++
 .../zcash/ui/design/theme/ZcashTheme.kt       | 20 +++--
 2 files changed, 96 insertions(+), 5 deletions(-)
 create mode 100644 ui-design-lib/src/main/java/co/electriccoin/zcash/ui/design/theme/Dimens.kt

diff --git a/ui-design-lib/src/main/java/co/electriccoin/zcash/ui/design/theme/Dimens.kt b/ui-design-lib/src/main/java/co/electriccoin/zcash/ui/design/theme/Dimens.kt
new file mode 100644
index 00000000..1ad55c24
--- /dev/null
+++ b/ui-design-lib/src/main/java/co/electriccoin/zcash/ui/design/theme/Dimens.kt
@@ -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)
+}
diff --git a/ui-design-lib/src/main/java/co/electriccoin/zcash/ui/design/theme/ZcashTheme.kt b/ui-design-lib/src/main/java/co/electriccoin/zcash/ui/design/theme/ZcashTheme.kt
index 42ec60eb..463f645b 100644
--- a/ui-design-lib/src/main/java/co/electriccoin/zcash/ui/design/theme/ZcashTheme.kt
+++ b/ui-design-lib/src/main/java/co/electriccoin/zcash/ui/design/theme/ZcashTheme.kt
@@ -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()