From 6ca1e15ce8e27d2f4044544a25c33217e57d9a1a Mon Sep 17 00:00:00 2001 From: Abdelilah El Aissaoui Date: Mon, 31 Jan 2022 15:15:05 +0100 Subject: [PATCH] UI improvements --- src/main/kotlin/app/theme/Color.kt | 4 ++-- src/main/kotlin/app/theme/Theme.kt | 9 +++++++++ src/main/kotlin/app/ui/CommitChanges.kt | 2 +- src/main/kotlin/app/ui/Diff.kt | 6 ++++-- src/main/kotlin/app/ui/RepositoryOpen.kt | 6 ++++++ src/main/kotlin/app/ui/UncommitedChanges.kt | 12 +++++------- .../kotlin/app/ui/components/RepositoriesTabPanel.kt | 2 +- src/main/kotlin/app/ui/components/SecondaryButton.kt | 4 +++- src/main/kotlin/app/ui/log/Log.kt | 1 - 9 files changed, 31 insertions(+), 15 deletions(-) diff --git a/src/main/kotlin/app/theme/Color.kt b/src/main/kotlin/app/theme/Color.kt index 356e4fe..02ecad8 100644 --- a/src/main/kotlin/app/theme/Color.kt +++ b/src/main/kotlin/app/theme/Color.kt @@ -10,7 +10,7 @@ val mainText = Color(0xFF212934) val mainTextDark = Color(0xFFFFFFFF) val secondaryText = Color(0xFF595858) val secondaryTextDark = Color(0xFFCCCBCB) -val errorColor = Color(0xFFFA4B4B) +val errorColor = Color(0xFFc93838) val primaryGrayLight = Color(0xFF464646) val accentGrayLight = Color(0xFFCCCCCC) @@ -26,4 +26,4 @@ val deleteFileLight = errorColor val modifyFileLight = primary val conflictFileLight = Color(0xFFFFB638) -val dialogBackgroundColor = Color(0xAA000000) \ No newline at end of file +val dialogBackgroundColor = Color(0xAA000000) diff --git a/src/main/kotlin/app/theme/Theme.kt b/src/main/kotlin/app/theme/Theme.kt index 14d733f..6e7f398 100644 --- a/src/main/kotlin/app/theme/Theme.kt +++ b/src/main/kotlin/app/theme/Theme.kt @@ -13,6 +13,7 @@ private val DarkColorPalette = darkColors( secondary = secondary, surface = surfaceColorDark, background = backgroundColorDark, + error = errorColor ) private val LightColorPalette = lightColors( @@ -101,6 +102,14 @@ val Colors.tabColorActive: Color val Colors.tabColorInactive: Color get() = if (isLight) backgroundColorLight else backgroundColorDark +val Colors.stageButton: Color + get() = if (isLight) primary else primaryDark + +val Colors.unstageButton: Color + get() = error + + + enum class Themes(val displayName: String) { LIGHT("Light"), diff --git a/src/main/kotlin/app/ui/CommitChanges.kt b/src/main/kotlin/app/ui/CommitChanges.kt index 9e0d885..bcab981 100644 --- a/src/main/kotlin/app/ui/CommitChanges.kt +++ b/src/main/kotlin/app/ui/CommitChanges.kt @@ -63,7 +63,7 @@ fun CommitChangesView( Column( modifier = Modifier .fillMaxWidth() - .padding(8.dp), + .padding(horizontal = 8.dp), ) { SelectionContainer { Text( diff --git a/src/main/kotlin/app/ui/Diff.kt b/src/main/kotlin/app/ui/Diff.kt index c6107ec..1d7cb8c 100644 --- a/src/main/kotlin/app/ui/Diff.kt +++ b/src/main/kotlin/app/ui/Diff.kt @@ -24,6 +24,8 @@ import app.git.diff.Hunk import app.git.diff.Line import app.git.diff.LineType import app.theme.primaryTextColor +import app.theme.stageButton +import app.theme.unstageButton import app.ui.components.ScrollableLazyColumn import app.ui.components.SecondaryButton import app.viewmodels.DiffViewModel @@ -213,10 +215,10 @@ fun HunkHeader( val color: Color if (diffEntryType is DiffEntryType.StagedDiff) { buttonText = "Unstage hunk" - color = MaterialTheme.colors.error + color = MaterialTheme.colors.unstageButton } else { buttonText = "Stage hunk" - color = MaterialTheme.colors.primary + color = MaterialTheme.colors.stageButton } SecondaryButton( diff --git a/src/main/kotlin/app/ui/RepositoryOpen.kt b/src/main/kotlin/app/ui/RepositoryOpen.kt index ab2abf3..495cc52 100644 --- a/src/main/kotlin/app/ui/RepositoryOpen.kt +++ b/src/main/kotlin/app/ui/RepositoryOpen.kt @@ -1,6 +1,8 @@ package app.ui +import androidx.compose.foundation.border import androidx.compose.foundation.layout.* +import androidx.compose.material.MaterialTheme import androidx.compose.runtime.* import androidx.compose.ui.Modifier import androidx.compose.ui.unit.dp @@ -87,6 +89,10 @@ fun RepositoryOpenPage(tabViewModel: TabViewModel) { Box( modifier = Modifier .fillMaxSize() + .border( + width = 2.dp, + color = MaterialTheme.colors.primary, + ) ) { when (diffSelected) { null -> { diff --git a/src/main/kotlin/app/ui/UncommitedChanges.kt b/src/main/kotlin/app/ui/UncommitedChanges.kt index 9ea323b..44761c1 100644 --- a/src/main/kotlin/app/ui/UncommitedChanges.kt +++ b/src/main/kotlin/app/ui/UncommitedChanges.kt @@ -28,9 +28,7 @@ import app.extensions.filePath import app.extensions.isMerging import app.git.DiffEntryType import app.git.StatusEntry -import app.theme.headerBackground -import app.theme.headerText -import app.theme.primaryTextColor +import app.theme.* import app.ui.components.ScrollableLazyColumn import app.ui.components.SecondaryButton import app.viewmodels.StageStatus @@ -91,13 +89,13 @@ fun UncommitedChanges( EntriesList( modifier = Modifier - .padding(8.dp) + .padding(start = 8.dp, end = 8.dp, bottom = 4.dp) .weight(5f) .fillMaxWidth(), title = "Staged", allActionTitle = "Unstage all", actionTitle = "Unstage", - actionColor = MaterialTheme.colors.error, + actionColor = MaterialTheme.colors.unstageButton, diffEntries = staged, onDiffEntrySelected = onStagedDiffEntrySelected, onDiffEntryOptionSelected = { @@ -113,12 +111,12 @@ fun UncommitedChanges( EntriesList( modifier = Modifier - .padding(8.dp) + .padding(start = 8.dp, end = 8.dp, top = 4.dp) .weight(5f) .fillMaxWidth(), title = "Unstaged", actionTitle = "Stage", - actionColor = MaterialTheme.colors.primary, + actionColor = MaterialTheme.colors.stageButton, diffEntries = unstaged, onDiffEntrySelected = onUnstagedDiffEntrySelected, onDiffEntryOptionSelected = { diff --git a/src/main/kotlin/app/ui/components/RepositoriesTabPanel.kt b/src/main/kotlin/app/ui/components/RepositoriesTabPanel.kt index a0b3c81..aa32a85 100644 --- a/src/main/kotlin/app/ui/components/RepositoriesTabPanel.kt +++ b/src/main/kotlin/app/ui/components/RepositoriesTabPanel.kt @@ -141,7 +141,7 @@ fun Tab(title: MutableState, selected: Boolean, onClick: () -> Unit, onC .width(180.dp) .shadow(elevation = elevation) .padding(start = 2.dp, end = 2.dp, top = 2.dp) - .clip(RoundedCornerShape(topStart = 5.dp, topEnd = 5.dp)) + .clip(RoundedCornerShape(topStart = 8.dp, topEnd = 8.dp)) .clickable { onClick() } .background(backgroundColor), ) { diff --git a/src/main/kotlin/app/ui/components/SecondaryButton.kt b/src/main/kotlin/app/ui/components/SecondaryButton.kt index d049677..f0b8cc5 100644 --- a/src/main/kotlin/app/ui/components/SecondaryButton.kt +++ b/src/main/kotlin/app/ui/components/SecondaryButton.kt @@ -14,11 +14,13 @@ import androidx.compose.ui.draw.clip import androidx.compose.ui.graphics.Color import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.sp +import app.theme.primaryTextColor @Composable fun SecondaryButton( modifier: Modifier = Modifier, text: String, + textColor: Color = Color.White, backgroundButton: Color, onClick: () -> Unit, ) { @@ -32,7 +34,7 @@ fun SecondaryButton( Text( text = text, fontSize = 12.sp, - color = MaterialTheme.colors.contentColorFor(backgroundButton), + color = textColor, modifier = Modifier.padding(vertical = 4.dp, horizontal = 16.dp) ) } diff --git a/src/main/kotlin/app/ui/log/Log.kt b/src/main/kotlin/app/ui/log/Log.kt index 34dd9ca..8c078a7 100644 --- a/src/main/kotlin/app/ui/log/Log.kt +++ b/src/main/kotlin/app/ui/log/Log.kt @@ -106,7 +106,6 @@ fun Log( Column( modifier = Modifier - .padding(8.dp) .background(MaterialTheme.colors.background) .fillMaxSize() ) {