From ae35bde356cce8a127e6c5e8eadbbcea8c373448 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?David=20G=C3=B6ransson?= Date: Wed, 20 Sep 2023 17:38:46 +0200 Subject: [PATCH 1/2] Replace ConstraintLayout with Row In some cases (TextField) the constriantlayout would steal focus when user uses right arrow. This commit removes the use of ConstraintLayout so it won't interfere with input. --- .../mullvadvpn/compose/component/TopBar.kt | 62 +++++++------------ 1 file changed, 23 insertions(+), 39 deletions(-) diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/TopBar.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/TopBar.kt index 234bcbace895..1b2c24c27214 100644 --- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/TopBar.kt +++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/TopBar.kt @@ -3,20 +3,21 @@ package net.mullvad.mullvadvpn.compose.component import androidx.compose.foundation.Image import androidx.compose.foundation.background import androidx.compose.foundation.clickable +import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.fillMaxHeight import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.padding -import androidx.compose.foundation.layout.width +import androidx.compose.foundation.layout.size import androidx.compose.material3.Icon import androidx.compose.material3.MaterialTheme 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.res.painterResource import androidx.compose.ui.res.stringResource import androidx.compose.ui.tooling.preview.Preview -import androidx.constraintlayout.compose.ConstraintLayout import net.mullvad.mullvadvpn.R import net.mullvad.mullvadvpn.lib.theme.AppTheme import net.mullvad.mullvadvpn.lib.theme.Dimens @@ -43,41 +44,32 @@ fun TopBar( iconTintColor: Color, isIconAndLogoVisible: Boolean = true ) { - ConstraintLayout( + Row( modifier = Modifier.fillMaxWidth() .height(Dimens.topBarHeight) .background(backgroundColor) .then(modifier), + verticalAlignment = Alignment.CenterVertically ) { - val (logo, appName, accountIcon, settingsIcon) = createRefs() - - if (isIconAndLogoVisible) { - Image( - painter = painterResource(id = R.drawable.logo_icon), - contentDescription = null, // No meaningful user info or action. - modifier = - Modifier.padding(start = Dimens.mediumPadding) - .width(Dimens.buttonHeight) - .height(Dimens.buttonHeight) - .constrainAs(logo) { - centerVerticallyTo(parent) - start.linkTo(parent.start) - } - ) - - Icon( - painter = painterResource(id = R.drawable.logo_text), - tint = iconTintColor, - contentDescription = null, // No meaningful user info or action. - modifier = - Modifier.padding(start = Dimens.smallPadding) - .height(Dimens.mediumPadding) - .constrainAs(appName) { - centerVerticallyTo(parent) - start.linkTo(logo.end) - } - ) + Row( + Modifier.height(Dimens.topBarHeight).weight(1f).padding(start = Dimens.mediumPadding), + verticalAlignment = Alignment.CenterVertically + ) { + if (isIconAndLogoVisible) { + Image( + painter = painterResource(id = R.drawable.logo_icon), + contentDescription = null, // No meaningful user info or action. + modifier = Modifier.size(Dimens.buttonHeight) + ) + Icon( + painter = painterResource(id = R.drawable.logo_text), + tint = iconTintColor, + contentDescription = null, // No meaningful user info or action. + modifier = + Modifier.padding(start = Dimens.smallPadding).height(Dimens.mediumPadding) + ) + } } if (onAccountClicked != null) { @@ -88,13 +80,6 @@ fun TopBar( Modifier.clickable { onAccountClicked() } .fillMaxHeight() .padding(horizontal = Dimens.mediumPadding) - .constrainAs(accountIcon) { - if (onSettingsClicked != null) { - end.linkTo(settingsIcon.start) - } else { - end.linkTo(parent.end) - } - } ) } @@ -106,7 +91,6 @@ fun TopBar( Modifier.clickable { onSettingsClicked() } .fillMaxHeight() .padding(horizontal = Dimens.mediumPadding) - .constrainAs(settingsIcon) { end.linkTo(parent.end) } ) } } From 67d348403761693512fafbcd87a84992ef9adda4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?David=20G=C3=B6ransson?= Date: Fri, 22 Sep 2023 11:32:28 +0200 Subject: [PATCH 2/2] Add previews --- .../mullvadvpn/compose/component/TopBar.kt | 28 +++++++++++++++++++ 1 file changed, 28 insertions(+) diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/TopBar.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/TopBar.kt index 1b2c24c27214..8f2277ad2a6e 100644 --- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/TopBar.kt +++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/TopBar.kt @@ -35,6 +35,34 @@ private fun PreviewTopBar() { } } +@Preview +@Composable +private fun PreviewNoIconAndLogoTopBar() { + AppTheme { + TopBar( + backgroundColor = MaterialTheme.colorScheme.inversePrimary, + iconTintColor = MaterialTheme.colorScheme.onPrimary, + isIconAndLogoVisible = false, + onSettingsClicked = {}, + onAccountClicked = null, + ) + } +} + +@Preview +@Composable +private fun PreviewNothingTopBar() { + AppTheme { + TopBar( + backgroundColor = MaterialTheme.colorScheme.inversePrimary, + iconTintColor = MaterialTheme.colorScheme.onPrimary, + isIconAndLogoVisible = false, + onSettingsClicked = null, + onAccountClicked = null + ) + } +} + @Composable fun TopBar( backgroundColor: Color,