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

Changed item selection design

Browse Source
This commit is contained in:
Abdelilah El Aissaoui 2022-05-09 22:02:24 +02:00
parent 69bbfff357
commit 2263785723
7 changed files with 93 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
build.gradle.kts
View File

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

13
src/main/kotlin/app/extensions/ModifierExtensions.kt Normal file
View File

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

5
src/main/kotlin/app/theme/Color.kt
View File

@ -6,7 +6,8 @@ val primaryLight = Color(0xFF9FD1FF)
val primary = Color(0xFF0070D8) val primary = Color(0xFF0070D8)
val primaryDark = Color(0xFF014F97) val primaryDark = Color(0xFF014F97)
val onPrimary = Color(0xFFFFFFFFF) val onPrimary = Color(0xFFFFFFFFF)
val secondary = Color(0xFFe9c754) val secondaryLight = Color(0xFF9c27b0)
val secondaryDark = Color(0xFFe9c754)
val mainText = Color(0xFF212934) val mainText = Color(0xFF212934)
val mainTextDark = Color(0xFFFFFFFF) val mainTextDark = Color(0xFFFFFFFF)
val secondaryText = Color(0xFF595858) val secondaryText = Color(0xFF595858)
@ -17,7 +18,9 @@ val errorColor = Color(0xFFc93838)
val onErrorColor = Color(0xFFFFFFFF) val onErrorColor = Color(0xFFFFFFFF)
val backgroundColorLight = Color(0xFFFFFFFF) val backgroundColorLight = Color(0xFFFFFFFF)
val backgroundColorSelectedLight = Color(0xFFcee1f2)
val backgroundColorDark = Color(0xFF0E1621) val backgroundColorDark = Color(0xFF0E1621)
val backgroundColorSelectedDark = Color(0xFF2f3640)
val surfaceColorLight = Color(0xFFe9ecf7) val surfaceColorLight = Color(0xFFe9ecf7)
val surfaceColorDark = Color(0xFF182533) val surfaceColorDark = Color(0xFF182533)
val headerBackgroundLight = Color(0xFFF4F6FA) val headerBackgroundLight = Color(0xFFF4F6FA)

8
src/main/kotlin/app/theme/Theme.kt
View File

