From 6a44e8f9583ed3ea72c4b0637e3f78c2de5efca4 Mon Sep 17 00:00:00 2001 From: Abdelilah El Aissaoui Date: Thu, 23 Jun 2022 13:20:46 +0200 Subject: [PATCH] Multiple UI improvements - Added custom resizable outlined text field. - Reduced size of "scroll to top" button text --- .../components/AdjustableOutlinedTextField.kt | 65 +++++++++++++++++++ .../kotlin/app/ui/dialogs/AuthorDialog.kt | 53 +++++++++------ .../app/ui/dialogs/EditRemotesDialog.kt | 13 ++-- .../kotlin/app/ui/dialogs/SettingsDialog.kt | 47 ++++++++------ src/main/kotlin/app/ui/log/Log.kt | 1 + src/main/resources/warning.svg | 1 + 6 files changed, 131 insertions(+), 49 deletions(-) create mode 100644 src/main/kotlin/app/ui/components/AdjustableOutlinedTextField.kt create mode 100644 src/main/resources/warning.svg diff --git a/src/main/kotlin/app/ui/components/AdjustableOutlinedTextField.kt b/src/main/kotlin/app/ui/components/AdjustableOutlinedTextField.kt new file mode 100644 index 0000000..7d87a72 --- /dev/null +++ b/src/main/kotlin/app/ui/components/AdjustableOutlinedTextField.kt @@ -0,0 +1,65 @@ +package app.ui.components + +import androidx.compose.foundation.border +import androidx.compose.foundation.interaction.MutableInteractionSource +import androidx.compose.foundation.layout.* +import androidx.compose.foundation.shape.RoundedCornerShape +import androidx.compose.foundation.text.BasicTextField +import androidx.compose.foundation.text.KeyboardOptions +import androidx.compose.material.* +import androidx.compose.runtime.Composable +import androidx.compose.runtime.remember +import androidx.compose.ui.Modifier +import androidx.compose.ui.unit.dp +import androidx.compose.runtime.getValue +import androidx.compose.ui.graphics.SolidColor +import androidx.compose.ui.graphics.takeOrElse +import androidx.compose.ui.text.TextStyle +import androidx.compose.ui.unit.sp +import app.theme.outlinedTextFieldColors + +@Composable +fun AdjustableOutlinedTextField( + value: String, + onValueChange: (String) -> Unit, + modifier: Modifier = Modifier, + enabled: Boolean = true, + isError: Boolean = false, + colors: TextFieldColors = outlinedTextFieldColors(), + maxLines: Int = Int.MAX_VALUE, + keyboardOptions: KeyboardOptions = KeyboardOptions.Default, + textStyle: TextStyle = LocalTextStyle.current.copy(fontSize = 14.sp), + interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, +) { + val textColor = textStyle.color.takeOrElse { + colors.textColor(enabled).value + } + + val cursorColor = colors.cursorColor(isError).value + val indicatorColor by colors.indicatorColor(enabled, isError, interactionSource) + + BasicTextField( + modifier = modifier, + value = value, + onValueChange = onValueChange, + enabled = enabled, + maxLines = maxLines, + textStyle = textStyle.copy(color = textColor), + interactionSource = interactionSource, + keyboardOptions = keyboardOptions, + cursorBrush = SolidColor(cursorColor), + decorationBox = { innerTextField -> + Box ( + modifier = Modifier + .border( + width = 1.dp, + color = indicatorColor, + shape = RoundedCornerShape(4.dp) + ) + .padding(12.dp), + ) { + innerTextField() + } + } + ) +} \ No newline at end of file diff --git a/src/main/kotlin/app/ui/dialogs/AuthorDialog.kt b/src/main/kotlin/app/ui/dialogs/AuthorDialog.kt index 53af09f..5020867 100644 --- a/src/main/kotlin/app/ui/dialogs/AuthorDialog.kt +++ b/src/main/kotlin/app/ui/dialogs/AuthorDialog.kt @@ -1,26 +1,22 @@ package app.ui.dialogs +import androidx.compose.animation.core.animateFloatAsState import androidx.compose.foundation.background import androidx.compose.foundation.layout.* -import androidx.compose.foundation.mouseClickable -import androidx.compose.foundation.text.KeyboardOptions import androidx.compose.material.* import androidx.compose.runtime.* import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier -import androidx.compose.ui.input.pointer.isPrimaryPressed -import androidx.compose.ui.text.font.FontWeight -import androidx.compose.ui.text.input.KeyboardType -import androidx.compose.ui.text.style.TextAlign +import androidx.compose.ui.draw.alpha +import androidx.compose.ui.res.painterResource import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.sp import app.theme.outlinedTextFieldColors import app.theme.primaryTextColor import app.theme.textButtonColors import app.ui.components.PrimaryButton +import app.ui.components.AdjustableOutlinedTextField import app.viewmodels.AuthorViewModel -import kotlinx.coroutines.delay -import kotlinx.coroutines.launch @Composable fun AuthorDialog( @@ -44,7 +40,7 @@ fun AuthorDialog( Text( text = "Global settings", color = MaterialTheme.colors.primaryTextColor, - fontSize = 18.sp, + fontSize = 16.sp, modifier = Modifier.padding(vertical = 8.dp), ) @@ -62,8 +58,8 @@ fun AuthorDialog( Text( text = "Repository settings", color = MaterialTheme.colors.primaryTextColor, - fontSize = 18.sp, - modifier = Modifier.padding(top = 16.dp), + fontSize = 16.sp, + modifier = Modifier.padding(top = 16.dp, bottom = 8.dp), ) TextInput( @@ -77,12 +73,28 @@ fun AuthorDialog( onValueChange = { email = it }, ) - Text( - text = "Repository-level values will override global values", - color = MaterialTheme.colors.primaryTextColor, - fontSize = 14.sp, - modifier = Modifier.padding(vertical = 8.dp), - ) + val visible = name.isNotBlank() || email.isNotBlank() + + val visibilityAlpha by animateFloatAsState(targetValue = if (visible) 1f else 0f) + + Row( + verticalAlignment = Alignment.CenterVertically, + modifier = Modifier.alpha(visibilityAlpha) + ) { + Icon( + painterResource("warning.svg"), + contentDescription = null, + tint = MaterialTheme.colors.primaryTextColor, + modifier = Modifier.size(16.dp) + ) + Text( + text = "Repository-level values will override global values", + color = MaterialTheme.colors.primaryTextColor, + fontSize = 12.sp, + modifier = Modifier + .padding(top = 8.dp, bottom = 8.dp, start = 4.dp), + ) + } Row( modifier = Modifier .padding(top = 16.dp) @@ -131,14 +143,13 @@ private fun TextInput( Text( text = title, color = MaterialTheme.colors.primaryTextColor, - fontSize = 16.sp, + fontSize = 14.sp, modifier = Modifier - .width(100.dp) + .width(80.dp) .padding(end = 16.dp), ) - - OutlinedTextField( + AdjustableOutlinedTextField( value = value, modifier = Modifier .weight(1f), diff --git a/src/main/kotlin/app/ui/dialogs/EditRemotesDialog.kt b/src/main/kotlin/app/ui/dialogs/EditRemotesDialog.kt index d5043a4..cc5d906 100644 --- a/src/main/kotlin/app/ui/dialogs/EditRemotesDialog.kt +++ b/src/main/kotlin/app/ui/dialogs/EditRemotesDialog.kt @@ -14,11 +14,11 @@ import androidx.compose.ui.Modifier import androidx.compose.ui.input.pointer.PointerIconDefaults import androidx.compose.ui.input.pointer.pointerHoverIcon import androidx.compose.ui.res.painterResource -import androidx.compose.ui.text.TextStyle import androidx.compose.ui.unit.dp import app.extensions.handMouseClickable import app.theme.* import app.ui.components.PrimaryButton +import app.ui.components.AdjustableOutlinedTextField import app.viewmodels.RemotesViewModel import org.eclipse.jgit.transport.RemoteConfig @@ -207,7 +207,7 @@ fun EditRemotesDialog( modifier = Modifier.padding(vertical = 8.dp), ) - OutlinedTextField( + AdjustableOutlinedTextField( value = selectedRemote.remoteName, onValueChange = { newValue -> val newSelectedRemoteConfig = selectedRemote.copy(remoteName = newValue) @@ -220,9 +220,7 @@ fun EditRemotesDialog( selectedRemote = newSelectedRemoteConfig ) }, - textStyle = TextStyle.Default.copy(color = MaterialTheme.colors.primaryTextColor), maxLines = 1, - colors = outlinedTextFieldColors(), modifier = Modifier .fillMaxWidth() .padding(vertical = 8.dp) @@ -235,14 +233,13 @@ fun EditRemotesDialog( modifier = Modifier.padding(vertical = 8.dp), ) - OutlinedTextField( + AdjustableOutlinedTextField( value = selectedRemote.fetchUri, onValueChange = { newValue -> val newSelectedRemoteConfig = selectedRemote.copy(fetchUri = newValue) remotesEditorData = remotesEditorData.copy(selectedRemote = newSelectedRemoteConfig) remoteChanged = newSelectedRemoteConfig.haveUrisChanged }, - textStyle = TextStyle.Default.copy(color = MaterialTheme.colors.primaryTextColor), maxLines = 1, colors = outlinedTextFieldColors(), modifier = Modifier @@ -256,16 +253,14 @@ fun EditRemotesDialog( modifier = Modifier.padding(vertical = 8.dp), ) - OutlinedTextField( + AdjustableOutlinedTextField( value = selectedRemote.pushUri, onValueChange = { newValue -> val newSelectedRemoteConfig = selectedRemote.copy(pushUri = newValue) remotesEditorData = remotesEditorData.copy(selectedRemote = newSelectedRemoteConfig) remoteChanged = newSelectedRemoteConfig.haveUrisChanged }, - textStyle = TextStyle.Default.copy(color = MaterialTheme.colors.primaryTextColor), maxLines = 1, - colors = outlinedTextFieldColors(), modifier = Modifier .fillMaxWidth() .padding(vertical = 8.dp) diff --git a/src/main/kotlin/app/ui/dialogs/SettingsDialog.kt b/src/main/kotlin/app/ui/dialogs/SettingsDialog.kt index ca144d6..8da6b48 100644 --- a/src/main/kotlin/app/ui/dialogs/SettingsDialog.kt +++ b/src/main/kotlin/app/ui/dialogs/SettingsDialog.kt @@ -13,6 +13,7 @@ import androidx.compose.ui.unit.sp import app.preferences.AppPreferences import app.DropDownOption import app.theme.* +import app.ui.components.AdjustableOutlinedTextField import app.ui.openFileDialog import kotlinx.coroutines.delay import kotlinx.coroutines.launch @@ -190,7 +191,7 @@ fun SettingButton( Text( text = title, color = MaterialTheme.colors.primaryTextColor, - fontSize = 16.sp, + fontSize = 14.sp, ) Text( @@ -230,7 +231,7 @@ fun SettingToogle( Text( text = title, color = MaterialTheme.colors.primaryTextColor, - fontSize = 16.sp, + fontSize = 14.sp, ) Text( @@ -259,22 +260,7 @@ fun SettingIntInput( modifier = Modifier.padding(vertical = 8.dp, horizontal = 8.dp), verticalAlignment = Alignment.CenterVertically ) { - Column( - verticalArrangement = Arrangement.Center - ) { - Text( - text = title, - color = MaterialTheme.colors.primaryTextColor, - fontSize = 16.sp, - ) - - Text( - text = subtitle, - color = MaterialTheme.colors.primaryTextColor, - modifier = Modifier.padding(top = 4.dp), - fontSize = 12.sp, - ) - } + FieldTitles(title, subtitle) Spacer(modifier = Modifier.weight(1f)) @@ -285,7 +271,7 @@ fun SettingIntInput( var isError by remember { mutableStateOf(false) } val scope = rememberCoroutineScope() - OutlinedTextField( + AdjustableOutlinedTextField( value = text, modifier = Modifier.width(136.dp), keyboardOptions = KeyboardOptions.Default.copy(keyboardType = KeyboardType.Number), @@ -314,6 +300,29 @@ fun SettingIntInput( } } +@Composable +private fun FieldTitles( + title: String, + subtitle: String, +) { + Column( + verticalArrangement = Arrangement.Center + ) { + Text( + text = title, + color = MaterialTheme.colors.primaryTextColor, + fontSize = 14.sp, + ) + + Text( + text = subtitle, + color = MaterialTheme.colors.primaryTextColor, + modifier = Modifier.padding(top = 4.dp), + fontSize = 12.sp, + ) + } +} + private fun isValidInt(value: String): Boolean { return try { value.toInt() diff --git a/src/main/kotlin/app/ui/log/Log.kt b/src/main/kotlin/app/ui/log/Log.kt index 62154c8..4286d83 100644 --- a/src/main/kotlin/app/ui/log/Log.kt +++ b/src/main/kotlin/app/ui/log/Log.kt @@ -231,6 +231,7 @@ fun Log( text = "Scroll to top", modifier = Modifier.padding(start = 8.dp), color = MaterialTheme.colors.onPrimary, + fontSize = 14.sp, ) } } diff --git a/src/main/resources/warning.svg b/src/main/resources/warning.svg new file mode 100644 index 0000000..22cf31b --- /dev/null +++ b/src/main/resources/warning.svg @@ -0,0 +1 @@ + \ No newline at end of file