Add separate default/apply buttons to reading mode/orientation selection dialogs

Related to #3453
This commit is contained in:
arkon 2023-11-05 11:25:08 -05:00
parent d0bcd30909
commit 9e67abcc8a
6 changed files with 149 additions and 24 deletions

View file

@ -1,22 +1,23 @@
package eu.kanade.presentation.reader
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.lazy.grid.items
import androidx.compose.material3.Surface
import androidx.compose.runtime.Composable
import androidx.compose.runtime.collectAsState
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
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.tooling.preview.PreviewLightDark
import androidx.compose.ui.unit.dp
import eu.kanade.domain.manga.model.readerOrientation
import eu.kanade.presentation.components.AdaptiveSheet
import eu.kanade.presentation.reader.components.ModeSelectionDialog
import eu.kanade.presentation.theme.TachiyomiTheme
import eu.kanade.tachiyomi.R
import eu.kanade.tachiyomi.ui.reader.setting.ReaderOrientation
@ -24,6 +25,8 @@ import eu.kanade.tachiyomi.ui.reader.setting.ReaderSettingsScreenModel
import tachiyomi.presentation.core.components.SettingsIconGrid
import tachiyomi.presentation.core.components.material.IconToggleButton
private val ReaderOrientationsWithoutDefault = ReaderOrientation.entries - ReaderOrientation.DEFAULT
@Composable
fun OrientationSelectDialog(
onDismissRequest: () -> Unit,
@ -50,13 +53,22 @@ private fun DialogContent(
orientation: ReaderOrientation,
onChangeOrientation: (ReaderOrientation) -> Unit,
) {
Box(modifier = Modifier.padding(vertical = 16.dp)) {
var selected by remember { mutableStateOf(orientation) }
ModeSelectionDialog(
onUseDefault = {
onChangeOrientation(
ReaderOrientation.DEFAULT,
)
}.takeIf { orientation != ReaderOrientation.DEFAULT },
onApply = { onChangeOrientation(selected) },
) {
SettingsIconGrid(R.string.rotation_type) {
items(ReaderOrientation.entries) { mode ->
items(ReaderOrientationsWithoutDefault) { mode ->
IconToggleButton(
checked = mode == orientation,
checked = mode == selected,
onCheckedChange = {
onChangeOrientation(mode)
selected = mode
},
modifier = Modifier.fillMaxWidth(),
imageVector = ImageVector.vectorResource(mode.iconRes),
@ -72,10 +84,17 @@ private fun DialogContent(
private fun DialogContentPreview() {
TachiyomiTheme {
Surface {
DialogContent(
orientation = ReaderOrientation.DEFAULT,
onChangeOrientation = {},
)
Column {
DialogContent(
orientation = ReaderOrientation.DEFAULT,
onChangeOrientation = {},
)
DialogContent(
orientation = ReaderOrientation.FREE,
onChangeOrientation = {},
)
}
}
}
}

View file

@ -1,15 +1,15 @@
package eu.kanade.presentation.reader
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.lazy.grid.items
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.runtime.Composable
import androidx.compose.runtime.collectAsState
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.res.stringResource
@ -17,13 +17,15 @@ import androidx.compose.ui.res.vectorResource
import androidx.compose.ui.tooling.preview.PreviewLightDark
import eu.kanade.domain.manga.model.readingMode
import eu.kanade.presentation.components.AdaptiveSheet
import eu.kanade.presentation.reader.components.ModeSelectionDialog
import eu.kanade.presentation.theme.TachiyomiTheme
import eu.kanade.tachiyomi.R
import eu.kanade.tachiyomi.ui.reader.setting.ReaderSettingsScreenModel
import eu.kanade.tachiyomi.ui.reader.setting.ReadingMode
import tachiyomi.presentation.core.components.SettingsIconGrid
import tachiyomi.presentation.core.components.material.IconToggleButton
import tachiyomi.presentation.core.components.material.padding
private val ReadingModesWithoutDefault = ReadingMode.entries - ReadingMode.DEFAULT
@Composable
fun ReadingModeSelectDialog(
@ -51,13 +53,18 @@ private fun DialogContent(
readingMode: ReadingMode,
onChangeReadingMode: (ReadingMode) -> Unit,
) {
Box(modifier = Modifier.padding(vertical = MaterialTheme.padding.medium)) {
var selected by remember { mutableStateOf(readingMode) }
ModeSelectionDialog(
onUseDefault = { onChangeReadingMode(ReadingMode.DEFAULT) }.takeIf { readingMode != ReadingMode.DEFAULT },
onApply = { onChangeReadingMode(selected) },
) {
SettingsIconGrid(R.string.pref_category_reading_mode) {
items(ReadingMode.entries) { mode ->
items(ReadingModesWithoutDefault) { mode ->
IconToggleButton(
checked = mode == readingMode,
checked = mode == selected,
onCheckedChange = {
onChangeReadingMode(mode)
selected = mode
},
modifier = Modifier.fillMaxWidth(),
imageVector = ImageVector.vectorResource(mode.iconRes),
@ -73,10 +80,17 @@ private fun DialogContent(
private fun DialogContentPreview() {
TachiyomiTheme {
Surface {
DialogContent(
readingMode = ReadingMode.DEFAULT,
onChangeReadingMode = {},
)
Column {
DialogContent(
readingMode = ReadingMode.DEFAULT,
onChangeReadingMode = {},
)
DialogContent(
readingMode = ReadingMode.LEFT_TO_RIGHT,
onChangeReadingMode = {},
)
}
}
}
}

View file

@ -23,6 +23,7 @@ import androidx.compose.ui.unit.IntOffset
import androidx.compose.ui.unit.dp
import eu.kanade.presentation.components.AppBar
import eu.kanade.presentation.components.AppBarActions
import eu.kanade.presentation.reader.components.ChapterNavigator
import eu.kanade.tachiyomi.R
import eu.kanade.tachiyomi.ui.reader.setting.ReaderOrientation
import eu.kanade.tachiyomi.ui.reader.setting.ReadingMode

View file

@ -1,4 +1,4 @@
package eu.kanade.presentation.reader.appbars
package eu.kanade.presentation.reader.components
import androidx.compose.foundation.background
import androidx.compose.foundation.interaction.MutableInteractionSource

View file

@ -0,0 +1,89 @@
package eu.kanade.presentation.reader.components
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.padding
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.outlined.Check
import androidx.compose.material3.FilledTonalButton
import androidx.compose.material3.Icon
import androidx.compose.material3.OutlinedButton
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
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.PreviewLightDark
import androidx.compose.ui.unit.dp
import eu.kanade.presentation.theme.TachiyomiTheme
import eu.kanade.tachiyomi.R
import tachiyomi.presentation.core.components.SettingsItemsPaddings
@Composable
fun ModeSelectionDialog(
onApply: () -> Unit,
onUseDefault: (() -> Unit)? = null,
content: @Composable () -> Unit,
) {
Box(modifier = Modifier.padding(vertical = 16.dp)) {
Column {
content()
Row(
modifier = Modifier.padding(
horizontal = SettingsItemsPaddings.Horizontal,
),
) {
onUseDefault?.let {
OutlinedButton(onClick = it) {
Text(text = stringResource(R.string.action_revert_to_default))
}
}
Spacer(modifier = Modifier.weight(1f))
FilledTonalButton(
onClick = onApply,
) {
Row(
horizontalArrangement = Arrangement.spacedBy(8.dp),
verticalAlignment = Alignment.CenterVertically,
) {
Icon(
imageVector = Icons.Outlined.Check,
contentDescription = null,
)
Text(text = stringResource(R.string.action_apply))
}
}
}
}
}
}
@PreviewLightDark
@Composable
private fun Preview() {
TachiyomiTheme {
Surface {
Column {
ModeSelectionDialog(
onApply = {},
onUseDefault = {},
) {
Text("Dummy content")
}
ModeSelectionDialog(
onApply = {},
) {
Text("Dummy content without default")
}
}
}
}
}

View file

@ -128,6 +128,7 @@
<string name="action_disable">Disable</string>
<string name="action_pin">Pin</string>
<string name="action_unpin">Unpin</string>
<string name="action_apply">Apply</string>
<string name="action_cancel">Cancel</string>
<string name="action_ok">OK</string>
<string name="action_cancel_all">Cancel all</string>
@ -147,6 +148,7 @@
<string name="action_share">Share</string>
<string name="action_save">Save</string>
<string name="action_reset">Reset</string>
<string name="action_revert_to_default">Revert to default</string>
<!-- missing undo feature after Compose rewrite #7454 -->
<string name="action_undo">Undo</string>
<string name="action_close">Close</string>