Fix some ui issues in prompting audio download

This patch fixes some ui issues in the prompting audio bar. It ensures that the x is present, and makes the font a bit smaller to work better on smaller screens. Refs #3042.
quran · Jan 5, 2025 · 86a4a9c · 86a4a9c
1 parent 234b3cf
commit 86a4a9c
Show file tree

Hide file tree

Showing 8 changed files with 44 additions and 38 deletions.
diff --git a/feature/audiobar/src/main/kotlin/com/quran/mobile/feature/audiobar/ui/AudioBar.kt b/feature/audiobar/src/main/kotlin/com/quran/mobile/feature/audiobar/ui/AudioBar.kt
@@ -101,7 +101,7 @@ internal fun AudioBar(
 @Preview("arabic", locale = "ar")
 @Preview("dark theme", uiMode = Configuration.UI_MODE_NIGHT_YES)
 @Composable
-fun AudioBarStoppedPreview() {
+private fun AudioBarStoppedPreview() {
   QuranTheme {
     Surface {
       AudioBar(
@@ -120,7 +120,7 @@ fun AudioBarStoppedPreview() {
 @Preview("arabic", locale = "ar")
 @Preview("dark theme", uiMode = Configuration.UI_MODE_NIGHT_YES)
 @Composable
-fun AudioBarPlayingPreview() {
+private fun AudioBarPlayingPreview() {
   QuranTheme {
     Surface {
       AudioBar(

diff --git a/feature/audiobar/src/main/kotlin/com/quran/mobile/feature/audiobar/ui/ErrorAudioBar.kt b/feature/audiobar/src/main/kotlin/com/quran/mobile/feature/audiobar/ui/ErrorAudioBar.kt
@@ -2,20 +2,19 @@ package com.quran.mobile.feature.audiobar.ui
 
 import androidx.compose.foundation.layout.IntrinsicSize
 import androidx.compose.foundation.layout.Row
-import androidx.compose.foundation.layout.fillMaxHeight
 import androidx.compose.foundation.layout.height
-import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.layout.padding
 import androidx.compose.material.icons.filled.Close
-import androidx.compose.material3.Divider
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
 import androidx.compose.material3.Text
+import androidx.compose.material3.VerticalDivider
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.Preview
-import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
 import com.quran.labs.androidquran.common.ui.core.QuranIcons
 import com.quran.labs.androidquran.common.ui.core.QuranTheme
 import com.quran.mobile.feature.audiobar.state.AudioBarState
@@ -35,19 +34,18 @@ internal fun ErrorAudioBar(
       Icon(QuranIcons.Close, contentDescription = stringResource(id = android.R.string.cancel))
     }
 
-    Divider(
-      modifier = Modifier
-        .fillMaxHeight()
-        .width(Dp.Hairline)
-    )
+    VerticalDivider()
 
-    Text(text = stringResource(id = state.messageResource))
+    Text(
+      text = stringResource(id = state.messageResource),
+      modifier = Modifier.padding(horizontal = 8.dp)
+    )
   }
 }
 
 @Preview
 @Composable
-fun ErrorAudioBarPreview() {
+private fun ErrorAudioBarPreview() {
   QuranTheme {
     ErrorAudioBar(
       state = AudioBarState.Error(

diff --git a/feature/audiobar/src/main/kotlin/com/quran/mobile/feature/audiobar/ui/LoadingAudioBar.kt b/feature/audiobar/src/main/kotlin/com/quran/mobile/feature/audiobar/ui/LoadingAudioBar.kt
@@ -88,7 +88,7 @@ internal fun ProgressAudioBar(
 
 @Preview
 @Composable
-fun LoadingAudioBarPreview() {
+private fun LoadingAudioBarPreview() {
   QuranTheme {
     LoadingAudioBar(
       state = AudioBarState.Loading(
@@ -102,7 +102,7 @@ fun LoadingAudioBarPreview() {
 
 @Preview
 @Composable
-fun LoadingAudioBarIndeterminatePreview() {
+private fun LoadingAudioBarIndeterminatePreview() {
   QuranTheme {
     LoadingAudioBar(
       state = AudioBarState.Loading(

diff --git a/feature/audiobar/src/main/kotlin/com/quran/mobile/feature/audiobar/ui/PlaybackAudioBar.kt b/feature/audiobar/src/main/kotlin/com/quran/mobile/feature/audiobar/ui/PlaybackAudioBar.kt
@@ -154,7 +154,7 @@ private val SPEED_VALUES = listOf(0.5f, 0.75f, 1.0f, 1.25f, 1.5f)
 
 @Preview
 @Composable
-fun PlayingAudioBarPreview() {
+private fun PlayingAudioBarPreview() {
   QuranTheme {
     PlayingAudioBar(
       state = AudioBarState.Playing(
@@ -169,7 +169,7 @@ fun PlayingAudioBarPreview() {
 
 @Preview
 @Composable
-fun PausedAudioBarPreview() {
+private fun PausedAudioBarPreview() {
   QuranTheme {
     PausedAudioBar(
       state = AudioBarState.Paused(

diff --git a/feature/audiobar/src/main/kotlin/com/quran/mobile/feature/audiobar/ui/PromptingAudioBar.kt b/feature/audiobar/src/main/kotlin/com/quran/mobile/feature/audiobar/ui/PromptingAudioBar.kt
@@ -2,22 +2,26 @@ package com.quran.mobile.feature.audiobar.ui
 
 import androidx.compose.foundation.layout.IntrinsicSize
 import androidx.compose.foundation.layout.Row
-import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxHeight
 import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.width
 import androidx.compose.material.icons.filled.Check
 import androidx.compose.material.icons.filled.Close
-import androidx.compose.material3.Divider
+import androidx.compose.material3.HorizontalDivider
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Surface
 import androidx.compose.material3.Text
+import androidx.compose.material3.VerticalDivider
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
 import com.quran.labs.androidquran.common.ui.core.QuranIcons
 import com.quran.labs.androidquran.common.ui.core.QuranTheme
 import com.quran.mobile.feature.audiobar.state.AudioBarState
@@ -37,15 +41,16 @@ internal fun PromptingAudioBar(
       Icon(QuranIcons.Check, contentDescription = stringResource(id = android.R.string.ok))
     }
 
-    Divider(
+    VerticalDivider()
+
+    Text(
+      text = stringResource(state.messageResource),
+      style = MaterialTheme.typography.bodySmall,
       modifier = Modifier
-        .fillMaxHeight()
-        .width(Dp.Hairline)
+        .padding(horizontal = 8.dp)
+        .weight(1f)
     )
 
-    Text(text = stringResource(state.messageResource))
-    Spacer(modifier = Modifier.weight(1f))
-
     IconButton(onClick = { eventSink(AudioBarUiEvent.PromptEvent.Cancel) }) {
       Icon(QuranIcons.Close, contentDescription = stringResource(id = android.R.string.cancel))
     }
@@ -54,13 +59,16 @@ internal fun PromptingAudioBar(
 
 @Preview
 @Composable
-fun PromptingAudioBarPreview() {
+private fun PromptingAudioBarPreview() {
   QuranTheme {
-    PromptingAudioBar(
-      state = AudioBarState.Prompt(
-        messageResource = android.R.string.httpErrorUnsupportedScheme,
-      ),
-      eventSink = {}
-    )
+    Surface {
+      PromptingAudioBar(
+        state = AudioBarState.Prompt(
+          messageResource = com.quran.mobile.common.download.R.string.download_non_wifi_prompt,
+        ),
+        modifier = Modifier.height(48.dp),
+        eventSink = {}
+      )
+    }
   }
 }
diff --git a/feature/audiobar/src/main/kotlin/com/quran/mobile/feature/audiobar/ui/RecitationAudioBar.kt b/feature/audiobar/src/main/kotlin/com/quran/mobile/feature/audiobar/ui/RecitationAudioBar.kt
@@ -145,7 +145,7 @@ internal fun RecitationAudioBar(
 
 @Preview
 @Composable
-fun RecitationListeningAudioBarPreview() {
+private fun RecitationListeningAudioBarPreview() {
   QuranTheme {
     RecitationListeningAudioBar(
       eventSink = {},
@@ -156,7 +156,7 @@ fun RecitationListeningAudioBarPreview() {
 
 @Preview
 @Composable
-fun RecitationPlayingAudioBarPreview() {
+private fun RecitationPlayingAudioBarPreview() {
   QuranTheme {
     RecitationPlayingAudioBar(
       eventSink = {},
@@ -167,7 +167,7 @@ fun RecitationPlayingAudioBarPreview() {
 
 @Preview
 @Composable
-fun RecitationStoppedAudioBarPreview() {
+private fun RecitationStoppedAudioBarPreview() {
   QuranTheme {
     RecitationStoppedAudioBar(
       eventSink = {},

diff --git a/feature/audiobar/src/main/kotlin/com/quran/mobile/feature/audiobar/ui/RepeatableButton.kt b/feature/audiobar/src/main/kotlin/com/quran/mobile/feature/audiobar/ui/RepeatableButton.kt
@@ -49,7 +49,7 @@ fun <T> RepeatableButton(
 
 @Preview
 @Composable
-fun RepeatableButtonPreview() {
+private fun RepeatableButtonPreview() {
   QuranTheme {
     RepeatableButton(
       icon = QuranIcons.Repeat,

diff --git a/feature/audiobar/src/main/kotlin/com/quran/mobile/feature/audiobar/ui/StoppedAudioBar.kt b/feature/audiobar/src/main/kotlin/com/quran/mobile/feature/audiobar/ui/StoppedAudioBar.kt
@@ -59,7 +59,7 @@ internal fun StoppedAudioBar(
 
 @Preview
 @Composable
-fun StoppedAudioBarPreview() {
+private fun StoppedAudioBarPreview() {
   QuranTheme {
     StoppedAudioBar(
       state = AudioBarState.Stopped(
@@ -73,7 +73,7 @@ fun StoppedAudioBarPreview() {
 
 @Preview
 @Composable
-fun StoppedAudioBarWithRecordingPreview() {
+private fun StoppedAudioBarWithRecordingPreview() {
   QuranTheme {
     StoppedAudioBar(
       state = AudioBarState.Stopped(