From 004001b4c6d7b7da8d6244fc627a2cacccfff30e Mon Sep 17 00:00:00 2001 From: saber safavi Date: Thu, 10 Aug 2023 10:49:59 +0200 Subject: [PATCH] Change focus order in select location screen --- .../compose/screen/SelectLocationScreen.kt | 83 +++++++++++-------- 1 file changed, 50 insertions(+), 33 deletions(-) diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/SelectLocationScreen.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/SelectLocationScreen.kt index b66cb555b241..1c7bfc4c7aff 100644 --- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/SelectLocationScreen.kt +++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/SelectLocationScreen.kt @@ -18,9 +18,14 @@ import androidx.compose.material3.MaterialTheme import androidx.compose.material3.Text import androidx.compose.runtime.Composable import androidx.compose.runtime.LaunchedEffect +import androidx.compose.runtime.remember import androidx.compose.ui.Alignment +import androidx.compose.ui.ExperimentalComposeUiApi import androidx.compose.ui.Modifier import androidx.compose.ui.draw.rotate +import androidx.compose.ui.focus.FocusRequester +import androidx.compose.ui.focus.focusProperties +import androidx.compose.ui.focus.focusRequester import androidx.compose.ui.platform.testTag import androidx.compose.ui.res.painterResource import androidx.compose.ui.res.stringResource @@ -55,6 +60,7 @@ fun PreviewSelectLocationScreen() { AppTheme { SelectLocationScreen(uiState = state, uiCloseAction = MutableSharedFlow()) } } +@OptIn(ExperimentalComposeUiApi::class) @Composable fun SelectLocationScreen( uiState: SelectLocationUiState, @@ -64,30 +70,39 @@ fun SelectLocationScreen( onBackClick: () -> Unit = {} ) { LaunchedEffect(Unit) { uiCloseAction.collect { onBackClick() } } + val (backFocus, listFocus, searchBarFocus) = remember { FocusRequester.createRefs() } Column( modifier = - Modifier.background(MaterialTheme.colorScheme.background).fillMaxWidth().fillMaxHeight() + Modifier.background(MaterialTheme.colorScheme.background).fillMaxWidth().fillMaxHeight() ) { Row( modifier = - Modifier.padding( - horizontal = Dimens.selectLocationTitlePadding, - vertical = Dimens.selectLocationTitlePadding - ) - .fillMaxWidth() + Modifier.padding( + horizontal = Dimens.selectLocationTitlePadding, + vertical = Dimens.selectLocationTitlePadding + ) + .fillMaxWidth() ) { Image( painter = painterResource(id = R.drawable.icon_back), contentDescription = null, modifier = - Modifier.size(Dimens.titleIconSize).rotate(270f).clickable { onBackClick() } + Modifier.focusRequester(backFocus) + .focusProperties { next = listFocus } + .focusProperties { + down = listFocus + right = searchBarFocus + } + .size(Dimens.titleIconSize) + .rotate(270f) + .clickable { onBackClick() } ) Text( text = stringResource(id = R.string.select_location), modifier = - Modifier.align(Alignment.CenterVertically) - .weight(weight = 1f) - .padding(end = Dimens.titleIconSize), + Modifier.align(Alignment.CenterVertically) + .weight(weight = 1f) + .padding(end = Dimens.titleIconSize), textAlign = TextAlign.Center, style = MaterialTheme.typography.labelLarge, color = MaterialTheme.colorScheme.onPrimary @@ -95,15 +110,17 @@ fun SelectLocationScreen( } SearchTextField( modifier = - Modifier.fillMaxWidth() - .height(Dimens.searchFieldHeight) - .padding(horizontal = Dimens.searchFieldHorizontalPadding) + Modifier.fillMaxWidth() + .focusRequester(searchBarFocus) + .focusProperties { next = backFocus } + .height(Dimens.searchFieldHeight) + .padding(horizontal = Dimens.searchFieldHorizontalPadding) ) { searchString -> onSearchTermInput.invoke(searchString) } Spacer(modifier = Modifier.height(height = Dimens.verticalSpace)) LazyColumn( - modifier = Modifier.fillMaxWidth().fillMaxHeight(), + modifier = Modifier.focusRequester(listFocus).fillMaxWidth().fillMaxHeight(), horizontalAlignment = Alignment.CenterHorizontally ) { when (uiState) { @@ -112,11 +129,11 @@ fun SelectLocationScreen( CircularProgressIndicator( color = MaterialTheme.colorScheme.onBackground, modifier = - Modifier.size( - width = Dimens.progressIndicatorSize, - height = Dimens.progressIndicatorSize - ) - .testTag(CIRCULAR_PROGRESS_INDICATOR) + Modifier.size( + width = Dimens.progressIndicatorSize, + height = Dimens.progressIndicatorSize + ) + .testTag(CIRCULAR_PROGRESS_INDICATOR) ) } } @@ -139,24 +156,24 @@ fun SelectLocationScreen( item(contentType = ContentType.EMPTY_TEXT) { val firstRow = HtmlCompat.fromHtml( - textResource( - id = R.string.select_location_empty_text_first_row, - uiState.searchTerm - ), - HtmlCompat.FROM_HTML_MODE_COMPACT - ) + textResource( + id = R.string.select_location_empty_text_first_row, + uiState.searchTerm + ), + HtmlCompat.FROM_HTML_MODE_COMPACT + ) .toAnnotatedString(boldFontWeight = FontWeight.ExtraBold) Text( text = - buildAnnotatedString { - append(firstRow) - appendLine() - append( - textResource( - id = R.string.select_location_empty_text_second_row - ) + buildAnnotatedString { + append(firstRow) + appendLine() + append( + textResource( + id = R.string.select_location_empty_text_second_row ) - }, + ) + }, style = MaterialTheme.typography.labelMedium, textAlign = TextAlign.Center )