Tweak reading mode and orientation sheet designs

2023-09-10 22:36:57 -04:00 · 2023-09-10 22:36:57 -04:00 · 8824c7dbe3
commit 8824c7dbe3
parent ccc9a5a052
6 changed files with 109 additions and 46 deletions
--- a/app/src/main/java/eu/kanade/presentation/manga/components/MangaBottomActionMenu.kt
+++ b/app/src/main/java/eu/kanade/presentation/manga/components/MangaBottomActionMenu.kt
@ -143,7 +143,7 @@ fun MangaBottomActionMenu(
                if (onMarkPreviousAsReadClicked != null) {
                    Button(
                        title = stringResource(R.string.action_mark_previous_as_read),
-                        icon = ImageVector.vectorResource(id = R.drawable.ic_done_prev_24dp),
+                        icon = ImageVector.vectorResource(R.drawable.ic_done_prev_24dp),
                        toConfirm = confirm[4],
                        onLongClick = { onLongClickItem(4) },
                        onClick = onMarkPreviousAsReadClicked,
--- a/app/src/main/java/eu/kanade/presentation/reader/OrientationModeSelectDialog.kt
+++ b/app/src/main/java/eu/kanade/presentation/reader/OrientationModeSelectDialog.kt
@ -1,25 +1,25 @@
 package eu.kanade.presentation.reader

-import androidx.compose.foundation.layout.Arrangement
-import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
-import androidx.compose.material3.FilterChip
-import androidx.compose.material3.MaterialTheme
-import androidx.compose.material3.Text
+import androidx.compose.foundation.lazy.grid.items
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.collectAsState
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.vector.ImageVector
 import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.res.vectorResource
 import androidx.compose.ui.unit.dp
 import eu.kanade.domain.manga.model.orientationType
 import eu.kanade.presentation.components.AdaptiveSheet
 import eu.kanade.tachiyomi.R
 import eu.kanade.tachiyomi.ui.reader.setting.OrientationType
 import eu.kanade.tachiyomi.ui.reader.setting.ReaderSettingsScreenModel
-import tachiyomi.presentation.core.components.SettingsChipRow
-import tachiyomi.presentation.core.components.material.padding
+import tachiyomi.presentation.core.components.SettingsIconGrid
+import tachiyomi.presentation.core.components.material.IconToggleButton

 private val orientationTypeOptions = OrientationType.entries.map { it.stringRes to it }

@ -32,22 +32,20 @@ fun OrientationModeSelectDialog(
    val manga by screenModel.mangaFlow.collectAsState()
    val orientationType = remember(manga) { OrientationType.fromPreference(manga?.orientationType?.toInt()) }

-    AdaptiveSheet(
-        onDismissRequest = onDismissRequest,
-    ) {
-        Row(
-            modifier = Modifier.padding(vertical = 16.dp),
-            horizontalArrangement = Arrangement.spacedBy(MaterialTheme.padding.small),
-        ) {
-            SettingsChipRow(R.string.rotation_type) {
-                orientationTypeOptions.map { (stringRes, it) ->
-                    FilterChip(
-                        selected = it == orientationType,
-                        onClick = {
-                            screenModel.onChangeOrientation(it)
+    AdaptiveSheet(onDismissRequest = onDismissRequest) {
+        Box(modifier = Modifier.padding(vertical = 16.dp)) {
+            SettingsIconGrid(R.string.rotation_type) {
+                items(orientationTypeOptions) { (stringRes, mode) ->
+                    IconToggleButton(
+                        checked = mode == orientationType,
+                        onCheckedChange = {
+                            screenModel.onChangeOrientation(mode)
                            onChange(stringRes)
+                            onDismissRequest()
                        },
-                        label = { Text(stringResource(stringRes)) },
+                        modifier = Modifier.fillMaxWidth(),
+                        imageVector = ImageVector.vectorResource(mode.iconRes),
+                        label = stringResource(stringRes),
                    )
                }
            }
--- a/app/src/main/java/eu/kanade/presentation/reader/ReadingModeSelectDialog.kt
+++ b/app/src/main/java/eu/kanade/presentation/reader/ReadingModeSelectDialog.kt
@ -1,24 +1,25 @@
 package eu.kanade.presentation.reader

-import androidx.compose.foundation.layout.Arrangement
-import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
-import androidx.compose.material3.FilterChip
+import androidx.compose.foundation.lazy.grid.items
 import androidx.compose.material3.MaterialTheme
-import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.collectAsState
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.vector.ImageVector
 import androidx.compose.ui.res.stringResource
-import androidx.compose.ui.unit.dp
+import androidx.compose.ui.res.vectorResource
 import eu.kanade.domain.manga.model.readingModeType
 import eu.kanade.presentation.components.AdaptiveSheet
 import eu.kanade.tachiyomi.R
 import eu.kanade.tachiyomi.ui.reader.setting.ReaderSettingsScreenModel
 import eu.kanade.tachiyomi.ui.reader.setting.ReadingModeType
-import tachiyomi.presentation.core.components.SettingsChipRow
+import tachiyomi.presentation.core.components.SettingsIconGrid
+import tachiyomi.presentation.core.components.material.IconToggleButton
 import tachiyomi.presentation.core.components.material.padding

 private val readingModeOptions = ReadingModeType.entries.map { it.stringRes to it }
@ -32,22 +33,20 @@ fun ReadingModeSelectDialog(
    val manga by screenModel.mangaFlow.collectAsState()
    val readingMode = remember(manga) { ReadingModeType.fromPreference(manga?.readingModeType?.toInt()) }

-    AdaptiveSheet(
-        onDismissRequest = onDismissRequest,
-    ) {
-        Row(
-            modifier = Modifier.padding(vertical = 16.dp),
-            horizontalArrangement = Arrangement.spacedBy(MaterialTheme.padding.small),
-        ) {
-            SettingsChipRow(R.string.pref_category_reading_mode) {
-                readingModeOptions.map { (stringRes, it) ->
-                    FilterChip(
-                        selected = it == readingMode,
-                        onClick = {
-                            screenModel.onChangeReadingMode(it)
+    AdaptiveSheet(onDismissRequest = onDismissRequest) {
+        Box(modifier = Modifier.padding(vertical = MaterialTheme.padding.medium)) {
+            SettingsIconGrid(R.string.pref_category_reading_mode) {
+                items(readingModeOptions) { (stringRes, mode) ->
+                    IconToggleButton(
+                        checked = mode == readingMode,
+                        onCheckedChange = {
+                            screenModel.onChangeReadingMode(mode)
                            onChange(stringRes)
+                            onDismissRequest()
                        },
-                        label = { Text(stringResource(stringRes)) },
+                        modifier = Modifier.fillMaxWidth(),
+                        imageVector = ImageVector.vectorResource(mode.iconRes),
+                        label = stringResource(stringRes),
                    )
                }
            }
--- a/i18n/src/main/res/values/strings.xml
+++ b/i18n/src/main/res/values/strings.xml
@ -402,8 +402,8 @@
    <string name="double_tap_anim_speed_0">No animation</string>
    <string name="double_tap_anim_speed_normal">Normal</string>
    <string name="double_tap_anim_speed_fast">Fast</string>
-    <string name="pref_rotation_type">Default rotation type</string>
-    <string name="rotation_type">Rotation type</string>
+    <string name="pref_rotation_type">Default rotation</string>
+    <string name="rotation_type">Rotation</string>
    <string name="rotation_free">Free</string>
    <string name="rotation_portrait">Portrait</string>
    <string name="rotation_reverse_portrait">Reverse portrait</string>
--- a/presentation-core/src/main/java/tachiyomi/presentation/core/components/SettingsItems.kt
+++ b/presentation-core/src/main/java/tachiyomi/presentation/core/components/SettingsItems.kt
@ -12,6 +12,9 @@ import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.lazy.grid.GridCells
+import androidx.compose.foundation.lazy.grid.LazyGridScope
+import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
 import androidx.compose.material.ContentAlpha
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.ArrowDownward
@ -42,6 +45,7 @@ import androidx.compose.ui.unit.dp
 import tachiyomi.core.preference.Preference
 import tachiyomi.core.preference.TriState
 import tachiyomi.core.preference.toggle
+import tachiyomi.presentation.core.components.material.padding
 import tachiyomi.presentation.core.theme.header
 import tachiyomi.presentation.core.util.collectAsState

@ -262,7 +266,7 @@ fun TriStateItem(
                vertical = SettingsItemsPaddings.Vertical,
            ),
        verticalAlignment = Alignment.CenterVertically,
-        horizontalArrangement = Arrangement.spacedBy(24.dp),
+        horizontalArrangement = Arrangement.spacedBy(MaterialTheme.padding.large),
    ) {
        val stateAlpha = if (enabled && onClick != null) 1f else ContentAlpha.disabled

@ -314,7 +318,25 @@ fun SettingsChipRow(@StringRes labelRes: Int, content: @Composable FlowRowScope.
                end = SettingsItemsPaddings.Horizontal,
                bottom = SettingsItemsPaddings.Vertical,
            ),
-            horizontalArrangement = Arrangement.spacedBy(8.dp),
+            horizontalArrangement = Arrangement.spacedBy(MaterialTheme.padding.small),
+            content = content,
+        )
+    }
+}
+
+@Composable
+fun SettingsIconGrid(@StringRes labelRes: Int, content: LazyGridScope.() -> Unit) {
+    Column {
+        HeadingItem(labelRes)
+        LazyVerticalGrid(
+            columns = GridCells.Adaptive(128.dp),
+            modifier = Modifier.padding(
+                start = SettingsItemsPaddings.Horizontal,
+                end = SettingsItemsPaddings.Horizontal,
+                bottom = SettingsItemsPaddings.Vertical,
+            ),
+            verticalArrangement = Arrangement.spacedBy(MaterialTheme.padding.tiny),
+            horizontalArrangement = Arrangement.spacedBy(MaterialTheme.padding.small),
            content = content,
        )
    }
--- a/presentation-core/src/main/java/tachiyomi/presentation/core/components/material/IconToggleButton.kt
+++ b/presentation-core/src/main/java/tachiyomi/presentation/core/components/material/IconToggleButton.kt
@ -0,0 +1,44 @@
+package tachiyomi.presentation.core.components.material
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.FilledIconToggleButton
+import androidx.compose.material3.Icon
+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.vector.ImageVector
+
+@Composable
+fun IconToggleButton(
+    checked: Boolean,
+    onCheckedChange: (Boolean) -> Unit,
+    modifier: Modifier = Modifier,
+    imageVector: ImageVector,
+    label: String,
+) {
+    FilledIconToggleButton(
+        checked = checked,
+        onCheckedChange = onCheckedChange,
+        modifier = modifier,
+    ) {
+        Row(
+            horizontalArrangement = Arrangement.spacedBy(MaterialTheme.padding.small),
+            verticalAlignment = Alignment.CenterVertically,
+            modifier = Modifier
+                .fillMaxWidth()
+                .padding(MaterialTheme.padding.small),
+        ) {
+            Icon(
+                imageVector = imageVector,
+                contentDescription = null,
+            )
+
+            Text(label)
+        }
+    }
+}