Added new UI design

This commit is contained in:
Abdelilah El Aissaoui 2022-06-06 02:44:18 +02:00
parent c5f7ddf266
commit 9ea8d0c99a
7 changed files with 58 additions and 23 deletions

View File

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

View File

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

View File

@ -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")

View File

@ -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()

View File

@ -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) {

View File

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

View File

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