🚀 Help screen UI improvement + New transition

* Improved UI * Removed help tip (How to find books) * Improved animations * Removed unused string resources * New transition Part of: #60
Acclorite · Aug 31, 2024 · 7c92542 · 7c92542
1 parent 169b939
commit 7c92542
Show file tree

Hide file tree

Showing 14 changed files with 75 additions and 353 deletions.
diff --git a/app/src/main/java/ua/acclorite/book_story/domain/model/HelpTip.kt b/app/src/main/java/ua/acclorite/book_story/domain/model/HelpTip.kt
@@ -1,16 +1,13 @@
 package ua.acclorite.book_story.domain.model
 
 import androidx.annotation.StringRes
-import androidx.compose.foundation.layout.ColumnScope
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.Immutable
 import androidx.compose.ui.text.AnnotatedString
 import ua.acclorite.book_story.domain.util.OnNavigate
-import ua.acclorite.book_story.presentation.screens.help.data.HelpEvent
 
 @Immutable
 data class HelpTip(
     @StringRes val title: Int,
-    val description: @Composable AnnotatedString.Builder.(onNavigate: OnNavigate, fromStart: Boolean) -> Unit,
-    val customContent: @Composable ColumnScope.(onHelpEvent: (HelpEvent) -> Unit) -> Unit = {},
+    val description: @Composable AnnotatedString.Builder.(onNavigate: OnNavigate, fromStart: Boolean) -> Unit
 )
diff --git a/app/src/main/java/ua/acclorite/book_story/domain/util/Constants.kt b/app/src/main/java/ua/acclorite/book_story/domain/util/Constants.kt
@@ -26,7 +26,6 @@ import ua.acclorite.book_story.domain.model.HelpTip
 import ua.acclorite.book_story.domain.model.NavigationItem
 import ua.acclorite.book_story.presentation.data.Screen
 import ua.acclorite.book_story.presentation.screens.help.components.HelpAnnotation
