Julian/Gitnuro
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Multiple UI improvements

Browse Source 
- Added custom resizable outlined text field.
- Reduced size of "scroll to top" button text
This commit is contained in:
Abdelilah El Aissaoui 2022-06-23 13:20:46 +02:00
parent 2975059bd2
commit 6a44e8f958
6 changed files with 131 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
src/main/kotlin/app/ui/components/AdjustableOutlinedTextField.kt Normal file
View File

@ -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()
}
}
)
}

45
src/main/kotlin/app/ui/dialogs/AuthorDialog.kt
View File

@ -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 },
)
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 = 14.sp,
modifier = Modifier.padding(vertical = 8.dp),
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),

13
src/main/kotlin/app/ui/dialogs/EditRemotesDialog.kt
View File

@ -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)

47
src/main/kotlin/app/ui/dialogs/SettingsDialog.kt
View File

@ -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()

1
src/main/kotlin/app/ui/log/Log.kt
View File

@ -231,6 +231,7 @@ fun Log(
text = "Scroll to top",
modifier = Modifier.padding(start = 8.dp),
color = MaterialTheme.colors.onPrimary,
fontSize = 14.sp,
)
}
}

1
src/main/resources/warning.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 207 B