Search bar

features/createroom/src/main/kotlin/io/element/android/features/createroom/root/CreateRoomRootScreen.kt

@@ -16,16 +16,27 @@
 
 package io.element.android.features.createroom.root
 
+import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.alpha
 import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.semantics.Role
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.tooling.preview.PreviewParameter
+import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
-import io.element.android.libraries.designsystem.R
 import io.element.android.libraries.designsystem.preview.ElementPreviewDark
 import io.element.android.libraries.designsystem.preview.ElementPreviewLight
 import io.element.android.libraries.designsystem.theme.components.CenterAlignedTopAppBar
@@ -33,7 +44,8 @@ import io.element.android.libraries.designsystem.theme.components.Icon
 import io.element.android.libraries.designsystem.theme.components.IconButton
 import io.element.android.libraries.designsystem.theme.components.Scaffold
 import io.element.android.libraries.designsystem.theme.components.Text
-import io.element.android.libraries.ui.strings.R.string as StringR
+import io.element.android.libraries.designsystem.R as DrawableR
+import io.element.android.libraries.ui.strings.R as StringR
 
 @OptIn(ExperimentalMaterial3Api::class)
 @Composable
@@ -48,6 +60,18 @@ fun CreateRoomRootScreen(
             CreateRoomRootViewTopBar(onClosePressed = onClosePressed)
         }
     ) {
+        Column(
+            modifier = Modifier.padding(it)
+        ) {
+            SearchBar(
+                modifier = Modifier.padding(horizontal = 16.dp),
+                // TODO use resource string
+                placeHolderTitle = "Search for someone",
+                // TODO implement click behavior
+                onClickDescription = "",
+                onClick = {}
+            )
+        }
     }
 }
 
@@ -61,19 +85,62 @@ fun CreateRoomRootViewTopBar(
         modifier = modifier,
         title = {
             Text(
-                text = stringResource(id = StringR.start_chat),
+                text = stringResource(id = StringR.string.start_chat),
                 fontSize = 16.sp,
                 fontWeight = FontWeight.SemiBold,
             )
         },
         actions = {
             IconButton(onClick = onClosePressed) {
-                Icon(resourceId = R.drawable.ic_close, contentDescription = stringResource(id = StringR.action_close))
+                Icon(resourceId = DrawableR.drawable.ic_close, contentDescription = stringResource(id = StringR.string.action_close))
             }
         }
     )
 }
 
+// TODO export into design system package
+// TODO comment that SearchBar is not yet implemented in Material3 compose
+//  and that TextField cannot be used since contentPadding cannot be changed
+@Composable
+fun SearchBar(
+    modifier: Modifier = Modifier,
+    placeHolderTitle: String,
+    onClickDescription: String = "",
+    onClick: () -> Unit = {},
+) {
+    Row(
+        modifier = modifier
+            .fillMaxWidth()
+            .height(48.dp)
+            .background(
+                color = MaterialTheme.colorScheme.surfaceVariant,
+                shape = RoundedCornerShape(28.dp),
+            )
+            .clickable(
+                role = Role.Button,
+                onClickLabel = onClickDescription,
+                onClick = onClick,
+            ),
+    ) {
+        Text(
+            modifier = Modifier
+                .padding(horizontal = 16.dp)
+                .align(Alignment.CenterVertically)
+                .weight(1f)
+                .alpha(0.4f),
+            text = placeHolderTitle,
+        )
+        Icon(
+            modifier = Modifier
+                .padding(horizontal = 16.dp)
+                .align(Alignment.CenterVertically)
+                .alpha(0.4f),
+            resourceId = DrawableR.drawable.ic_search,
+            contentDescription = stringResource(id = StringR.string.search)
+        )
+    }
+}
+
 @Preview
 @Composable
 fun CreateRoomRootViewLightPreview(@PreviewParameter(CreateRoomRootStateProvider::class) state: CreateRoomRootState) =

libraries/designsystem/src/main/res/drawable/ic_search.xml

@@ -0,0 +1,26 @@
+<!--
+  ~ Copyright (c) 2023 New Vector Ltd
+  ~
+  ~ Licensed under the Apache License, Version 2.0 (the "License");
+  ~ you may not use this file except in compliance with the License.
+  ~ You may obtain a copy of the License at
+  ~
+  ~     http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing, software
+  ~ distributed under the License is distributed on an "AS IS" BASIS,
+  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  ~ See the License for the specific language governing permissions and
+  ~ limitations under the License.
+  -->
+
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="18dp"
+    android:height="18dp"
+    android:tint="#000000"
+    android:viewportWidth="18"
+    android:viewportHeight="18">
+    <path
+        android:fillColor="#ffffff"
+        android:pathData="M11.76,10.27L17.49,16L16,17.49L10.27,11.76C9.2,12.53 7.91,13 6.5,13C2.91,13 0,10.09 0,6.5C0,2.91 2.91,0 6.5,0C10.09,0 13,2.91 13,6.5C13,7.91 12.53,9.2 11.76,10.27ZM6.5,2C4.01,2 2,4.01 2,6.5C2,8.99 4.01,11 6.5,11C8.99,11 11,8.99 11,6.5C11,4.01 8.99,2 6.5,2Z" />
+</vector>