fix wear font scale issues

Razeeman · Sep 21, 2024 · bc37036 · bc37036
1 parent 970edf7
commit bc37036
Show file tree

Hide file tree

Showing 8 changed files with 152 additions and 22 deletions.
diff --git a/app/src/base/java/com/example/util/simpletimetracker/WearModule.kt b/app/src/base/java/com/example/util/simpletimetracker/WearModule.kt
@@ -12,7 +12,7 @@ import javax.inject.Inject
 interface WearModule {
 
     @Binds
-    fun NoopWearInteractor.bindWearInteractor(): WearInteractor
+    fun bindWearInteractor(impl: NoopWearInteractor): WearInteractor
 
     class NoopWearInteractor @Inject constructor() : WearInteractor {
         override suspend fun update() {

diff --git a/.../simpletimetracker/feature_settings/viewModel/delegate/SettingsRatingViewModelDelegate.kt b/.../simpletimetracker/feature_settings/viewModel/delegate/SettingsRatingViewModelDelegate.kt
@@ -60,7 +60,7 @@ class SettingsRatingViewModelDelegate @Inject constructor(
 
     private fun onSupportDevelopmentClick() {
         router.execute(
-            OpenLinkParams(link = resourceRepo.getString(R.string.support_development_link))
+            OpenLinkParams(link = resourceRepo.getString(R.string.support_development_link)),
         )
     }
 

diff --git a/...c/main/java/com/example/util/simpletimetracker/presentation/ui/components/ActivityChip.kt b/...c/main/java/com/example/util/simpletimetracker/presentation/ui/components/ActivityChip.kt
@@ -15,6 +15,7 @@ import androidx.compose.runtime.Composable
 import androidx.compose.runtime.Immutable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
@@ -51,7 +52,7 @@ fun ActivityChip(
         ACTIVITY_RUNNING_VIEW_HEIGHT
     } else {
         ACTIVITY_VIEW_HEIGHT
-    }
+    } * LocalDensity.current.fontScale
     Chip(
         modifier = Modifier
             .height(height.dp)
@@ -123,6 +124,14 @@ fun Sample() {
     )
 }
 
+@Preview(device = WearDevices.LARGE_ROUND, fontScale = 2f)
+@Composable
+fun SampleFontScale() {
+    ActivityChip(
+        ActivityChipState(0, "Cooking", WearActivityIcon.Text("🎉"), 0xFF123456),
+    )
+}
+
 @Preview(device = WearDevices.LARGE_ROUND)
 @Composable
 fun SampleSleep() {
@@ -180,6 +189,17 @@ fun CurrentlyRunning() {
     )
 }
 
+@Preview(device = WearDevices.LARGE_ROUND, fontScale = 2f)
+@Composable
+fun CurrentlyRunningFontScale() {
+    ActivityChip(
+        ActivityChipState(
+            0, "Sleeping", WearActivityIcon.Text("🛏️"), 0xFFABCDEF,
+            startedAt = Instant.now().toEpochMilli() - 365000,
+        ),
+    )
+}
+
 @Preview(device = WearDevices.LARGE_ROUND)
 @Composable
 fun CurrentlyRunningLoading() {
@@ -204,6 +224,18 @@ fun CurrentlyRunningWithTags() {
     )
 }
 
+@Preview(device = WearDevices.LARGE_ROUND, fontScale = 2f)
+@Composable
+fun CurrentlyRunningWithTagsFontScale() {
+    ActivityChip(
+        ActivityChipState(
+            0, "Sleeping", WearActivityIcon.Text("🛏️"), 0xFFABCDEF,
+            startedAt = Instant.now().toEpochMilli() - 365000,
+            tagString = "Work, Hotel",
+        ),
+    )
+}
+
 @Preview(device = WearDevices.LARGE_ROUND)
 @Composable
 fun CurrentlyRunningWithTagsLoading() {

diff --git a/...java/com/example/util/simpletimetracker/presentation/ui/components/ActivityChipCompact.kt b/...java/com/example/util/simpletimetracker/presentation/ui/components/ActivityChipCompact.kt
@@ -85,7 +85,7 @@ fun ActivityChipCompact(
                     text = text,
                     maxLines = 1,
                     overflow = TextOverflow.Ellipsis,
-                    fontSize = 10.sp,
+                    fontSize = 10.scaledSp(),
                     letterSpacing = (-0.3).sp,
                     fontWeight = FontWeight.Bold,
                 )
@@ -165,6 +165,20 @@ private fun PreviewRunning() {
     )
 }
 
+@Preview(device = WearDevices.LARGE_ROUND, fontScale = 2f)
+@Composable
+private fun PreviewRunningFontScale() {
+    ActivityChipCompact(
+        modifier = Modifier.size(48.dp),
+        state = ActivityChipCompatState(
+            id = 0,
+            icon = WearActivityIcon.Text("🎉"),
+            color = 0xFF123456,
+            startedAt = Instant.now().toEpochMilli() - 36500000,
+        ),
+    )
+}
+
 @Preview(device = WearDevices.LARGE_ROUND)
 @Composable
 private fun PreviewRunningLoading() {

diff --git a/...in/java/com/example/util/simpletimetracker/presentation/ui/components/SettingsCheckbox.kt b/...in/java/com/example/util/simpletimetracker/presentation/ui/components/SettingsCheckbox.kt
@@ -6,11 +6,12 @@
 package com.example.util.simpletimetracker.presentation.ui.components
 
 import androidx.compose.foundation.clickable
-import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.text.font.FontWeight
@@ -33,28 +34,35 @@ fun SettingsCheckbox(
             .fillMaxWidth()
             .clickable(onClick = onClick),
     ) {
-        Column(
-            Modifier
+        Text(
+            modifier = Modifier
                 .padding(vertical = 3.dp)
                 .padding(horizontal = 4.dp)
                 .fillMaxWidth()
                 .weight(1f),
+            text = state.text,
+            fontWeight = FontWeight.Medium,
+        )
+        Box(
+            contentAlignment = Alignment.Center,
         ) {
+            // Dummy text for centering.
             Text(
-                text = state.text,
-                fontWeight = FontWeight.Medium,
+                modifier = Modifier
+                    .padding(vertical = 3.dp)
+                    .padding(horizontal = 4.dp),
+                text = "",
+            )
+            Checkbox(
+                checked = state.checked,
+                colors = CheckboxDefaults.colors(
+                    checkedBoxColor = ColorAccent,
+                    checkedCheckmarkColor = ColorAccent,
+                    uncheckedBoxColor = Color.White,
+                    uncheckedCheckmarkColor = Color.White,
+                ),
             )
         }
-        Checkbox(
-            modifier = Modifier,
-            checked = state.checked,
-            colors = CheckboxDefaults.colors(
-                checkedBoxColor = ColorAccent,
-                checkedCheckmarkColor = ColorAccent,
-                uncheckedBoxColor = Color.White,
-                uncheckedCheckmarkColor = Color.White,
-            ),
-        )
     }
 }
 
@@ -70,6 +78,18 @@ private fun SettingsCheckboxPreview() {
     )
 }
 
+@Preview(device = WearDevices.LARGE_ROUND, fontScale = 2f)
+@Composable
+private fun SettingsCheckboxFontScalePreview() {
+    SettingsCheckbox(
+        state = SettingsItem.CheckBox(
+            type = SettingsItemType.ShowCompactList,
+            text = "Check box",
+            checked = false,
+        ),
+    )
+}
+
 @Preview(device = WearDevices.LARGE_ROUND)
 @Composable
 private fun SettingsCheckboxCheckedPreview() {

diff --git a/wear/src/main/java/com/example/util/simpletimetracker/presentation/ui/components/TagChip.kt b/wear/src/main/java/com/example/util/simpletimetracker/presentation/ui/components/TagChip.kt
@@ -13,6 +13,7 @@ import androidx.compose.runtime.Immutable
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
@@ -71,9 +72,11 @@ private fun SingleSelectTagChip(
     val onClickState = remember(state.id) {
         { onClick(state.id) }
     }
+    val height = ACTIVITY_VIEW_HEIGHT.dp *
+        LocalDensity.current.fontScale
     Chip(
         modifier = Modifier
-            .height(ACTIVITY_VIEW_HEIGHT.dp)
+            .height(height)
             .fillMaxWidth(),
         onClick = onClickState,
         label = {
@@ -106,9 +109,11 @@ private fun MultiSelectTagChip(
     val onClickState = remember(state.id) {
         { onClick(state.id) }
     }
+    val height = ACTIVITY_VIEW_HEIGHT.dp *
+        LocalDensity.current.fontScale
     SplitToggleChip(
         modifier = Modifier
-            .height(ACTIVITY_VIEW_HEIGHT.dp)
+            .height(height)
             .fillMaxWidth(),
         checked = state.checked,
         onCheckedChange = onCheckedChange,
@@ -162,6 +167,20 @@ private fun Default() {
     )
 }
 
+@Preview(device = WearDevices.LARGE_ROUND, fontScale = 2f)
+@Composable
+private fun DefaultWithFontScale() {
+    TagChip(
+        state = TagChipState(
+            id = 123,
+            name = "Sleep",
+            color = 0xFF123456,
+            checked = false,
+            mode = TagChipState.TagSelectionMode.SINGLE,
+        ),
+    )
+}
+
 @Preview(device = WearDevices.LARGE_ROUND)
 @Composable
 private fun Loading() {
@@ -191,6 +210,20 @@ private fun MultiSelectMode() {
     )
 }
 
+@Preview(device = WearDevices.LARGE_ROUND, fontScale = 2f)
+@Composable
+private fun MultiSelectModeFontScale() {
+    TagChip(
+        state = TagChipState(
+            id = 123,
+            name = "Sleep",
+            color = 0xFF654321,
+            checked = false,
+            mode = TagChipState.TagSelectionMode.MULTI,
+        ),
+    )
+}
+
 @Preview(device = WearDevices.LARGE_ROUND)
 @Composable
 private fun MultiSelectChecked() {

diff --git a/.../java/com/example/util/simpletimetracker/presentation/ui/components/TagSelectionButton.kt b/.../java/com/example/util/simpletimetracker/presentation/ui/components/TagSelectionButton.kt
@@ -13,6 +13,7 @@ import androidx.compose.runtime.Immutable
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.tooling.preview.Preview
@@ -41,9 +42,11 @@ fun TagSelectionButton(
     val onClickState = remember(state) {
         { onClick(state.buttonType) }
     }
+    val height = ACTIVITY_VIEW_HEIGHT.dp *
+        LocalDensity.current.fontScale
     Chip(
         modifier = Modifier
-            .height(ACTIVITY_VIEW_HEIGHT.dp)
+            .height(height)
             .fillMaxWidth(),
         onClick = onClickState,
         label = {
@@ -105,3 +108,15 @@ private fun Loading() {
         ),
     )
 }
+
+@Preview(device = WearDevices.LARGE_ROUND, fontScale = 2f)
+@Composable
+private fun FontScaled() {
+    TagSelectionButton(
+        state = TagSelectionButtonState(
+            text = "Temp",
+            color = ColorInactive,
+            buttonType = TagListState.Item.ButtonType.Untagged,
+        ),
+    )
+}
diff --git a/wear/src/main/java/com/example/util/simpletimetracker/presentation/ui/components/UiUtils.kt b/wear/src/main/java/com/example/util/simpletimetracker/presentation/ui/components/UiUtils.kt
@@ -0,0 +1,16 @@
+package com.example.util.simpletimetracker.presentation.ui.components
+
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.platform.LocalDensity
+import androidx.compose.ui.unit.TextUnit
+import androidx.compose.ui.unit.sp
+
+@Composable
+fun Int.scaledSp(): TextUnit {
+    val value: Int = this
+    return with(LocalDensity.current) {
+        val fontScale = this.fontScale
+        val textSize = value / fontScale
+        textSize.sp
+    }
+}