Tweak reading mode and orientation sheet designs

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,

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.Box
-import androidx.compose.foundation.layout.Row
+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.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.SettingsIconGrid
-import tachiyomi.presentation.core.components.material.padding
+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(
+    AdaptiveSheet(onDismissRequest = onDismissRequest) {
-        onDismissRequest = onDismissRequest,
+        Box(modifier = Modifier.padding(vertical = 16.dp)) {
-    ) {
+            SettingsIconGrid(R.string.rotation_type) {
-        Row(
+                items(orientationTypeOptions) { (stringRes, mode) ->
-            modifier = Modifier.padding(vertical = 16.dp),
+                    IconToggleButton(
-            horizontalArrangement = Arrangement.spacedBy(MaterialTheme.padding.small),
+                        checked = mode == orientationType,
-        ) {
+                        onCheckedChange = {
-            SettingsChipRow(R.string.rotation_type) {
+                            screenModel.onChangeOrientation(mode)
-                orientationTypeOptions.map { (stringRes, it) ->
-                    FilterChip(
-                        selected = it == orientationType,
-                        onClick = {
-                            screenModel.onChangeOrientation(it)
                             onChange(stringRes)
+                            onDismissRequest()
                         },
-                        label = { Text(stringResource(stringRes)) },
+                        modifier = Modifier.fillMaxWidth(),
+                        imageVector = ImageVector.vectorResource(mode.iconRes),
+                        label = stringResource(stringRes),
                     )
                 }
             }

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.Box
-import androidx.compose.foundation.layout.Row
+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(
+    AdaptiveSheet(onDismissRequest = onDismissRequest) {
-        onDismissRequest = onDismissRequest,
+        Box(modifier = Modifier.padding(vertical = MaterialTheme.padding.medium)) {
-    ) {
+            SettingsIconGrid(R.string.pref_category_reading_mode) {
-        Row(
+                items(readingModeOptions) { (stringRes, mode) ->
-            modifier = Modifier.padding(vertical = 16.dp),
+                    IconToggleButton(
-            horizontalArrangement = Arrangement.spacedBy(MaterialTheme.padding.small),
+                        checked = mode == readingMode,
-        ) {
+                        onCheckedChange = {
-            SettingsChipRow(R.string.pref_category_reading_mode) {
+                            screenModel.onChangeReadingMode(mode)
-                readingModeOptions.map { (stringRes, it) ->
-                    FilterChip(
-                        selected = it == readingMode,
-                        onClick = {
-                            screenModel.onChangeReadingMode(it)
                             onChange(stringRes)
+                            onDismissRequest()
                         },
-                        label = { Text(stringResource(stringRes)) },
+                        modifier = Modifier.fillMaxWidth(),
+                        imageVector = ImageVector.vectorResource(mode.iconRes),
+                        label = stringResource(stringRes),
                     )
                 }
             }

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="pref_rotation_type">Default rotation</string>
-    <string name="rotation_type">Rotation type</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>

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,
         )
     }

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)
+        }
+    }
+}