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

Changed tabs design to use different colors and fixed width

Browse Source
This commit is contained in:
Abdelilah El Aissaoui 2022-01-31 01:55:56 +01:00
parent 42fec7c591
commit 0f484a9b26
4 changed files with 21 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/main/kotlin/app/App.kt
View File

@ -175,7 +175,7 @@ class App {
) { ) {
Row( Row(
modifier = Modifier modifier = Modifier
.padding(top = 4.dp, bottom = 2.dp, start = 4.dp, end = 4.dp) .padding(top = 4.dp, bottom = 0.dp, start = 4.dp, end = 4.dp)
.fillMaxWidth(), .fillMaxWidth(),
verticalAlignment = Alignment.CenterVertically, verticalAlignment = Alignment.CenterVertically,
) { ) {

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

@ -16,7 +16,7 @@ val accentGrayLight = Color(0xFFCCCCCC)
val backgroundColorLight = Color(0xFFFFFFFF) val backgroundColorLight = Color(0xFFFFFFFF)
val backgroundColorDark = Color(0xFF0E1621) val backgroundColorDark = Color(0xFF0E1621)
val surfaceColorLight = Color(0xFFEBEFF7) val surfaceColorLight = Color(0xFFe9ecf7)
val surfaceColorDark = Color(0xFF182533) val surfaceColorDark = Color(0xFF182533)
val headerBackgroundLight = Color(0xFFF4F6FA) val headerBackgroundLight = Color(0xFFF4F6FA)
val headerBackgroundDark = Color(0xFF303132) val headerBackgroundDark = Color(0xFF303132)
@ -26,7 +26,4 @@ val deleteFileLight = errorColor
val modifyFileLight = primary val modifyFileLight = primary
val conflictFileLight = Color(0xFFFFB638) val conflictFileLight = Color(0xFFFFB638)
val tabColorActiveDark = Color(0xFF606061)
val tabColorInactiveDark = Color(0xFF262626)
val dialogBackgroundColor = Color(0xAA000000) val dialogBackgroundColor = Color(0xAA000000)

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

@ -95,11 +95,11 @@ val Colors.headerText: Color
val Colors.tabColorActive: Color val Colors.tabColorActive: Color
get() = if (isLight) primary else tabColorActiveDark get() = if (isLight) surfaceColorLight else surfaceColorDark
val Colors.tabColorInactive: Color val Colors.tabColorInactive: Color
get() = if (isLight) primaryLight else tabColorInactiveDark get() = if (isLight) backgroundColorLight else backgroundColorDark
enum class Themes(val displayName: String) { enum class Themes(val displayName: String) {

30
src/main/kotlin/app/ui/components/RepositoriesTabPanel.kt
View File

@ -2,10 +2,7 @@ package app.ui.components
import androidx.compose.foundation.background import androidx.compose.foundation.background
import androidx.compose.foundation.clickable import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.*
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.lazy.LazyListScope import androidx.compose.foundation.lazy.LazyListScope
import androidx.compose.foundation.lazy.LazyRow import androidx.compose.foundation.lazy.LazyRow
import androidx.compose.foundation.lazy.items import androidx.compose.foundation.lazy.items
@ -18,11 +15,13 @@ import androidx.compose.runtime.*
import androidx.compose.ui.Alignment import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip import androidx.compose.ui.draw.clip
import androidx.compose.ui.draw.shadow
import androidx.compose.ui.graphics.Color import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.dp
import app.AppStateManager import app.AppStateManager
import app.di.AppComponent import app.di.AppComponent
import app.di.DaggerTabComponent import app.di.DaggerTabComponent
import app.theme.primaryTextColor
import app.viewmodels.TabViewModel import app.viewmodels.TabViewModel
import app.theme.tabColorActive import app.theme.tabColorActive
import app.theme.tabColorInactive import app.theme.tabColorInactive
@ -127,7 +126,11 @@ fun TabPanel(
@Composable @Composable
fun Tab(title: MutableState<String>, selected: Boolean, onClick: () -> Unit, onCloseTab: () -> Unit) { fun Tab(title: MutableState<String>, selected: Boolean, onClick: () -> Unit, onCloseTab: () -> Unit) {
Card { val elevation = if(selected) {
3.dp
} else
0.dp
Box {
val backgroundColor = if (selected) val backgroundColor = if (selected)
MaterialTheme.colors.tabColorActive MaterialTheme.colors.tabColorActive
else else
@ -135,16 +138,17 @@ fun Tab(title: MutableState<String>, selected: Boolean, onClick: () -> Unit, onC
Box( Box(
modifier = Modifier modifier = Modifier
.padding(horizontal = 1.dp) .width(180.dp)
.height(36.dp) .shadow(elevation = elevation)
.clip(RoundedCornerShape(5.dp)) .padding(start = 2.dp, end = 2.dp, top = 2.dp)
.background(backgroundColor) .clip(RoundedCornerShape(topStart = 5.dp, topEnd = 5.dp))
.clickable { onClick() }, .clickable { onClick() }
.background(backgroundColor),
) { ) {
Text( Text(
text = title.value, text = title.value,
modifier = Modifier modifier = Modifier
.padding(vertical = 8.dp, horizontal = 32.dp), .padding(vertical = 8.dp, horizontal = 16.dp),
color = contentColorFor(backgroundColor), color = contentColorFor(backgroundColor),
) )
IconButton( IconButton(
@ -152,9 +156,9 @@ fun Tab(title: MutableState<String>, selected: Boolean, onClick: () -> Unit, onC
modifier = Modifier modifier = Modifier
.align(Alignment.CenterEnd) .align(Alignment.CenterEnd)
.padding(horizontal = 8.dp) .padding(horizontal = 8.dp)
.size(16.dp) .size(14.dp)
) { ) {
Icon(Icons.Default.Close, contentDescription = null, tint = Color.White) Icon(Icons.Default.Close, contentDescription = null, tint = MaterialTheme.colors.primaryTextColor)
} }
} }