diff --git a/core/ui/src/main/java/com/sadellie/unitto/core/ui/datetime/ZonedDateTimeUtils.kt b/core/ui/src/main/java/com/sadellie/unitto/core/ui/datetime/ZonedDateTimeUtils.kt index 58c2ab30..45b1f8d3 100644 --- a/core/ui/src/main/java/com/sadellie/unitto/core/ui/datetime/ZonedDateTimeUtils.kt +++ b/core/ui/src/main/java/com/sadellie/unitto/core/ui/datetime/ZonedDateTimeUtils.kt @@ -49,12 +49,24 @@ fun ZonedDateTime.formatTime( } /** + * Formats date time into something like: + * + * 23:59 or 11:59 + * + * Depends on system preferences + * + * @see UnittoDateTimeFormatter.time24 * @see UnittoDateTimeFormatter.time12Short */ -fun ZonedDateTime.formatTime12Short( +fun ZonedDateTime.formatTimeShort( locale: Locale, + is24Hour: Boolean, ): String = - format(UnittoDateTimeFormatter.time12Short(locale)) + if (is24Hour) { + format(UnittoDateTimeFormatter.time24(locale)) + } else { + format(UnittoDateTimeFormatter.time12Short(locale)) + } /** * Formats date time into something like: diff --git a/feature/datecalculator/src/main/java/com/sadellie/unitto/feature/datecalculator/components/DateTimeSelectorBlock.kt b/feature/datecalculator/src/main/java/com/sadellie/unitto/feature/datecalculator/components/DateTimeSelectorBlock.kt index 15d5d8f7..1a721810 100644 --- a/feature/datecalculator/src/main/java/com/sadellie/unitto/feature/datecalculator/components/DateTimeSelectorBlock.kt +++ b/feature/datecalculator/src/main/java/com/sadellie/unitto/feature/datecalculator/components/DateTimeSelectorBlock.kt @@ -45,9 +45,8 @@ import androidx.compose.ui.unit.dp import com.sadellie.unitto.core.ui.LocalLocale import com.sadellie.unitto.core.ui.common.squashable import com.sadellie.unitto.core.ui.datetime.formatDateWeekDayMonthYear -import com.sadellie.unitto.core.ui.datetime.formatTime -import com.sadellie.unitto.core.ui.datetime.formatTime12Short import com.sadellie.unitto.core.ui.datetime.formatTimeAmPm +import com.sadellie.unitto.core.ui.datetime.formatTimeShort import java.time.ZonedDateTime @Composable @@ -61,6 +60,7 @@ internal fun DateTimeSelectorBlock( onLongClick: () -> Unit = {}, ) { val locale = LocalLocale.current + val is24Hour = DateFormat.is24HourFormat(LocalContext.current) Column( modifier = modifier @@ -76,7 +76,13 @@ internal fun DateTimeSelectorBlock( ) { Text(title, style = MaterialTheme.typography.labelMedium) - if (DateFormat.is24HourFormat(LocalContext.current)) { + Column( + modifier = Modifier.clickable( + indication = rememberRipple(), + interactionSource = remember { MutableInteractionSource() }, + onClick = onTimeClick + ) + ) { AnimatedContent( targetState = dateTime, transitionSpec = { @@ -84,58 +90,29 @@ internal fun DateTimeSelectorBlock( slideOutVertically { height -> -height } + fadeOut() using SizeTransform() }, - label = "Animated 24 hour", + label = "Animated time", ) { time -> Text( - modifier = Modifier.clickable( - indication = rememberRipple(), - interactionSource = remember { MutableInteractionSource() }, - onClick = onTimeClick - ), - text = time.formatTime(locale, true), + text = time.formatTimeShort(locale, is24Hour), style = MaterialTheme.typography.displaySmall, maxLines = 1 ) } - } else { - Column( - modifier = Modifier.clickable( - indication = rememberRipple(), - interactionSource = remember { MutableInteractionSource() }, - onClick = onTimeClick - ) - ) { - AnimatedContent( - targetState = dateTime, - transitionSpec = { - slideInVertically { height -> height } + fadeIn() togetherWith - slideOutVertically { height -> -height } + fadeOut() using - SizeTransform() - }, - label = "Animated 12 hour", - ) { time -> - Text( - text = time.formatTime12Short(locale), - style = MaterialTheme.typography.displaySmall, - maxLines = 1 - ) - } - AnimatedContent( - targetState = dateTime, - transitionSpec = { - slideInVertically { height -> height } + fadeIn() togetherWith - slideOutVertically { height -> -height } + fadeOut() using - SizeTransform() - }, - label = "Animated am/pm", - ) { time -> - Text( - text = time.formatTimeAmPm(locale), - style = MaterialTheme.typography.bodyLarge, - maxLines = 1 - ) - } + AnimatedContent( + targetState = dateTime, + transitionSpec = { + slideInVertically { height -> height } + fadeIn() togetherWith + slideOutVertically { height -> -height } + fadeOut() using + SizeTransform() + }, + label = "Animated am/pm", + ) { time -> + Text( + text = time.formatTimeAmPm(locale), + style = MaterialTheme.typography.bodyLarge, + maxLines = 1 + ) } } diff --git a/feature/timezone/src/main/java/com/sadellie/unitto/feature/timezone/components/UserTimeZone.kt b/feature/timezone/src/main/java/com/sadellie/unitto/feature/timezone/components/UserTimeZone.kt index 530c1529..85008ec7 100644 --- a/feature/timezone/src/main/java/com/sadellie/unitto/feature/timezone/components/UserTimeZone.kt +++ b/feature/timezone/src/main/java/com/sadellie/unitto/feature/timezone/components/UserTimeZone.kt @@ -33,6 +33,7 @@ import androidx.compose.foundation.background import androidx.compose.foundation.interaction.MutableInteractionSource 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.History @@ -45,13 +46,13 @@ 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.text.TextStyle import androidx.compose.ui.text.style.TextOverflow import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp import com.sadellie.unitto.core.ui.LocalLocale import com.sadellie.unitto.core.ui.common.squashable import com.sadellie.unitto.core.ui.datetime.formatDateDayMonthYear +import com.sadellie.unitto.core.ui.datetime.formatTimeAmPm import com.sadellie.unitto.core.ui.datetime.formatTimeHours import com.sadellie.unitto.core.ui.datetime.formatTimeMinutes import com.sadellie.unitto.core.ui.datetime.formatZone @@ -89,9 +90,13 @@ internal fun UserTimeZone( Row( verticalAlignment = Alignment.Bottom ) { - SlidingText(text = userTime.formatTimeHours(locale, is24Hour)) + SlidingText(userTime.formatTimeHours(locale, is24Hour)) TimeSeparator() - SlidingText(text = userTime.formatTimeMinutes(locale)) + SlidingText(userTime.formatTimeMinutes(locale)) + Spacer(Modifier.padding(4.dp)) + if (!is24Hour) { + SlidingText(userTime.formatTimeAmPm(locale)) + } } Text( @@ -119,7 +124,6 @@ internal fun UserTimeZone( @Composable private fun SlidingText( text: String, - style: TextStyle = MaterialTheme.typography.displayLarge ) { AnimatedContent( targetState = text, @@ -132,7 +136,7 @@ private fun SlidingText( ) { target -> Text( text = target, - style = style, + style = MaterialTheme.typography.displayLarge, color = MaterialTheme.colorScheme.onTertiaryContainer, overflow = TextOverflow.Visible, maxLines = 1 @@ -141,14 +145,13 @@ private fun SlidingText( } @Composable -private fun TimeSeparator( - text: String = ":", - style: TextStyle = MaterialTheme.typography.displayLarge -) { +private fun TimeSeparator() { Text( - text = text, - style = style, - color = MaterialTheme.colorScheme.onTertiaryContainer + text = ":", + style = MaterialTheme.typography.displayLarge, + color = MaterialTheme.colorScheme.onTertiaryContainer, + overflow = TextOverflow.Visible, + maxLines = 1 ) }