From 7ce954252ebed67e93c5e7c85f184501ae7ca777 Mon Sep 17 00:00:00 2001 From: Abdelilah El Aissaoui Date: Sat, 25 Sep 2021 01:53:51 +0200 Subject: [PATCH] Additional UI improvements by adding cards to log and titles to commit detail --- src/main/kotlin/CommitChanges.kt | 18 ++- src/main/kotlin/RepositorySelected.kt | 104 +++++++++------- src/main/kotlin/UncommitedChanges.kt | 170 +++++++++++++++++--------- src/main/kotlin/theme/Color.kt | 2 +- 4 files changed, 187 insertions(+), 107 deletions(-) diff --git a/src/main/kotlin/CommitChanges.kt b/src/main/kotlin/CommitChanges.kt index a38a75a..a7bbea6 100644 --- a/src/main/kotlin/CommitChanges.kt +++ b/src/main/kotlin/CommitChanges.kt @@ -12,6 +12,8 @@ import androidx.compose.ui.graphics.Color import androidx.compose.ui.graphics.ImageBitmap import androidx.compose.ui.graphics.asImageBitmap import androidx.compose.ui.res.useResource +import androidx.compose.ui.text.font.FontWeight +import androidx.compose.ui.text.style.TextAlign import androidx.compose.ui.text.style.TextOverflow import androidx.compose.ui.unit.dp import extensions.filePath @@ -123,7 +125,21 @@ fun CommitChanges(commitDiff: Pair>, onDiffSelected: .weight(1f, fill = true) .padding(horizontal = 16.dp, vertical = 8.dp) ) { - CommitLogChanges(diff, onDiffSelected = onDiffSelected) + Column { + Text( + modifier = Modifier + .padding(vertical = 16.dp) + .fillMaxWidth(), + text = "Files changed", + fontWeight = FontWeight.Bold, + textAlign = TextAlign.Center, + color = MaterialTheme.colors.primary, + ) + + Divider(modifier = Modifier.fillMaxWidth()) + + CommitLogChanges(diff, onDiffSelected = onDiffSelected) + } } } diff --git a/src/main/kotlin/RepositorySelected.kt b/src/main/kotlin/RepositorySelected.kt index b3a115e..961962b 100644 --- a/src/main/kotlin/RepositorySelected.kt +++ b/src/main/kotlin/RepositorySelected.kt @@ -83,7 +83,10 @@ fun RepositorySelected(gitManager: GitManager, repository: Repository) { ) } else -> { - DiffView(gitManager = gitManager, diffEntry = diffEntry, onCloseDiffView = { diffSelected = null }) + DiffView( + gitManager = gitManager, + diffEntry = diffEntry, + onCloseDiffView = { diffSelected = null }) } } } @@ -175,7 +178,6 @@ fun Log( onUncommitedChangesSelected: () -> Unit, selectedIndex: MutableState = remember { mutableStateOf(-1) } ) { - val logStatusState = gitManager.logStatus.collectAsState() val logStatus = logStatusState.value @@ -186,15 +188,57 @@ fun Log( } else listOf() - - LazyColumn( + Card( modifier = Modifier + .padding(8.dp) .background(MaterialTheme.colors.surface) .fillMaxSize() ) { - if (gitManager.hasUncommitedChanges()) - item { - val textColor = if (selectedUncommited.value) { + LazyColumn( + modifier = Modifier + .background(MaterialTheme.colors.surface) + .fillMaxSize() + ) { + if (gitManager.hasUncommitedChanges()) + item { + val textColor = if (selectedUncommited.value) { + MaterialTheme.colors.primary + } else + MaterialTheme.colors.primaryTextColor + + Column( + modifier = Modifier + .height(64.dp) + .fillMaxWidth() + .clickable { + selectedIndex.value = -1 + selectedUncommited.value = true + onUncommitedChangesSelected() + }, + verticalArrangement = Arrangement.Center, + ) { + Spacer(modifier = Modifier.weight(2f)) + + Text( + text = "Uncommited changes", + fontWeight = FontWeight.Bold, + modifier = Modifier.padding(start = 16.dp), + color = textColor, + ) + Text( + text = "You", + modifier = Modifier.padding(start = 16.dp), + color = MaterialTheme.colors.secondaryTextColor, + ) + + Spacer(modifier = Modifier.weight(2f)) + + Divider() + } + } + + itemsIndexed(items = log) { index, item -> + val textColor = if (selectedIndex.value == index) { MaterialTheme.colors.primary } else MaterialTheme.colors.primaryTextColor @@ -204,22 +248,21 @@ fun Log( .height(64.dp) .fillMaxWidth() .clickable { - selectedIndex.value = -1 - selectedUncommited.value = true - onUncommitedChangesSelected() + selectedIndex.value = index + selectedUncommited.value = false + onRevCommitSelected(item) }, verticalArrangement = Arrangement.Center, ) { Spacer(modifier = Modifier.weight(2f)) Text( - text = "Uncommited changes", - fontWeight = FontWeight.Bold, + text = item.shortMessage, modifier = Modifier.padding(start = 16.dp), color = textColor, ) Text( - text = "You", + text = item.authorIdent.name, modifier = Modifier.padding(start = 16.dp), color = MaterialTheme.colors.secondaryTextColor, ) @@ -228,40 +271,7 @@ fun Log( Divider() } } - - itemsIndexed(items = log) { index, item -> - val textColor = if (selectedIndex.value == index) { - MaterialTheme.colors.primary - } else - MaterialTheme.colors.primaryTextColor - - Column( - modifier = Modifier - .height(64.dp) - .fillMaxWidth() - .clickable { - selectedIndex.value = index - selectedUncommited.value = false - onRevCommitSelected(item) - }, - verticalArrangement = Arrangement.Center, - ) { - Spacer(modifier = Modifier.weight(2f)) - - Text( - text = item.shortMessage, - modifier = Modifier.padding(start = 16.dp), - color = textColor, - ) - Text( - text = item.authorIdent.name, - modifier = Modifier.padding(start = 16.dp), - color = MaterialTheme.colors.secondaryTextColor, - ) - Spacer(modifier = Modifier.weight(2f)) - - Divider() - } } } + } \ No newline at end of file diff --git a/src/main/kotlin/UncommitedChanges.kt b/src/main/kotlin/UncommitedChanges.kt index 44445dd..f2ff509 100644 --- a/src/main/kotlin/UncommitedChanges.kt +++ b/src/main/kotlin/UncommitedChanges.kt @@ -1,3 +1,8 @@ +import androidx.compose.animation.AnimatedVisibility +import androidx.compose.animation.ExperimentalAnimationApi +import androidx.compose.animation.fadeIn +import androidx.compose.animation.fadeOut +import androidx.compose.foundation.background import androidx.compose.foundation.border import androidx.compose.foundation.clickable import androidx.compose.foundation.layout.* @@ -11,8 +16,10 @@ import androidx.compose.material.icons.filled.Close import androidx.compose.runtime.* import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier +import androidx.compose.ui.graphics.RectangleShape import androidx.compose.ui.graphics.vector.ImageVector import androidx.compose.ui.text.font.FontWeight +import androidx.compose.ui.text.style.TextAlign import androidx.compose.ui.text.style.TextOverflow import androidx.compose.ui.unit.dp import extensions.filePath @@ -20,6 +27,7 @@ import extensions.icon import git.StageStatus import org.eclipse.jgit.diff.DiffEntry +@OptIn(ExperimentalAnimationApi::class) @Composable fun UncommitedChanges( gitManager: GitManager, @@ -37,75 +45,121 @@ fun UncommitedChanges( var commitMessage by remember { mutableStateOf("") } Column { - if (stageStatus is StageStatus.Loading) { + AnimatedVisibility ( + visible = stageStatus is StageStatus.Loading, + enter = fadeIn(), + exit = fadeOut(), + ) { LinearProgressIndicator(modifier = Modifier.fillMaxWidth()) } - Text("Staged", fontWeight = FontWeight.Bold) - LazyColumn(modifier = Modifier.weight(5f)) { - itemsIndexed(staged) { index, diffEntry -> - FileEntry( - diffEntry = diffEntry, - icon = Icons.Default.Close, - onClick = { - onDiffEntrySelected(diffEntry) - }, - onButtonClick = { - gitManager.unstage(diffEntry) - } - ) - - if (index < staged.size - 1) { - Divider(modifier = Modifier.fillMaxWidth()) - } - } - } - Divider(modifier = Modifier.fillMaxWidth()) - - Text("Unstaged", fontWeight = FontWeight.Bold) - - LazyColumn(modifier = Modifier.weight(5f)) { - itemsIndexed(unstaged) { index, diffEntry -> - FileEntry( - diffEntry = diffEntry, - icon = Icons.Default.Add, - onClick = { - onDiffEntrySelected(diffEntry) - }, - onButtonClick = { - gitManager.stage(diffEntry) - } - ) - - if (index < unstaged.size - 1) { - Divider(modifier = Modifier.fillMaxWidth()) - } - } - } - - Column( + EntriesList( modifier = Modifier + .padding(8.dp) + .weight(5f) + .fillMaxWidth(), + title = "Staged", + optionIcon = Icons.Default.Close, + diffEntries = staged, + onDiffEntrySelected = onDiffEntrySelected, + onDiffEntryOptionSelected = { + gitManager.unstage(it) + } + ) + + EntriesList( + modifier = Modifier + .padding(8.dp) + .weight(5f) + .fillMaxWidth(), + title = "Unstaged", + optionIcon = Icons.Default.Add, + diffEntries = unstaged, + onDiffEntrySelected = onDiffEntrySelected, + onDiffEntryOptionSelected = { + gitManager.stage(it) + } + ) + + Card( + modifier = Modifier + .padding(8.dp) .height(192.dp) .fillMaxWidth() ) { - TextField( + Column( modifier = Modifier - .fillMaxWidth() - .weight(weight = 1f, fill = true), - value = commitMessage, - onValueChange = { commitMessage = it } + .fillMaxSize() + ) { + TextField( + modifier = Modifier + .fillMaxWidth() + .weight(weight = 1f, fill = true), + value = commitMessage, + onValueChange = { commitMessage = it }, + label = { Text("Write your commit message here") }, + colors = TextFieldDefaults.textFieldColors(backgroundColor = MaterialTheme.colors.surface) + ) + + Button( + modifier = Modifier + .fillMaxWidth(), + onClick = { + gitManager.commit(commitMessage) + }, + enabled = commitMessage.isNotEmpty(), + shape = RectangleShape, + ) { + Text("Commit") + } + } + } + } +} + +@Composable +private fun EntriesList( + modifier: Modifier, + title: String, + optionIcon: ImageVector, + diffEntries: List, + onDiffEntrySelected: (DiffEntry) -> Unit, + onDiffEntryOptionSelected: (DiffEntry) -> Unit, +) { + Card ( + modifier = modifier + ) { + Column { + Text( + modifier = Modifier + .padding(vertical = 16.dp) + .fillMaxWidth(), + text = title, + fontWeight = FontWeight.Bold, + textAlign = TextAlign.Center, + color = MaterialTheme.colors.primary, ) - Button( - modifier = Modifier - .fillMaxWidth(), - onClick = { - gitManager.commit(commitMessage) - }, - enabled = commitMessage.isNotEmpty() - ) { - Text("Commit") + Divider(modifier = Modifier.fillMaxWidth()) + + LazyColumn(modifier = Modifier.weight(5f)) { + itemsIndexed(diffEntries) { index, diffEntry -> + FileEntry( + diffEntry = diffEntry, + icon = optionIcon, + onClick = { + onDiffEntrySelected(diffEntry) + }, + onButtonClick = { + onDiffEntryOptionSelected(diffEntry) + } + ) + + if (index < diffEntries.size - 1) { + Divider(modifier = Modifier.fillMaxWidth()) + } + } } } } diff --git a/src/main/kotlin/theme/Color.kt b/src/main/kotlin/theme/Color.kt index f51fca3..5138c89 100644 --- a/src/main/kotlin/theme/Color.kt +++ b/src/main/kotlin/theme/Color.kt @@ -6,7 +6,7 @@ val primaryLight = Color(0xFF9FD1FF) val primary = Color(0xFF0070D8) val primaryDark = Color(0xFF014F97) val secondary = Color(0xFFAB02E9) -val mainText = Color(0xFF202124) +val mainText = Color(0xFF212934) val mainTextDark = Color(0xFFFFFFFF) val secondaryText = Color(0xFF8F8F8F) val secondaryTextDark = Color(0xFFCCCBCB)