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