Improved tab's design

This commit is contained in:
Abdelilah El Aissaoui 2022-04-09 18:59:10 +02:00
parent 9f51893ed2
commit 08d0323e48

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.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
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
@ -19,7 +16,9 @@ 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.draw.shadow
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import app.AppStateManager import app.AppStateManager
import app.di.AppComponent import app.di.AppComponent
import app.di.DaggerTabComponent import app.di.DaggerTabComponent
@ -105,7 +104,8 @@ fun TabPanel(
tabs: LazyListScope.() -> Unit tabs: LazyListScope.() -> Unit
) { ) {
LazyRow( LazyRow(
modifier = modifier, modifier = modifier
.height(36.dp),
) { ) {
this.tabs() this.tabs()
@ -137,26 +137,30 @@ fun Tab(title: MutableState<String>, selected: Boolean, onClick: () -> Unit, onC
else else
MaterialTheme.colors.tabColorInactive MaterialTheme.colors.tabColorInactive
Box( Row(
modifier = Modifier modifier = Modifier
.width(180.dp) .width(180.dp)
.fillMaxHeight()
.shadow(elevation = elevation) .shadow(elevation = elevation)
.padding(start = 2.dp, end = 2.dp, top = 2.dp) .padding(start = 2.dp, end = 2.dp, top = 2.dp)
.clip(RoundedCornerShape(topStart = 8.dp, topEnd = 8.dp)) .clip(RoundedCornerShape(topStart = 8.dp, topEnd = 8.dp))
.clickable { onClick() } .clickable { onClick() }
.background(backgroundColor), .background(backgroundColor),
verticalAlignment = Alignment.CenterVertically,
) { ) {
Text( Text(
text = title.value, text = title.value,
modifier = Modifier modifier = Modifier
.padding(vertical = 8.dp, horizontal = 16.dp), .padding(start = 16.dp, end = 8.dp)
color = contentColorFor(backgroundColor), .weight(1f),
color = MaterialTheme.colors.primaryTextColor,
overflow = TextOverflow.Visible,
fontSize = 14.sp,
maxLines = 1, maxLines = 1,
) )
IconButton( IconButton(
onClick = onCloseTab, onClick = onCloseTab,
modifier = Modifier modifier = Modifier
.align(Alignment.CenterEnd)
.padding(horizontal = 8.dp) .padding(horizontal = 8.dp)
.size(14.dp) .size(14.dp)
) { ) {