Improved clone dialog UI

This commit is contained in:
Abdelilah El Aissaoui 2022-09-06 02:35:49 +02:00
parent 29418a0dbc
commit 7cc3c069b6
2 changed files with 43 additions and 33 deletions

View File

@ -3,6 +3,8 @@ package app.ui.components
import androidx.compose.foundation.border import androidx.compose.foundation.border
import androidx.compose.foundation.interaction.MutableInteractionSource import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.heightIn
import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.text.BasicTextField import androidx.compose.foundation.text.BasicTextField
@ -47,7 +49,8 @@ fun AdjustableOutlinedTextField(
val indicatorColor by colors.indicatorColor(enabled, isError, interactionSource) val indicatorColor by colors.indicatorColor(enabled, isError, interactionSource)
BasicTextField( BasicTextField(
modifier = modifier, modifier = modifier
.heightIn(min = 48.dp),
value = value, value = value,
onValueChange = onValueChange, onValueChange = onValueChange,
enabled = enabled, enabled = enabled,

View File

@ -1,6 +1,5 @@
package app.ui.dialogs package app.ui.dialogs
import androidx.compose.animation.AnimatedVisibility
import androidx.compose.animation.animateContentSize import androidx.compose.animation.animateContentSize
import androidx.compose.foundation.background import androidx.compose.foundation.background
import androidx.compose.foundation.layout.* import androidx.compose.foundation.layout.*
@ -41,7 +40,7 @@ fun CloneDialog(
Box( Box(
modifier = Modifier modifier = Modifier
.width(720.dp) .width(720.dp)
.heightIn(min = 200.dp) .height(240.dp)
.animateContentSize() .animateContentSize()
) { ) {
when (cloneStatusValue) { when (cloneStatusValue) {
@ -50,7 +49,7 @@ fun CloneDialog(
} }
is CloneStatus.Cancelling -> { is CloneStatus.Cancelling -> {
// onClose() Cancelling()
} }
is CloneStatus.Completed -> { is CloneStatus.Completed -> {
@ -105,6 +104,7 @@ private fun CloneInput(
) )
TextInput( TextInput(
modifier = Modifier.padding(top = 8.dp),
title = "URL", title = "URL",
value = url, value = url,
focusRequester = urlFocusRequester, focusRequester = urlFocusRequester,
@ -129,7 +129,7 @@ private fun CloneInput(
modifier = Modifier.weight(1f), modifier = Modifier.weight(1f),
title = "Directory", title = "Directory",
value = directory, value = directory,
focusRequester = directoryButtonFocusRequester, focusRequester = directoryFocusRequester,
focusProperties = { focusProperties = {
previous = urlFocusRequester previous = urlFocusRequester
next = directoryButtonFocusRequester next = directoryButtonFocusRequester
@ -142,7 +142,7 @@ private fun CloneInput(
textFieldShape = RoundedCornerShape(topStart = 4.dp, bottomStart = 4.dp) textFieldShape = RoundedCornerShape(topStart = 4.dp, bottomStart = 4.dp)
) )
IconButton( Button(
onClick = { onClick = {
cloneViewModel.resetStateIfError() cloneViewModel.resetStateIfError()
val newDirectory = openDirectoryDialog() val newDirectory = openDirectoryDialog()
@ -157,9 +157,8 @@ private fun CloneInput(
previous = directoryFocusRequester previous = directoryFocusRequester
next = cloneButtonFocusRequester next = cloneButtonFocusRequester
} }
.clip(RoundedCornerShape(topEnd = 4.dp, bottomEnd = 4.dp)) .height(48.dp),
.background(MaterialTheme.colors.primary) shape = RoundedCornerShape(topEnd = 4.dp, bottomEnd = 4.dp)
.height(44.5.dp) // Height of the AdjustableOutlinedTextField with a single line by default
) { ) {
Icon( Icon(
Icons.Default.Search, Icons.Default.Search,
@ -169,11 +168,11 @@ private fun CloneInput(
} }
} }
AnimatedVisibility(errorMessage != null) { if (errorMessage != null) {
Box( Box(
modifier = Modifier modifier = Modifier
.fillMaxWidth() .fillMaxWidth()
.padding(vertical = 4.dp, horizontal = 8.dp) .padding(vertical = 4.dp)
.clip(RoundedCornerShape(4.dp)) .clip(RoundedCornerShape(4.dp))
.background(MaterialTheme.colors.error) .background(MaterialTheme.colors.error)
) { ) {
@ -226,13 +225,10 @@ private fun CloneInput(
@Composable @Composable
private fun Cloning(cloneViewModel: CloneViewModel, cloneStatusValue: CloneStatus.Cloning) { private fun Cloning(cloneViewModel: CloneViewModel, cloneStatusValue: CloneStatus.Cloning) {
Column( Box(
modifier = Modifier modifier = Modifier
.fillMaxWidth(), .fillMaxSize(),
horizontalAlignment = Alignment.CenterHorizontally,
) { ) {
val progress = remember(cloneStatusValue) { val progress = remember(cloneStatusValue) {
val total = cloneStatusValue.total val total = cloneStatusValue.total
@ -242,25 +238,34 @@ private fun Cloning(cloneViewModel: CloneViewModel, cloneStatusValue: CloneStatu
cloneStatusValue.progress / total.toFloat() cloneStatusValue.progress / total.toFloat()
} }
if (progress >= 0f) Column(
CircularProgressIndicator( modifier = Modifier
modifier = Modifier.padding(vertical = 16.dp), .align(Alignment.Center),
progress = progress horizontalAlignment = Alignment.CenterHorizontally,
) ) {
else // Show indeterminate if we do not know the total (aka total == 0 or progress == -1)
CircularProgressIndicator(
modifier = Modifier.padding(vertical = 16.dp),
)
Text(cloneStatusValue.taskName, color = MaterialTheme.colors.primaryTextColor) Text(cloneStatusValue.taskName, color = MaterialTheme.colors.primaryTextColor)
if (progress >= 0f)
CircularProgressIndicator(
modifier = Modifier
.padding(vertical = 16.dp),
progress = progress,
color = MaterialTheme.colors.primaryVariant,
)
else // Show indeterminate if we do not know the total (aka total == 0 or progress == -1)
CircularProgressIndicator(
modifier = Modifier
.padding(vertical = 16.dp),
color = MaterialTheme.colors.primaryVariant,
)
}
TextButton( TextButton(
modifier = Modifier modifier = Modifier
.padding( .padding(end = 8.dp)
top = 36.dp, .align(Alignment.BottomEnd),
end = 8.dp
)
.align(Alignment.End),
colors = textButtonColors(), colors = textButtonColors(),
onClick = { onClick = {
cloneViewModel.cancelClone() cloneViewModel.cancelClone()
@ -275,11 +280,13 @@ private fun Cloning(cloneViewModel: CloneViewModel, cloneStatusValue: CloneStatu
private fun Cancelling() { private fun Cancelling() {
Column( Column(
modifier = Modifier modifier = Modifier
.fillMaxWidth(), .fillMaxSize(),
horizontalAlignment = Alignment.CenterHorizontally, horizontalAlignment = Alignment.CenterHorizontally,
verticalArrangement = Arrangement.Center,
) { ) {
CircularProgressIndicator( CircularProgressIndicator(
modifier = Modifier.padding(horizontal = 16.dp) modifier = Modifier.padding(horizontal = 16.dp),
color = MaterialTheme.colors.primaryVariant,
) )
Text( Text(