From a829fb9eeae3646e668d52fbd544838d062d89d4 Mon Sep 17 00:00:00 2001 From: Bnyro Date: Mon, 4 Nov 2024 17:13:36 +0100 Subject: [PATCH] fix: rtl layout direction of time picker (closes #376) --- .../presentation/components/TimePickerDial.kt | 115 ++++++++++-------- .../alarm/components/AlarmTimePicker.kt | 111 +++++++++-------- 2 files changed, 124 insertions(+), 102 deletions(-) diff --git a/app/src/main/java/com/bnyro/clock/presentation/components/TimePickerDial.kt b/app/src/main/java/com/bnyro/clock/presentation/components/TimePickerDial.kt index e38bcd3e..07aaaf79 100644 --- a/app/src/main/java/com/bnyro/clock/presentation/components/TimePickerDial.kt +++ b/app/src/main/java/com/bnyro/clock/presentation/components/TimePickerDial.kt @@ -8,10 +8,13 @@ import androidx.compose.foundation.layout.height import androidx.compose.material3.MaterialTheme import androidx.compose.material3.Text import androidx.compose.runtime.Composable +import androidx.compose.runtime.CompositionLocalProvider import androidx.compose.runtime.remember import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier +import androidx.compose.ui.platform.LocalLayoutDirection import androidx.compose.ui.res.stringResource +import androidx.compose.ui.unit.LayoutDirection import androidx.compose.ui.unit.dp import com.bnyro.clock.R import com.bnyro.clock.presentation.screens.timer.components.ScrollTimePicker @@ -20,62 +23,66 @@ import com.bnyro.clock.presentation.screens.timer.model.TimerModel @Composable fun TimePickerDial(timerModel: TimerModel) { Column { - Row( - verticalAlignment = Alignment.CenterVertically, - horizontalArrangement = Arrangement.spacedBy(40.dp) - ) { - Text( - text = stringResource(R.string.hours), - style = MaterialTheme.typography.bodyMedium, - color = MaterialTheme.colorScheme.primary - ) - Text( - text = stringResource(R.string.minutes), - style = MaterialTheme.typography.bodyMedium, - color = MaterialTheme.colorScheme.primary - ) - Text( - text = stringResource(R.string.seconds), - style = MaterialTheme.typography.bodyMedium, - color = MaterialTheme.colorScheme.primary - ) + CompositionLocalProvider(LocalLayoutDirection provides LayoutDirection.Ltr) { + Row( + verticalAlignment = Alignment.CenterVertically, + horizontalArrangement = Arrangement.spacedBy(40.dp) + ) { + Text( + text = stringResource(R.string.hours), + style = MaterialTheme.typography.bodyMedium, + color = MaterialTheme.colorScheme.primary + ) + Text( + text = stringResource(R.string.minutes), + style = MaterialTheme.typography.bodyMedium, + color = MaterialTheme.colorScheme.primary + ) + Text( + text = stringResource(R.string.seconds), + style = MaterialTheme.typography.bodyMedium, + color = MaterialTheme.colorScheme.primary + ) + } } Spacer(modifier = Modifier.height(32.dp)) - Row( - verticalAlignment = Alignment.CenterVertically, - horizontalArrangement = Arrangement.spacedBy(16.dp) - ) { - ScrollTimePicker( - value = remember { timerModel.hours }, - onValueChanged = { - timerModel.hours = it - }, - maxValue = 24 - ) - Text( - text = ":", - style = MaterialTheme.typography.displayMedium, - color = MaterialTheme.colorScheme.primary - ) - ScrollTimePicker( - value = remember { timerModel.minutes }, - onValueChanged = { - timerModel.minutes = it - }, - maxValue = 60 - ) - Text( - text = ":", - style = MaterialTheme.typography.displayMedium, - color = MaterialTheme.colorScheme.primary - ) - ScrollTimePicker( - value = remember { timerModel.seconds }, - onValueChanged = { - timerModel.seconds = it - }, - maxValue = 60 - ) + CompositionLocalProvider(LocalLayoutDirection provides LayoutDirection.Ltr) { + Row( + verticalAlignment = Alignment.CenterVertically, + horizontalArrangement = Arrangement.spacedBy(16.dp) + ) { + ScrollTimePicker( + value = remember { timerModel.hours }, + onValueChanged = { + timerModel.hours = it + }, + maxValue = 24 + ) + Text( + text = ":", + style = MaterialTheme.typography.displayMedium, + color = MaterialTheme.colorScheme.primary + ) + ScrollTimePicker( + value = remember { timerModel.minutes }, + onValueChanged = { + timerModel.minutes = it + }, + maxValue = 60 + ) + Text( + text = ":", + style = MaterialTheme.typography.displayMedium, + color = MaterialTheme.colorScheme.primary + ) + ScrollTimePicker( + value = remember { timerModel.seconds }, + onValueChanged = { + timerModel.seconds = it + }, + maxValue = 60 + ) + } } } } diff --git a/app/src/main/java/com/bnyro/clock/presentation/screens/alarm/components/AlarmTimePicker.kt b/app/src/main/java/com/bnyro/clock/presentation/screens/alarm/components/AlarmTimePicker.kt index 640c3650..b6a5b31f 100644 --- a/app/src/main/java/com/bnyro/clock/presentation/screens/alarm/components/AlarmTimePicker.kt +++ b/app/src/main/java/com/bnyro/clock/presentation/screens/alarm/components/AlarmTimePicker.kt @@ -14,11 +14,15 @@ import androidx.compose.foundation.pager.rememberPagerState import androidx.compose.material3.MaterialTheme import androidx.compose.material3.Text import androidx.compose.runtime.Composable +import androidx.compose.runtime.CompositionLocalProvider import androidx.compose.runtime.LaunchedEffect import androidx.compose.runtime.remember import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.platform.LocalContext +import androidx.compose.ui.platform.LocalLayoutDirection +import androidx.compose.ui.tooling.preview.Preview +import androidx.compose.ui.unit.LayoutDirection import androidx.compose.ui.unit.dp import com.bnyro.clock.presentation.screens.timer.components.ScrollTimePicker @@ -44,62 +48,67 @@ fun AlarmTimePicker( modifier = Modifier.fillMaxWidth(), contentAlignment = Alignment.Center ) { - Row { - /** - * Hour value in 24 hour format 0-23 - */ - var hours = remember { initialHours } - ScrollTimePicker( - value = if (is24Hour) initialHours else initialHours % 24, - onValueChanged = { - hours = if (is24Hour) { - it - } else { - when (meridiem) { - Meridiem.AM -> { - if (it == 12) 0 else it - } + CompositionLocalProvider(LocalLayoutDirection provides LayoutDirection.Ltr) { + Row { + /** + * Hour value in 24 hour format 0-23 + */ + /** + * Hour value in 24 hour format 0-23 + */ + var hours = remember { initialHours } + ScrollTimePicker( + value = if (is24Hour) initialHours else initialHours % 24, + onValueChanged = { + hours = if (is24Hour) { + it + } else { + when (meridiem) { + Meridiem.AM -> { + if (it == 12) 0 else it + } - Meridiem.PM -> { - if (it == 12) 12 else it + 12 + Meridiem.PM -> { + if (it == 12) 12 else it + 12 + } } } - } - assert(hours < 24) - onHoursChanged( - hours - ) - }, - maxValue = if (is24Hour) 24 else 12, - offset = if (is24Hour) 0 else 1 - ) - Spacer(modifier = Modifier.width(16.dp)) - ScrollTimePicker(value = initialMinutes, onValueChanged = { - onMinutesChanged(it) - }, maxValue = 60) - if (!is24Hour) { + assert(hours < 24) + onHoursChanged( + hours + ) + }, + maxValue = if (is24Hour) 24 else 12, + offset = if (is24Hour) 0 else 1 + ) Spacer(modifier = Modifier.width(16.dp)) - MeridiemPicker(value = meridiem, onValueChanged = { - hours = when (it) { - Meridiem.PM -> { - if (hours >= 12) { - hours + ScrollTimePicker(value = initialMinutes, onValueChanged = { + onMinutesChanged(it) + }, maxValue = 60) + if (!is24Hour) { + Spacer(modifier = Modifier.width(16.dp)) + MeridiemPicker(value = meridiem, onValueChanged = { + hours = when (it) { + Meridiem.PM -> { + if (hours >= 12) { + hours + } else { + hours + 12 + } + } + + Meridiem.AM -> if (hours >= 12) { + hours - 12 } else { - hours + 12 + hours } } - - Meridiem.AM -> if (hours >= 12) { - hours - 12 - } else { + assert(hours < 24) + onHoursChanged( hours - } - } - assert(hours < 24) - onHoursChanged( - hours - ) - }) + ) + }) + } } } } @@ -138,3 +147,9 @@ fun MeridiemPicker( enum class Meridiem { AM, PM } + +@Preview +@Composable +fun AlarmTimePickerPreview() { + AlarmTimePicker(10, 20, {}) { } +} \ No newline at end of file