Changed item selection design

build.gradle.kts

@@ -49,7 +49,7 @@ tasks.test {
 tasks.withType<KotlinCompile>() {
     kotlinOptions.jvmTarget = "17"
     kotlinOptions.allWarningsAsErrors = true
-    kotlinOptions.freeCompilerArgs += "-Xopt-in=kotlin.RequiresOptIn"
+    kotlinOptions.freeCompilerArgs += "-opt-in=kotlin.RequiresOptIn"
 }
 
 

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
+    }
+}

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)

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

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,
                     )
                 }
 

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,
                 )
             }
         }

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(
+        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<Ref>,
     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
+            .backgroundIf(isSelected, MaterialTheme.colors.backgroundSelected)
     ) {
-    Box(modifier = modifier) {
         Canvas(
             modifier = Modifier.fillMaxSize()
         ) {