Changed scrollbar color scheme to make it more visible

This commit is contained in:
Abdelilah El Aissaoui 2022-02-07 22:04:06 +01:00
parent e54ba6d8a0
commit 2a12c3e883
4 changed files with 36 additions and 5 deletions

View File

@ -11,8 +11,6 @@ val mainTextDark = Color(0xFFFFFFFF)
val secondaryText = Color(0xFF595858) val secondaryText = Color(0xFF595858)
val secondaryTextDark = Color(0xFFCCCBCB) val secondaryTextDark = Color(0xFFCCCBCB)
val errorColor = Color(0xFFc93838) val errorColor = Color(0xFFc93838)
val primaryGrayLight = Color(0xFF464646)
val accentGrayLight = Color(0xFFCCCCCC)
val backgroundColorLight = Color(0xFFFFFFFF) val backgroundColorLight = Color(0xFFFFFFFF)
val backgroundColorDark = Color(0xFF0E1621) val backgroundColorDark = Color(0xFF0E1621)
@ -28,3 +26,7 @@ val modifyFileLight = primary
val conflictFileLight = Color(0xFFFFB638) val conflictFileLight = Color(0xFFFFB638)
val dialogBackgroundColor = Color(0xAA000000) val dialogBackgroundColor = Color(0xAA000000)
val unhoverScrollbarColorLight = Color.LightGray
val unhoverScrollbarColorDark = Color.Gray
val hoverScrollbarColorLight = primary
val hoverScrollbarColorDark = Color.LightGray

View File

@ -105,6 +105,12 @@ val Colors.stageButton: Color
val Colors.unstageButton: Color val Colors.unstageButton: Color
get() = error get() = error
val Colors.scrollbarUnhover: Color
get() = if (isLight) unhoverScrollbarColorLight else unhoverScrollbarColorDark
val Colors.scrollbarHover: Color
get() = if (isLight) hoverScrollbarColorLight else hoverScrollbarColorDark
enum class Themes(val displayName: String) { enum class Themes(val displayName: String) {
LIGHT("Light"), LIGHT("Light"),

View File

@ -1,16 +1,24 @@
package app.ui.components package app.ui.components
import androidx.compose.foundation.LocalScrollbarStyle
import androidx.compose.foundation.ScrollbarStyle
import androidx.compose.foundation.VerticalScrollbar import androidx.compose.foundation.VerticalScrollbar
import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxHeight import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.lazy.LazyColumn import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.LazyListScope import androidx.compose.foundation.lazy.LazyListScope
import androidx.compose.foundation.lazy.LazyListState import androidx.compose.foundation.lazy.LazyListState
import androidx.compose.foundation.lazy.rememberLazyListState import androidx.compose.foundation.lazy.rememberLazyListState
import androidx.compose.foundation.rememberScrollbarAdapter import androidx.compose.foundation.rememberScrollbarAdapter
import androidx.compose.material.MaterialTheme
import androidx.compose.runtime.Composable import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import app.theme.scrollbarHover
import app.theme.scrollbarUnhover
@Composable @Composable
fun ScrollableLazyColumn( fun ScrollableLazyColumn(
@ -26,7 +34,14 @@ fun ScrollableLazyColumn(
content = content content = content
) )
VerticalScrollbar( VerticalScrollbar(
modifier = Modifier.align(Alignment.CenterEnd).fillMaxHeight(), modifier = Modifier
.align(Alignment.CenterEnd)
.fillMaxHeight()
.padding(end = 4.dp),
style = LocalScrollbarStyle.current.copy(
unhoverColor = MaterialTheme.colors.scrollbarUnhover,
hoverColor = MaterialTheme.colors.scrollbarHover,
),
adapter = rememberScrollbarAdapter( adapter = rememberScrollbarAdapter(
scrollState = state scrollState = state
) )

View File

@ -177,6 +177,10 @@ fun Log(
.align(Alignment.BottomStart) .align(Alignment.BottomStart)
.width(graphWidth) .width(graphWidth)
.padding(start = 4.dp, bottom = 4.dp), .padding(start = 4.dp, bottom = 4.dp),
style = LocalScrollbarStyle.current.copy(
unhoverColor = MaterialTheme.colors.scrollbarUnhover,
hoverColor = MaterialTheme.colors.scrollbarHover,
),
adapter = rememberScrollbarAdapter(horizontalScrollState) adapter = rememberScrollbarAdapter(horizontalScrollState)
) )
} }
@ -428,7 +432,10 @@ fun UncommitedChangesLine(
.clickable { .clickable {
onUncommitedChangesSelected() onUncommitedChangesSelected()
} }
.padding(start = graphWidth + PADDING_BETWEEN_DIVIDER_AND_MESSAGE.dp), .padding(
start = graphWidth + PADDING_BETWEEN_DIVIDER_AND_MESSAGE.dp,
end = 4.dp,
),
verticalAlignment = Alignment.CenterVertically, verticalAlignment = Alignment.CenterVertically,
) { ) {
val text = when { val text = when {
@ -545,7 +552,8 @@ fun CommitLine(
Row( Row(
modifier = Modifier modifier = Modifier
.height(40.dp) .height(40.dp)
.fillMaxWidth(), .fillMaxWidth()
.padding(end = 4.dp,),
) { ) {
val nodeColor = colors[graphNode.lane.position % colors.size] val nodeColor = colors[graphNode.lane.position % colors.size]
CommitMessage( CommitMessage(