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(
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(),
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 backgroundColorDark = Color(0xFF0E1621)
val surfaceColorLight = Color(0xFFEBEFF7)
val surfaceColorLight = Color(0xFFe9ecf7)
val surfaceColorDark = Color(0xFF182533)
val headerBackgroundLight = Color(0xFFF4F6FA)
val headerBackgroundDark = Color(0xFF303132)
@ -26,7 +26,4 @@ val deleteFileLight = errorColor
val modifyFileLight = primary
val conflictFileLight = Color(0xFFFFB638)
val tabColorActiveDark = Color(0xFF606061)
val tabColorInactiveDark = Color(0xFF262626)
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
get() = if (isLight) primary else tabColorActiveDark
get() = if (isLight) surfaceColorLight else surfaceColorDark
val Colors.tabColorInactive: Color
get() = if (isLight) primaryLight else tabColorInactiveDark
get() = if (isLight) backgroundColorLight else backgroundColorDark
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.clickable
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.LazyListScope
import androidx.compose.foundation.lazy.LazyRow
import androidx.compose.foundation.lazy.items
@ -18,11 +15,13 @@ import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.draw.shadow
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import app.AppStateManager
import app.di.AppComponent
import app.di.DaggerTabComponent
import app.theme.primaryTextColor
import app.viewmodels.TabViewModel
import app.theme.tabColorActive
import app.theme.tabColorInactive
@ -127,7 +126,11 @@ fun TabPanel(
@Composable
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)
MaterialTheme.colors.tabColorActive
else
@ -135,16 +138,17 @@ fun Tab(title: MutableState<String>, selected: Boolean, onClick: () -> Unit, onC
Box(
modifier = Modifier
.padding(horizontal = 1.dp)
.height(36.dp)
.clip(RoundedCornerShape(5.dp))
.background(backgroundColor)
.clickable { onClick() },
.width(180.dp)
.shadow(elevation = elevation)
.padding(start = 2.dp, end = 2.dp, top = 2.dp)
.clip(RoundedCornerShape(topStart = 5.dp, topEnd = 5.dp))
.clickable { onClick() }
.background(backgroundColor),
) {
Text(
text = title.value,
modifier = Modifier
.padding(vertical = 8.dp, horizontal = 32.dp),
.padding(vertical = 8.dp, horizontal = 16.dp),
color = contentColorFor(backgroundColor),
)
IconButton(
@ -152,9 +156,9 @@ fun Tab(title: MutableState<String>, selected: Boolean, onClick: () -> Unit, onC
modifier = Modifier
.align(Alignment.CenterEnd)
.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)
}
}