Changed date text field layout

Better UI/UX. Time comes before date now. Using column instead of row for the field.
This commit is contained in:
Sad Ellie 2023-02-01 17:03:05 +04:00
parent bb22741251
commit 9b5da8e1ab
2 changed files with 35 additions and 44 deletions

View File

@ -82,12 +82,12 @@ class EpochViewModel @Inject constructor() : ViewModel() {
val inputWithPadding = date.padEnd(14, '0') val inputWithPadding = date.padEnd(14, '0')
// Now we break input that is 14 symbols into pieces // Now we break input that is 14 symbols into pieces
val day = inputWithPadding.substring(0, 2) val hour = inputWithPadding.substring(0, 2)
val month = inputWithPadding.substring(2, 4) val minute = inputWithPadding.substring(2, 4)
val year = inputWithPadding.substring(4, 8) val second = inputWithPadding.substring(4, 6)
val hour = inputWithPadding.substring(8, 10) val day = inputWithPadding.substring(6, 8)
val minute = inputWithPadding.substring(10, 12) val month = inputWithPadding.substring(8, 10)
val second = inputWithPadding.substring(12, 14) val year = inputWithPadding.substring(10, 14)
val cal = Calendar.getInstance() val cal = Calendar.getInstance()
cal.set( cal.set(
@ -120,13 +120,13 @@ class EpochViewModel @Inject constructor() : ViewModel() {
} catch (e: NumberFormatException) { } catch (e: NumberFormatException) {
return "" return ""
} }
date += cal2.get(Calendar.HOUR_OF_DAY).toString().padStart(2, '0')
date += cal2.get(Calendar.MINUTE).toString().padStart(2, '0')
date += cal2.get(Calendar.SECOND).toString().padStart(2, '0')
date += cal2.get(Calendar.DAY_OF_MONTH).toString().padStart(2, '0') date += cal2.get(Calendar.DAY_OF_MONTH).toString().padStart(2, '0')
date += (cal2.get(Calendar.MONTH) + 1).toString().padStart(2, '0') date += (cal2.get(Calendar.MONTH) + 1).toString().padStart(2, '0')
// Year is 4 symbols long // Year is 4 symbols long
date += cal2.get(Calendar.YEAR).toString().padStart(4, '0') date += cal2.get(Calendar.YEAR).toString().padStart(4, '0')
date += cal2.get(Calendar.HOUR_OF_DAY).toString().padStart(2, '0')
date += cal2.get(Calendar.MINUTE).toString().padStart(2, '0')
date += cal2.get(Calendar.SECOND).toString().padStart(2, '0')
return date return date
} }
} }

View File

@ -28,13 +28,11 @@ import androidx.compose.animation.slideOutVertically
import androidx.compose.animation.with import androidx.compose.animation.with
import androidx.compose.foundation.horizontalScroll import androidx.compose.foundation.horizontalScroll
import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.IntrinsicSize import androidx.compose.foundation.layout.IntrinsicSize
import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.rememberScrollState import androidx.compose.foundation.rememberScrollState
import androidx.compose.material3.Divider
import androidx.compose.material3.MaterialTheme import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text import androidx.compose.material3.Text
import androidx.compose.runtime.Composable import androidx.compose.runtime.Composable
@ -53,52 +51,45 @@ fun DateTextField(
) { ) {
val inputWithPadding: String = date.padEnd(14, '0') val inputWithPadding: String = date.padEnd(14, '0')
val day: String = inputWithPadding.substring(0, 2) val hour = inputWithPadding.substring(0, 2)
val month: String = inputWithPadding.substring(2, 4) val minute = inputWithPadding.substring(2, 4)
val year: String = inputWithPadding.substring(4, 8) val second = inputWithPadding.substring(4, 6)
val hour: String = inputWithPadding.substring(8, 10) val day = inputWithPadding.substring(6, 8)
val minute: String = inputWithPadding.substring(10, 12) val month = inputWithPadding.substring(8, 10)
val second: String = inputWithPadding.substring(12, 14) val year = inputWithPadding.substring(10, 14)
fun inFocus(range: Int): Boolean = date.length > range fun inFocus(range: Int): Boolean = date.length > range
Row( Column(
modifier = modifier modifier = modifier
.height(IntrinsicSize.Min) .height(IntrinsicSize.Min)
.horizontalScroll(rememberScrollState()), .horizontalScroll(rememberScrollState()),
horizontalArrangement = Arrangement.spacedBy(4.dp, Alignment.End) horizontalAlignment = Alignment.End
) { ) {
Row( Row(
horizontalArrangement = Arrangement.spacedBy(2.dp) horizontalArrangement = Arrangement.spacedBy(2.dp)
) { ) {
Row { DateTextAnimated(text = hour, focus = inFocus(0))
DateTextAnimated(text = day, focus = inFocus(0)) DateText(text = ":", focus = inFocus(0))
DateText(text = stringResource(R.string.day_short), focus = inFocus(0)) DateTextAnimated(text = minute, focus = inFocus(2))
DateText(text = ":", focus = inFocus(2))
DateTextAnimated(text = second, focus = inFocus(4))
} }
Row {
DateTextAnimated(text = month, focus = inFocus(2))
DateText(text = stringResource(R.string.month_short), focus = inFocus(2))
}
Row {
DateTextAnimated(text = year, focus = inFocus(4))
DateText(text = stringResource(R.string.year_short), focus = inFocus(4))
}
}
Divider(
modifier = Modifier
.fillMaxHeight()
.width(1.dp)
)
Row( Row(
horizontalArrangement = Arrangement.spacedBy(2.dp) horizontalArrangement = Arrangement.spacedBy(2.dp)
) { ) {
DateTextAnimated(text = hour, focus = inFocus(8)) Row {
DateText(text = ":", focus = inFocus(8)) DateTextAnimated(text = day, focus = inFocus(6))
DateTextAnimated(text = minute, focus = inFocus(10)) DateText(text = stringResource(R.string.day_short), focus = inFocus(6))
DateText(text = ":", focus = inFocus(10)) }
DateTextAnimated(text = second, focus = inFocus(12)) Row {
DateTextAnimated(text = month, focus = inFocus(8))
DateText(text = stringResource(R.string.month_short), focus = inFocus(8))
}
Row {
DateTextAnimated(text = year, focus = inFocus(10))
DateText(text = stringResource(R.string.year_short), focus = inFocus(10))
}
} }
} }
} }