From 2263785723e4409ff03ba9d8e7130df2fbfc0497 Mon Sep 17 00:00:00 2001 From: Abdelilah El Aissaoui Date: Mon, 9 May 2022 22:02:24 +0200 Subject: [PATCH] Changed item selection design --- build.gradle.kts | 2 +- .../app/extensions/ModifierExtensions.kt | 13 +++ src/main/kotlin/app/theme/Color.kt | 5 +- src/main/kotlin/app/theme/Theme.kt | 8 +- src/main/kotlin/app/ui/CommitChanges.kt | 21 ++-- src/main/kotlin/app/ui/UncommitedChanges.kt | 19 +--- src/main/kotlin/app/ui/log/Log.kt | 96 +++++++++++-------- 7 files changed, 93 insertions(+), 71 deletions(-) create mode 100644 src/main/kotlin/app/extensions/ModifierExtensions.kt diff --git a/build.gradle.kts b/build.gradle.kts index 4ca4045..0731f0d 100644 --- a/build.gradle.kts +++ b/build.gradle.kts @@ -49,7 +49,7 @@ tasks.test { tasks.withType() { kotlinOptions.jvmTarget = "17" kotlinOptions.allWarningsAsErrors = true - kotlinOptions.freeCompilerArgs += "-Xopt-in=kotlin.RequiresOptIn" + kotlinOptions.freeCompilerArgs += "-opt-in=kotlin.RequiresOptIn" } diff --git a/src/main/kotlin/app/extensions/ModifierExtensions.kt b/src/main/kotlin/app/extensions/ModifierExtensions.kt new file mode 100644 index 0000000..fa1f812 --- /dev/null +++ b/src/main/kotlin/app/extensions/ModifierExtensions.kt @@ -0,0 +1,13 @@ +package app.extensions + +import androidx.compose.foundation.background +import androidx.compose.ui.Modifier +import androidx.compose.ui.graphics.Color + +fun Modifier.backgroundIf(condition: Boolean, color: Color): Modifier { + return if (condition) { + this.background(color) + } else { + this + } +} \ No newline at end of file diff --git a/src/main/kotlin/app/theme/Color.kt b/src/main/kotlin/app/theme/Color.kt index 086fb13..7e564cf 100644 --- a/src/main/kotlin/app/theme/Color.kt +++ b/src/main/kotlin/app/theme/Color.kt @@ -6,7 +6,8 @@ val primaryLight = Color(0xFF9FD1FF) val primary = Color(0xFF0070D8) val primaryDark = Color(0xFF014F97) val onPrimary = Color(0xFFFFFFFFF) -val secondary = Color(0xFFe9c754) +val secondaryLight = Color(0xFF9c27b0) +val secondaryDark = Color(0xFFe9c754) val mainText = Color(0xFF212934) val mainTextDark = Color(0xFFFFFFFF) val secondaryText = Color(0xFF595858) @@ -17,7 +18,9 @@ val errorColor = Color(0xFFc93838) val onErrorColor = Color(0xFFFFFFFF) val backgroundColorLight = Color(0xFFFFFFFF) +val backgroundColorSelectedLight = Color(0xFFcee1f2) val backgroundColorDark = Color(0xFF0E1621) +val backgroundColorSelectedDark = Color(0xFF2f3640) val surfaceColorLight = Color(0xFFe9ecf7) val surfaceColorDark = Color(0xFF182533) val headerBackgroundLight = Color(0xFFF4F6FA) diff --git a/src/main/kotlin/app/theme/Theme.kt b/src/main/kotlin/app/theme/Theme.kt index c9d6645..5390dea 100644 --- a/src/main/kotlin/app/theme/Theme.kt +++ b/src/main/kotlin/app/theme/Theme.kt @@ -11,7 +11,7 @@ import app.DropDownOption private val DarkColorPalette = darkColors( primary = primaryLight, primaryVariant = primaryDark, - secondary = secondary, + secondary = secondaryDark, surface = surfaceColorDark, background = backgroundColorDark, error = errorColor, @@ -22,7 +22,7 @@ private val DarkColorPalette = darkColors( private val LightColorPalette = lightColors( primary = primary, primaryVariant = primaryDark, - secondary = secondary, + secondary = secondaryLight, background = backgroundColorLight, surface = surfaceColorLight, error = errorColor, @@ -43,6 +43,10 @@ fun AppTheme(theme: Themes = Themes.LIGHT, content: @Composable() () -> Unit) { ) } +@get:Composable +val Colors.backgroundSelected: Color + get() = if (isLight) backgroundColorSelectedLight else backgroundColorSelectedDark + @get:Composable val Colors.primaryTextColor: Color get() = if (isLight) mainText else mainTextDark diff --git a/src/main/kotlin/app/ui/CommitChanges.kt b/src/main/kotlin/app/ui/CommitChanges.kt index 3f2d657..0b0edec 100644 --- a/src/main/kotlin/app/ui/CommitChanges.kt +++ b/src/main/kotlin/app/ui/CommitChanges.kt @@ -194,24 +194,17 @@ fun CommitLogChanges( .fillMaxSize() ) { items(items = diffEntries) { diffEntry -> - val textColor: Color - val secondaryTextColor: Color - - if (diffSelected is DiffEntryType.CommitDiff && diffSelected.diffEntry == diffEntry) { - textColor = MaterialTheme.colors.primary - secondaryTextColor = MaterialTheme.colors.halfPrimary - } else { - textColor = MaterialTheme.colors.primaryTextColor - secondaryTextColor = MaterialTheme.colors.secondaryTextColor - } - Column( modifier = Modifier .height(40.dp) .fillMaxWidth() .clickable { onDiffSelected(diffEntry) - }, + } + .backgroundIf( + condition = diffSelected is DiffEntryType.CommitDiff && diffSelected.diffEntry == diffEntry, + color = MaterialTheme.colors.backgroundSelected, + ), verticalArrangement = Arrangement.Center, ) { Spacer(modifier = Modifier.weight(2f)) @@ -235,7 +228,7 @@ fun CommitLogChanges( softWrap = false, fontSize = 13.sp, overflow = TextOverflow.Ellipsis, - color = secondaryTextColor, + color = MaterialTheme.colors.secondaryTextColor, ) } Text( @@ -244,7 +237,7 @@ fun CommitLogChanges( maxLines = 1, softWrap = false, fontSize = 13.sp, - color = textColor, + color = MaterialTheme.colors.primaryTextColor, ) } diff --git a/src/main/kotlin/app/ui/UncommitedChanges.kt b/src/main/kotlin/app/ui/UncommitedChanges.kt index 9965da5..d0af3cd 100644 --- a/src/main/kotlin/app/ui/UncommitedChanges.kt +++ b/src/main/kotlin/app/ui/UncommitedChanges.kt @@ -31,6 +31,7 @@ import androidx.compose.ui.text.style.TextAlign import androidx.compose.ui.text.style.TextOverflow import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.sp +import app.extensions.backgroundIf import app.extensions.fileName import app.extensions.isMerging import app.extensions.parentDirectoryPath @@ -467,17 +468,6 @@ private fun FileEntry( ) { var active by remember { mutableStateOf(false) } - val textColor: Color - val secondaryTextColor: Color - - if (isSelected) { - textColor = MaterialTheme.colors.primary - secondaryTextColor = MaterialTheme.colors.halfPrimary - } else { - textColor = MaterialTheme.colors.primaryTextColor - secondaryTextColor = MaterialTheme.colors.secondaryTextColor - } - Box( modifier = Modifier .clickable { onClick() } @@ -501,7 +491,8 @@ private fun FileEntry( Row( modifier = Modifier .height(40.dp) - .fillMaxWidth(), + .fillMaxWidth() + .backgroundIf(isSelected, MaterialTheme.colors.backgroundSelected), verticalAlignment = Alignment.CenterVertically, ) { @@ -522,7 +513,7 @@ private fun FileEntry( softWrap = false, fontSize = 13.sp, overflow = TextOverflow.Ellipsis, - color = secondaryTextColor, + color = MaterialTheme.colors.secondaryTextColor, ) } Text( @@ -531,7 +522,7 @@ private fun FileEntry( maxLines = 1, softWrap = false, fontSize = 13.sp, - color = textColor, + color = MaterialTheme.colors.primaryTextColor, ) } } diff --git a/src/main/kotlin/app/ui/log/Log.kt b/src/main/kotlin/app/ui/log/Log.kt index 9d2f9d7..67f6d68 100644 --- a/src/main/kotlin/app/ui/log/Log.kt +++ b/src/main/kotlin/app/ui/log/Log.kt @@ -51,11 +51,11 @@ import app.ui.dialogs.* import app.viewmodels.LogSearch import app.viewmodels.LogStatus import app.viewmodels.LogViewModel -import kotlinx.coroutines.flow.collect import kotlinx.coroutines.launch import org.eclipse.jgit.lib.Ref import org.eclipse.jgit.lib.RepositoryState import org.eclipse.jgit.revwalk.RevCommit +import kotlinx.coroutines.flow.collect private val colors = listOf( Color(0xFF42a5f5), @@ -148,6 +148,8 @@ fun Log( Box { GraphList( commitList = commitList, + selectedCommit = selectedCommit, + selectedItem = selectedItem, stateHorizontal = horizontalScrollState, graphWidth = graphWidth, scrollState = verticalScrollState, @@ -325,7 +327,7 @@ fun MessagesList( ) { if (hasUncommitedChanges) item { UncommitedChangesLine(graphWidth = graphWidth, - selected = selectedItem == SelectedItem.UncommitedChanges, + isSelected = selectedItem == SelectedItem.UncommitedChanges, statusSummary = logStatus.statusSummary, repositoryState = repositoryState, onUncommitedChangesSelected = { @@ -337,7 +339,7 @@ fun MessagesList( graphWidth = graphWidth, logViewModel = logViewModel, graphNode = graphNode, - selected = selectedCommit?.name == graphNode.name, + isSelected = selectedCommit?.name == graphNode.name, currentBranch = logStatus.currentBranch, matchesSearchFilter = searchFilter?.contains(graphNode), showCreateNewBranch = { onShowLogDialog(LogDialog.NewBranch(graphNode)) }, @@ -363,20 +365,33 @@ fun GraphList( graphWidth: Dp, scrollState: LazyListState, hasUncommitedChanges: Boolean, + selectedCommit: RevCommit?, + selectedItem: SelectedItem, ) { val maxLinePosition = if (commitList.isNotEmpty()) commitList.maxLine else MIN_GRAPH_LANES - val graphRealWidth = ((maxLinePosition + MARGIN_GRAPH_LANES) * LANE_WIDTH).dp + var graphRealWidth = ((maxLinePosition + MARGIN_GRAPH_LANES) * LANE_WIDTH).dp + + // Using remember(graphRealWidth, graphWidth) makes the selected background color glitch when changing tabs + if (graphRealWidth < graphWidth) { + graphRealWidth = graphWidth + } + Box( - Modifier.width(graphWidth).fillMaxHeight() + Modifier + .width(graphWidth) + .fillMaxHeight() ) { Box( - modifier = Modifier.fillMaxSize().horizontalScroll(stateHorizontal).padding(bottom = 8.dp) + modifier = Modifier + .fillMaxSize() + .horizontalScroll(stateHorizontal) + .padding(bottom = 8.dp) ) { LazyColumn( state = scrollState, modifier = Modifier.width(graphRealWidth) @@ -387,8 +402,9 @@ fun GraphList( modifier = Modifier.height(40.dp).fillMaxWidth(), ) { UncommitedChangesGraphNode( - modifier = Modifier.width(graphWidth), + modifier = Modifier.fillMaxSize(), hasPreviousCommits = commitList.isNotEmpty(), + isSelected = selectedItem is SelectedItem.UncommitedChanges, ) } } @@ -396,13 +412,17 @@ fun GraphList( items(items = commitList) { graphNode -> val nodeColor = colors[graphNode.lane.position % colors.size] + Row( - modifier = Modifier.height(40.dp).fillMaxWidth(), + modifier = Modifier + .height(40.dp) + .fillMaxWidth(), ) { CommitsGraphLine( - modifier = Modifier.fillMaxHeight(), + modifier = Modifier.fillMaxSize(), plotCommit = graphNode, nodeColor = nodeColor, + isSelected = selectedCommit?.name == graphNode.name, ) } } @@ -526,22 +546,20 @@ fun GraphHeader( @Composable fun UncommitedChangesLine( graphWidth: Dp, - selected: Boolean, + isSelected: Boolean, repositoryState: RepositoryState, statusSummary: StatusSummary, onUncommitedChangesSelected: () -> Unit, ) { - val textColor = if (selected) { - MaterialTheme.colors.primary - } else MaterialTheme.colors.primaryTextColor - Row( - modifier = Modifier.height(40.dp).fillMaxWidth().clickable { - onUncommitedChangesSelected() - }.padding( - start = graphWidth + DIVIDER_WIDTH.dp, - end = 4.dp, - ), + modifier = Modifier.height(40.dp) + .fillMaxWidth() + .clickable { onUncommitedChangesSelected() } + .padding( + start = graphWidth + DIVIDER_WIDTH.dp, + end = 4.dp, + ) + .backgroundIf(isSelected, MaterialTheme.colors.backgroundSelected), verticalAlignment = Alignment.CenterVertically, ) { val text = when { @@ -556,7 +574,7 @@ fun UncommitedChangesLine( modifier = Modifier.padding(start = 16.dp), fontSize = 14.sp, maxLines = 1, - color = textColor, + color = MaterialTheme.colors.primaryTextColor, ) Spacer(modifier = Modifier.weight(1f)) @@ -633,7 +651,7 @@ fun CommitLine( graphWidth: Dp, logViewModel: LogViewModel, graphNode: GraphNode, - selected: Boolean, + isSelected: Boolean, currentBranch: Ref?, matchesSearchFilter: Boolean?, showCreateNewBranch: () -> Unit, @@ -658,10 +676,12 @@ fun CommitLine( }, ) { Box( - modifier = Modifier.clickable { - onRevCommitSelected() - }.padding(start = graphWidth) + modifier = Modifier + .clickable { onRevCommitSelected() } + .padding(start = graphWidth) .height(40.dp) + .backgroundIf(isSelected, MaterialTheme.colors.backgroundSelected) + ) { if (matchesSearchFilter == true) { @@ -682,7 +702,6 @@ fun CommitLine( val nodeColor = colors[graphNode.lane.position % colors.size] CommitMessage( commit = graphNode, - selected = selected, refs = graphNode.refs, nodeColor = nodeColor, matchesSearchFilter = matchesSearchFilter, @@ -703,7 +722,6 @@ fun CommitLine( @Composable fun CommitMessage( commit: RevCommit, - selected: Boolean, refs: List, currentBranch: Ref?, nodeColor: Color, @@ -716,14 +734,6 @@ fun CommitMessage( onPushRemoteBranch: (ref: Ref) -> Unit, onPullRemoteBranch: (ref: Ref) -> Unit, ) { - val textColor = if (selected) { - MaterialTheme.colors.primary - } else MaterialTheme.colors.primaryTextColor - - val secondaryTextColor = if (selected) { - MaterialTheme.colors.primary - } else MaterialTheme.colors.secondaryTextColor - Row( modifier = Modifier.fillMaxSize(), verticalAlignment = Alignment.CenterVertically, @@ -767,7 +777,7 @@ fun CommitMessage( .padding(start = 8.dp) .weight(1f), fontSize = 14.sp, - color = if (matchesSearchFilter == false) secondaryTextColor else textColor, + color = if (matchesSearchFilter == false) MaterialTheme.colors.secondaryTextColor else MaterialTheme.colors.primaryTextColor, maxLines = 1, overflow = TextOverflow.Ellipsis, ) @@ -776,7 +786,7 @@ fun CommitMessage( text = commit.committerIdent.`when`.toSmartSystemString(), modifier = Modifier.padding(horizontal = 16.dp), fontSize = 12.sp, - color = secondaryTextColor, + color = MaterialTheme.colors.secondaryTextColor, maxLines = 1, overflow = TextOverflow.Ellipsis, ) @@ -812,12 +822,16 @@ fun CommitsGraphLine( modifier: Modifier = Modifier, plotCommit: GraphNode, nodeColor: Color, + isSelected: Boolean, ) { val passingLanes = plotCommit.passingLanes val forkingOffLanes = plotCommit.forkingOffLanes val mergingLanes = plotCommit.mergingLanes - Box(modifier = modifier) { + Box( + modifier = modifier + .backgroundIf(isSelected, MaterialTheme.colors.backgroundSelected) + ) { val itemPosition = plotCommit.lane.position Canvas( @@ -895,8 +909,12 @@ fun CommitNode( fun UncommitedChangesGraphNode( modifier: Modifier = Modifier, hasPreviousCommits: Boolean, + isSelected: Boolean, ) { - Box(modifier = modifier) { + Box( + modifier = modifier + .backgroundIf(isSelected, MaterialTheme.colors.backgroundSelected) + ) { Canvas( modifier = Modifier.fillMaxSize() ) {