diff --git a/app/src/main/java/eu/kanade/presentation/manga/components/MangaBottomActionMenu.kt b/app/src/main/java/eu/kanade/presentation/manga/components/MangaBottomActionMenu.kt index eac2228f12..fa98e176b6 100644 --- 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, diff --git a/app/src/main/java/eu/kanade/presentation/reader/OrientationModeSelectDialog.kt b/app/src/main/java/eu/kanade/presentation/reader/OrientationModeSelectDialog.kt index 9e277b7571..f88a012c0e 100644 --- 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), ) } } diff --git a/app/src/main/java/eu/kanade/presentation/reader/ReadingModeSelectDialog.kt b/app/src/main/java/eu/kanade/presentation/reader/ReadingModeSelectDialog.kt index 91920d2ec8..376d3795cd 100644 --- 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), ) } } diff --git a/i18n/src/main/res/values/strings.xml b/i18n/src/main/res/values/strings.xml index b32cfa27a4..35e9cb2752 100644 --- a/i18n/src/main/res/values/strings.xml +++ b/i18n/src/main/res/values/strings.xml @@ -402,8 +402,8 @@ No animation Normal Fast - Default rotation type - Rotation type + Default rotation + Rotation Free Portrait Reverse portrait diff --git a/presentation-core/src/main/java/tachiyomi/presentation/core/components/SettingsItems.kt b/presentation-core/src/main/java/tachiyomi/presentation/core/components/SettingsItems.kt index bc7cf7ae30..08bf2d567b 100644 --- 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, ) } diff --git 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 new file mode 100644 index 0000000000..27c6590a70 --- /dev/null +++ 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) + } + } +}