feat: Update empty screen for sent, received transfers and settings s…

…creen
Infomaniak · Dec 4, 2024 · efe1bab · efe1bab
1 parent 6a9ff83
commit efe1bab
Show file tree

Hide file tree

Showing 11 changed files with 83 additions and 44 deletions.
diff --git a/app/src/main/java/com/infomaniak/swisstransfer/ui/components/EmptyState.kt b/app/src/main/java/com/infomaniak/swisstransfer/ui/components/EmptyState.kt
@@ -39,17 +39,17 @@ import com.infomaniak.swisstransfer.ui.theme.SwissTransferTheme
 
 @Composable
 fun EmptyState(
-    icon: ImageVector,
-    @StringRes titleRes: Int,
-    @StringRes descriptionRes: Int,
+    icon: ImageVector? = null,
+    @StringRes titleRes: Int? = null,
+    @StringRes descriptionRes: Int? = null,
     modifier: Modifier = Modifier,
-) = EmptyState(icon, titleRes, stringResource(descriptionRes), modifier)
+) = EmptyState(icon, titleRes, descriptionRes?.let { stringResource(it) }, modifier)
 
 @Composable
 fun EmptyState(
-    icon: ImageVector,
-    @StringRes titleRes: Int,
-    description: String,
+    icon: ImageVector?,
+    @StringRes titleRes: Int?,
+    description: String?,
     modifier: Modifier = Modifier,
 ) {
     Box(

diff --git a/app/src/main/java/com/infomaniak/swisstransfer/ui/components/IllustratedMessageBlock.kt b/app/src/main/java/com/infomaniak/swisstransfer/ui/components/IllustratedMessageBlock.kt
@@ -42,34 +42,40 @@ import com.infomaniak.swisstransfer.ui.theme.SwissTransferTheme
 
 @Composable
 fun IllustratedMessageBlock(
-    icon: ImageVector,
-    @StringRes title: Int,
-    description: String,
+    icon: ImageVector?,
+    @StringRes title: Int?,
+    description: String?,
     modifier: Modifier = Modifier,
 ) {
     Column(
         modifier = modifier,
         horizontalAlignment = Alignment.CenterHorizontally,
     ) {
-        Image(imageVector = icon, contentDescription = null)
+        icon?.let {
+            Image(imageVector = it, contentDescription = null)
 
-        Spacer(Modifier.height(Margin.Huge))
+            Spacer(Modifier.height(Margin.Huge))
+        }
 
-        Text(
-            text = stringResource(title),
-            textAlign = TextAlign.Center,
-            style = SwissTransferTheme.typography.h1,
-        )
+        title?.let {
+            Text(
+                text = stringResource(it),
+                textAlign = TextAlign.Center,
+                style = SwissTransferTheme.typography.h1,
+            )
+        }
 
-        Spacer(Modifier.height(Margin.Medium))
+        description?.let {
+            Spacer(Modifier.height(Margin.Medium))
 
-        Text(
-            text = description,
-            textAlign = TextAlign.Center,
-            style = SwissTransferTheme.typography.bodyRegular,
-            color = SwissTransferTheme.colors.secondaryTextColor,
-            modifier = Modifier.widthIn(max = Dimens.DescriptionWidth),
-        )
+            Text(
+                text = description,
+                textAlign = TextAlign.Center,
+                style = SwissTransferTheme.typography.bodyRegular,
+                color = SwissTransferTheme.colors.secondaryTextColor,
+                modifier = Modifier.widthIn(max = Dimens.DescriptionWidth),
+            )
+        }
     }
 }
 

diff --git a/app/src/main/java/com/infomaniak/swisstransfer/ui/screen/main/received/ReceivedScreen.kt b/app/src/main/java/com/infomaniak/swisstransfer/ui/screen/main/received/ReceivedScreen.kt
@@ -30,23 +30,28 @@ import com.infomaniak.swisstransfer.R
 import com.infomaniak.swisstransfer.ui.components.EmptyState
 import com.infomaniak.swisstransfer.ui.components.transfer.TransfersListWithExpiredBottomSheet
 import com.infomaniak.swisstransfer.ui.images.AppImages.AppIllus
-import com.infomaniak.swisstransfer.ui.images.illus.MascotSearching
+import com.infomaniak.swisstransfer.ui.images.illus.MascotWithMagnifyingGlass
 import com.infomaniak.swisstransfer.ui.screen.main.components.BrandTopAppBarScaffold
 import com.infomaniak.swisstransfer.ui.screen.main.received.components.ReceivedEmptyFab
 import com.infomaniak.swisstransfer.ui.screen.main.transfers.TransfersViewModel
+import com.infomaniak.swisstransfer.ui.theme.LocalWindowAdaptiveInfo
 import com.infomaniak.swisstransfer.ui.theme.SwissTransferTheme
 import com.infomaniak.swisstransfer.ui.utils.PreviewAllWindows
+import com.infomaniak.swisstransfer.ui.utils.isWindowSmall
 
 @Composable
 fun ReceivedScreen(
     navigateToDetails: (transferUuid: String) -> Unit,
     getSelectedTransferUuid: () -> String?,
     transfersViewModel: TransfersViewModel = hiltViewModel<TransfersViewModel>(),
+    hasTransfer: (Boolean) -> Unit,
 ) {
 
     val transfers by transfersViewModel.receivedTransfers.collectAsStateWithLifecycle()
     val isLoading by remember { derivedStateOf { transfers == null } }
 
+    hasTransfer(transfers?.isNotEmpty() == true)
+
     if (!isLoading) {
         ReceivedScreen(
             navigateToDetails = navigateToDetails,
@@ -71,8 +76,9 @@ private fun ReceivedScreen(
         floatingActionButton = { ReceivedEmptyFab { areTransfersEmpty } },
     ) {
         if (areTransfersEmpty) {
+            val shouldDisplayIcon = LocalWindowAdaptiveInfo.current.isWindowSmall()
             EmptyState(
-                icon = AppIllus.MascotSearching,
+                icon = if (shouldDisplayIcon) AppIllus.MascotWithMagnifyingGlass else null,
                 titleRes = R.string.noTransferReceivedTitle,
                 descriptionRes = R.string.noTransferReceivedDescription,
             )

diff --git a/app/src/main/java/com/infomaniak/swisstransfer/ui/screen/main/sent/SentScreen.kt b/app/src/main/java/com/infomaniak/swisstransfer/ui/screen/main/sent/SentScreen.kt
@@ -45,11 +45,14 @@ fun SentScreen(
     navigateToDetails: (transferUuid: String) -> Unit,
     getSelectedTransferUuid: () -> String?,
     transfersViewModel: TransfersViewModel = hiltViewModel<TransfersViewModel>(),
+    hasTransfer: (Boolean) -> Unit,
 ) {
 
     val transfers by transfersViewModel.sentTransfers.collectAsStateWithLifecycle()
     val isLoading by remember { derivedStateOf { transfers == null } }
 
+    hasTransfer(transfers?.isNotEmpty() == true)
+
     LifecycleEventEffect(Lifecycle.Event.ON_RESUME) {
         transfersViewModel.fetchPendingTransfers()
     }

diff --git a/...c/main/java/com/infomaniak/swisstransfer/ui/screen/main/settings/SettingsScreenWrapper.kt b/...c/main/java/com/infomaniak/swisstransfer/ui/screen/main/settings/SettingsScreenWrapper.kt
@@ -17,18 +17,13 @@
  */
 package com.infomaniak.swisstransfer.ui.screen.main.settings
 
-import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Surface
-import androidx.compose.material3.Text
 import androidx.compose.material3.adaptive.ExperimentalMaterial3AdaptiveApi
 import androidx.compose.material3.adaptive.layout.ListDetailPaneScaffoldRole
 import androidx.compose.material3.adaptive.navigation.ThreePaneScaffoldNavigator
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
-import androidx.compose.ui.Alignment
-import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.res.stringResource
 import androidx.hilt.navigation.compose.hiltViewModel
@@ -38,8 +33,11 @@ import com.infomaniak.multiplatform_swisstransfer.common.models.EmailLanguage
 import com.infomaniak.multiplatform_swisstransfer.common.models.Theme
 import com.infomaniak.multiplatform_swisstransfer.common.models.ValidityPeriod
 import com.infomaniak.swisstransfer.R
+import com.infomaniak.swisstransfer.ui.components.EmptyState
 import com.infomaniak.swisstransfer.ui.components.TwoPaneScaffold
 import com.infomaniak.swisstransfer.ui.components.safeCurrentContent
+import com.infomaniak.swisstransfer.ui.images.AppImages.AppIllus
+import com.infomaniak.swisstransfer.ui.images.illus.MascotWithMagnifyingGlass
 import com.infomaniak.swisstransfer.ui.screen.main.settings.SettingsOptionScreens.*
 import com.infomaniak.swisstransfer.ui.theme.SwissTransferTheme
 import com.infomaniak.swisstransfer.ui.utils.*
@@ -164,8 +162,11 @@ private fun DetailPane(
 
 @Composable
 private fun NoSelectionEmptyState() {
-    Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
-        Text("Select a setting item", color = SwissTransferTheme.colors.secondaryTextColor)
+    Surface {
+        EmptyState(
+            icon = AppIllus.MascotWithMagnifyingGlass,
+            descriptionRes = R.string.noSettingsSelectedDescription
+        )
     }
 }
 

diff --git a/...main/java/com/infomaniak/swisstransfer/ui/screen/main/transfers/TransfersScreenWrapper.kt b/...main/java/com/infomaniak/swisstransfer/ui/screen/main/transfers/TransfersScreenWrapper.kt
@@ -24,13 +24,17 @@ import androidx.compose.material3.adaptive.ExperimentalMaterial3AdaptiveApi
 import androidx.compose.material3.adaptive.layout.ListDetailPaneScaffoldRole
 import androidx.compose.material3.adaptive.navigation.ThreePaneScaffoldNavigator
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.saveable.rememberSaveable
+import androidx.compose.runtime.setValue
 import com.infomaniak.multiplatform_swisstransfer.common.models.TransferDirection
 import com.infomaniak.swisstransfer.R
 import com.infomaniak.swisstransfer.ui.components.EmptyState
 import com.infomaniak.swisstransfer.ui.components.TwoPaneScaffold
 import com.infomaniak.swisstransfer.ui.components.safeCurrentContent
 import com.infomaniak.swisstransfer.ui.images.AppImages.AppIllus
-import com.infomaniak.swisstransfer.ui.images.illus.MascotSearching
+import com.infomaniak.swisstransfer.ui.images.illus.MascotWithMagnifyingGlass
 import com.infomaniak.swisstransfer.ui.screen.main.received.ReceivedScreen
 import com.infomaniak.swisstransfer.ui.screen.main.sent.SentScreen
 import com.infomaniak.swisstransfer.ui.screen.main.transferdetails.TransferDetailsScreen
@@ -42,23 +46,31 @@ import kotlinx.parcelize.Parcelize
 @OptIn(ExperimentalMaterial3AdaptiveApi::class)
 @Composable
 fun TransfersScreenWrapper(direction: TransferDirection) {
+    var hasTransfer: Boolean by rememberSaveable { mutableStateOf(false) }
+
     TwoPaneScaffold<DestinationContent>(
-        listPane = { ListPane(direction, navigator = this) },
-        detailPane = { DetailPane(navigator = this) },
+        listPane = { ListPane(direction, navigator = this, hasTransfer = { hasTransfer = it }) },
+        detailPane = { DetailPane(navigator = this, hasTransfer) },
     )
 }
 
 @OptIn(ExperimentalMaterial3AdaptiveApi::class)
 @Composable
-private fun ListPane(direction: TransferDirection, navigator: ThreePaneScaffoldNavigator<DestinationContent>) {
+private fun ListPane(
+    direction: TransferDirection,
+    navigator: ThreePaneScaffoldNavigator<DestinationContent>,
+    hasTransfer: (Boolean) -> Unit
+) {
     when (direction) {
         TransferDirection.SENT -> SentScreen(
             navigateToDetails = { transferUuid -> navigator.navigateToDetails(direction, transferUuid) },
             getSelectedTransferUuid = navigator::getSelectedTransferUuid,
+            hasTransfer = { hasTransfer(it) }
         )
         TransferDirection.RECEIVED -> ReceivedScreen(
             navigateToDetails = { transferUuid -> navigator.navigateToDetails(direction, transferUuid) },
             getSelectedTransferUuid = navigator::getSelectedTransferUuid,
+            hasTransfer = { hasTransfer(it) }
         )
     }
 }
@@ -78,12 +90,12 @@ private fun ThreePaneScaffoldNavigator<DestinationContent>.getSelectedTransferUu
 
 @OptIn(ExperimentalMaterial3AdaptiveApi::class)
 @Composable
-private fun DetailPane(navigator: ThreePaneScaffoldNavigator<DestinationContent>) {
+private fun DetailPane(navigator: ThreePaneScaffoldNavigator<DestinationContent>, hasTransfer: Boolean) {
 
     val destinationContent = navigator.safeCurrentContent()
 
     if (destinationContent == null) {
-        NoSelectionEmptyState()
+        NoSelectionEmptyState(hasTransfer)
     } else {
         TransferDetailsScreen(
             transferUuid = destinationContent.transferUuid,
@@ -94,12 +106,18 @@ private fun DetailPane(navigator: ThreePaneScaffoldNavigator<DestinationContent>
 }
 
 @Composable
-private fun NoSelectionEmptyState() {
+private fun NoSelectionEmptyState(hasTransfers: Boolean) {
+    val (titleRes, descriptionRes) = if (hasTransfers) {
+        R.string.noTransferSelectedTitle to R.string.noTransferSelectedDescription
+    } else {
+        null to null
+    }
+
     Surface {
         EmptyState(
-            icon = AppIllus.MascotSearching,
-            titleRes = R.string.noTransferSelectedTitle,
-            descriptionRes = R.string.noTransferSelectedDescription,
+            icon = AppIllus.MascotWithMagnifyingGlass,
+            titleRes = titleRes,
+            descriptionRes = descriptionRes
         )
     }
 }

diff --git a/app/src/main/res/values-de/strings.xml b/app/src/main/res/values-de/strings.xml
@@ -46,6 +46,7 @@
     <string name="networkUnavailable">Auf Netzwerk warten…</string>
     <string name="noFileDescription">Fügt bis zu 50 GB an Dateien hinzu</string>
     <string name="noFileTitle">Keine Datei, keine Übertragung!</string>
+    <string name="noSettingsSelectedDescription">Wählt einen Parameter zur Anzeige aus</string>
     <string name="noTransferReceivedDescription">Alle Überweisungen, die du in den letzten 30 Tagen erhältst, werden hier angezeigt.</string>
     <string name="noTransferReceivedTitle">Keine Überweisungen erhalten</string>
     <string name="noTransferSelectedDescription">Wähle eine Übertragung aus oder erstelle eine neue.</string>

diff --git a/app/src/main/res/values-es/strings.xml b/app/src/main/res/values-es/strings.xml
@@ -46,6 +46,7 @@
     <string name="networkUnavailable">Esperando la red…</string>
     <string name="noFileDescription">Añade hasta 50 GB de archivos</string>
     <string name="noFileTitle">Si no hay archivo, no hay transferencia.</string>
+    <string name="noSettingsSelectedDescription">Selecciona un parámetro para su visualización</string>
     <string name="noTransferReceivedDescription">Aquí aparecerán todas las transferencias recibidas en los últimos 30 días.</string>
     <string name="noTransferReceivedTitle">No se han recibido transferencias</string>
     <string name="noTransferSelectedDescription">Selecciona una transferencia o crea una nueva.</string>

diff --git a/app/src/main/res/values-fr/strings.xml b/app/src/main/res/values-fr/strings.xml
@@ -47,6 +47,7 @@
     <string name="networkUnavailable">En attente de réseau…</string>
     <string name="noFileDescription">Ajoute jusqu’à 50 Go de fichiers</string>
     <string name="noFileTitle">Pas de fichier, pas de transfert !</string>
+    <string name="noSettingsSelectedDescription">Sélectionne un paramètre pour l’afficher</string>
     <string name="noTransferReceivedDescription">Tous les transferts que tu recevras sur les 30 derniers jours apparaitront ici.</string>
     <string name="noTransferReceivedTitle">Aucun transfert reçu</string>
     <string name="noTransferSelectedDescription">Sélectionne un transfert ou créé-en un nouveau.</string>

diff --git a/app/src/main/res/values-it/strings.xml b/app/src/main/res/values-it/strings.xml
@@ -46,6 +46,7 @@
     <string name="networkUnavailable">In attesa della rete…</string>
     <string name="noFileDescription">Aggiungere fino a 50 GB di file</string>
     <string name="noFileTitle">Nessun file, nessun trasferimento!</string>
+    <string name="noSettingsSelectedDescription">Seleziona un parametro da visualizzare</string>
     <string name="noTransferReceivedDescription">Qui appariranno tutti i bonifici ricevuti negli ultimi 30 giorni.</string>
     <string name="noTransferReceivedTitle">Nessun trasferimento ricevuto</string>
     <string name="noTransferSelectedDescription">Selezionare un trasferimento o crearne uno nuovo.</string>

diff --git a/app/src/main/res/values/strings.xml b/app/src/main/res/values/strings.xml
@@ -50,6 +50,7 @@
     <string name="networkUnavailable">Waiting for network…</string>
     <string name="noFileDescription">Add up to 50 GB of files</string>
     <string name="noFileTitle">No file, no transfer!</string>
+    <string name="noSettingsSelectedDescription">Selects a parameter to display it</string>
     <string name="noTransferReceivedDescription">All transfers you receive over the last 30 days will appear here.</string>
     <string name="noTransferReceivedTitle">No transfers received</string>
     <string name="noTransferSelectedDescription">Select a transfer or create a new one.</string>