From 9ea8d0c99abffff335df0984017c3ce8773d6eca Mon Sep 17 00:00:00 2001 From: Abdelilah El Aissaoui Date: Mon, 6 Jun 2022 02:44:18 +0200 Subject: [PATCH] Added new UI design --- src/main/kotlin/app/theme/Color.kt | 2 +- src/main/kotlin/app/ui/CommitChanges.kt | 4 +- src/main/kotlin/app/ui/Diff.kt | 5 ++- src/main/kotlin/app/ui/RepositoryOpen.kt | 45 +++++++++++++++---- src/main/kotlin/app/ui/UncommitedChanges.kt | 6 +-- .../app/ui/components/ScrollableLazyColumn.kt | 2 +- src/main/kotlin/app/ui/log/Log.kt | 17 ++++--- 7 files changed, 58 insertions(+), 23 deletions(-) diff --git a/src/main/kotlin/app/theme/Color.kt b/src/main/kotlin/app/theme/Color.kt index ec5a3f5..6cee88f 100644 --- a/src/main/kotlin/app/theme/Color.kt +++ b/src/main/kotlin/app/theme/Color.kt @@ -39,7 +39,7 @@ val darkBlueTheme = ColorsScheme( background = Color(0xFF0E1621), backgroundSelected = Color(0xFF2f3640), surface = Color(0xFF182533), - headerBackground = Color(0xFF0a2b4a), + headerBackground = Color(0xFF0a335c), borderColor = Color(0xFF989898), graphHeaderBackground = Color(0xFF303132), addFile = Color(0xFF32A852), diff --git a/src/main/kotlin/app/ui/CommitChanges.kt b/src/main/kotlin/app/ui/CommitChanges.kt index 29fbf8b..a542a38 100644 --- a/src/main/kotlin/app/ui/CommitChanges.kt +++ b/src/main/kotlin/app/ui/CommitChanges.kt @@ -75,7 +75,7 @@ fun CommitChangesView( Column( modifier = Modifier .fillMaxWidth() - .padding(horizontal = 8.dp), + .padding(end = 8.dp), ) { SelectionContainer { Text( @@ -100,7 +100,7 @@ fun CommitChangesView( modifier = Modifier .fillMaxWidth() .weight(1f, fill = true) - .padding(horizontal = 8.dp, vertical = 8.dp) + .padding(end = 8.dp, top = 8.dp, bottom = 8.dp) .background(MaterialTheme.colors.background) ) { Text( diff --git a/src/main/kotlin/app/ui/Diff.kt b/src/main/kotlin/app/ui/Diff.kt index 36fbb1e..dae860d 100644 --- a/src/main/kotlin/app/ui/Diff.kt +++ b/src/main/kotlin/app/ui/Diff.kt @@ -38,6 +38,7 @@ import app.git.diff.DiffResult import app.git.diff.Hunk import app.git.diff.Line import app.git.diff.LineType +import app.theme.headerBackground import app.theme.primaryTextColor import app.theme.stageButton import app.theme.unstageButton @@ -304,8 +305,8 @@ fun DiffHeader( modifier = Modifier .fillMaxWidth() .height(50.dp) - .background(MaterialTheme.colors.surface) - .padding(start = 8.dp, end = 8.dp, top = 8.dp), + .background(MaterialTheme.colors.headerBackground) + .padding(start = 8.dp, end = 8.dp), verticalAlignment = Alignment.CenterVertically, ) { val filePath = if (diffEntry.newPath != "/dev/null") diff --git a/src/main/kotlin/app/ui/RepositoryOpen.kt b/src/main/kotlin/app/ui/RepositoryOpen.kt index 7b4279f..9be8a8e 100644 --- a/src/main/kotlin/app/ui/RepositoryOpen.kt +++ b/src/main/kotlin/app/ui/RepositoryOpen.kt @@ -2,6 +2,7 @@ package app.ui +import androidx.compose.foundation.background import androidx.compose.foundation.border import androidx.compose.foundation.layout.* import androidx.compose.foundation.shape.RoundedCornerShape @@ -9,6 +10,10 @@ import androidx.compose.material.MaterialTheme import androidx.compose.material.Text import androidx.compose.runtime.* import androidx.compose.ui.Modifier +import androidx.compose.ui.graphics.Color +import androidx.compose.ui.graphics.SolidColor +import androidx.compose.ui.input.pointer.PointerIcon +import androidx.compose.ui.input.pointer.pointerHoverIcon import androidx.compose.ui.unit.dp import app.git.DiffEntryType import app.theme.borderColor @@ -23,7 +28,9 @@ import org.eclipse.jgit.lib.RepositoryState import org.eclipse.jgit.revwalk.RevCommit import org.jetbrains.compose.splitpane.ExperimentalSplitPaneApi import org.jetbrains.compose.splitpane.HorizontalSplitPane +import org.jetbrains.compose.splitpane.SplitterScope import org.jetbrains.compose.splitpane.rememberSplitPaneState +import java.awt.Cursor @OptIn(androidx.compose.ui.ExperimentalComposeUiApi::class) @@ -117,11 +124,9 @@ fun MainContentView( ) { Row { HorizontalSplitPane { - first(minSize = 200.dp) { + first(minSize = 250.dp) { Column( modifier = Modifier - .widthIn(min = 300.dp) - .weight(0.15f) .fillMaxHeight() ) { Branches( @@ -139,6 +144,10 @@ fun MainContentView( } } + splitter { + this.repositorySplitter() + } + second { HorizontalSplitPane( splitPaneState = rememberSplitPaneState(0.9f) @@ -147,11 +156,6 @@ fun MainContentView( Box( modifier = Modifier .fillMaxSize() - .border( - width = 2.dp, - color = MaterialTheme.colors.borderColor, - shape = RoundedCornerShape(4.dp) - ) ) { if (blameState is BlameState.Loaded && !blameState.isMinimized) { Blame( @@ -191,6 +195,10 @@ fun MainContentView( } } + splitter { + this.repositorySplitter() + } + second(minSize = 300.dp) { Box( modifier = Modifier @@ -246,6 +254,27 @@ fun MainContentView( } } +fun SplitterScope.repositorySplitter() { + visiblePart { + Box( + Modifier + .width(8.dp) + .fillMaxHeight() + .background(Color.Transparent) + ) + } + handle { + Box( + Modifier + .markAsHandle() + .pointerHoverIcon(PointerIcon(Cursor(Cursor.E_RESIZE_CURSOR))) + .background(Color.Transparent) + .width(8.dp) + .fillMaxHeight() + ) + } +} + sealed class SelectedItem { object None : SelectedItem() object UncommitedChanges : SelectedItem() diff --git a/src/main/kotlin/app/ui/UncommitedChanges.kt b/src/main/kotlin/app/ui/UncommitedChanges.kt index d39654e..1f96b25 100644 --- a/src/main/kotlin/app/ui/UncommitedChanges.kt +++ b/src/main/kotlin/app/ui/UncommitedChanges.kt @@ -94,7 +94,7 @@ fun UncommitedChanges( EntriesList( modifier = Modifier - .padding(start = 8.dp, end = 8.dp, bottom = 4.dp) + .padding(end = 8.dp, bottom = 4.dp) .weight(5f) .fillMaxWidth(), title = "Staged", @@ -123,7 +123,7 @@ fun UncommitedChanges( EntriesList( modifier = Modifier - .padding(start = 8.dp, end = 8.dp, top = 4.dp) + .padding(end = 8.dp, top = 8.dp) .weight(5f) .fillMaxWidth(), title = "Unstaged", @@ -155,7 +155,7 @@ fun UncommitedChanges( Column( modifier = Modifier - .padding(8.dp) + .padding(top = 8.dp, bottom = 8.dp, end = 8.dp) .run { // When rebasing, we don't need a fixed size as we don't show the message TextField if (!repositoryState.isRebasing) { diff --git a/src/main/kotlin/app/ui/components/ScrollableLazyColumn.kt b/src/main/kotlin/app/ui/components/ScrollableLazyColumn.kt index 4878656..ad630c9 100644 --- a/src/main/kotlin/app/ui/components/ScrollableLazyColumn.kt +++ b/src/main/kotlin/app/ui/components/ScrollableLazyColumn.kt @@ -35,7 +35,7 @@ fun ScrollableLazyColumn( modifier = Modifier .align(Alignment.CenterEnd) .fillMaxHeight() - .padding(end = 4.dp), + .padding(end = 2.dp), style = LocalScrollbarStyle.current.copy( unhoverColor = MaterialTheme.colors.scrollbarNormal, hoverColor = MaterialTheme.colors.scrollbarHover, diff --git a/src/main/kotlin/app/ui/log/Log.kt b/src/main/kotlin/app/ui/log/Log.kt index 9bbb628..2839fb3 100644 --- a/src/main/kotlin/app/ui/log/Log.kt +++ b/src/main/kotlin/app/ui/log/Log.kt @@ -229,8 +229,7 @@ fun SearchFilter( Row( modifier = Modifier .fillMaxWidth() - .height(64.dp) - .background(MaterialTheme.colors.graphHeaderBackground), + .height(64.dp), verticalAlignment = Alignment.CenterVertically, ) { TextField( @@ -530,11 +529,14 @@ fun GraphHeader( modifier = Modifier.fillMaxWidth() ) { Row( - modifier = Modifier.fillMaxWidth().height(48.dp).background(MaterialTheme.colors.graphHeaderBackground), + modifier = Modifier + .fillMaxWidth() + .height(40.dp) + .background(MaterialTheme.colors.headerBackground), verticalAlignment = Alignment.CenterVertically, ) { Text( - modifier = Modifier.width(graphWidth).padding(start = 8.dp), + modifier = Modifier.width(graphWidth).padding(start = 16.dp), text = "Graph", color = MaterialTheme.colors.headerText, fontSize = 14.sp, @@ -550,7 +552,9 @@ fun GraphHeader( ) Text( - modifier = Modifier.padding(start = 8.dp).weight(1f), + modifier = Modifier + .padding(start = 16.dp) + .weight(1f), text = "Message", color = MaterialTheme.colors.headerText, fontSize = 14.sp, @@ -586,7 +590,8 @@ fun UncommitedChangesLine( .fillMaxWidth() .clickable { onUncommitedChangesSelected() } .padding(start = graphWidth) - .backgroundIf(isSelected, MaterialTheme.colors.backgroundSelected), + .backgroundIf(isSelected, MaterialTheme.colors.backgroundSelected) + .padding(DIVIDER_WIDTH.dp), verticalAlignment = Alignment.CenterVertically, ) { val text = when {