Refactor grid size slider composable for reuse

This commit is contained in:
arkon 2023-06-24 11:23:06 -04:00
parent f344831d58
commit b354e37cc3
2 changed files with 60 additions and 49 deletions

View File

@ -1,25 +1,17 @@
package eu.kanade.presentation.library package eu.kanade.presentation.library
import android.content.res.Configuration import android.content.res.Configuration
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.ColumnScope import androidx.compose.foundation.layout.ColumnScope
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.rememberScrollState import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll import androidx.compose.foundation.verticalScroll
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Slider
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue import androidx.compose.runtime.getValue
import androidx.compose.runtime.remember import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.LocalConfiguration import androidx.compose.ui.platform.LocalConfiguration
import androidx.compose.ui.res.stringResource import androidx.compose.ui.res.stringResource
import androidx.compose.ui.unit.dp
import eu.kanade.presentation.components.TabbedDialog import eu.kanade.presentation.components.TabbedDialog
import eu.kanade.presentation.components.TabbedDialogPaddings import eu.kanade.presentation.components.TabbedDialogPaddings
import eu.kanade.presentation.components.TriStateItem import eu.kanade.presentation.components.TriStateItem
@ -35,7 +27,7 @@ import tachiyomi.domain.manga.model.TriStateFilter
import tachiyomi.presentation.core.components.CheckboxItem import tachiyomi.presentation.core.components.CheckboxItem
import tachiyomi.presentation.core.components.HeadingItem import tachiyomi.presentation.core.components.HeadingItem
import tachiyomi.presentation.core.components.RadioItem import tachiyomi.presentation.core.components.RadioItem
import tachiyomi.presentation.core.components.SettingsItemsPaddings import tachiyomi.presentation.core.components.SliderItem
import tachiyomi.presentation.core.components.SortItem import tachiyomi.presentation.core.components.SortItem
@Composable @Composable
@ -195,16 +187,6 @@ private fun ColumnScope.DisplayPage(
} }
if (displayMode != LibraryDisplayMode.List) { if (displayMode != LibraryDisplayMode.List) {
Row(
modifier = Modifier
.fillMaxWidth()
.padding(
horizontal = SettingsItemsPaddings.Horizontal,
vertical = SettingsItemsPaddings.Vertical,
),
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.spacedBy(24.dp),
) {
val configuration = LocalConfiguration.current val configuration = LocalConfiguration.current
val columnPreference = remember { val columnPreference = remember {
if (configuration.orientation == Configuration.ORIENTATION_LANDSCAPE) { if (configuration.orientation == Configuration.ORIENTATION_LANDSCAPE) {
@ -215,30 +197,20 @@ private fun ColumnScope.DisplayPage(
} }
val columns by columnPreference.collectAsState() val columns by columnPreference.collectAsState()
Column(modifier = Modifier.weight(0.5f)) { SliderItem(
Text( label = stringResource(R.string.pref_library_columns),
stringResource(id = R.string.pref_library_columns), min = 0,
style = MaterialTheme.typography.bodyMedium, max = 10,
) value = columns,
Text( valueText = if (columns > 0) {
if (columns > 0) { stringResource(R.string.pref_library_columns_per_row, columns)
stringResource(id = R.string.pref_library_columns_per_row, columns)
} else { } else {
stringResource(id = R.string.label_default) stringResource(R.string.label_default)
}, },
onChange = { columnPreference.set(it) },
) )
} }
Slider(
value = columns.toFloat(),
onValueChange = { columnPreference.set(it.toInt()) },
modifier = Modifier.weight(1.5f),
valueRange = 0f..10f,
steps = 10,
)
}
}
HeadingItem(R.string.overlay_header) HeadingItem(R.string.overlay_header)
val downloadBadge by screenModel.libraryPreferences.downloadBadge().collectAsState() val downloadBadge by screenModel.libraryPreferences.downloadBadge().collectAsState()
CheckboxItem( CheckboxItem(

View File

@ -3,6 +3,7 @@ package tachiyomi.presentation.core.components
import androidx.annotation.StringRes import androidx.annotation.StringRes
import androidx.compose.foundation.clickable import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.RowScope import androidx.compose.foundation.layout.RowScope
import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.Spacer
@ -17,6 +18,7 @@ import androidx.compose.material3.Icon
import androidx.compose.material3.MaterialTheme import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.OutlinedTextField import androidx.compose.material3.OutlinedTextField
import androidx.compose.material3.RadioButton import androidx.compose.material3.RadioButton
import androidx.compose.material3.Slider
import androidx.compose.material3.Text import androidx.compose.material3.Text
import androidx.compose.runtime.Composable import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment import androidx.compose.ui.Alignment
@ -135,6 +137,43 @@ fun RadioItem(
) )
} }
@Composable
fun SliderItem(
label: String,
min: Int,
max: Int,
value: Int,
valueText: String,
onChange: (Int) -> Unit,
) {
Row(
modifier = Modifier
.fillMaxWidth()
.padding(
horizontal = SettingsItemsPaddings.Horizontal,
vertical = SettingsItemsPaddings.Vertical,
),
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.spacedBy(24.dp),
) {
Column(modifier = Modifier.weight(0.5f)) {
Text(
text = label,
style = MaterialTheme.typography.bodyMedium,
)
Text(valueText)
}
Slider(
value = value.toFloat(),
onValueChange = { onChange(it.toInt()) },
modifier = Modifier.weight(1.5f),
valueRange = min.toFloat()..max.toFloat(),
steps = max - min,
)
}
}
@Composable @Composable
private fun BaseSettingsItem( private fun BaseSettingsItem(
label: String, label: String,