From c107408ed2b41ccbee2304f76f45e1b9cd9e91fe Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=A9luchu?= Date: Tue, 24 Oct 2023 12:50:33 +0200 Subject: [PATCH] Add loading, empty data message and include state --- .../core/ui/composables/EmptyInfo.kt | 45 ++++ .../features/sticker/view/DashboardView.kt | 62 ++---- .../features/sticker/view/StickerPackItem.kt | 65 ++++++ app/src/main/res/drawable/ic_deco_close.xml | 5 + .../res/layout/activity_sticker_details.xml | 194 ------------------ app/src/main/res/values/colors.xml | 5 - app/src/main/res/values/dimens.xml | 10 - app/src/main/res/values/strings.xml | 4 +- 8 files changed, 131 insertions(+), 259 deletions(-) create mode 100644 app/src/main/java/com/jeluchu/wastickersonline/core/ui/composables/EmptyInfo.kt create mode 100644 app/src/main/java/com/jeluchu/wastickersonline/features/sticker/view/StickerPackItem.kt create mode 100644 app/src/main/res/drawable/ic_deco_close.xml delete mode 100644 app/src/main/res/layout/activity_sticker_details.xml diff --git a/app/src/main/java/com/jeluchu/wastickersonline/core/ui/composables/EmptyInfo.kt b/app/src/main/java/com/jeluchu/wastickersonline/core/ui/composables/EmptyInfo.kt new file mode 100644 index 0000000..7f0c469 --- /dev/null +++ b/app/src/main/java/com/jeluchu/wastickersonline/core/ui/composables/EmptyInfo.kt @@ -0,0 +1,45 @@ +package com.jeluchu.wastickersonline.core.ui.composables + +import androidx.compose.foundation.layout.Arrangement +import androidx.compose.foundation.layout.Box +import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.fillMaxSize +import androidx.compose.foundation.layout.fillMaxWidth +import androidx.compose.foundation.layout.padding +import androidx.compose.material3.Text +import androidx.compose.runtime.Composable +import androidx.compose.ui.Alignment +import androidx.compose.ui.Modifier +import androidx.compose.ui.text.font.FontWeight +import androidx.compose.ui.text.style.TextAlign +import androidx.compose.ui.unit.dp +import androidx.compose.ui.unit.sp +import com.jeluchu.jchucomponents.ktx.compose.toStringRes +import com.jeluchu.wastickersonline.R +import com.jeluchu.wastickersonline.core.ui.theme.darkness + +@Composable +fun EmptyInfo() = Box(modifier = Modifier.fillMaxSize()) { + Column( + modifier = Modifier + .align(Alignment.Center) + .padding(horizontal = 50.dp), + verticalArrangement = Arrangement.spacedBy(5.dp) + ) { + Text( + modifier = Modifier.fillMaxWidth(), + text = R.string.emptyInfoTitle.toStringRes(), + textAlign = TextAlign.Center, + fontWeight = FontWeight.Bold, + fontSize = 24.sp, + color = darkness + ) + Text( + text = R.string.emptyInfoDescription.toStringRes(), + color = darkness.copy(.6f), + textAlign = TextAlign.Center, + lineHeight = 20.sp, + fontSize = 16.sp + ) + } +} \ No newline at end of file diff --git a/app/src/main/java/com/jeluchu/wastickersonline/features/sticker/view/DashboardView.kt b/app/src/main/java/com/jeluchu/wastickersonline/features/sticker/view/DashboardView.kt index a1765f1..4d1db8c 100644 --- a/app/src/main/java/com/jeluchu/wastickersonline/features/sticker/view/DashboardView.kt +++ b/app/src/main/java/com/jeluchu/wastickersonline/features/sticker/view/DashboardView.kt @@ -7,14 +7,11 @@ import androidx.compose.animation.expandVertically import androidx.compose.animation.fadeIn import androidx.compose.animation.fadeOut import androidx.compose.animation.shrinkVertically -import androidx.compose.foundation.background import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Column -import androidx.compose.foundation.layout.PaddingValues import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.size -import androidx.compose.foundation.lazy.items import androidx.compose.material.icons.Icons import androidx.compose.material.icons.filled.Close import androidx.compose.material.icons.filled.Search @@ -23,7 +20,6 @@ import androidx.compose.material3.ExperimentalMaterial3Api import androidx.compose.material3.Icon import androidx.compose.material3.IconButton import androidx.compose.material3.Scaffold -import androidx.compose.material3.Surface import androidx.compose.material3.Text import androidx.compose.material3.TextFieldDefaults import androidx.compose.material3.TopAppBarDefaults @@ -33,13 +29,11 @@ import androidx.compose.runtime.remember import androidx.compose.runtime.setValue import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier -import androidx.compose.ui.draw.clip import androidx.compose.ui.geometry.Offset import androidx.compose.ui.graphics.Color import androidx.compose.ui.input.nestedscroll.NestedScrollConnection import androidx.compose.ui.input.nestedscroll.NestedScrollSource import androidx.compose.ui.input.nestedscroll.nestedScroll -import androidx.compose.ui.layout.ContentScale import androidx.compose.ui.platform.LocalContext import androidx.compose.ui.platform.LocalUriHandler import androidx.compose.ui.platform.UriHandler @@ -54,25 +48,21 @@ import com.jeluchu.jchucomponents.ktx.compose.toImageVector import com.jeluchu.jchucomponents.ktx.compose.toStringRes import com.jeluchu.jchucomponents.ktx.strings.empty import com.jeluchu.jchucomponents.ui.accompanist.systemui.SystemStatusBarColors -import com.jeluchu.jchucomponents.ui.animations.lists.Animations -import com.jeluchu.jchucomponents.ui.animations.lists.animateItem import com.jeluchu.jchucomponents.ui.composables.button.FloatingButton import com.jeluchu.jchucomponents.ui.composables.button.FloatingButtonSettings import com.jeluchu.jchucomponents.ui.composables.column.ScrollableColumn -import com.jeluchu.jchucomponents.ui.composables.images.NetworkImage +import com.jeluchu.jchucomponents.ui.composables.loaders.CircularLoading import com.jeluchu.jchucomponents.ui.extensions.modifier.cornerRadius -import com.jeluchu.jchucomponents.ui.extensions.modifier.noRippleClickable import com.jeluchu.jchucomponents.ui.foundation.icon.IconLink -import com.jeluchu.jchucomponents.ui.foundation.lists.ListRow import com.jeluchu.jchucomponents.ui.runtime.remember.rememberMutableStateOf import com.jeluchu.wastickersonline.R import com.jeluchu.wastickersonline.core.extensions.search +import com.jeluchu.wastickersonline.core.ui.composables.EmptyInfo import com.jeluchu.wastickersonline.core.ui.composables.SearchTextField import com.jeluchu.wastickersonline.core.ui.theme.darkGreen import com.jeluchu.wastickersonline.core.ui.theme.darkness import com.jeluchu.wastickersonline.core.ui.theme.milky import com.jeluchu.wastickersonline.core.ui.theme.primary -import com.jeluchu.wastickersonline.core.ui.theme.secondary import com.jeluchu.wastickersonline.features.sticker.models.StickerPack import com.jeluchu.wastickersonline.features.sticker.viewmodel.StickersViewModel @@ -109,6 +99,7 @@ private fun DashboardView( onRateClick: () -> Unit, ) { val search = rememberMutableStateOf(String.empty()) + val stickers = state.data.search(query = search.value, param = { it.name }) var isSearchActive by rememberMutableStateOf(false) val isVisible = rememberMutableStateOf(true) val nestedScrollConnection = remember { @@ -158,7 +149,7 @@ private fun DashboardView( FloatingButton( isVisible = isVisible.value, floatButton = FloatingButtonSettings( - icon = R.drawable.ic_deco_search, + icon = if (isSearchActive) R.drawable.ic_deco_close else R.drawable.ic_deco_search, tint = milky, background = darkGreen ), @@ -211,7 +202,7 @@ private fun DashboardView( focusedSupportingTextColor = milky, unfocusedSupportingTextColor = milky, disabledSupportingTextColor = milky, - errorSupportingTextColor= milky, + errorSupportingTextColor = milky, focusedContainerColor = darkness.copy(.6f), unfocusedContainerColor = darkness.copy(.6f), focusedIndicatorColor = Color.Transparent, @@ -249,45 +240,20 @@ private fun DashboardView( } } - ScrollableColumn { - state.data.search(query = search.value, param = { it.name }).forEach { - Column( - modifier = Modifier.noRippleClickable { onStickerClick(it) } - ) { - Surface( - modifier = Modifier.padding(horizontal = 15.dp), - shape = 10.cornerRadius(), - color = darkGreen.copy(.2f), - contentColor = darkness.copy(.7f) - ) { - Text( - modifier = Modifier.padding(5.dp), - text = it.name, - fontWeight = FontWeight.Bold + when { + state.isLoading -> CircularLoading(isShow = true, colorLoading = darkness) + stickers.isEmpty() && !state.isLoading -> EmptyInfo() + else -> { + ScrollableColumn { + stickers.forEach { pack -> + StickerPackItem( + stickerPack = pack, + onClick = onStickerClick ) } - - ListRow( - contentPadding = PaddingValues(15.dp), - horizontalArrangement = Arrangement.spacedBy(5.dp), - ) { - items(it.stickers, key = { it }) { sticker -> - NetworkImage( - modifier = Modifier - .size(90.dp) - .animateItem(Animations.Scale) - .clip(10.cornerRadius()) - .background(secondary), - url = sticker.imageFile, - contentScale = ContentScale.FillBounds - ) - } - } } } } } - - } } diff --git a/app/src/main/java/com/jeluchu/wastickersonline/features/sticker/view/StickerPackItem.kt b/app/src/main/java/com/jeluchu/wastickersonline/features/sticker/view/StickerPackItem.kt new file mode 100644 index 0000000..7f24ec8 --- /dev/null +++ b/app/src/main/java/com/jeluchu/wastickersonline/features/sticker/view/StickerPackItem.kt @@ -0,0 +1,65 @@ +package com.jeluchu.wastickersonline.features.sticker.view + +import androidx.compose.foundation.background +import androidx.compose.foundation.layout.Arrangement +import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.PaddingValues +import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.layout.size +import androidx.compose.foundation.lazy.items +import androidx.compose.material3.Surface +import androidx.compose.material3.Text +import androidx.compose.runtime.Composable +import androidx.compose.ui.Modifier +import androidx.compose.ui.draw.clip +import androidx.compose.ui.layout.ContentScale +import androidx.compose.ui.text.font.FontWeight +import androidx.compose.ui.unit.dp +import com.jeluchu.jchucomponents.ui.animations.lists.Animations +import com.jeluchu.jchucomponents.ui.animations.lists.animateItem +import com.jeluchu.jchucomponents.ui.composables.images.NetworkImage +import com.jeluchu.jchucomponents.ui.extensions.modifier.cornerRadius +import com.jeluchu.jchucomponents.ui.extensions.modifier.noRippleClickable +import com.jeluchu.jchucomponents.ui.foundation.lists.ListRow +import com.jeluchu.wastickersonline.core.ui.theme.darkGreen +import com.jeluchu.wastickersonline.core.ui.theme.darkness +import com.jeluchu.wastickersonline.core.ui.theme.secondary +import com.jeluchu.wastickersonline.features.sticker.models.StickerPack + +@Composable +fun StickerPackItem( + stickerPack: StickerPack, + onClick: (StickerPack) -> Unit +) = Column( + modifier = Modifier.noRippleClickable { onClick(stickerPack) } +) { + Surface( + modifier = Modifier.padding(horizontal = 15.dp), + shape = 10.cornerRadius(), + color = darkGreen.copy(.2f), + contentColor = darkness.copy(.7f) + ) { + Text( + modifier = Modifier.padding(5.dp), + text = stickerPack.name, + fontWeight = FontWeight.Bold + ) + } + + ListRow( + contentPadding = PaddingValues(15.dp), + horizontalArrangement = Arrangement.spacedBy(5.dp), + ) { + items(stickerPack.stickers, key = { it }) { sticker -> + NetworkImage( + modifier = Modifier + .size(90.dp) + .animateItem(Animations.Scale) + .clip(10.cornerRadius()) + .background(secondary), + url = sticker.imageFile, + contentScale = ContentScale.FillBounds + ) + } + } +} \ No newline at end of file diff --git a/app/src/main/res/drawable/ic_deco_close.xml b/app/src/main/res/drawable/ic_deco_close.xml new file mode 100644 index 0000000..0d69cfe --- /dev/null +++ b/app/src/main/res/drawable/ic_deco_close.xml @@ -0,0 +1,5 @@ + + + + diff --git a/app/src/main/res/layout/activity_sticker_details.xml b/app/src/main/res/layout/activity_sticker_details.xml deleted file mode 100644 index 3b976c5..0000000 --- a/app/src/main/res/layout/activity_sticker_details.xml +++ /dev/null @@ -1,194 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/app/src/main/res/values/colors.xml b/app/src/main/res/values/colors.xml index 89c8459..9326df4 100644 --- a/app/src/main/res/values/colors.xml +++ b/app/src/main/res/values/colors.xml @@ -1,10 +1,5 @@ #A9D2B5 - #008577 - #00574B #D81B60 - #A8A8A8 - #FFFFFF - #FF6C64 diff --git a/app/src/main/res/values/dimens.xml b/app/src/main/res/values/dimens.xml index fef759b..1220518 100644 --- a/app/src/main/res/values/dimens.xml +++ b/app/src/main/res/values/dimens.xml @@ -3,17 +3,7 @@ - 16sp - - 8dp - 16dp - 24dp - 60dp - - 16dp - 16dp - 8dp diff --git a/app/src/main/res/values/strings.xml b/app/src/main/res/values/strings.xml index 49aa482..4018f0e 100644 --- a/app/src/main/res/values/strings.xml +++ b/app/src/main/res/values/strings.xml @@ -1,8 +1,8 @@ WaStickersOnline - Imagen de la bandeja de paquetes de stickers Añadir a WhatsApp - Se añadió el paquete de stickers a WhatsApp No se añadió el paquete de stickers. Si deseas añadirlo, instala o actualiza WhatsApp Buscar… + Sin información + En este momento no se encuentra la información solicitada