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

View file

@ -1,15 +1,15 @@
package eu.kanade.presentation.reader 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.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.lazy.grid.items import androidx.compose.foundation.lazy.grid.items
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface import androidx.compose.material3.Surface
import androidx.compose.runtime.Composable import androidx.compose.runtime.Composable
import androidx.compose.runtime.collectAsState import androidx.compose.runtime.collectAsState
import androidx.compose.runtime.getValue import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.vector.ImageVector import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.res.stringResource import androidx.compose.ui.res.stringResource
@ -17,13 +17,15 @@ import androidx.compose.ui.res.vectorResource
import androidx.compose.ui.tooling.preview.PreviewLightDark import androidx.compose.ui.tooling.preview.PreviewLightDark
import eu.kanade.domain.manga.model.readingMode import eu.kanade.domain.manga.model.readingMode
import eu.kanade.presentation.components.AdaptiveSheet import eu.kanade.presentation.components.AdaptiveSheet
import eu.kanade.presentation.reader.components.ModeSelectionDialog
import eu.kanade.presentation.theme.TachiyomiTheme import eu.kanade.presentation.theme.TachiyomiTheme
import eu.kanade.tachiyomi.R import eu.kanade.tachiyomi.R
import eu.kanade.tachiyomi.ui.reader.setting.ReaderSettingsScreenModel import eu.kanade.tachiyomi.ui.reader.setting.ReaderSettingsScreenModel
import eu.kanade.tachiyomi.ui.reader.setting.ReadingMode import eu.kanade.tachiyomi.ui.reader.setting.ReadingMode
import tachiyomi.presentation.core.components.SettingsIconGrid import tachiyomi.presentation.core.components.SettingsIconGrid
import tachiyomi.presentation.core.components.material.IconToggleButton import tachiyomi.presentation.core.components.material.IconToggleButton
import tachiyomi.presentation.core.components.material.padding
private val ReadingModesWithoutDefault = ReadingMode.entries - ReadingMode.DEFAULT
@Composable @Composable
fun ReadingModeSelectDialog( fun ReadingModeSelectDialog(
@ -51,13 +53,18 @@ private fun DialogContent(
readingMode: ReadingMode, readingMode: ReadingMode,
onChangeReadingMode: (ReadingMode) -> Unit, 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) { SettingsIconGrid(R.string.pref_category_reading_mode) {
items(ReadingMode.entries) { mode -> items(ReadingModesWithoutDefault) { mode ->
IconToggleButton( IconToggleButton(
checked = mode == readingMode, checked = mode == selected,
onCheckedChange = { onCheckedChange = {
onChangeReadingMode(mode) selected = mode
}, },
modifier = Modifier.fillMaxWidth(), modifier = Modifier.fillMaxWidth(),
imageVector = ImageVector.vectorResource(mode.iconRes), imageVector = ImageVector.vectorResource(mode.iconRes),
@ -73,10 +80,17 @@ private fun DialogContent(
private fun DialogContentPreview() { private fun DialogContentPreview() {
TachiyomiTheme { TachiyomiTheme {
Surface { Surface {
DialogContent( Column {
readingMode = ReadingMode.DEFAULT, DialogContent(
onChangeReadingMode = {}, 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 androidx.compose.ui.unit.dp
import eu.kanade.presentation.components.AppBar import eu.kanade.presentation.components.AppBar
import eu.kanade.presentation.components.AppBarActions import eu.kanade.presentation.components.AppBarActions
import eu.kanade.presentation.reader.components.ChapterNavigator
import eu.kanade.tachiyomi.R import eu.kanade.tachiyomi.R
import eu.kanade.tachiyomi.ui.reader.setting.ReaderOrientation import eu.kanade.tachiyomi.ui.reader.setting.ReaderOrientation
import eu.kanade.tachiyomi.ui.reader.setting.ReadingMode 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.background
import androidx.compose.foundation.interaction.MutableInteractionSource 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_disable">Disable</string>
<string name="action_pin">Pin</string> <string name="action_pin">Pin</string>
<string name="action_unpin">Unpin</string> <string name="action_unpin">Unpin</string>
<string name="action_apply">Apply</string>
<string name="action_cancel">Cancel</string> <string name="action_cancel">Cancel</string>
<string name="action_ok">OK</string> <string name="action_ok">OK</string>
<string name="action_cancel_all">Cancel all</string> <string name="action_cancel_all">Cancel all</string>
@ -147,6 +148,7 @@
<string name="action_share">Share</string> <string name="action_share">Share</string>
<string name="action_save">Save</string> <string name="action_save">Save</string>
<string name="action_reset">Reset</string> <string name="action_reset">Reset</string>
<string name="action_revert_to_default">Revert to default</string>
<!-- missing undo feature after Compose rewrite #7454 --> <!-- missing undo feature after Compose rewrite #7454 -->
<string name="action_undo">Undo</string> <string name="action_undo">Undo</string>
<string name="action_close">Close</string> <string name="action_close">Close</string>