More fixes (#39)

* Improve desktop readability * Improve the progress bar UI * Fix auto scrolling to next * Fix text alignment on desktop
Ivy-Apps · Jun 7, 2024 · 5c2307f · 5c2307f
1 parent 6730439
commit 5c2307f
Show file tree

Hide file tree

Showing 6 changed files with 68 additions and 13 deletions.
diff --git a/composeApp/src/commonMain/kotlin/ui/screen/lesson/LessonViewModel.kt b/composeApp/src/commonMain/kotlin/ui/screen/lesson/LessonViewModel.kt
@@ -54,6 +54,7 @@ class LessonViewModel(
                 items = persistentListOf(),
                 cta = null,
                 progress = LessonProgressViewState(0, 1),
+                itemsLoadedDiff = 0,
             )
         }
     }

diff --git a/composeApp/src/commonMain/kotlin/ui/screen/lesson/LessonViewState.kt b/composeApp/src/commonMain/kotlin/ui/screen/lesson/LessonViewState.kt
@@ -10,6 +10,7 @@ data class LessonViewState(
     val items: ImmutableList<LessonItemViewState>,
     val cta: CtaViewState?,
     val progress: LessonProgressViewState,
+    val itemsLoadedDiff: Int,
 )
 
 @Immutable
@@ -72,6 +73,7 @@ data class OpenQuestionItemViewState(
     val answered: Boolean,
 ) : LessonItemViewState
 
+@Immutable
 sealed interface CtaViewState {
     val currentItemId: LessonItemIdViewState
 

diff --git a/composeApp/src/commonMain/kotlin/ui/screen/lesson/composable/LessonAutoScroll.kt b/composeApp/src/commonMain/kotlin/ui/screen/lesson/composable/LessonAutoScroll.kt
@@ -7,6 +7,7 @@ import androidx.compose.foundation.lazy.LazyListState
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.unit.dp
 import component.ScreenType.*
 import component.screenType
@@ -23,11 +24,22 @@ fun AutoScrollEffect(
 ) {
     val items = viewState.items
     val itemsCount = items.size
-    LaunchedEffect(itemsCount, viewState.cta) {
-        if (itemsCount >= 2) {
+    val density = LocalDensity.current
+    LaunchedEffect(
+        itemsCount,
+        viewState.itemsLoadedDiff,
+        viewState.cta != null
+    ) {
+        val scrollToIndex = itemsCount - viewState.itemsLoadedDiff
+        if (itemsCount > 0 &&
+            scrollToIndex in items.indices
+        ) {
             // ensure auto scrolls works for images that are loading
             repeat(4) {
-                listState.animateScrollToItem(items.lastIndex)
+                listState.animateScrollToItem(
+                    index = scrollToIndex,
+                    scrollOffset = with(density) { 32.dp.toPx().toInt() }
+                )
                 delay(200)
             }
         }

diff --git a/composeApp/src/commonMain/kotlin/ui/screen/lesson/composable/LessonProgressBar.kt b/composeApp/src/commonMain/kotlin/ui/screen/lesson/composable/LessonProgressBar.kt
@@ -16,7 +16,6 @@ import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.coerceAtMost
 import androidx.compose.ui.unit.dp
 import ui.screen.lesson.LessonProgressViewState
-import ui.theme.Gray
 
 
 @Composable
@@ -30,7 +29,7 @@ fun LessonProgressBar(
             targetValue = viewState.done / viewState.total.toFloat(),
         )
         // background (total)
-        ProgressBarLine(width = progressBarWidth, color = Gray)
+        ProgressBarLine(width = progressBarWidth, color = MaterialTheme.colors.secondary.copy(alpha = 0.4f))
         // foreground (progress)
         val progressWidth = (progressBarWidth * progressPercent).coerceAtMost(progressBarWidth)
         ProgressBarLine(width = progressWidth, color = MaterialTheme.colors.secondary)

diff --git a/composeApp/src/commonMain/kotlin/ui/screen/lesson/composable/item/TextLessonItem.kt b/composeApp/src/commonMain/kotlin/ui/screen/lesson/composable/item/TextLessonItem.kt
@@ -1,9 +1,13 @@
 package ui.screen.lesson.composable.item
 
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.sizeIn
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.unit.dp
+import component.ScreenType.*
+import component.screenType
 import component.text.BodyBig
 import component.text.HeadlineSmall
 import ui.screen.lesson.TextItemViewState
@@ -17,36 +21,68 @@ fun TextLessonItem(
     viewState: TextItemViewState,
     modifier: Modifier = Modifier
 ) {
+
     when (viewState.style) {
-        TextStyleViewState.Heading -> HeadlineSmall(
+        TextStyleViewState.Heading -> LessonHeadlineText(
             modifier = modifier.padding(top = ItemSpacingBig),
             text = viewState.text
         )
 
-        TextStyleViewState.Body -> BodyText(
+        TextStyleViewState.Body -> LessonBodyText(
             modifier = modifier.padding(top = ItemSpacing),
             text = viewState.text,
         )
 
-        TextStyleViewState.BodyMediumSpacing -> BodyText(
+        TextStyleViewState.BodyMediumSpacing -> LessonBodyText(
             modifier = modifier.padding(top = ItemSpacingMedium),
             text = viewState.text,
         )
 
-        TextStyleViewState.BodyBigSpacing -> BodyText(
+        TextStyleViewState.BodyBigSpacing -> LessonBodyText(
             modifier = modifier.padding(top = ItemSpacingBig),
             text = viewState.text,
         )
     }
 }
 
 @Composable
-private fun BodyText(
+private fun LessonHeadlineText(
+    text: String,
+    modifier: Modifier = Modifier,
+) {
+    HeadlineSmall(
+        modifier = modifier
+            .then(
+                when (screenType()) {
+                    Desktop, Tablet -> Modifier.sizeIn(
+                        maxWidth = 500.dp
+                    )
+
+                    Mobile -> Modifier
+                }
+            ),
+        text = text
+    )
+}
+
+@Composable
+private fun LessonBodyText(
     text: String,
     modifier: Modifier = Modifier,
 ) {
     BodyBig(
-        modifier = modifier,
+        modifier = modifier.then(
+            when (screenType()) {
+                Desktop, Tablet -> Modifier.sizeIn(
+                    minWidth = 500.dp,
+                    maxWidth = 500.dp
+                )
+
+                Mobile -> Modifier.sizeIn(
+                    minWidth = 500.dp,
+                )
+            }
+        ),
         text = text,
         textAlign = TextAlign.Start,
     )

diff --git a/composeApp/src/commonMain/kotlin/ui/screen/lesson/mapper/LessonViewStateMapper.kt b/composeApp/src/commonMain/kotlin/ui/screen/lesson/mapper/LessonViewStateMapper.kt
@@ -11,6 +11,8 @@ class LessonViewStateMapper(
     private val lessonTreeManager: LessonTreeManager,
     private val platform: Platform,
 ) {
+    private var prevItemsCount = 0
+
     fun Lesson.toViewState(
         localState: LessonViewModel.LocalState,
     ): LessonViewState {
@@ -38,8 +40,11 @@ class LessonViewStateMapper(
 
                 else -> ctaViewState(currentItem)
             },
-            progress = toProgressViewState(lessonItems)
-        )
+            progress = toProgressViewState(lessonItems),
+            itemsLoadedDiff = lessonItems.size - prevItemsCount,
+        ).also {
+            prevItemsCount = lessonItems.size
+        }
     }
 
     private fun ctaViewState(currentItem: LessonItem): CtaViewState {