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

UI improvements + code cleanup in side panels

Browse Source
This commit is contained in:
Abdelilah El Aissaoui 2022-02-02 20:24:22 +01:00
parent 13684e4f90
commit dabdaca3b1
11 changed files with 104 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/main/kotlin/app/Constants.kt
View File

@ -1,3 +0,0 @@
package app
const val MAX_SIDE_PANEL_ITEMS_HEIGHT = 300

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

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

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

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

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

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

25
src/main/kotlin/app/ui/Branches.kt
View File

@ -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,18 +35,17 @@ fun Branches(
val currentBranch by branchesViewModel.currentBranch.collectAsState()
val (mergeBranch, setMergeBranch) = remember { mutableStateOf<Ref?>(null) }
val (rebaseBranch, setRebaseBranch) = remember { mutableStateOf<Ref?>(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()) {
ScrollableLazyColumn(
modifier = Modifier
.fillMaxWidth()
.heightIn(max = maxHeight.dp)
.background(MaterialTheme.colors.background)
) {
itemsIndexed(branches) { _, branch ->
BranchLineEntry(
branch = branch,
@ -57,7 +59,6 @@ fun Branches(
}
}
}
}
if (mergeBranch != null) {
MergeDialog(

24
src/main/kotlin/app/ui/Remotes.kt
View File

@ -1,40 +1,41 @@
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()) {
ScrollableLazyColumn(
modifier = Modifier
.fillMaxWidth()
.heightIn(max = maxHeight.dp)
.background(MaterialTheme.colors.background)
) {
items(remotes) { remote ->
RemoteRow(
remote = remote,
@ -42,7 +43,6 @@ fun Remotes(remotesViewModel: RemotesViewModel) {
}
}
}
}
}
@Composable

14
src/main/kotlin/app/ui/Stashes.kt
View File

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

24
src/main/kotlin/app/ui/Tags.kt
View File

@ -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,20 +29,19 @@ 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()) {
ScrollableLazyColumn(
modifier = Modifier
.fillMaxWidth()
.heightIn(max = maxHeight.dp)
.background(MaterialTheme.colors.background)
) {
items(items = tags) { tag ->
TagRow(
tag = tag,
@ -51,7 +51,7 @@ fun Tags(
)
}
}
}
}
}

9
src/main/kotlin/app/ui/components/SideMenuEntry.kt
View File

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

5
src/main/kotlin/app/ui/components/SideMenuSubentry.kt
View File

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

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

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