-import ua.acclorite.book_story.presentation.screens.help.components.content.HelpFindBooksContent
 import ua.acclorite.book_story.presentation.ui.Theme
 
 object Constants {
@@ -167,16 +166,6 @@ private fun provideCredits() = listOf(
 )
 
 private fun provideHelpTips() = listOf(
-    HelpTip(
-        title = R.string.help_title_how_to_find_books,
-        description = { _, _ ->
-            append(stringResource(id = R.string.help_desc_how_to_find_books))
-        },
-        customContent = { onHelpEvent ->
-            HelpFindBooksContent(onEvent = onHelpEvent)
-        }
-    ),
-
     HelpTip(
         title = R.string.help_title_how_to_add_books,
         description = { onNavigate, fromStart ->

diff --git a/app/src/main/java/ua/acclorite/book_story/presentation/screens/help/HelpScreen.kt b/app/src/main/java/ua/acclorite/book_story/presentation/screens/help/HelpScreen.kt
@@ -1,13 +1,11 @@
 package ua.acclorite.book_story.presentation.screens.help
 
 import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.WindowInsets
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
-import androidx.compose.foundation.layout.imePadding
 import androidx.compose.foundation.layout.navigationBars
 import androidx.compose.foundation.layout.navigationBarsPadding
 import androidx.compose.foundation.layout.padding
@@ -47,7 +45,6 @@ import ua.acclorite.book_story.presentation.screens.browse.data.BrowseEvent
 import ua.acclorite.book_story.presentation.screens.browse.data.BrowseViewModel
 import ua.acclorite.book_story.presentation.screens.help.components.HelpItem
 import ua.acclorite.book_story.presentation.screens.help.components.items.HelpClickMeNoteItem
-import ua.acclorite.book_story.presentation.screens.help.data.HelpEvent
 import ua.acclorite.book_story.presentation.screens.help.data.HelpState
 import ua.acclorite.book_story.presentation.screens.help.data.HelpViewModel
 import ua.acclorite.book_story.presentation.screens.start.data.StartEvent
@@ -70,7 +67,6 @@ fun HelpScreenRoot(screen: Screen.Help) {
     HelpScreen(
         state = state,
         onNavigate = { navigator.it() },
-        onEvent = helpViewModel::onEvent,
         onMainEvent = mainViewModel::onEvent,
         onBrowseEvent = browseViewModel::onEvent,
         onStartEvent = startViewModel::onEvent
@@ -84,7 +80,6 @@ fun HelpScreenRoot(screen: Screen.Help) {
 private fun HelpScreen(
     state: State<HelpState>,
     onNavigate: OnNavigate,
-    onEvent: (HelpEvent) -> Unit,
     onMainEvent: (MainEvent) -> Unit,
     onBrowseEvent: (BrowseEvent) -> Unit,
     onStartEvent: (StartEvent) -> Unit
@@ -158,46 +153,31 @@ private fun HelpScreen(
         CustomLazyColumn(
             Modifier
                 .fillMaxSize()
-                .padding(paddingValues)
-                .imePadding(),
-            state = scrollState.second,
-            contentPadding = PaddingValues(horizontal = 18.dp)
+                .padding(paddingValues),
+            state = scrollState.second
         ) {
             item {
-                Spacer(
-                    modifier = Modifier
-                        .animateItem()
-                        .height(16.dp)
-                )
+                Spacer(modifier = Modifier.height(16.dp))
             }
 
             item {
                 HelpClickMeNoteItem()
             }
 
             item {
-                Spacer(
-                    modifier = Modifier
-                        .animateItem()
-                        .height(16.dp)
-                )
+                Spacer(modifier = Modifier.height(8.dp))
             }
 
             customItems(Constants.HELP_TIPS, key = { it.title }) { helpTip ->
                 HelpItem(
                     helpTip = helpTip,
                     onNavigate = onNavigate,
-                    fromStart = state.value.fromStart,
-                    onHelpEvent = onEvent
+                    fromStart = state.value.fromStart
                 )
             }
 
             item {
-                Spacer(
-                    modifier = Modifier
-                        .animateItem()
-                        .height(48.dp)
-                )
+                Spacer(modifier = Modifier.height(48.dp))
             }
         }
     }

diff --git a/...in/java/ua/acclorite/book_story/presentation/screens/help/components/HelpClickableNote.kt b/...in/java/ua/acclorite/book_story/presentation/screens/help/components/HelpClickableNote.kt
@@ -4,8 +4,8 @@ import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
-import androidx.compose.foundation.lazy.LazyItemScope
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.outlined.Info
 import androidx.compose.material3.Icon
@@ -20,7 +20,7 @@ import androidx.compose.ui.text.AnnotatedString
 import androidx.compose.ui.unit.dp
 import ua.acclorite.book_story.R
 import ua.acclorite.book_story.presentation.components.CustomTooltip
-import ua.acclorite.book_story.presentation.ui.SlidingTransition
+import ua.acclorite.book_story.presentation.ui.ExpandingTransition
 
 /**
  * Help Clickable Note.
@@ -29,10 +29,10 @@ import ua.acclorite.book_story.presentation.ui.SlidingTransition
  * @param text [AnnotatedString].
  */
 @Composable
-fun LazyItemScope.HelpClickableNote(text: AnnotatedString) {
+fun HelpClickableNote(text: AnnotatedString) {
     val showNote = rememberSaveable { mutableStateOf(true) }
 
-    Column(Modifier.animateItem()) {
+    Column(Modifier.padding(horizontal = 18.dp)) {
         CustomTooltip(text = stringResource(R.string.note_content_desc)) {
             Icon(
                 imageVector = Icons.Outlined.Info,
@@ -46,7 +46,7 @@ fun LazyItemScope.HelpClickableNote(text: AnnotatedString) {
             )
         }
 
-        SlidingTransition(visible = showNote.value) {
+        ExpandingTransition(visible = showNote.value) {
             Column {
                 Spacer(modifier = Modifier.height(8.dp))
                 Text(
@@ -58,10 +58,4 @@ fun LazyItemScope.HelpClickableNote(text: AnnotatedString) {
             }
         }
     }
-}
-
-
-
-
-
-
+}
diff --git a/app/src/main/java/ua/acclorite/book_story/presentation/screens/help/components/HelpItem.kt b/app/src/main/java/ua/acclorite/book_story/presentation/screens/help/components/HelpItem.kt
@@ -1,7 +1,9 @@
 package ua.acclorite.book_story.presentation.screens.help.components
 
+import androidx.compose.animation.animateColorAsState
 import androidx.compose.animation.core.animateFloatAsState
 import androidx.compose.animation.core.tween
+import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
@@ -11,27 +13,26 @@ import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
-import androidx.compose.foundation.lazy.LazyItemScope
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.outlined.ArrowDropUp
+import androidx.compose.material3.HorizontalDivider
 import androidx.compose.material3.Icon
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
-import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.saveable.rememberSaveable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
 import androidx.compose.ui.draw.rotate
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.buildAnnotatedString
 import androidx.compose.ui.unit.dp
 import ua.acclorite.book_story.R
 import ua.acclorite.book_story.domain.model.HelpTip
 import ua.acclorite.book_story.domain.util.OnNavigate
-import ua.acclorite.book_story.presentation.screens.help.data.HelpEvent
-import ua.acclorite.book_story.presentation.ui.SlidingTransition
+import ua.acclorite.book_story.presentation.ui.ExpandingTransition
 
 /**
  * Help Item.
@@ -40,29 +41,44 @@ import ua.acclorite.book_story.presentation.ui.SlidingTransition
  * @param helpTip [HelpTip] to be shown.
  * @param onNavigate Navigator callback.
  * @param fromStart Whether user came from Start screen.
- * @param onHelpEvent [HelpEvent] callback.
  */
 @Composable
-fun LazyItemScope.HelpItem(
+fun HelpItem(
     helpTip: HelpTip,
     onNavigate: OnNavigate,
-    fromStart: Boolean,
-    onHelpEvent: (HelpEvent) -> Unit
+    fromStart: Boolean
 ) {
     val showDescription = rememberSaveable {
         mutableStateOf(false)
     }
-    val animatedArrowRotation by animateFloatAsState(
+
+    val animatedArrowRotation = animateFloatAsState(
         targetValue = if (showDescription.value) 0f else -180f,
-        animationSpec = tween(300),
-        label = stringResource(id = R.string.arrow_anim_content_desc)
+        animationSpec = tween(400)
+    )
+    val animatedBackgroundColor = animateColorAsState(
+        targetValue = if (showDescription.value) {
+            MaterialTheme.colorScheme.surfaceContainer
+        } else MaterialTheme.colorScheme.surfaceContainerLow,
+        animationSpec = tween(400)
+    )
+    val animatedArrowContainerColor = animateColorAsState(
+        targetValue = if (showDescription.value) {
+            MaterialTheme.colorScheme.surfaceContainerHigh
+        } else MaterialTheme.colorScheme.surfaceContainer,
+        animationSpec = tween(400)
     )
 
     Column(
         Modifier
-            .animateItem()
             .fillMaxWidth()
-            .padding(vertical = 8.dp)
+            .clip(MaterialTheme.shapes.large)
+            .padding(horizontal = 8.dp, vertical = 4.dp)
+            .background(
+                animatedBackgroundColor.value,
+                MaterialTheme.shapes.large
+            )
+            .padding(vertical = 16.dp, horizontal = 18.dp)
     ) {
         Row(
             modifier = Modifier
@@ -83,17 +99,25 @@ fun LazyItemScope.HelpItem(
                 imageVector = Icons.Outlined.ArrowDropUp,
                 tint = MaterialTheme.colorScheme.onSurfaceVariant,
                 modifier = Modifier
+                    .clip(MaterialTheme.shapes.medium)
+                    .background(
+                        animatedArrowContainerColor.value,
+                        MaterialTheme.shapes.medium
+                    )
+                    .padding(8.dp)
                     .size(24.dp)
-                    .rotate(animatedArrowRotation),
+                    .rotate(animatedArrowRotation.value),
                 contentDescription = stringResource(id = R.string.arrow_content_desc)
             )
         }
 
-        SlidingTransition(
+        ExpandingTransition(
             visible = showDescription.value
         ) {
             Column(Modifier.fillMaxWidth()) {
-                Spacer(modifier = Modifier.height(16.dp))
+                Spacer(modifier = Modifier.height(8.dp))
+                HorizontalDivider()
+                Spacer(modifier = Modifier.height(8.dp))
                 Text(
                     text = buildAnnotatedString {
                         helpTip.description.invoke(
@@ -106,10 +130,6 @@ fun LazyItemScope.HelpItem(
                         color = MaterialTheme.colorScheme.onSurfaceVariant
                     )
                 )
-                helpTip.customContent.invoke(
-                    this,
-                    onHelpEvent
-                )
             }
         }
     }