diff --git a/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/common/composeui/component/WooPosSearchInput.kt b/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/common/composeui/component/WooPosSearchInput.kt index aee24df926c..997ed833a0a 100644 --- a/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/common/composeui/component/WooPosSearchInput.kt +++ b/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/common/composeui/component/WooPosSearchInput.kt @@ -1,17 +1,14 @@ package com.woocommerce.android.ui.woopos.common.composeui.component -import android.annotation.SuppressLint import androidx.activity.compose.BackHandler -import androidx.compose.animation.core.CubicBezierEasing +import androidx.compose.animation.AnimatedVisibility import androidx.compose.animation.core.FastOutSlowInEasing -import androidx.compose.animation.core.Transition -import androidx.compose.animation.core.animateDp -import androidx.compose.animation.core.animateFloat +import androidx.compose.animation.core.MutableTransitionState +import androidx.compose.animation.core.animateFloatAsState import androidx.compose.animation.core.tween -import androidx.compose.animation.core.updateTransition -import androidx.compose.foundation.layout.Arrangement +import androidx.compose.animation.fadeIn +import androidx.compose.animation.fadeOut import androidx.compose.foundation.layout.Box -import androidx.compose.foundation.layout.BoxWithConstraints import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.fillMaxWidth @@ -36,18 +33,19 @@ import androidx.compose.runtime.LaunchedEffect import androidx.compose.runtime.getValue import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.remember +import androidx.compose.runtime.saveable.rememberSaveable import androidx.compose.runtime.setValue import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier -import androidx.compose.ui.draw.alpha import androidx.compose.ui.focus.FocusRequester import androidx.compose.ui.focus.focusRequester +import androidx.compose.ui.focus.onFocusChanged +import androidx.compose.ui.graphics.lerp import androidx.compose.ui.res.stringResource import androidx.compose.ui.text.TextRange import androidx.compose.ui.text.font.FontWeight import androidx.compose.ui.text.input.ImeAction import androidx.compose.ui.text.input.TextFieldValue -import androidx.compose.ui.unit.Dp import androidx.compose.ui.unit.dp import com.woocommerce.android.R import com.woocommerce.android.ui.woopos.common.composeui.WooPosPreview @@ -58,14 +56,13 @@ import com.woocommerce.android.ui.woopos.common.composeui.designsystem.WooPosThe import com.woocommerce.android.ui.woopos.common.composeui.designsystem.WooPosTypography import kotlinx.coroutines.delay -private val BUTTON_SIZE = 40.dp private val INPUT_FIELD_HEIGHT = 56.dp -private const val ANIMATION_TIME = 300L @Composable fun WooPosSearchInput( modifier: Modifier = Modifier, state: WooPosSearchInputState = WooPosSearchInputState.Closed, + animationDuration: Int = 300, onEvent: (WooPosSearchUIEvent) -> Unit = {}, ) { BackHandler( @@ -73,285 +70,241 @@ fun WooPosSearchInput( onBack = { onEvent(WooPosSearchUIEvent.Close) } ) - Row( + var lastOpenState by rememberSaveable { mutableStateOf(null) } + + val searchVisibleState = remember { MutableTransitionState(state is WooPosSearchInputState.Closed) } + val inputVisibleState = remember { MutableTransitionState(state is WooPosSearchInputState.Open) } + + LaunchedEffect(state) { + searchVisibleState.targetState = state is WooPosSearchInputState.Closed + inputVisibleState.targetState = state is WooPosSearchInputState.Open + + if (state is WooPosSearchInputState.Open) { + lastOpenState = state + } + } + + Box( modifier = modifier .fillMaxWidth() .height(INPUT_FIELD_HEIGHT), - verticalAlignment = Alignment.CenterVertically, - horizontalArrangement = Arrangement.Start, + contentAlignment = Alignment.CenterEnd ) { - when (state) { - is WooPosSearchInputState.Open -> { - AnimatedSearchInput( - state = state, + AnimatedVisibility( + visibleState = inputVisibleState, + enter = fadeIn( + animationSpec = tween( + durationMillis = animationDuration, + easing = FastOutSlowInEasing + ) + ), + exit = fadeOut( + animationSpec = tween( + durationMillis = animationDuration / 2, + easing = FastOutSlowInEasing, + ) + ), + ) { + lastOpenState?.let { + SearchInput( + state = it, + animationDuration = animationDuration.toLong(), onEvent = onEvent, ) } + } - WooPosSearchInputState.Closed -> { - Spacer(modifier = Modifier.weight(1f)) - WooPosCircularIconButton( - icon = Icons.Default.Search, - contentDescription = stringResource( - id = R.string.woopos_search_products, - ), - onClick = { onEvent(WooPosSearchUIEvent.Search("", 0)) } + AnimatedVisibility( + visibleState = searchVisibleState, + enter = fadeIn( + animationSpec = tween( + durationMillis = animationDuration, + delayMillis = animationDuration / 3, + easing = FastOutSlowInEasing ) - } + ), + exit = fadeOut( + animationSpec = tween( + durationMillis = animationDuration / 3 + ) + ) + ) { + WooPosCircularIconButton( + icon = Icons.Default.Search, + contentDescription = stringResource( + id = R.string.woopos_search_products, + ), + onClick = { onEvent(WooPosSearchUIEvent.Search("", 0)) } + ) } } } -@SuppressLint("UnusedBoxWithConstraintsScope") @Composable -private fun AnimatedSearchInput( +private fun SearchInput( state: WooPosSearchInputState.Open, - onEvent: (WooPosSearchUIEvent) -> Unit, + animationDuration: Long, + onEvent: (WooPosSearchUIEvent) -> Unit ) { - BoxWithConstraints( - modifier = Modifier.fillMaxWidth(), - contentAlignment = Alignment.CenterEnd, - ) { - val focusRequester = remember { FocusRequester() } - var isExpanded by remember { mutableStateOf(state.hasAnimationPlayed) } - var isClosing by remember { mutableStateOf(false) } + val focusRequester = remember { FocusRequester() } + var isFocused by remember { mutableStateOf(false) } - val transition = updateTransition( - targetState = if (isClosing) false else isExpanded, - label = "searchTransition" - ) + val borderColor by animateFloatAsState( + targetValue = if (isFocused) 1f else 0f, + animationSpec = tween(durationMillis = 200, easing = FastOutSlowInEasing), + label = "borderColorAnimation" + ) + + val colorSurface = MaterialTheme.colorScheme.surface + val colorPrimary = MaterialTheme.colorScheme.primary - val width = animateSearchWidth(transition, maxWidth) - val height = animateSearchHeight(transition) - val cornerRadius = animateCornerRadius(transition) - val iconAlpha = animateIconAlpha(transition, isClosing) - val backButtonAlpha = animateIconAlpha(transition, isClosing) + val animatedFocusedBorderColor = remember(borderColor) { + lerp( + colorSurface, + colorPrimary, + borderColor + ) + } - Row( - verticalAlignment = Alignment.CenterVertically, - horizontalArrangement = Arrangement.End, - modifier = Modifier.width(width) + Row( + verticalAlignment = Alignment.CenterVertically, + modifier = Modifier.fillMaxWidth() + ) { + IconButton( + onClick = { onEvent(WooPosSearchUIEvent.Close) }, + modifier = Modifier.size(48.dp) ) { - IconButton( - onClick = { - isClosing = true - }, - modifier = Modifier.alpha(backButtonAlpha) - .size(48.dp) - ) { - Icon( - imageVector = Icons.AutoMirrored.Filled.ArrowBack, - contentDescription = stringResource( - R.string.woopos_search_back_content_description - ), - tint = MaterialTheme.colorScheme.onSurface, - modifier = Modifier.size(28.dp) - ) - } + Icon( + imageVector = Icons.AutoMirrored.Filled.ArrowBack, + contentDescription = stringResource( + R.string.woopos_search_back_content_description + ), + tint = MaterialTheme.colorScheme.onSurface, + modifier = Modifier.size(28.dp) + ) + } - Spacer(modifier = Modifier.width(WooPosSpacing.Small.value)) + Spacer(modifier = Modifier.width(WooPosSpacing.Small.value)) - val (hint, query) = when (state.input) { - is Input.Query -> "" to state.input.text - is Input.Hint -> state.input.text to "" - } + val (hint, query) = when (state.input) { + is Input.Query -> "" to state.input.text + is Input.Hint -> state.input.text to "" + } - var textFieldValue by remember { - mutableStateOf( - TextFieldValue( - text = query, - selection = TextRange(state.input.cursorPosition) - ) + var textFieldValue by remember { + mutableStateOf( + TextFieldValue( + text = query, + selection = TextRange(state.input.cursorPosition) ) - } + ) + } - LaunchedEffect(query) { - if (query != textFieldValue.text) { - textFieldValue = TextFieldValue( - text = query, - selection = TextRange(state.input.cursorPosition) + OutlinedTextField( + value = textFieldValue, + onValueChange = { newValue: TextFieldValue -> + textFieldValue = newValue + onEvent( + WooPosSearchUIEvent.Search( + newValue.text, + newValue.selection.start ) - } - } - - OutlinedTextField( - value = textFieldValue, - onValueChange = { newValue: TextFieldValue -> - textFieldValue = newValue + ) + }, + modifier = Modifier + .weight(1f) + .height(INPUT_FIELD_HEIGHT) + .focusRequester(focusRequester) + .onFocusChanged { focusState -> + isFocused = focusState.isFocused + }, + placeholder = { + WooPosText( + text = hint, + style = WooPosTypography.BodyMedium, + fontWeight = FontWeight.Bold, + color = WooPosTheme.colors.onSurfaceVariantLowest, + ) + }, + textStyle = WooPosTypography.BodyMedium.style + .copy(fontWeight = FontWeight.Bold), + singleLine = true, + keyboardOptions = KeyboardOptions(imeAction = ImeAction.Search), + shape = RoundedCornerShape(WooPosCornerRadius.Medium.value), + keyboardActions = KeyboardActions( + onSearch = { onEvent( WooPosSearchUIEvent.Search( - newValue.text, - newValue.selection.start + textFieldValue.text, + textFieldValue.selection.start ) ) - }, - modifier = Modifier - .weight(1f) - .height(height) - .focusRequester(focusRequester), - placeholder = { - WooPosText( - text = hint, - modifier = Modifier.alpha(iconAlpha), - style = WooPosTypography.BodyMedium, - fontWeight = FontWeight.Bold, - color = WooPosTheme.colors.onSurfaceVariantLowest, + } + ), + colors = OutlinedTextFieldDefaults.colors( + unfocusedBorderColor = MaterialTheme.colorScheme.surface, + focusedBorderColor = animatedFocusedBorderColor, + unfocusedContainerColor = MaterialTheme.colorScheme.surfaceBright, + focusedContainerColor = MaterialTheme.colorScheme.surfaceBright, + cursorColor = MaterialTheme.colorScheme.primary, + unfocusedTextColor = MaterialTheme.colorScheme.onSurface, + focusedTextColor = MaterialTheme.colorScheme.onSurface, + ), + leadingIcon = { + IconButton( + onClick = {}, + modifier = Modifier.size(32.dp) + ) { + Icon( + imageVector = Icons.Default.Search, + contentDescription = null, + tint = MaterialTheme.colorScheme.onSurface, ) - }, - textStyle = WooPosTypography.BodyMedium.style - .copy(fontWeight = FontWeight.Bold), - singleLine = true, - keyboardOptions = KeyboardOptions(imeAction = ImeAction.Search), - shape = RoundedCornerShape(cornerRadius), - keyboardActions = KeyboardActions( - onSearch = { - onEvent( - WooPosSearchUIEvent.Search( - textFieldValue.text, - textFieldValue.selection.start - ) - ) - } - ), - colors = OutlinedTextFieldDefaults.colors( - unfocusedBorderColor = MaterialTheme.colorScheme.surface, - focusedBorderColor = MaterialTheme.colorScheme.primary, - unfocusedContainerColor = MaterialTheme.colorScheme.surfaceBright, - focusedContainerColor = MaterialTheme.colorScheme.surfaceBright, - cursorColor = MaterialTheme.colorScheme.primary, - unfocusedTextColor = MaterialTheme.colorScheme.onSurface, - focusedTextColor = MaterialTheme.colorScheme.onSurface, - ), - leadingIcon = { - IconButton( - onClick = {}, - modifier = Modifier.size(32.dp) - ) { - Icon( - imageVector = Icons.Default.Search, - contentDescription = null, - tint = MaterialTheme.colorScheme.onSurface, + } + }, + trailingIcon = { + when { + state.isLoading -> { + WooPosCircularLoadingIndicator( + modifier = Modifier.size(24.dp) ) } - }, - trailingIcon = { - when { - state.isLoading -> { - WooPosCircularLoadingIndicator( - modifier = Modifier - .size(24.dp) - .alpha(iconAlpha) - ) - } - textFieldValue.text.isNotEmpty() -> { - IconButton( - onClick = { onEvent(WooPosSearchUIEvent.Clear) }, - modifier = Modifier - .alpha(iconAlpha) - .size(32.dp) - ) { - Icon( - imageVector = Icons.Outlined.Cancel, - contentDescription = stringResource( - R.string.woopos_search_clear_content_description - ), - tint = MaterialTheme.colorScheme.onSurface, - ) - } + textFieldValue.text.isNotEmpty() -> { + IconButton( + onClick = { onEvent(WooPosSearchUIEvent.Clear) }, + modifier = Modifier.size(32.dp) + ) { + Icon( + imageVector = Icons.Outlined.Cancel, + contentDescription = stringResource( + R.string.woopos_search_clear_content_description + ), + tint = MaterialTheme.colorScheme.onSurface, + ) } } - }, - ) + } + }, + ) + + LaunchedEffect(query) { + if (query != textFieldValue.text) { + textFieldValue = TextFieldValue( + text = query, + selection = TextRange(state.input.cursorPosition) + ) + } } LaunchedEffect(Unit) { if (!state.hasAnimationPlayed) { - isExpanded = true - delay(ANIMATION_TIME) + delay(animationDuration) focusRequester.requestFocus() onEvent(WooPosSearchUIEvent.AnimationComplete) } } - - LaunchedEffect(isClosing) { - if (isClosing) { - delay(ANIMATION_TIME) - onEvent(WooPosSearchUIEvent.Close) - } - } - } -} - -@Composable -private fun animateSearchWidth( - transition: Transition, - maxWidth: Dp, -): Dp { - val width by transition.animateDp( - label = "width", - transitionSpec = { - tween( - durationMillis = ANIMATION_TIME.toInt(), - easing = CubicBezierEasing(0.2f, 0.0f, 0.0f, 1.0f) - ) - } - ) { expanded -> - if (expanded) maxWidth else BUTTON_SIZE - } - return width -} - -@Composable -private fun animateSearchHeight(transition: Transition): Dp { - val height by transition.animateDp( - label = "height", - transitionSpec = { - tween( - durationMillis = ANIMATION_TIME.toInt(), - easing = CubicBezierEasing(0.2f, 0.0f, 0.2f, 1.0f) - ) - } - ) { expanded -> - if (expanded) INPUT_FIELD_HEIGHT else BUTTON_SIZE - } - return height -} - -@Composable -private fun animateCornerRadius(transition: Transition): Dp { - val cornerRadius by transition.animateDp( - label = "cornerRadius", - transitionSpec = { - tween( - durationMillis = ANIMATION_TIME.toInt(), - easing = CubicBezierEasing(0.2f, 0.0f, 0.2f, 1.0f) - ) - } - ) { expanded -> - if (expanded) WooPosCornerRadius.Medium.value else BUTTON_SIZE / 2 - } - return cornerRadius -} - -@Composable -private fun animateIconAlpha( - transition: Transition, - isClosing: Boolean -): Float { - val iconAlpha by transition.animateFloat( - label = "iconAlpha", - transitionSpec = { - tween( - durationMillis = (ANIMATION_TIME * 0.7).toInt(), - easing = FastOutSlowInEasing, - delayMillis = if (isClosing) 0 else (ANIMATION_TIME * 0.3).toInt() - ) - } - ) { expanded -> - if (expanded) 1f else 0f } - return iconAlpha } sealed class WooPosSearchInputState { diff --git a/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/home/items/WooPosItemsScreen.kt b/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/home/items/WooPosItemsScreen.kt index 59379f893a0..e31040fa6b5 100644 --- a/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/home/items/WooPosItemsScreen.kt +++ b/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/home/items/WooPosItemsScreen.kt @@ -1,5 +1,8 @@ package com.woocommerce.android.ui.woopos.home.items +import androidx.compose.animation.Crossfade +import androidx.compose.animation.core.LinearEasing +import androidx.compose.animation.core.tween import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.fillMaxHeight @@ -104,28 +107,43 @@ private fun MainItemsList( onSearchEvent = onSearchEvent, ) - when (val itemsState = state.value) { - is WooPosItemsViewState.ProductList -> { - Column { - when (val searchState = itemsState.search) { - WooPosItemsViewState.SearchState.Hidden -> { - WooPosProductsScreen(modifier = Modifier, listState = listState) - } - is WooPosItemsViewState.SearchState.Visible -> { - when (searchState.state) { - WooPosSearchInputState.Closed -> { - WooPosProductsScreen(modifier = Modifier, listState = listState) - } + val currentState = state.value - is WooPosSearchInputState.Open -> WooPosItemsSearchScreen() - } - } - } + Crossfade( + targetState = getScreenState(currentState), + animationSpec = tween( + durationMillis = 300, + easing = LinearEasing, + ), + ) { screenState -> + when (screenState) { + ScreenState.PRODUCTS -> WooPosProductsScreen(modifier = Modifier, listState = listState) + ScreenState.PRODUCTS_SEARCH -> WooPosItemsSearchScreen() + ScreenState.COUPONS -> WooPosCouponsScreen(modifier = Modifier) + } + } + } + } +} + +private enum class ScreenState { + PRODUCTS, PRODUCTS_SEARCH, COUPONS +} + +private fun getScreenState(state: WooPosItemsViewState): ScreenState { + return when (state) { + is WooPosItemsViewState.ProductList -> { + when (val searchState = state.search) { + WooPosItemsViewState.SearchState.Hidden -> ScreenState.PRODUCTS + is WooPosItemsViewState.SearchState.Visible -> { + when (searchState.state) { + WooPosSearchInputState.Closed -> ScreenState.PRODUCTS + is WooPosSearchInputState.Open -> ScreenState.PRODUCTS_SEARCH } } - is WooPosItemsViewState.CouponList -> WooPosCouponsScreen(modifier = Modifier) } } + is WooPosItemsViewState.CouponList -> ScreenState.COUPONS } } diff --git a/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/home/items/WooPosItemsToolbar.kt b/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/home/items/WooPosItemsToolbar.kt index bd9fb0e90e3..abe8ed00342 100644 --- a/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/home/items/WooPosItemsToolbar.kt +++ b/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/home/items/WooPosItemsToolbar.kt @@ -1,12 +1,13 @@ package com.woocommerce.android.ui.woopos.home.items import androidx.compose.animation.AnimatedVisibility +import androidx.compose.animation.core.FastOutSlowInEasing import androidx.compose.animation.core.tween import androidx.compose.animation.fadeIn import androidx.compose.animation.fadeOut import androidx.compose.foundation.clickable import androidx.compose.foundation.interaction.MutableInteractionSource -import androidx.compose.foundation.layout.Arrangement +import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.fillMaxWidth @@ -25,37 +26,51 @@ import com.woocommerce.android.R import com.woocommerce.android.ui.woopos.common.composeui.WooPosPreview import com.woocommerce.android.ui.woopos.common.composeui.component.WooPosSearchInput import com.woocommerce.android.ui.woopos.common.composeui.component.WooPosSearchInputState +import com.woocommerce.android.ui.woopos.common.composeui.component.WooPosSearchInputState.Open.Input import com.woocommerce.android.ui.woopos.common.composeui.component.WooPosSearchUIEvent import com.woocommerce.android.ui.woopos.common.composeui.component.WooPosText import com.woocommerce.android.ui.woopos.common.composeui.designsystem.WooPosSpacing import com.woocommerce.android.ui.woopos.common.composeui.designsystem.WooPosTheme import com.woocommerce.android.ui.woopos.common.composeui.designsystem.WooPosTypography +import com.woocommerce.android.ui.woopos.home.items.WooPosItemsViewState.SearchState import com.woocommerce.android.ui.woopos.home.items.WooPosItemsViewState.Tab.HighlightLevel.Full import com.woocommerce.android.ui.woopos.home.items.WooPosItemsViewState.Tab.HighlightLevel.Normal +private const val ANIMATION_DURATION = 300 + @Composable fun WooPosItemsToolbar( state: WooPosItemsViewState, onTabClicked: (WooPosItemsViewState.Tab) -> Unit, onSearchEvent: (WooPosSearchUIEvent) -> Unit, ) { - val isSearchExpanded = state is WooPosItemsViewState.ProductList && - state.search is WooPosItemsViewState.SearchState.Visible && - (state.search as WooPosItemsViewState.SearchState.Visible).state is WooPosSearchInputState.Open + val isSearchOpen = (state.search as? SearchState.Visible)?.let { + it.state is WooPosSearchInputState.Open + } == true - Row( + Box( modifier = Modifier .fillMaxWidth() .height(56.dp), - verticalAlignment = Alignment.CenterVertically, - horizontalArrangement = Arrangement.SpaceBetween, + contentAlignment = Alignment.CenterStart ) { AnimatedVisibility( - visible = !isSearchExpanded, - enter = fadeIn(animationSpec = tween(200)), - exit = fadeOut(animationSpec = tween(200)), + visible = !isSearchOpen, + enter = fadeIn( + animationSpec = tween( + durationMillis = ANIMATION_DURATION, + delayMillis = ANIMATION_DURATION / 2, + easing = FastOutSlowInEasing + ) + ), + exit = fadeOut( + animationSpec = tween( + durationMillis = ANIMATION_DURATION / 2, + easing = FastOutSlowInEasing + ) + ), ) { - Row { + Row(verticalAlignment = Alignment.CenterVertically) { state.tabs.forEach { tab -> WooPosText( text = stringResource(id = tab.stringId), @@ -73,25 +88,16 @@ fun WooPosItemsToolbar( } } - Row( - horizontalArrangement = Arrangement.End, - verticalAlignment = Alignment.CenterVertically, - ) { - when (state) { - is WooPosItemsViewState.ProductList -> { - when (val searchState = state.search) { - WooPosItemsViewState.SearchState.Hidden -> Unit - is WooPosItemsViewState.SearchState.Visible -> { - WooPosSearchInput( - state = searchState.state, - onEvent = onSearchEvent, - modifier = Modifier.weight(1f) - ) - } - } - } - - is WooPosItemsViewState.CouponList -> Unit + when (val search = state.search) { + SearchState.Hidden -> Unit + is SearchState.Visible -> { + WooPosSearchInput( + state = search.state, + animationDuration = ANIMATION_DURATION, + onEvent = { event -> + onSearchEvent(event) + }, + ) } } } @@ -115,7 +121,36 @@ fun WooPosItemsToolbarPreview() { WooPosItemsToolbar( state = WooPosItemsViewState.ProductList( tabs = tabs, - search = WooPosItemsViewState.SearchState.Hidden, + search = SearchState.Hidden, + ), + onTabClicked = {}, + onSearchEvent = {} + ) + } +} + +@Composable +@WooPosPreview +fun WooPosItemsToolbarWithSearchPreview() { + val tabs = listOf( + WooPosItemsViewState.Tab(R.string.woopos_products_screen_title, highlightLevel = Full), + WooPosItemsViewState.Tab(R.string.woopos_coupons_screen_title, highlightLevel = Normal), + ) + + WooPosTheme { + WooPosItemsToolbar( + state = WooPosItemsViewState.ProductList( + tabs = tabs, + search = SearchState.Visible( + state = WooPosSearchInputState.Open( + input = Input.Query( + query = "", + cursorPosition = 1, + ), + isLoading = false, + hasAnimationPlayed = false, + ) + ) ), onTabClicked = {}, onSearchEvent = {} diff --git a/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/home/items/search/WooPosItemsEmptySearchQueryStateScreen.kt b/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/home/items/search/WooPosItemsEmptySearchQueryStateScreen.kt index 8ba9e56f941..7c4781d8c11 100644 --- a/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/home/items/search/WooPosItemsEmptySearchQueryStateScreen.kt +++ b/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/home/items/search/WooPosItemsEmptySearchQueryStateScreen.kt @@ -58,10 +58,10 @@ fun WooPosItemsEmptySearchQueryStateScreen( Column( modifier .fillMaxHeight() - .verticalScroll(scrollState) .padding(WooPosSpacing.None.value.toAdaptivePadding()) + .padding(top = WooPosSpacing.Large.value.toAdaptivePadding()) + .verticalScroll(scrollState) ) { - Spacer(modifier = Modifier.height(WooPosSpacing.Large.value)) if (state.popularItems.isNotEmpty() || state.recentSearches.isNotEmpty()) { Row( modifier = Modifier.fillMaxWidth()