Added new side menu

This commit is contained in:
Abdelilah El Aissaoui 2022-10-02 23:30:07 +02:00
parent 125329a3aa
commit 3d5bc35c07
10 changed files with 35 additions and 38 deletions

View File

@ -94,7 +94,7 @@ private fun BranchLineEntry(
Text(
text = "HEAD",
color = MaterialTheme.colors.secondaryTextColor,
style = MaterialTheme.typography.body2,
style = MaterialTheme.typography.caption,
modifier = Modifier.padding(horizontal = 16.dp),
)
}

View File

@ -114,7 +114,7 @@ private fun RemoteRow(
) {
SideMenuSubentry(
text = branch.simpleName,
extraPadding = 8.dp,
extraPadding = 24.dp,
iconResourcePath = "branch.svg",
onClick = { onBranchClicked(branch) }
)

View File

@ -1,13 +0,0 @@
package com.jetpackduba.gitnuro.ui
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
}

View File

@ -1,6 +1,5 @@
package com.jetpackduba.gitnuro.ui.components
import androidx.compose.foundation.background
import androidx.compose.foundation.hoverable
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.interaction.collectIsHoveredAsState
@ -14,9 +13,10 @@ import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.painter.Painter
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.unit.dp
import com.jetpackduba.gitnuro.theme.headerBackground
import com.jetpackduba.gitnuro.theme.primaryTextColor
import com.jetpackduba.gitnuro.theme.secondaryTextColor
@ -25,26 +25,35 @@ fun SideMenuEntry(
text: String,
icon: Painter? = null,
itemsCount: Int,
hoverIcon: @Composable (() -> Unit)? = null,
isExpanded: Boolean,
hoverIcon: @Composable() (() -> Unit)? = null,
) {
val hoverInteraction = remember { MutableInteractionSource() }
val isHovered by hoverInteraction.collectIsHoveredAsState()
Row(
modifier = Modifier
.height(32.dp)
.height(36.dp)
.fillMaxWidth()
.hoverable(hoverInteraction)
.background(color = MaterialTheme.colors.headerBackground),
// .background(color = MaterialTheme.colors.headerBackground)
.hoverable(hoverInteraction),
verticalAlignment = Alignment.CenterVertically,
) {
Icon(
painter = painterResource(if (isExpanded) "expand_more.svg" else "chevron_right.svg"),
contentDescription = null,
tint = MaterialTheme.colors.primaryTextColor,
modifier = Modifier
.padding(horizontal = 8.dp)
.size(16.dp),
)
if (icon != null) {
Icon(
painter = icon,
contentDescription = null,
tint = MaterialTheme.colors.primaryTextColor,
modifier = Modifier
.padding(start = 8.dp)
.size(16.dp),
)
}
@ -56,6 +65,7 @@ fun SideMenuEntry(
.weight(1f),
maxLines = 1,
style = MaterialTheme.typography.body2,
fontWeight = FontWeight.Medium,
color = MaterialTheme.colors.primaryTextColor,
overflow = TextOverflow.Ellipsis,
)
@ -66,6 +76,7 @@ fun SideMenuEntry(
Text(
text = itemsCount.toString(),
style = MaterialTheme.typography.body2,
fontWeight = FontWeight.Medium,
color = MaterialTheme.colors.secondaryTextColor,
modifier = Modifier.padding(end = 16.dp),
)

View File

@ -1,10 +1,8 @@
package com.jetpackduba.gitnuro.ui.components
import androidx.compose.foundation.ExperimentalFoundationApi
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.material.MaterialTheme
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.painter.Painter
@ -34,7 +32,8 @@ fun <T> SideMenuPanel(
text = title,
icon = icon,
itemsCount = items.count(),
hoverIcon = headerHoverIcon
hoverIcon = headerHoverIcon,
isExpanded = isExpanded,
)
}
},
@ -42,7 +41,6 @@ fun <T> SideMenuPanel(
Column(
modifier = Modifier
.fillMaxWidth()
.background(MaterialTheme.colors.background)
) {
for (item in items) {
itemContent(item)

View File

@ -17,16 +17,16 @@ import androidx.compose.ui.graphics.Color
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp
import com.jetpackduba.gitnuro.ui.ENTRY_HEIGHT
import com.jetpackduba.gitnuro.theme.primaryTextColor
const val ENTRY_HEIGHT = 36
@OptIn(ExperimentalFoundationApi::class)
@Composable
fun SideMenuSubentry(
text: String,
iconResourcePath: String,
extraPadding: Dp = 0.dp,
background: Color = MaterialTheme.colors.background,
onClick: (() -> Unit)? = null,
onDoubleClick: (() -> Unit)? = null,
additionalInfo: @Composable () -> Unit = {}
@ -41,15 +41,15 @@ fun SideMenuSubentry(
else
this
}
.padding(start = extraPadding)
.background(background),
.padding(start = extraPadding),
// .background(background),
verticalAlignment = Alignment.CenterVertically,
) {
Icon(
painter = painterResource(iconResourcePath),
contentDescription = null,
modifier = Modifier
.padding(horizontal = 8.dp)
.padding(start = 32.dp, end = 8.dp)
.size(16.dp),
tint = MaterialTheme.colors.primaryVariant,
)

View File

@ -214,7 +214,6 @@ fun NonTextDiff(diffResult: DiffResult.NonText) {
horizontalAlignment = Alignment.CenterHorizontally,
verticalArrangement = Arrangement.Center,
) {
// SideTitle("Binary file")
Spacer(modifier = Modifier.height(24.dp))
SideDiff(newBinaryContent)
}

View File

@ -1,7 +1,7 @@
<svg width="54" height="54" viewBox="0 0 54 54" fill="none" xmlns="http://www.w3.org/2000/svg">
<line x1="14" y1="15" x2="14" y2="40" stroke="black" stroke-width="4"/>
<circle cx="14" cy="8" r="6" stroke="black" stroke-width="4"/>
<path d="M46 19C46 22.3137 43.3137 25 40 25C36.6863 25 34 22.3137 34 19C34 15.6863 36.6863 13 40 13C43.3137 13 46 15.6863 46 19Z" stroke="black" stroke-width="4"/>
<circle cx="14" cy="46" r="6" stroke="black" stroke-width="4"/>
<path d="M13.8484 38.636L15.9135 36.8638C18.4322 34.7022 21.6179 33.4731 24.9357 33.3828L31.5028 33.204C35.676 33.0904 39 29.6747 39 25.5V25.5" stroke="black" stroke-width="4"/>
<svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
<line x1="17" y1="18" x2="17" y2="43" stroke="black" stroke-width="4"/>
<circle cx="17" cy="11" r="6" stroke="black" stroke-width="4"/>
<path d="M49 22C49 25.3137 46.3137 28 43 28C39.6863 28 37 25.3137 37 22C37 18.6863 39.6863 16 43 16C46.3137 16 49 18.6863 49 22Z" stroke="black" stroke-width="4"/>
<circle cx="17" cy="49" r="6" stroke="black" stroke-width="4"/>
<path d="M16.8484 41.636L18.9135 39.8638C21.4322 37.7022 24.6179 36.4731 27.9357 36.3828L34.5028 36.204C38.676 36.0904 42 32.6747 42 28.5V28.5" stroke="black" stroke-width="4"/>
</svg>

Before

Width:  |  Height:  |  Size: 644 B

After

Width:  |  Height:  |  Size: 645 B

View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6-6-6z"/></svg>

After

Width:  |  Height:  |  Size: 209 B

View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M24 24H0V0h24v24z" fill="none" opacity=".87"/><path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z"/></svg>

After

Width:  |  Height:  |  Size: 229 B