Improved tab's design
This commit is contained in:
parent
9f51893ed2
commit
08d0323e48
@ -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)
|
||||||
) {
|
) {
|
||||||
|
Loading…
Reference in New Issue
Block a user