🚀 Progress Bar Alignment option

* Changed horizontal alignment of the Progress Bar in Reader

Part-of: #148

app/src/main/java/ua/acclorite/book_story/presentation/core/constants/DataStoreConstants.kt

@@ -55,6 +55,7 @@ object DataStoreConstants {
     val IMAGES_COLOR_EFFECTS = stringPreferencesKey("images_color_effects")
     val PROGRESS_BAR = booleanPreferencesKey("progress_bar")
     val PROGRESS_BAR_PADDING = intPreferencesKey("progress_bar_padding")
+    val PROGRESS_BAR_ALIGNMENT = stringPreferencesKey("progress_bar_alignment")
 
     // Browse settings
     val BROWSE_FILES_STRUCTURE = stringPreferencesKey("browse_files_structure")

app/src/main/java/ua/acclorite/book_story/presentation/reader/ReaderContent.kt

@@ -55,6 +55,7 @@ fun ReaderContent(
     progress: String,
     progressBar: Boolean,
     progressBarPadding: Dp,
+    progressBarAlignment: HorizontalAlignment,
     paragraphHeight: Dp,
     sidePadding: Dp,
     bottomBarPadding: Dp,
@@ -128,6 +129,7 @@ fun ReaderContent(
             progress = progress,
             progressBar = progressBar,
             progressBarPadding = progressBarPadding,
+            progressBarAlignment = progressBarAlignment,
             paragraphHeight = paragraphHeight,
             sidePadding = sidePadding,
             bottomBarPadding = bottomBarPadding,

app/src/main/java/ua/acclorite/book_story/presentation/reader/ReaderLayout.kt

@@ -55,6 +55,7 @@ fun ReaderLayout(
     progress: String,
     progressBar: Boolean,
     progressBarPadding: Dp,
+    progressBarAlignment: HorizontalAlignment,
     paragraphHeight: Dp,
     sidePadding: Dp,
     backgroundColor: Color,
@@ -221,6 +222,7 @@ fun ReaderLayout(
                 ReaderProgressBar(
                     progress = progress,
                     progressBarPadding = progressBarPadding,
+                    progressBarAlignment = progressBarAlignment,
                     fontColor = fontColor,
                     sidePadding = sidePadding
                 )

app/src/main/java/ua/acclorite/book_story/presentation/reader/ReaderProgressBar.kt

@@ -7,16 +7,17 @@ import androidx.compose.foundation.text.selection.DisableSelection
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
-import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.Dp
+import ua.acclorite.book_story.domain.util.HorizontalAlignment
 
 @Composable
 fun ReaderProgressBar(
     progress: String,
     progressBarPadding: Dp,
+    progressBarAlignment: HorizontalAlignment,
     fontColor: Color,
     sidePadding: Dp
 ) {
@@ -27,7 +28,7 @@ fun ReaderProgressBar(
                 horizontal = sidePadding,
                 vertical = progressBarPadding
             ),
-        contentAlignment = Alignment.Center
+        contentAlignment = progressBarAlignment.alignment
     ) {
         DisableSelection {
             Text(

app/src/main/java/ua/acclorite/book_story/presentation/reader/ReaderScaffold.kt

@@ -59,6 +59,7 @@ fun ReaderScaffold(
     progress: String,
     progressBar: Boolean,
     progressBarPadding: Dp,
+    progressBarAlignment: HorizontalAlignment,
     paragraphHeight: Dp,
     sidePadding: Dp,
     bottomBarPadding: Dp,
@@ -159,6 +160,7 @@ fun ReaderScaffold(
             progress = progress,
             progressBar = progressBar,
             progressBarPadding = progressBarPadding,
+            progressBarAlignment = progressBarAlignment,
             paragraphHeight = paragraphHeight,
             sidePadding = sidePadding,
             backgroundColor = backgroundColor,

app/src/main/java/ua/acclorite/book_story/presentation/settings/reader/progress/ProgressSubcategory.kt

@@ -9,6 +9,7 @@ import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.res.stringResource
 import ua.acclorite.book_story.R
 import ua.acclorite.book_story.presentation.settings.components.SettingsSubcategory
+import ua.acclorite.book_story.presentation.settings.reader.progress.components.ProgressBarAlignmentOption
 import ua.acclorite.book_story.presentation.settings.reader.progress.components.ProgressBarOption
 import ua.acclorite.book_story.presentation.settings.reader.progress.components.ProgressBarPaddingOption
 
@@ -31,5 +32,9 @@ fun LazyListScope.ProgressSubcategory(
         item {
             ProgressBarPaddingOption()
         }
+
+        item {
+            ProgressBarAlignmentOption()
+        }
     }
 }

app/src/main/java/ua/acclorite/book_story/presentation/settings/reader/progress/components/ProgressBarAlignmentOption.kt

@@ -0,0 +1,45 @@
+package ua.acclorite.book_story.presentation.settings.reader.progress.components
+
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.res.stringResource
+import androidx.hilt.navigation.compose.hiltViewModel
+import androidx.lifecycle.compose.collectAsStateWithLifecycle
+import ua.acclorite.book_story.R
+import ua.acclorite.book_story.domain.ui.ButtonItem
+import ua.acclorite.book_story.domain.util.HorizontalAlignment
+import ua.acclorite.book_story.presentation.core.components.settings.SegmentedButtonWithTitle
+import ua.acclorite.book_story.ui.main.MainEvent
+import ua.acclorite.book_story.ui.main.MainModel
+import ua.acclorite.book_story.ui.theme.ExpandingTransition
+
+@Composable
+fun ProgressBarAlignmentOption() {
+    val mainModel = hiltViewModel<MainModel>()
+    val state = mainModel.state.collectAsStateWithLifecycle()
+
+    ExpandingTransition(visible = state.value.progressBar) {
+        SegmentedButtonWithTitle(
+            title = stringResource(id = R.string.progress_bar_alignment_option),
+            buttons = HorizontalAlignment.entries.map {
+                ButtonItem(
+                    id = it.toString(),
+                    title = when (it) {
+                        HorizontalAlignment.START -> stringResource(id = R.string.alignment_start)
+                        HorizontalAlignment.CENTER -> stringResource(id = R.string.alignment_center)
+                        HorizontalAlignment.END -> stringResource(id = R.string.alignment_end)
+                    },
+                    textStyle = MaterialTheme.typography.labelLarge,
+                    selected = it == state.value.progressBarAlignment
+                )
+            },
+            onClick = {
+                mainModel.onEvent(
+                    MainEvent.OnChangeProgressBarAlignment(
+                        it.id
+                    )
+                )
+            }
+        )
+    }
+}

app/src/main/java/ua/acclorite/book_story/ui/main/MainEvent.kt

@@ -57,4 +57,5 @@ sealed class MainEvent {
     data class OnChangeImagesColorEffects(val value: String) : MainEvent()
     data class OnChangeProgressBar(val value: Boolean) : MainEvent()
     data class OnChangeProgressBarPadding(val value: Int) : MainEvent()
+    data class OnChangeProgressBarAlignment(val value: String) : MainEvent()
 }

app/src/main/java/ua/acclorite/book_story/ui/main/MainModel.kt

@@ -480,6 +480,14 @@ class MainModel @Inject constructor(
                     it.copy(progressBarPadding = this)
                 }
             )
+
+            is MainEvent.OnChangeProgressBarAlignment -> handleDatastoreUpdate(
+                key = DataStoreConstants.PROGRESS_BAR_ALIGNMENT,
+                value = event.value,
+                updateState = {
+                    it.copy(progressBarAlignment = this.toHorizontalAlignment())
+                }
+            )
         }
     }
 

app/src/main/java/ua/acclorite/book_story/ui/main/MainState.kt

@@ -104,6 +104,7 @@ data class MainState(
     val imagesColorEffects: ReaderColorEffects = provideDefaultValue { ReaderColorEffects.OFF },
     val progressBar: Boolean = provideDefaultValue { false },
     val progressBarPadding: Int = provideDefaultValue { 4 },
+    val progressBarAlignment: HorizontalAlignment = provideDefaultValue { HorizontalAlignment.CENTER },
 
     // Browse Settings
     val browseFilesStructure: BrowseFilesStructure = provideDefaultValue {
@@ -349,6 +350,10 @@ data class MainState(
                     progressBarPadding = provideValue(
                         PROGRESS_BAR_PADDING
                     ) { progressBarPadding },
+
+                    progressBarAlignment = provideValue(
+                        PROGRESS_BAR_ALIGNMENT, convert = { toHorizontalAlignment() }
+                    ) { progressBarAlignment },
                 )
             }
         }

app/src/main/java/ua/acclorite/book_story/ui/reader/ReaderScreen.kt

@@ -395,6 +395,7 @@ data class ReaderScreen(val bookId: Int) : Screen, Parcelable {
             progress = progress.value,
             progressBar = mainState.value.progressBar,
             progressBarPadding = progressBarPadding,
+            progressBarAlignment = mainState.value.progressBarAlignment,
             paragraphHeight = paragraphHeight,
             sidePadding = sidePadding,
             bottomBarPadding = bottomBarPadding,

app/src/main/res/values-uk/strings.xml

@@ -206,6 +206,7 @@
     <string name="images_color_effects_option">Ефекти кольору</string>
     <string name="progress_bar_option">Панель прогресу</string>
     <string name="progress_bar_padding_option">Поля</string>
+    <string name="progress_bar_alignment_option">Розташування</string>
 
     <!-- Browse -->
     <string name="browse_files_structure_option">Структура файлів</string>

app/src/main/res/values/strings.xml

@@ -261,6 +261,7 @@
     <string name="images_color_effects_option">Color effects</string>
     <string name="progress_bar_option">Progress bar</string>
     <string name="progress_bar_padding_option">Margins</string>
+    <string name="progress_bar_alignment_option">Alignment</string>
 
     <!-- Browse -->
     <string name="browse_files_structure_option">Files structure</string>