@ -11,7 +11,7 @@ import app.DropDownOption
private val DarkColorPalette = darkColors( private val DarkColorPalette = darkColors(
primary = primaryLight, primary = primaryLight,
primaryVariant = primaryDark, primaryVariant = primaryDark,
secondary = secondary, secondary = secondaryDark,
surface = surfaceColorDark, surface = surfaceColorDark,
background = backgroundColorDark, background = backgroundColorDark,
error = errorColor, error = errorColor,
@ -22,7 +22,7 @@ private val DarkColorPalette = darkColors(
private val LightColorPalette = lightColors( private val LightColorPalette = lightColors(
primary = primary, primary = primary,
primaryVariant = primaryDark, primaryVariant = primaryDark,
secondary = secondary, secondary = secondaryLight,
background = backgroundColorLight, background = backgroundColorLight,
surface = surfaceColorLight, surface = surfaceColorLight,
error = errorColor, 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 @get:Composable
val Colors.primaryTextColor: Color val Colors.primaryTextColor: Color
get() = if (isLight) mainText else mainTextDark get() = if (isLight) mainText else mainTextDark

21
src/main/kotlin/app/ui/CommitChanges.kt
View File

@ -194,24 +194,17 @@ fun CommitLogChanges(
.fillMaxSize() .fillMaxSize()
) { ) {
items(items = diffEntries) { diffEntry -> 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( Column(
modifier = Modifier modifier = Modifier
.height(40.dp) .height(40.dp)
.fillMaxWidth() .fillMaxWidth()
.clickable { .clickable {
onDiffSelected(diffEntry) onDiffSelected(diffEntry)
}, }
.backgroundIf(
condition = diffSelected is DiffEntryType.CommitDiff && diffSelected.diffEntry == diffEntry,
color = MaterialTheme.colors.backgroundSelected,
),
verticalArrangement = Arrangement.Center, verticalArrangement = Arrangement.Center,
) { ) {
Spacer(modifier = Modifier.weight(2f)) Spacer(modifier = Modifier.weight(2f))
@ -235,7 +228,7 @@ fun CommitLogChanges(
softWrap = false, softWrap = false,
fontSize = 13.sp, fontSize = 13.sp,
overflow = TextOverflow.Ellipsis, overflow = TextOverflow.Ellipsis,
color = secondaryTextColor, color = MaterialTheme.colors.secondaryTextColor,
) )
} }
Text( Text(
@ -244,7 +237,7 @@ fun CommitLogChanges(
maxLines = 1, maxLines = 1,
softWrap = false, softWrap = false,
fontSize = 13.sp, fontSize = 13.sp,
color = textColor, color = MaterialTheme.colors.primaryTextColor,
) )
} }

19
src/main/kotlin/app/ui/UncommitedChanges.kt
View File

@ -31,6 +31,7 @@ import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.text.style.TextOverflow import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp import androidx.compose.ui.unit.sp
import app.extensions.backgroundIf
import app.extensions.fileName import app.extensions.fileName
import app.extensions.isMerging import app.extensions.isMerging
import app.extensions.parentDirectoryPath import app.extensions.parentDirectoryPath
@ -467,17 +468,6 @@ private fun FileEntry(
) { ) {
var active by remember { mutableStateOf(false) } 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( Box(
modifier = Modifier modifier = Modifier
.clickable { onClick() } .clickable { onClick() }
@ -501,7 +491,8 @@ private fun FileEntry(
Row( Row(
modifier = Modifier modifier = Modifier
.height(40.dp) .height(40.dp)
.fillMaxWidth(), .fillMaxWidth()
.backgroundIf(isSelected, MaterialTheme.colors.backgroundSelected),
verticalAlignment = Alignment.CenterVertically, verticalAlignment = Alignment.CenterVertically,
) { ) {
@ -522,7 +513,7 @@ private fun FileEntry(
softWrap = false, softWrap = false,
fontSize = 13.sp, fontSize = 13.sp,
overflow = TextOverflow.Ellipsis, overflow = TextOverflow.Ellipsis,
color = secondaryTextColor, color = MaterialTheme.colors.secondaryTextColor,
) )
} }
Text( Text(
@ -531,7 +522,7 @@ private fun FileEntry(
maxLines = 1, maxLines = 1,
softWrap = false, softWrap = false,
fontSize = 13.sp, fontSize = 13.sp,
color = textColor, color = MaterialTheme.colors.primaryTextColor,
) )
} }
} }

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

@ -51,11 +51,11 @@ import app.ui.dialogs.*
import app.viewmodels.LogSearch import app.viewmodels.LogSearch
import app.viewmodels.LogStatus import app.viewmodels.LogStatus
import app.viewmodels.LogViewModel import app.viewmodels.LogViewModel
import kotlinx.coroutines.flow.collect
import kotlinx.coroutines.launch import kotlinx.coroutines.launch
import org.eclipse.jgit.lib.Ref import org.eclipse.jgit.lib.Ref
import org.eclipse.jgit.lib.RepositoryState import org.eclipse.jgit.lib.RepositoryState
import org.eclipse.jgit.revwalk.RevCommit import org.eclipse.jgit.revwalk.RevCommit
import kotlinx.coroutines.flow.collect
private val colors = listOf( private val colors = listOf(
Color(0xFF42a5f5), Color(0xFF42a5f5),
@ -148,6 +148,8 @@ fun Log(
Box { Box {
GraphList( GraphList(
commitList = commitList, commitList = commitList,
selectedCommit = selectedCommit,
selectedItem = selectedItem,
stateHorizontal = horizontalScrollState, stateHorizontal = horizontalScrollState,
graphWidth = graphWidth, graphWidth = graphWidth,
scrollState = verticalScrollState, scrollState = verticalScrollState,
@ -325,7 +327,7 @@ fun MessagesList(
) { ) {
if (hasUncommitedChanges) item { if (hasUncommitedChanges) item {
UncommitedChangesLine(graphWidth = graphWidth, UncommitedChangesLine(graphWidth = graphWidth,
selected = selectedItem == SelectedItem.UncommitedChanges, isSelected = selectedItem == SelectedItem.UncommitedChanges,
statusSummary = logStatus.statusSummary, statusSummary = logStatus.statusSummary,
repositoryState = repositoryState, repositoryState = repositoryState,
onUncommitedChangesSelected = { onUncommitedChangesSelected = {
@ -337,7 +339,7 @@ fun MessagesList(
graphWidth = graphWidth, graphWidth = graphWidth,
logViewModel = logViewModel, logViewModel = logViewModel,
graphNode = graphNode, graphNode = graphNode,
selected = selectedCommit?.name == graphNode.name, isSelected = selectedCommit?.name == graphNode.name,
currentBranch = logStatus.currentBranch, currentBranch = logStatus.currentBranch,
matchesSearchFilter = searchFilter?.contains(graphNode), matchesSearchFilter = searchFilter?.contains(graphNode),
showCreateNewBranch = { onShowLogDialog(LogDialog.NewBranch(graphNode)) }, showCreateNewBranch = { onShowLogDialog(LogDialog.NewBranch(graphNode)) },
@ -363,20 +365,33 @@ fun GraphList(
graphWidth: Dp, graphWidth: Dp,
scrollState: LazyListState, scrollState: LazyListState,
hasUncommitedChanges: Boolean, hasUncommitedChanges: Boolean,
selectedCommit: RevCommit?,
selectedItem: SelectedItem,
) { ) {
val maxLinePosition = if (commitList.isNotEmpty()) val maxLinePosition = if (commitList.isNotEmpty())
commitList.maxLine commitList.maxLine
else else
MIN_GRAPH_LANES 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( Box(
Modifier.width(graphWidth).fillMaxHeight() Modifier
.width(graphWidth)
.fillMaxHeight()
) { ) {
Box( Box(
modifier = Modifier.fillMaxSize().horizontalScroll(stateHorizontal).padding(bottom = 8.dp) modifier = Modifier
.fillMaxSize()
.horizontalScroll(stateHorizontal)
.padding(bottom = 8.dp)
) { ) {
LazyColumn( LazyColumn(
state = scrollState, modifier = Modifier.width(graphRealWidth) state = scrollState, modifier = Modifier.width(graphRealWidth)
@ -387,8 +402,9 @@ fun GraphList(
modifier = Modifier.height(40.dp).fillMaxWidth(), modifier = Modifier.height(40.dp).fillMaxWidth(),
) { ) {
UncommitedChangesGraphNode( UncommitedChangesGraphNode(
modifier = Modifier.width(graphWidth), modifier = Modifier.fillMaxSize(),
hasPreviousCommits = commitList.isNotEmpty(), hasPreviousCommits = commitList.isNotEmpty(),
isSelected = selectedItem is SelectedItem.UncommitedChanges,
) )
} }
} }
@ -396,13 +412,17 @@ fun GraphList(
items(items = commitList) { graphNode -> items(items = commitList) { graphNode ->
val nodeColor = colors[graphNode.lane.position % colors.size] val nodeColor = colors[graphNode.lane.position % colors.size]
Row( Row(
modifier = Modifier.height(40.dp).fillMaxWidth(), modifier = Modifier
.height(40.dp)
.fillMaxWidth(),
) { ) {
CommitsGraphLine( CommitsGraphLine(
modifier = Modifier.fillMaxHeight(), modifier = Modifier.fillMaxSize(),
plotCommit = graphNode, plotCommit = graphNode,
nodeColor = nodeColor, nodeColor = nodeColor,
isSelected = selectedCommit?.name == graphNode.name,
) )
} }
} }
@ -526,22 +546,20 @@ fun GraphHeader(
@Composable @Composable
fun UncommitedChangesLine( fun UncommitedChangesLine(
graphWidth: Dp, graphWidth: Dp,
selected: Boolean, isSelected: Boolean,
repositoryState: RepositoryState, repositoryState: RepositoryState,
statusSummary: StatusSummary, statusSummary: StatusSummary,
onUncommitedChangesSelected: () -> Unit, onUncommitedChangesSelected: () -> Unit,
) { ) {
val textColor = if (selected) {
MaterialTheme.colors.primary
} else MaterialTheme.colors.primaryTextColor
Row( Row(
modifier = Modifier.height(40.dp).fillMaxWidth().clickable { modifier = Modifier.height(40.dp)
onUncommitedChangesSelected() .fillMaxWidth()
}.padding( .clickable { onUncommitedChangesSelected() }
start = graphWidth + DIVIDER_WIDTH.dp, .padding(
end = 4.dp, start = graphWidth + DIVIDER_WIDTH.dp,
), end = 4.dp,
)
.backgroundIf(isSelected, MaterialTheme.colors.backgroundSelected),
verticalAlignment = Alignment.CenterVertically, verticalAlignment = Alignment.CenterVertically,
) { ) {
val text = when { val text = when {
@ -556,7 +574,7 @@ fun UncommitedChangesLine(
modifier = Modifier.padding(start = 16.dp), modifier = Modifier.padding(start = 16.dp),
fontSize = 14.sp, fontSize = 14.sp,
maxLines = 1, maxLines = 1,
color = textColor, color = MaterialTheme.colors.primaryTextColor,
) )
Spacer(modifier = Modifier.weight(1f)) Spacer(modifier = Modifier.weight(1f))
@ -633,7 +651,7 @@ fun CommitLine(
graphWidth: Dp, graphWidth: Dp,
logViewModel: LogViewModel, logViewModel: LogViewModel,
graphNode: GraphNode, graphNode: GraphNode,
selected: Boolean, isSelected: Boolean,
currentBranch: Ref?, currentBranch: Ref?,
matchesSearchFilter: Boolean?, matchesSearchFilter: Boolean?,
showCreateNewBranch: () -> Unit, showCreateNewBranch: () -> Unit,
@ -658,10 +676,12 @@ fun CommitLine(
}, },
) { ) {
Box( Box(
modifier = Modifier.clickable { modifier = Modifier
onRevCommitSelected() .clickable { onRevCommitSelected() }
}.padding(start = graphWidth) .padding(start = graphWidth)
.height(40.dp) .height(40.dp)
.backgroundIf(isSelected, MaterialTheme.colors.backgroundSelected)
) { ) {
if (matchesSearchFilter == true) { if (matchesSearchFilter == true) {
@ -682,7 +702,6 @@ fun CommitLine(
val nodeColor = colors[graphNode.lane.position % colors.size] val nodeColor = colors[graphNode.lane.position % colors.size]
CommitMessage( CommitMessage(
commit = graphNode, commit = graphNode,
selected = selected,
refs = graphNode.refs, refs = graphNode.refs,
nodeColor = nodeColor, nodeColor = nodeColor,
matchesSearchFilter = matchesSearchFilter, matchesSearchFilter = matchesSearchFilter,
@ -703,7 +722,6 @@ fun CommitLine(
@Composable @Composable
fun CommitMessage( fun CommitMessage(
commit: RevCommit, commit: RevCommit,
selected: Boolean,
refs: List<Ref>, refs: List<Ref>,
currentBranch: Ref?, currentBranch: Ref?,
nodeColor: Color, nodeColor: Color,
@ -716,14 +734,6 @@ fun CommitMessage(
onPushRemoteBranch: (ref: Ref) -> Unit, onPushRemoteBranch: (ref: Ref) -> Unit,
onPullRemoteBranch: (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( Row(
modifier = Modifier.fillMaxSize(), modifier = Modifier.fillMaxSize(),
verticalAlignment = Alignment.CenterVertically, verticalAlignment = Alignment.CenterVertically,
@ -767,7 +777,7 @@ fun CommitMessage(
.padding(start = 8.dp) .padding(start = 8.dp)
.weight(1f), .weight(1f),
fontSize = 14.sp, fontSize = 14.sp,
color = if (matchesSearchFilter == false) secondaryTextColor else textColor, color = if (matchesSearchFilter == false) MaterialTheme.colors.secondaryTextColor else MaterialTheme.colors.primaryTextColor,
maxLines = 1, maxLines = 1,
overflow = TextOverflow.Ellipsis, overflow = TextOverflow.Ellipsis,
) )
@ -776,7 +786,7 @@ fun CommitMessage(
text = commit.committerIdent.`when`.toSmartSystemString(), text = commit.committerIdent.`when`.toSmartSystemString(),
modifier = Modifier.padding(horizontal = 16.dp), modifier = Modifier.padding(horizontal = 16.dp),
fontSize = 12.sp, fontSize = 12.sp,
color = secondaryTextColor, color = MaterialTheme.colors.secondaryTextColor,
maxLines = 1, maxLines = 1,
overflow = TextOverflow.Ellipsis, overflow = TextOverflow.Ellipsis,
) )
@ -812,12 +822,16 @@ fun CommitsGraphLine(
modifier: Modifier = Modifier, modifier: Modifier = Modifier,
plotCommit: GraphNode, plotCommit: GraphNode,
nodeColor: Color, nodeColor: Color,
isSelected: Boolean,
) { ) {
val passingLanes = plotCommit.passingLanes val passingLanes = plotCommit.passingLanes
val forkingOffLanes = plotCommit.forkingOffLanes val forkingOffLanes = plotCommit.forkingOffLanes
val mergingLanes = plotCommit.mergingLanes val mergingLanes = plotCommit.mergingLanes
Box(modifier = modifier) { Box(
modifier = modifier
.backgroundIf(isSelected, MaterialTheme.colors.backgroundSelected)
) {
val itemPosition = plotCommit.lane.position val itemPosition = plotCommit.lane.position
Canvas( Canvas(
@ -895,8 +909,12 @@ fun CommitNode(
fun UncommitedChangesGraphNode( fun UncommitedChangesGraphNode(
modifier: Modifier = Modifier, modifier: Modifier = Modifier,
hasPreviousCommits: Boolean, hasPreviousCommits: Boolean,
isSelected: Boolean,
) { ) {
Box(modifier = modifier) { Box(
modifier = modifier
.backgroundIf(isSelected, MaterialTheme.colors.backgroundSelected)
) {
Canvas( Canvas(
modifier = Modifier.fillMaxSize() modifier = Modifier.fillMaxSize()
) { ) {