fix: search top bar alignment and interactions [WPB-2231] [WPB-5172] (#…

…2377)
wireapp · Oct 30, 2023 · 82a71f4 · 82a71f4
1 parent 28cead3
commit 82a71f4
Show file tree

Hide file tree

Showing 12 changed files with 182 additions and 246 deletions.
diff --git a/app/src/main/kotlin/com/wire/android/ui/common/SearchBar.kt b/app/src/main/kotlin/com/wire/android/ui/common/SearchBar.kt
@@ -31,69 +31,36 @@ import androidx.compose.material3.IconButton
 import androidx.compose.material3.LocalTextStyle
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
-import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.remember
-import androidx.compose.ui.ExperimentalComposeUiApi
+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.platform.LocalSoftwareKeyboardController
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.text.input.TextFieldValue
-import androidx.compose.ui.text.style.TextAlign
-import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import com.wire.android.R
 import com.wire.android.ui.common.textfield.WireTextField
+import com.wire.android.ui.theme.WireTheme
 import com.wire.android.ui.theme.wireColorScheme
+import com.wire.android.util.ui.PreviewMultipleThemes
 
-@Composable
-fun SearchBar(
-    placeholderText: String,
-    onTextTyped: (TextFieldValue) -> Unit = {},
-    modifier: Modifier = Modifier
-) {
-    SearchBarInput(
-        placeholderText = placeholderText,
-        leadingIcon =
-        {
-            IconButton(onClick = { }) {
-                Icon(
-                    painter = painterResource(id = R.drawable.ic_search),
-                    contentDescription = stringResource(R.string.content_description_conversation_search_icon),
-                    tint = MaterialTheme.wireColorScheme.onBackground
-                )
-            }
-        },
-        placeholderTextStyle = LocalTextStyle.current.copy(textAlign = TextAlign.Center),
-        textStyle = LocalTextStyle.current.copy(textAlign = TextAlign.Start),
-        onTextTyped = onTextTyped,
-        modifier = modifier
-    )
-}
-
-@OptIn(ExperimentalComposeUiApi::class)
 @Composable
 fun SearchBarInput(
     placeholderText: String,
     leadingIcon: @Composable () -> Unit,
     text: TextFieldValue = TextFieldValue(""),
     onTextTyped: (TextFieldValue) -> Unit = {},
     placeholderTextStyle: TextStyle = LocalTextStyle.current,
+    placeholderAlignment: Alignment.Horizontal = Alignment.CenterHorizontally,
     interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
     textStyle: TextStyle = LocalTextStyle.current,
     modifier: Modifier = Modifier,
-    shouldRequestFocus: Boolean = false
 ) {
-    val focusRequester = remember { FocusRequester() }
-    val keyboardController = LocalSoftwareKeyboardController.current
 
     WireTextField(
-        modifier = modifier
-            .focusRequester(focusRequester),
+        modifier = modifier,
         value = text,
         onValueChange = onTextTyped,
         leadingIcon = {
@@ -120,21 +87,28 @@ fun SearchBarInput(
         interactionSource = interactionSource,
         textStyle = textStyle.copy(fontSize = 14.sp),
         placeholderTextStyle = placeholderTextStyle.copy(fontSize = 14.sp),
+        placeholderAlignment = placeholderAlignment,
         placeholderText = placeholderText,
         maxLines = 1,
         singleLine = true,
     )
-
-    if (shouldRequestFocus) {
-        LaunchedEffect(Unit) {
-            focusRequester.requestFocus()
-            keyboardController?.show()
-        }
-    }
 }
 
-@Preview(showBackground = true)
+@PreviewMultipleThemes
 @Composable
-fun PreviewSearchBarCollapsed() {
-    SearchBar("Search text")
+fun PreviewSearchBarInput() {
+    WireTheme {
+        SearchBarInput(
+            placeholderText = "placeholder",
+            leadingIcon = {
+                IconButton(onClick = { }) {
+                    Icon(
+                        painter = painterResource(id = R.drawable.ic_search),
+                        contentDescription = stringResource(R.string.content_description_conversation_search_icon),
+                        tint = MaterialTheme.wireColorScheme.onBackground
+                    )
+                }
+            },
+        )
+    }
 }
diff --git a/app/src/main/kotlin/com/wire/android/ui/common/textfield/WireTextField.kt b/app/src/main/kotlin/com/wire/android/ui/common/textfield/WireTextField.kt
@@ -71,6 +71,7 @@ import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.text.style.TextDirection
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.IntOffset
 import androidx.compose.ui.unit.dp
 import com.wire.android.R
 import com.wire.android.ui.common.Icon
@@ -100,6 +101,7 @@ internal fun WireTextField(
     visualTransformation: VisualTransformation = VisualTransformation.None,
     textStyle: TextStyle = MaterialTheme.wireTypography.body01,
     placeholderTextStyle: TextStyle = MaterialTheme.wireTypography.body01,
+    placeholderAlignment: Alignment.Horizontal = Alignment.Start,
     inputMinHeight: Dp = MaterialTheme.wireDimensions.textFieldMinHeight,
     shape: Shape = RoundedCornerShape(MaterialTheme.wireDimensions.textFieldCornerSize),
     colors: WireTextFieldColors = wireTextFieldColors(),
@@ -162,6 +164,7 @@ internal fun WireTextField(
                     placeholderText,
                     state,
                     placeholderTextStyle,
+                    placeholderAlignment,
                     inputMinHeight,
                     colors,
                     shouldDetectTaps,
@@ -227,6 +230,7 @@ private fun InnerText(
     placeholderText: String? = null,
     state: WireTextFieldState = WireTextFieldState.Default,
     placeholderTextStyle: TextStyle = MaterialTheme.wireTypography.body01,
+    placeholderAlignment: Alignment.Horizontal = Alignment.Start,
     inputMinHeight: Dp = 48.dp,
     colors: WireTextFieldColors = wireTextFieldColors(),
     shouldDetectTaps: Boolean = false,
@@ -254,26 +258,27 @@ private fun InnerText(
                 Tint(contentColor = colors.iconColor(state).value, content = leadingIcon)
             }
         }
-        Box(Modifier.weight(1f)) {
-            val padding = Modifier.padding(
-                start = if (leadingIcon == null) 16.dp else 0.dp,
-                end = if (trailingOrStateIcon == null) 16.dp else 0.dp,
-                top = 2.dp, bottom = 2.dp
-            )
+
+        Box(
+            Modifier
+                .weight(1f)
+                .padding(
+                    start = if (leadingIcon == null) 16.dp else 0.dp,
+                    end = if (trailingOrStateIcon == null) 16.dp else 0.dp,
+                    top = 2.dp, bottom = 2.dp
+                )
+        ) {
             if (value.text.isEmpty() && placeholderText != null) {
                 Text(
                     text = placeholderText,
                     style = placeholderTextStyle,
                     color = colors.placeholderColor(state).value,
                     modifier = Modifier
-                        .fillMaxWidth()
-                        .then(padding)
+                        .align(placeholderAlignment.toAlignment())
                 )
             }
             Box(
-                modifier = Modifier
-                    .fillMaxWidth()
-                    .then(padding),
+                modifier = Modifier.fillMaxWidth(),
                 propagateMinConstraints = true
             ) {
                 innerTextField()
@@ -287,6 +292,10 @@ private fun InnerText(
     }
 }
 
+private fun Alignment.Horizontal.toAlignment(): Alignment = Alignment { size, space, layoutDirection ->
+    IntOffset(this@toAlignment.align(size.width, space.width, layoutDirection), 0)
+}
+
 @Preview(name = "Default WireTextField")
 @Composable
 fun PreviewWireTextField() {

diff --git a/app/src/main/kotlin/com/wire/android/ui/common/topappbar/search/SearchBarState.kt b/app/src/main/kotlin/com/wire/android/ui/common/topappbar/search/SearchBarState.kt
@@ -48,6 +48,7 @@ class SearchBarState(
         private set
 
     var searchQuery by mutableStateOf(searchQuery)
+        private set
 
     fun closeSearch() {
         isSearchActive = false
@@ -57,6 +58,10 @@ class SearchBarState(
         isSearchActive = true
     }
 
+    fun searchActiveChanged(isSearchActive: Boolean) {
+        this.isSearchActive = isSearchActive
+    }
+
     fun searchQueryChanged(searchQuery: TextFieldValue) {
         this.searchQuery = searchQuery
     }