From dabdaca3b12e0a21a03795014bbb5f4749e12ece Mon Sep 17 00:00:00 2001 From: Abdelilah El Aissaoui Date: Wed, 2 Feb 2022 20:24:22 +0100 Subject: [PATCH] UI improvements + code cleanup in side panels --- src/main/kotlin/app/Constants.kt | 3 -- src/main/kotlin/app/SideMenuUtils.kt | 13 ++++++ src/main/kotlin/app/theme/Color.kt | 3 +- src/main/kotlin/app/theme/Theme.kt | 21 ++++----- src/main/kotlin/app/ui/Branches.kt | 45 ++++++++++--------- src/main/kotlin/app/ui/Remotes.kt | 32 ++++++------- src/main/kotlin/app/ui/Stashes.kt | 14 +++++- src/main/kotlin/app/ui/Tags.kt | 38 ++++++++-------- .../kotlin/app/ui/components/SideMenuEntry.kt | 9 ++-- .../app/ui/components/SideMenuSubentry.kt | 5 +-- src/main/kotlin/app/ui/log/Log.kt | 4 +- 11 files changed, 104 insertions(+), 83 deletions(-) delete mode 100644 src/main/kotlin/app/Constants.kt create mode 100644 src/main/kotlin/app/SideMenuUtils.kt diff --git a/src/main/kotlin/app/Constants.kt b/src/main/kotlin/app/Constants.kt deleted file mode 100644 index 314e84d..0000000 --- a/src/main/kotlin/app/Constants.kt +++ /dev/null @@ -1,3 +0,0 @@ -package app - -const val MAX_SIDE_PANEL_ITEMS_HEIGHT = 300 \ No newline at end of file diff --git a/src/main/kotlin/app/SideMenuUtils.kt b/src/main/kotlin/app/SideMenuUtils.kt new file mode 100644 index 0000000..a60cc8f --- /dev/null +++ b/src/main/kotlin/app/SideMenuUtils.kt @@ -0,0 +1,13 @@ +package app + +const val MAX_SIDE_PANEL_ITEMS_HEIGHT = 300 +const val ENTRY_HEIGHT = 40 + +fun maxSidePanelHeight(itemsCount: Int): Int { + val itemsHeight = itemsCount * ENTRY_HEIGHT + + return if (itemsHeight < MAX_SIDE_PANEL_ITEMS_HEIGHT) + itemsHeight + else + MAX_SIDE_PANEL_ITEMS_HEIGHT +} \ No newline at end of file diff --git a/src/main/kotlin/app/theme/Color.kt b/src/main/kotlin/app/theme/Color.kt index 02ecad8..ed275b1 100644 --- a/src/main/kotlin/app/theme/Color.kt +++ b/src/main/kotlin/app/theme/Color.kt @@ -19,7 +19,8 @@ val backgroundColorDark = Color(0xFF0E1621) val surfaceColorLight = Color(0xFFe9ecf7) val surfaceColorDark = Color(0xFF182533) val headerBackgroundLight = Color(0xFFF4F6FA) -val headerBackgroundDark = Color(0xFF303132) +val graphHeaderBackgroundDark = Color(0xFF303132) +val headerBackgroundDark = Color(0xFF0a2b4a) val addFileLight = Color(0xFF32A852) val deleteFileLight = errorColor diff --git a/src/main/kotlin/app/theme/Theme.kt b/src/main/kotlin/app/theme/Theme.kt index 2edc3b0..8c21387 100644 --- a/src/main/kotlin/app/theme/Theme.kt +++ b/src/main/kotlin/app/theme/Theme.kt @@ -53,18 +53,6 @@ val Colors.inversePrimaryTextColor: Color val Colors.secondaryTextColor: Color get() = if (isLight) secondaryText else secondaryTextDark -@get:Composable -val Colors.accent: Color - get() = primaryLight - -@get:Composable -val Colors.primaryGray: Color - get() = primaryGrayLight - -@get:Composable -val Colors.accentGray: Color - get() = accentGrayLight - @get:Composable val Colors.headerBackground: Color get() { @@ -74,6 +62,15 @@ val Colors.headerBackground: Color headerBackgroundDark } +@get:Composable +val Colors.graphHeaderBackground: Color + get() { + return if (isLight) + headerBackgroundLight + else + graphHeaderBackgroundDark + } + @get:Composable val Colors.addFile: Color get() = addFileLight diff --git a/src/main/kotlin/app/ui/Branches.kt b/src/main/kotlin/app/ui/Branches.kt index d48ef20..358b4f1 100644 --- a/src/main/kotlin/app/ui/Branches.kt +++ b/src/main/kotlin/app/ui/Branches.kt @@ -2,7 +2,11 @@ package app.ui import androidx.compose.foundation.ContextMenuArea import androidx.compose.foundation.ExperimentalFoundationApi -import androidx.compose.foundation.layout.* +import androidx.compose.foundation.background +import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.fillMaxWidth +import androidx.compose.foundation.layout.heightIn +import androidx.compose.foundation.layout.padding import androidx.compose.foundation.lazy.itemsIndexed import androidx.compose.material.Icon import androidx.compose.material.MaterialTheme @@ -10,13 +14,12 @@ import androidx.compose.runtime.* import androidx.compose.ui.Modifier import androidx.compose.ui.res.painterResource import androidx.compose.ui.unit.dp -import app.MAX_SIDE_PANEL_ITEMS_HEIGHT import app.extensions.isLocal import app.extensions.simpleName +import app.maxSidePanelHeight import app.ui.components.ScrollableLazyColumn import app.ui.components.SideMenuEntry import app.ui.components.SideMenuSubentry -import app.ui.components.entryHeight import app.ui.context_menu.branchContextMenuItems import app.ui.dialogs.MergeDialog import app.ui.dialogs.RebaseDialog @@ -32,29 +35,27 @@ fun Branches( val currentBranch by branchesViewModel.currentBranch.collectAsState() val (mergeBranch, setMergeBranch) = remember { mutableStateOf(null) } val (rebaseBranch, setRebaseBranch) = remember { mutableStateOf(null) } + val maxHeight = remember(branches) { maxSidePanelHeight(branches.count()) } Column { SideMenuEntry("Local branches") - val branchesHeight = branches.count() * entryHeight - val maxHeight = if (branchesHeight < MAX_SIDE_PANEL_ITEMS_HEIGHT) - branchesHeight - else - MAX_SIDE_PANEL_ITEMS_HEIGHT - - Box(modifier = Modifier.heightIn(max = maxHeight.dp)) { - ScrollableLazyColumn(modifier = Modifier.fillMaxWidth()) { - itemsIndexed(branches) { _, branch -> - BranchLineEntry( - branch = branch, - isCurrentBranch = currentBranch == branch.name, - onBranchClicked = { onBranchClicked(branch) }, - onCheckoutBranch = { branchesViewModel.checkoutRef(branch) }, - onMergeBranch = { setMergeBranch(branch) }, - onRebaseBranch = { branchesViewModel.deleteBranch(branch) }, - onDeleteBranch = { setRebaseBranch(branch) }, - ) - } + ScrollableLazyColumn( + modifier = Modifier + .fillMaxWidth() + .heightIn(max = maxHeight.dp) + .background(MaterialTheme.colors.background) + ) { + itemsIndexed(branches) { _, branch -> + BranchLineEntry( + branch = branch, + isCurrentBranch = currentBranch == branch.name, + onBranchClicked = { onBranchClicked(branch) }, + onCheckoutBranch = { branchesViewModel.checkoutRef(branch) }, + onMergeBranch = { setMergeBranch(branch) }, + onRebaseBranch = { branchesViewModel.deleteBranch(branch) }, + onDeleteBranch = { setRebaseBranch(branch) }, + ) } } } diff --git a/src/main/kotlin/app/ui/Remotes.kt b/src/main/kotlin/app/ui/Remotes.kt index f1f3160..2b6c0b5 100644 --- a/src/main/kotlin/app/ui/Remotes.kt +++ b/src/main/kotlin/app/ui/Remotes.kt @@ -1,45 +1,45 @@ package app.ui +import androidx.compose.foundation.background import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.heightIn import androidx.compose.foundation.lazy.items +import androidx.compose.material.MaterialTheme import androidx.compose.runtime.Composable import androidx.compose.runtime.collectAsState import androidx.compose.runtime.getValue +import androidx.compose.runtime.remember import androidx.compose.ui.Modifier import androidx.compose.ui.unit.dp -import app.MAX_SIDE_PANEL_ITEMS_HEIGHT import app.extensions.simpleVisibleName import app.git.RemoteInfo +import app.maxSidePanelHeight import app.ui.components.ScrollableLazyColumn import app.ui.components.SideMenuEntry import app.ui.components.SideMenuSubentry -import app.ui.components.entryHeight import app.viewmodels.RemotesViewModel @Composable fun Remotes(remotesViewModel: RemotesViewModel) { val remotes by remotesViewModel.remotes.collectAsState() + val allBranches = remotes.map { it.branchesList }.flatten() + val maxHeight = remember(remotes) { maxSidePanelHeight(allBranches.count() + remotes.count()) } Column { SideMenuEntry("Remotes") - val allBranches = remotes.map { it.branchesList }.flatten() - val remotesHeight = (allBranches.count() + remotes.count()) * entryHeight - val maxHeight = if (remotesHeight < MAX_SIDE_PANEL_ITEMS_HEIGHT) - remotesHeight - else - MAX_SIDE_PANEL_ITEMS_HEIGHT - - Box(modifier = Modifier.heightIn(max = maxHeight.dp)) { - ScrollableLazyColumn(modifier = Modifier.fillMaxWidth()) { - items(remotes) { remote -> - RemoteRow( - remote = remote, - ) - } + ScrollableLazyColumn( + modifier = Modifier + .fillMaxWidth() + .heightIn(max = maxHeight.dp) + .background(MaterialTheme.colors.background) + ) { + items(remotes) { remote -> + RemoteRow( + remote = remote, + ) } } } diff --git a/src/main/kotlin/app/ui/Stashes.kt b/src/main/kotlin/app/ui/Stashes.kt index 682eecd..da5b06b 100644 --- a/src/main/kotlin/app/ui/Stashes.kt +++ b/src/main/kotlin/app/ui/Stashes.kt @@ -1,11 +1,17 @@ package app.ui +import androidx.compose.foundation.background import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.fillMaxWidth +import androidx.compose.foundation.layout.heightIn import androidx.compose.foundation.lazy.items +import androidx.compose.material.MaterialTheme import androidx.compose.runtime.Composable import androidx.compose.runtime.collectAsState +import androidx.compose.runtime.remember import androidx.compose.ui.Modifier +import androidx.compose.ui.unit.dp +import app.maxSidePanelHeight import app.ui.components.ScrollableLazyColumn import app.ui.components.SideMenuEntry import app.ui.components.SideMenuSubentry @@ -26,13 +32,19 @@ fun Stashes( else listOf() + val maxHeight = remember(stashList) { maxSidePanelHeight(stashList.count()) } Column { SideMenuEntry( text = "Stashes", ) - ScrollableLazyColumn(modifier = Modifier.fillMaxWidth()) { + ScrollableLazyColumn( + modifier = Modifier + .fillMaxWidth() + .heightIn(max = maxHeight.dp) + .background(MaterialTheme.colors.background) + ) { items(items = stashList) { stash -> StashRow( stash = stash, diff --git a/src/main/kotlin/app/ui/Tags.kt b/src/main/kotlin/app/ui/Tags.kt index e1f77d0..aac0b13 100644 --- a/src/main/kotlin/app/ui/Tags.kt +++ b/src/main/kotlin/app/ui/Tags.kt @@ -2,21 +2,22 @@ package app.ui import androidx.compose.foundation.ContextMenuArea import androidx.compose.foundation.ExperimentalFoundationApi -import androidx.compose.foundation.layout.Box +import androidx.compose.foundation.background import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.heightIn import androidx.compose.foundation.lazy.items +import androidx.compose.material.MaterialTheme import androidx.compose.runtime.Composable import androidx.compose.runtime.collectAsState +import androidx.compose.runtime.remember import androidx.compose.ui.Modifier import androidx.compose.ui.unit.dp -import app.MAX_SIDE_PANEL_ITEMS_HEIGHT import app.extensions.simpleName +import app.maxSidePanelHeight import app.ui.components.ScrollableLazyColumn import app.ui.components.SideMenuEntry import app.ui.components.SideMenuSubentry -import app.ui.components.entryHeight import app.ui.context_menu.tagContextMenuItems import app.viewmodels.TagsViewModel import org.eclipse.jgit.lib.Ref @@ -28,30 +29,29 @@ fun Tags( ) { val tagsState = tagsViewModel.tags.collectAsState() val tags = tagsState.value + val maxHeight = remember(tags) { maxSidePanelHeight(tags.count()) } Column { SideMenuEntry( text = "Tags", ) - val tagsHeight = tags.count() * entryHeight - val maxHeight = if (tagsHeight < MAX_SIDE_PANEL_ITEMS_HEIGHT) - tagsHeight - else - MAX_SIDE_PANEL_ITEMS_HEIGHT - - Box(modifier = Modifier.heightIn(max = maxHeight.dp)) { - ScrollableLazyColumn(modifier = Modifier.fillMaxWidth()) { - items(items = tags) { tag -> - TagRow( - tag = tag, - onTagClicked = { onTagClicked(tag) }, - onCheckoutTag = { tagsViewModel.checkoutRef(tag) }, - onDeleteTag = { tagsViewModel.deleteTag(tag) } - ) - } + ScrollableLazyColumn( + modifier = Modifier + .fillMaxWidth() + .heightIn(max = maxHeight.dp) + .background(MaterialTheme.colors.background) + ) { + items(items = tags) { tag -> + TagRow( + tag = tag, + onTagClicked = { onTagClicked(tag) }, + onCheckoutTag = { tagsViewModel.checkoutRef(tag) }, + onDeleteTag = { tagsViewModel.deleteTag(tag) } + ) } } + } } diff --git a/src/main/kotlin/app/ui/components/SideMenuEntry.kt b/src/main/kotlin/app/ui/components/SideMenuEntry.kt index 16bd272..69854a5 100644 --- a/src/main/kotlin/app/ui/components/SideMenuEntry.kt +++ b/src/main/kotlin/app/ui/components/SideMenuEntry.kt @@ -1,5 +1,6 @@ package app.ui.components +import androidx.compose.foundation.background import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.height @@ -12,6 +13,8 @@ import androidx.compose.ui.Modifier import androidx.compose.ui.text.style.TextOverflow import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.sp +import app.theme.headerBackground +import app.theme.primaryTextColor import app.theme.secondaryTextColor @Composable @@ -21,17 +24,17 @@ fun SideMenuEntry( Row( modifier = Modifier .height(32.dp) - .fillMaxWidth(), + .fillMaxWidth() + .background(color = MaterialTheme.colors.headerBackground), verticalAlignment = Alignment.CenterVertically, ) { - Text( text = text, modifier = Modifier .padding(horizontal = 8.dp), maxLines = 1, fontSize = 14.sp, - color = MaterialTheme.colors.secondaryTextColor, + color = MaterialTheme.colors.primaryTextColor, overflow = TextOverflow.Ellipsis, ) } diff --git a/src/main/kotlin/app/ui/components/SideMenuSubentry.kt b/src/main/kotlin/app/ui/components/SideMenuSubentry.kt index d598289..a2102d1 100644 --- a/src/main/kotlin/app/ui/components/SideMenuSubentry.kt +++ b/src/main/kotlin/app/ui/components/SideMenuSubentry.kt @@ -16,10 +16,9 @@ import androidx.compose.ui.text.font.FontWeight import androidx.compose.ui.unit.Dp import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.sp +import app.ENTRY_HEIGHT import app.theme.primaryTextColor -const val entryHeight = 40 - @Composable fun SideMenuSubentry( text: String, @@ -31,7 +30,7 @@ fun SideMenuSubentry( ) { Row( modifier = Modifier - .height(entryHeight.dp) + .height(ENTRY_HEIGHT.dp) .fillMaxWidth() .clickable(onClick = onClick) .padding(start = extraPadding), diff --git a/src/main/kotlin/app/ui/log/Log.kt b/src/main/kotlin/app/ui/log/Log.kt index 6e72a6e..931b0a4 100644 --- a/src/main/kotlin/app/ui/log/Log.kt +++ b/src/main/kotlin/app/ui/log/Log.kt @@ -236,7 +236,7 @@ fun GraphHeader( modifier = Modifier .fillMaxWidth() .height(32.dp) - .background(MaterialTheme.colors.headerBackground), + .background(MaterialTheme.colors.graphHeaderBackground), verticalAlignment = Alignment.CenterVertically, ) { Text( @@ -244,7 +244,6 @@ fun GraphHeader( .width(graphWidth) .padding(start = 8.dp), text = "Graph", - fontWeight = FontWeight.Bold, color = MaterialTheme.colors.headerText, fontSize = 14.sp, maxLines = 1, @@ -261,7 +260,6 @@ fun GraphHeader( .padding(start = 8.dp) .width(graphWidth), text = "Message", - fontWeight = FontWeight.Bold, color = MaterialTheme.colors.headerText, fontSize = 14.sp, maxLines = 1,