WIP draft for review

Kaaveh · Jul 22, 2024 · 65b84b6 · 65b84b6
1 parent 569174d
commit 65b84b6
Show file tree

Hide file tree

Showing 4 changed files with 74 additions and 14 deletions.
diff --git a/app-watch/src/main/res/values/dimensions.xml b/app-watch/src/main/res/values/dimensions.xml
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+    <dimen name="cardPadding">4dp</dimen>
+    <dimen name="roundedCornerClipSize">6dp</dimen>
+    <dimen name="itemImageSize">24dp</dimen>
+    <dimen name="itemSpacerHeight">3dp</dimen>
+    <dimen name="arrowIconSize">10dp</dimen>
+</resources>
diff --git a/library/designsystem/src/main/java/ir/composenews/designsystem/component/MarketItem.kt b/library/designsystem/src/main/java/ir/composenews/designsystem/component/MarketItem.kt
@@ -42,9 +42,14 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.platform.LocalDensity
+import androidx.compose.ui.res.dimensionResource
 import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.tooling.preview.Devices
+import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
 import coil.compose.rememberAsyncImagePainter
 import ir.composenews.designsystem.R
 import ir.composenews.designsystem.preview.ThemePreviews
@@ -149,8 +154,8 @@ private fun MarketItemCard(
     Card(
         modifier = modifier
             .wrapContentHeight()
-            .padding(8.dp)
-            .clip(RoundedCornerShape(12.dp))
+            .padding(dimensionResource(id = R.dimen.cardPadding))
+            .clip(RoundedCornerShape(dimensionResource(id = R.dimen.roundedCornerClipSize)))
             .clickable { onItemClick() },
         shape = MaterialTheme.shapes.large,
         colors = if (isSystemInDarkTheme().not()) {
@@ -172,24 +177,30 @@ private fun MarketItemCard(
                 painter = rememberAsyncImagePainter(model = urlToImage),
                 contentDescription = name,
                 modifier = Modifier
-                    .size(48.dp)
+                    .size(dimensionResource(id = R.dimen.itemImageSize))
                     .clip(CircleShape),
             )
             Column(
                 modifier = Modifier.weight(1F),
+                horizontalAlignment = Alignment.CenterHorizontally
             ) {
                 Text(
                     text = symbol.uppercase(Locale.getDefault()),
-                    style = MaterialTheme.typography.headlineSmall,
+                    style = MaterialTheme.typography.headlineSmall, //TODO
+                )
+                Text(
+                    text = name,
+                    style = MaterialTheme.typography.bodyLarge, //TODO
+                    maxLines = 1
                 )
-                Text(text = name, style = MaterialTheme.typography.bodyLarge)
             }
             Column(
                 modifier = Modifier.weight(1.5F),
+                horizontalAlignment = Alignment.CenterHorizontally
             ) {
-                Text(text = "$price $", style = MaterialTheme.typography.titleMedium)
-                Spacer(modifier = Modifier.height(6.dp))
-                Row {
+                Text(text = "$price $", style = MaterialTheme.typography.titleMedium) //TODO
+                Spacer(modifier = Modifier.height(dimensionResource(id = R.dimen.itemSpacerHeight)))
+                Row(verticalAlignment = Alignment.CenterVertically) {
                     val color = when {
                         priceChangePercentage24h.contains("-") -> {
                             if (isSystemInDarkTheme()) darkDownTrendRed else lightDownTrendRed
@@ -203,7 +214,7 @@ private fun MarketItemCard(
 
                     Text(
                         text = "$priceChangePercentage24h %",
-                        style = MaterialTheme.typography.bodyLarge,
+                        style = MaterialTheme.typography.bodyLarge, //TODO
                         color = color,
                     )
                 }
@@ -220,7 +231,7 @@ private fun MarketItemCard(
 @Composable
 private fun ArrowIconUpOrDown(priceChangePercentage24h: String, tint: Color) {
     Icon(
-        modifier = Modifier.size(size = 20.dp),
+        modifier = Modifier.size(size = dimensionResource(id = R.dimen.arrowIconSize)),
         painter = if (priceChangePercentage24h.contains("-")) {
             painterResource(id = R.drawable.baseline_arrow_downward_24)
         } else {
@@ -231,7 +242,7 @@ private fun ArrowIconUpOrDown(priceChangePercentage24h: String, tint: Color) {
     )
 }
 
-@ThemePreviews
+@Preview(device = Devices.WEAR_OS_LARGE_ROUND, showSystemUi = true)
 @Composable
 private fun MarketItemPrev() {
     ComposeNewsTheme {
@@ -257,8 +268,8 @@ private fun ShimmerMarketItem() {
     Card(
         modifier = Modifier
             .wrapContentHeight()
-            .padding(8.dp)
-            .clip(RoundedCornerShape(12.dp)),
+            .padding(dimensionResource(id = R.dimen.cardPadding))
+            .clip(RoundedCornerShape(dimensionResource(id = R.dimen.roundedCornerClipSize))),
         shape = MaterialTheme.shapes.large,
         colors = if (isSystemInDarkTheme().not()) {
             CardDefaults.cardColors(containerColor = MaterialTheme.colorScheme.background)
@@ -270,7 +281,7 @@ private fun ShimmerMarketItem() {
     ) {
         Row(
             modifier = Modifier
-                .padding(8.dp)
+                .padding(dimensionResource(id = R.dimen.cardPadding))
                 .fillMaxWidth(),
             horizontalArrangement = Arrangement.spacedBy(8.dp),
             verticalAlignment = Alignment.CenterVertically,

diff --git a/library/designsystem/src/main/java/ir/composenews/designsystem/theme/Dimensions.kt b/library/designsystem/src/main/java/ir/composenews/designsystem/theme/Dimensions.kt
@@ -0,0 +1,33 @@
+package ir.composenews.designsystem.theme
+
+import androidx.compose.runtime.compositionLocalOf
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.TextUnit
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+
+@SuppressWarnings("unused")
+
+data class PhoneThemeDimensions(
+    val cardPadding: Dp = 8.dp,
+    val roundedCornerClipSize: Dp = 12.dp,
+    val itemImageSize: Dp = 48.dp,
+    val textHeadlineSmallSize: TextUnit = 24.sp,
+    val textBodyLargeSize: TextUnit = 16.sp,
+    val textTitleMediumSize: TextUnit = 16.sp,
+    val itemSpacerHeight: Dp = 6.dp,
+    val arrowIconSize: Dp = 20.dp,
+    // Add other dimensions as needed
+)
+
+data class WearThemeDimensions(
+    val cardPadding: Dp = 4.dp,
+    val roundedCornerClipSize: Dp = 6.dp,
+    val itemImageSize: Dp = 24.dp,
+    val textHeadlineSmallSize: TextUnit = 12.sp,
+    val textBodyLargeSize: TextUnit = 8.sp,
+    val textTitleMediumSize: TextUnit = 8.sp,
+    val itemSpacerHeight: Dp = 3.dp,
+    val arrowIconSize: Dp = 10.dp,
+    // Add other dimensions as needed
+)
diff --git a/library/designsystem/src/main/res/values/dimensions.xml b/library/designsystem/src/main/res/values/dimensions.xml
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+    <dimen name="cardPadding">8dp</dimen>
+    <dimen name="roundedCornerClipSize">12dp</dimen>
+    <dimen name="itemImageSize">48dp</dimen>
+    <dimen name="itemSpacerHeight">6dp</dimen>
+    <dimen name="arrowIconSize">20dp</dimen>
+</resources>