Fix wearos font issue (#699)

**Background** Right now we have some screen which not scrollable on WearOS **Changes** Use scroll for all screens with text **Test plan** Use large font and open all screens
flipperdevices · Sep 19, 2023 · 5381497 · 5381497
1 parent 5b0b54a
commit 5381497
Show file tree

Hide file tree

Showing 8 changed files with 78 additions and 53 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -9,6 +9,7 @@
 - [FIX] Use by default dark theme in Wear OS
 - [FIX] Use default splashscreen in Wear OS
 - [FIX] Fix compose layout in Wear OS
+- [FIX] Fix wearos font issue
 
 # 1.6.4 
 

diff --git a/components/wearable/core/ui/components/build.gradle.kts b/components/wearable/core/ui/components/build.gradle.kts
@@ -12,4 +12,5 @@ dependencies {
     implementation(libs.compose.tooling)
     implementation(libs.compose.wear.foundation)
     implementation(libs.compose.wear.material)
+    implementation(libs.horologist.layout)
 }
diff --git a/...n/java/com/flipperdevices/wearable/core/ui/components/ComposableWearOsScrollableColumn.kt b/...n/java/com/flipperdevices/wearable/core/ui/components/ComposableWearOsScrollableColumn.kt
@@ -0,0 +1,50 @@
+package com.flipperdevices.wearable.core.ui.components
+
+import androidx.compose.foundation.focusable
+import androidx.compose.foundation.gestures.scrollBy
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.ColumnScope
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.verticalScroll
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.rememberCoroutineScope
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.focus.FocusRequester
+import androidx.compose.ui.focus.focusRequester
+import androidx.compose.ui.input.rotary.onRotaryScrollEvent
+import com.google.android.horologist.compose.layout.fillMaxRectangle
+import kotlinx.coroutines.launch
+
+@Composable
+fun ComposableWearOsScrollableColumn(
+    modifier: Modifier = Modifier,
+    content: @Composable ColumnScope.() -> Unit
+) {
+    val columnScrollState = rememberScrollState()
+    val coroutineScope = rememberCoroutineScope()
+    val focusRequester = remember { FocusRequester() }
+    Column(
+        modifier
+            .verticalScroll(columnScrollState)
+            .fillMaxRectangle()
+            .onRotaryScrollEvent {
+                coroutineScope.launch {
+                    columnScrollState.scrollBy(it.verticalScrollPixels)
+                }
+                true
+            }
+            .focusRequester(focusRequester)
+            .focusable(),
+        horizontalAlignment = Alignment.CenterHorizontally,
+        verticalArrangement = Arrangement.Center,
+        content = content
+    )
+
+    LaunchedEffect(Unit) {
+        focusRequester.requestFocus()
+    }
+}
diff --git a/components/wearable/emulate/wear/impl/build.gradle.kts b/components/wearable/emulate/wear/impl/build.gradle.kts
@@ -23,6 +23,7 @@ dependencies {
     implementation(projects.components.core.ui.ktx)
     implementation(projects.components.core.ui.lifecycle)
     implementation(projects.components.wearable.core.ui.ktx)
+    implementation(projects.components.wearable.core.ui.components)
 
     implementation(projects.components.bridge.dao.api)
     implementation(projects.components.keyscreen.api)

diff --git a/...ear/impl/src/main/java/com/flipperdevices/wearable/emulate/impl/api/WearEmulateApiImpl.kt b/...ear/impl/src/main/java/com/flipperdevices/wearable/emulate/impl/api/WearEmulateApiImpl.kt
@@ -10,6 +10,7 @@ import com.flipperdevices.core.di.AppGraph
 import com.flipperdevices.core.di.ComponentHolder
 import com.flipperdevices.core.ui.navigation.ComposableFeatureEntry
 import com.flipperdevices.keyemulate.api.KeyEmulateUiApi
+import com.flipperdevices.wearable.core.ui.components.ComposableWearOsScrollableColumn
 import com.flipperdevices.wearable.emulate.api.WearEmulateApi
 import com.flipperdevices.wearable.emulate.impl.composable.ComposableWearEmulate
 import com.flipperdevices.wearable.emulate.impl.di.WearEmulateComponent
@@ -37,17 +38,21 @@ class WearEmulateApiImpl @Inject constructor(
 
     override fun NavGraphBuilder.composable(navController: NavHostController) {
         composable(featureRoute, arguments) {
-            ComposableWearEmulate(
-                keyEmulateUiApi,
-                onNotFoundNode = {
-                    navController.navigate(
-                        ComponentHolder.component<WearEmulateComponent>().setupApi.ROUTE.name
-                    ) {
-                        popUpTo(0)
-                    }
-                },
-                onBack = {
-                    navController.popBackStack()
+            ComposableWearOsScrollableColumn(
+                content = {
+                    ComposableWearEmulate(
+                        keyEmulateUiApi,
+                        onNotFoundNode = {
+                            navController.navigate(
+                                ComponentHolder.component<WearEmulateComponent>().setupApi.ROUTE.name
+                            ) {
+                                popUpTo(0)
+                            }
+                        },
+                        onBack = {
+                            navController.popBackStack()
+                        }
+                    )
                 }
             )
         }

diff --git a/...pl/src/main/java/com/flipperdevices/wearable/setup/impl/composable/ComposableFindPhone.kt b/...pl/src/main/java/com/flipperdevices/wearable/setup/impl/composable/ComposableFindPhone.kt
@@ -1,7 +1,5 @@
 package com.flipperdevices.wearable.setup.impl.composable
 
-import androidx.compose.foundation.focusable
-import androidx.compose.foundation.gestures.scrollBy
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.ColumnScope
@@ -11,16 +9,10 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.verticalScroll
 import androidx.compose.runtime.Composable
-import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.collectAsState
 import androidx.compose.runtime.getValue
-import androidx.compose.runtime.remember
-import androidx.compose.runtime.rememberCoroutineScope
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.focus.FocusRequester
-import androidx.compose.ui.focus.focusRequester
-import androidx.compose.ui.input.rotary.onRotaryScrollEvent
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.Devices
 import androidx.compose.ui.tooling.preview.Preview
@@ -32,37 +24,19 @@ import com.flipperdevices.core.ui.ktx.clickableRipple
 import com.flipperdevices.core.ui.theme.FlipperThemeInternal
 import com.flipperdevices.core.ui.theme.LocalTypography
 import com.flipperdevices.wearable.core.ui.components.ComposableFlipperButton
+import com.flipperdevices.wearable.core.ui.components.ComposableWearOsScrollableColumn
 import com.flipperdevices.wearable.setup.impl.R
 import com.flipperdevices.wearable.setup.impl.model.FindPhoneState
 import com.flipperdevices.wearable.setup.impl.viewmodel.FindPhoneViewModel
 import com.google.android.horologist.compose.layout.fillMaxRectangle
-import kotlinx.coroutines.launch
 
 @Composable
 fun ComposableFindPhone(
     onFoundPhone: () -> Unit,
     modifier: Modifier = Modifier,
     findPhoneViewModel: FindPhoneViewModel = viewModel()
 ) {
-    val columnScrollState = rememberScrollState()
-    val coroutineScope = rememberCoroutineScope()
-    val focusRequester = remember { FocusRequester() }
-
-    Column(
-        modifier = modifier
-            .verticalScroll(columnScrollState)
-            .fillMaxRectangle()
-            .onRotaryScrollEvent {
-                coroutineScope.launch {
-                    columnScrollState.scrollBy(it.verticalScrollPixels)
-                }
-                true
-            }
-            .focusRequester(focusRequester)
-            .focusable(),
-        verticalArrangement = Arrangement.Center,
-        horizontalAlignment = Alignment.CenterHorizontally
-    ) {
+    ComposableWearOsScrollableColumn(modifier) {
         val findPhoneModel by findPhoneViewModel.getFindPhoneModelFlow().collectAsState()
         val localFindPhoneModel = findPhoneModel
 
@@ -75,9 +49,6 @@ fun ComposableFindPhone(
             )
         }
     }
-    LaunchedEffect(Unit) {
-        focusRequester.requestFocus()
-    }
 }
 
 @Composable

diff --git a/components/wearable/sync/wear/impl/build.gradle.kts b/components/wearable/sync/wear/impl/build.gradle.kts
@@ -15,6 +15,7 @@ dependencies {
     implementation(projects.components.core.ui.theme)
     implementation(projects.components.core.ui.navigation)
     implementation(projects.components.wearable.core.ui.ktx)
+    implementation(projects.components.wearable.core.ui.components)
 
     implementation(projects.components.bridge.dao.api)
     implementation(projects.components.wearable.emulate.wear.api)

diff --git a/...src/main/java/com/flipperdevices/wearable/sync/wear/impl/composable/ComposableKeysList.kt b/...src/main/java/com/flipperdevices/wearable/sync/wear/impl/composable/ComposableKeysList.kt
@@ -3,9 +3,7 @@ package com.flipperdevices.wearable.sync.wear.impl.composable
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.focusable
 import androidx.compose.foundation.gestures.scrollBy
-import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.size
 import androidx.compose.runtime.Composable
@@ -26,17 +24,17 @@ import androidx.compose.ui.tooling.preview.Devices
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import androidx.lifecycle.viewmodel.compose.viewModel
+import androidx.wear.compose.foundation.lazy.ScalingLazyColumn
+import androidx.wear.compose.foundation.lazy.items
+import androidx.wear.compose.foundation.lazy.rememberScalingLazyListState
 import androidx.wear.compose.material.CircularProgressIndicator
-import androidx.wear.compose.material.ScalingLazyColumn
 import androidx.wear.compose.material.Text
-import androidx.wear.compose.material.items
-import androidx.wear.compose.material.rememberScalingLazyListState
 import com.flipperdevices.core.ui.theme.LocalTypography
+import com.flipperdevices.wearable.core.ui.components.ComposableWearOsScrollableColumn
 import com.flipperdevices.wearable.sync.wear.impl.R
 import com.flipperdevices.wearable.sync.wear.impl.model.FlipperWearKey
 import com.flipperdevices.wearable.sync.wear.impl.model.KeysListState
 import com.flipperdevices.wearable.sync.wear.impl.viewmodel.KeysListViewModel
-import com.google.android.horologist.compose.layout.fillMaxRectangle
 import kotlinx.collections.immutable.ImmutableList
 import kotlinx.coroutines.launch
 import com.flipperdevices.core.ui.res.R as DesignSystem
@@ -54,6 +52,7 @@ fun ComposableKeysList(
         } else {
             ComposableKeysListInternal(localState.keys, onKeyOpen)
         }
+
         KeysListState.Loading -> ComposableKeysListLoading()
     }
 }
@@ -75,11 +74,7 @@ private fun ComposableKeysListLoading() {
     device = Devices.WEAR_OS_LARGE_ROUND
 )
 private fun ComposableKeysListEmpty() {
-    Column(
-        Modifier.fillMaxRectangle(),
-        horizontalAlignment = Alignment.CenterHorizontally,
-        verticalArrangement = Arrangement.Center
-    ) {
+    ComposableWearOsScrollableColumn {
         Image(
             modifier = Modifier.size(48.dp),
             painter = painterResource(DesignSystem.drawable.ic_not_found),