mirror of
https://github.com/mihonapp/mihon.git
synced 2025-06-25 10:37:51 +02:00
Start moving some Compose components to presentation-core module
This commit is contained in:
arkon
@ -10,8 +10,42 @@ android {
|
||||
testInstrumentationRunner = "androidx.test.runner.AndroidJUnitRunner"
|
||||
consumerProguardFiles("consumer-rules.pro")
|
||||
}
|
||||
|
||||
buildFeatures {
|
||||
compose = true
|
||||
}
|
||||
|
||||
composeOptions {
|
||||
kotlinCompilerExtensionVersion = compose.versions.compiler.get()
|
||||
}
|
||||
}
|
||||
|
||||
dependencies {
|
||||
|
||||
// Compose
|
||||
implementation(platform(compose.bom))
|
||||
implementation(compose.foundation)
|
||||
implementation(compose.material3.core)
|
||||
implementation(compose.material.core)
|
||||
implementation(compose.material.icons)
|
||||
implementation(compose.animation)
|
||||
implementation(compose.animation.graphics)
|
||||
implementation(compose.ui.tooling)
|
||||
implementation(compose.ui.util)
|
||||
}
|
||||
|
||||
tasks {
|
||||
// See https://kotlinlang.org/docs/reference/experimental.html#experimental-status-of-experimental-api(-markers)
|
||||
withType<org.jetbrains.kotlin.gradle.tasks.KotlinCompile> {
|
||||
kotlinOptions.freeCompilerArgs += listOf(
|
||||
"-opt-in=coil.annotation.ExperimentalCoilApi",
|
||||
"-opt-in=androidx.compose.foundation.layout.ExperimentalLayoutApi",
|
||||
"-opt-in=androidx.compose.material.ExperimentalMaterialApi",
|
||||
"-opt-in=androidx.compose.material3.ExperimentalMaterial3Api",
|
||||
"-opt-in=androidx.compose.material.ExperimentalMaterialApi",
|
||||
"-opt-in=androidx.compose.ui.ExperimentalComposeUiApi",
|
||||
"-opt-in=androidx.compose.foundation.ExperimentalFoundationApi",
|
||||
"-opt-in=androidx.compose.animation.ExperimentalAnimationApi",
|
||||
"-opt-in=androidx.compose.animation.graphics.ExperimentalAnimationGraphicsApi",
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
@ -0,0 +1,98 @@
|
||||
package tachiyomi.presentation.core.components
|
||||
|
||||
import androidx.compose.foundation.background
|
||||
import androidx.compose.foundation.layout.Row
|
||||
import androidx.compose.foundation.layout.RowScope
|
||||
import androidx.compose.foundation.layout.padding
|
||||
import androidx.compose.foundation.text.InlineTextContent
|
||||
import androidx.compose.foundation.text.appendInlineContent
|
||||
import androidx.compose.material3.Icon
|
||||
import androidx.compose.material3.MaterialTheme
|
||||
import androidx.compose.material3.Text
|
||||
import androidx.compose.runtime.Composable
|
||||
import androidx.compose.ui.Modifier
|
||||
import androidx.compose.ui.draw.clip
|
||||
import androidx.compose.ui.graphics.Color
|
||||
import androidx.compose.ui.graphics.RectangleShape
|
||||
import androidx.compose.ui.graphics.Shape
|
||||
import androidx.compose.ui.graphics.vector.ImageVector
|
||||
import androidx.compose.ui.text.Placeholder
|
||||
import androidx.compose.ui.text.PlaceholderVerticalAlign
|
||||
import androidx.compose.ui.text.buildAnnotatedString
|
||||
import androidx.compose.ui.text.font.FontWeight
|
||||
import androidx.compose.ui.unit.dp
|
||||
|
||||
@Composable
|
||||
fun BadgeGroup(
|
||||
modifier: Modifier = Modifier,
|
||||
shape: Shape = MaterialTheme.shapes.extraSmall,
|
||||
content: @Composable RowScope.() -> Unit,
|
||||
) {
|
||||
Row(modifier = modifier.clip(shape)) {
|
||||
content()
|
||||
}
|
||||
}
|
||||
|
||||
@Composable
|
||||
fun Badge(
|
||||
text: String,
|
||||
color: Color = MaterialTheme.colorScheme.secondary,
|
||||
textColor: Color = MaterialTheme.colorScheme.onSecondary,
|
||||
shape: Shape = RectangleShape,
|
||||
) {
|
||||
Text(
|
||||
text = text,
|
||||
modifier = Modifier
|
||||
.clip(shape)
|
||||
.background(color)
|
||||
.padding(horizontal = 3.dp, vertical = 1.dp),
|
||||
color = textColor,
|
||||
fontWeight = FontWeight.Medium,
|
||||
maxLines = 1,
|
||||
style = MaterialTheme.typography.bodySmall,
|
||||
)
|
||||
}
|
||||
|
||||
@Composable
|
||||
fun Badge(
|
||||
imageVector: ImageVector,
|
||||
color: Color = MaterialTheme.colorScheme.secondary,
|
||||
iconColor: Color = MaterialTheme.colorScheme.onSecondary,
|
||||
shape: Shape = RectangleShape,
|
||||
) {
|
||||
val iconContentPlaceholder = "[icon]"
|
||||
val text = buildAnnotatedString {
|
||||
appendInlineContent(iconContentPlaceholder)
|
||||
}
|
||||
val inlineContent = mapOf(
|
||||
Pair(
|
||||
iconContentPlaceholder,
|
||||
InlineTextContent(
|
||||
Placeholder(
|
||||
width = MaterialTheme.typography.bodySmall.fontSize,
|
||||
height = MaterialTheme.typography.bodySmall.fontSize,
|
||||
placeholderVerticalAlign = PlaceholderVerticalAlign.Center,
|
||||
),
|
||||
) {
|
||||
Icon(
|
||||
imageVector = imageVector,
|
||||
tint = iconColor,
|
||||
contentDescription = null,
|
||||
)
|
||||
},
|
||||
),
|
||||
)
|
||||
|
||||
Text(
|
||||
text = text,
|
||||
inlineContent = inlineContent,
|
||||
modifier = Modifier
|
||||
.clip(shape)
|
||||
.background(color)
|
||||
.padding(horizontal = 3.dp, vertical = 1.dp),
|
||||
color = iconColor,
|
||||
fontWeight = FontWeight.Medium,
|
||||
maxLines = 1,
|
||||
style = MaterialTheme.typography.bodySmall,
|
||||
)
|
||||
}
|
||||
@ -0,0 +1,41 @@
|
||||
package tachiyomi.presentation.core.components
|
||||
|
||||
import androidx.compose.foundation.layout.padding
|
||||
import androidx.compose.material3.Icon
|
||||
import androidx.compose.material3.IconButton
|
||||
import androidx.compose.material3.MaterialTheme
|
||||
import androidx.compose.runtime.Composable
|
||||
import androidx.compose.ui.Modifier
|
||||
import androidx.compose.ui.graphics.painter.Painter
|
||||
import androidx.compose.ui.platform.LocalUriHandler
|
||||
import androidx.compose.ui.unit.dp
|
||||
|
||||
@Composable
|
||||
fun LinkIcon(
|
||||
modifier: Modifier = Modifier,
|
||||
label: String,
|
||||
painter: Painter,
|
||||
url: String,
|
||||
) {
|
||||
val uriHandler = LocalUriHandler.current
|
||||
LinkIcon(modifier, label, painter) { uriHandler.openUri(url) }
|
||||
}
|
||||
|
||||
@Composable
|
||||
fun LinkIcon(
|
||||
modifier: Modifier = Modifier,
|
||||
label: String,
|
||||
painter: Painter,
|
||||
onClick: () -> Unit,
|
||||
) {
|
||||
IconButton(
|
||||
modifier = modifier.padding(4.dp),
|
||||
onClick = onClick,
|
||||
) {
|
||||
Icon(
|
||||
painter = painter,
|
||||
tint = MaterialTheme.colorScheme.primary,
|
||||
contentDescription = label,
|
||||
)
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,48 @@
|
||||
package tachiyomi.presentation.core.components
|
||||
|
||||
import androidx.compose.foundation.layout.Box
|
||||
import androidx.compose.foundation.layout.IntrinsicSize
|
||||
import androidx.compose.foundation.layout.padding
|
||||
import androidx.compose.foundation.layout.requiredWidth
|
||||
import androidx.compose.material3.LocalTextStyle
|
||||
import androidx.compose.material3.MaterialTheme
|
||||
import androidx.compose.material3.Text
|
||||
import androidx.compose.runtime.Composable
|
||||
import androidx.compose.ui.Alignment
|
||||
import androidx.compose.ui.Modifier
|
||||
import androidx.compose.ui.graphics.Color
|
||||
import androidx.compose.ui.unit.Dp
|
||||
import androidx.compose.ui.unit.TextUnit
|
||||
import androidx.compose.ui.unit.dp
|
||||
|
||||
@Composable
|
||||
fun Pill(
|
||||
text: String,
|
||||
modifier: Modifier = Modifier,
|
||||
color: Color = MaterialTheme.colorScheme.background,
|
||||
contentColor: Color = MaterialTheme.colorScheme.onBackground,
|
||||
elevation: Dp = 1.dp,
|
||||
fontSize: TextUnit = LocalTextStyle.current.fontSize,
|
||||
) {
|
||||
androidx.compose.material3.Surface(
|
||||
modifier = modifier
|
||||
.padding(start = 4.dp),
|
||||
shape = MaterialTheme.shapes.extraLarge,
|
||||
color = color,
|
||||
contentColor = contentColor,
|
||||
tonalElevation = elevation,
|
||||
) {
|
||||
Box(
|
||||
modifier = Modifier
|
||||
.requiredWidth(IntrinsicSize.Max)
|
||||
.padding(6.dp, 1.dp),
|
||||
contentAlignment = Alignment.Center,
|
||||
) {
|
||||
Text(
|
||||
text = text,
|
||||
fontSize = fontSize,
|
||||
maxLines = 1,
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,93 @@
|
||||
package tachiyomi.presentation.core.components.material
|
||||
|
||||
import androidx.compose.foundation.layout.Box
|
||||
import androidx.compose.foundation.layout.Column
|
||||
import androidx.compose.foundation.layout.PaddingValues
|
||||
import androidx.compose.foundation.layout.padding
|
||||
import androidx.compose.foundation.layout.sizeIn
|
||||
import androidx.compose.material3.LocalContentColor
|
||||
import androidx.compose.material3.MaterialTheme
|
||||
import androidx.compose.material3.ProvideTextStyle
|
||||
import androidx.compose.runtime.Composable
|
||||
import androidx.compose.runtime.CompositionLocalProvider
|
||||
import androidx.compose.ui.Alignment
|
||||
import androidx.compose.ui.Modifier
|
||||
import androidx.compose.ui.unit.dp
|
||||
|
||||
@Composable
|
||||
fun AlertDialogContent(
|
||||
buttons: @Composable () -> Unit,
|
||||
modifier: Modifier = Modifier,
|
||||
icon: (@Composable () -> Unit)? = null,
|
||||
title: (@Composable () -> Unit)? = null,
|
||||
text: @Composable (() -> Unit)? = null,
|
||||
) {
|
||||
Column(
|
||||
modifier = modifier
|
||||
.sizeIn(minWidth = MinWidth, maxWidth = MaxWidth)
|
||||
.padding(DialogPadding),
|
||||
) {
|
||||
icon?.let {
|
||||
CompositionLocalProvider(LocalContentColor provides MaterialTheme.colorScheme.secondary) {
|
||||
Box(
|
||||
Modifier
|
||||
.padding(IconPadding)
|
||||
.align(Alignment.CenterHorizontally),
|
||||
) {
|
||||
icon()
|
||||
}
|
||||
}
|
||||
}
|
||||
title?.let {
|
||||
CompositionLocalProvider(LocalContentColor provides MaterialTheme.colorScheme.onSurface) {
|
||||
val textStyle = MaterialTheme.typography.headlineSmall
|
||||
ProvideTextStyle(textStyle) {
|
||||
Box(
|
||||
// Align the title to the center when an icon is present.
|
||||
Modifier
|
||||
.padding(TitlePadding)
|
||||
.align(
|
||||
if (icon == null) {
|
||||
Alignment.Start
|
||||
} else {
|
||||
Alignment.CenterHorizontally
|
||||
},
|
||||
),
|
||||
) {
|
||||
title()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
text?.let {
|
||||
CompositionLocalProvider(LocalContentColor provides MaterialTheme.colorScheme.onSurfaceVariant) {
|
||||
val textStyle = MaterialTheme.typography.bodyMedium
|
||||
ProvideTextStyle(textStyle) {
|
||||
Box(
|
||||
Modifier
|
||||
.weight(weight = 1f, fill = false)
|
||||
.padding(TextPadding)
|
||||
.align(Alignment.Start),
|
||||
) {
|
||||
text()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Box(modifier = Modifier.align(Alignment.End)) {
|
||||
CompositionLocalProvider(LocalContentColor provides MaterialTheme.colorScheme.primary) {
|
||||
val textStyle = MaterialTheme.typography.labelLarge
|
||||
ProvideTextStyle(value = textStyle, content = buttons)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Paddings for each of the dialog's parts.
|
||||
private val DialogPadding = PaddingValues(all = 24.dp)
|
||||
private val IconPadding = PaddingValues(bottom = 16.dp)
|
||||
private val TitlePadding = PaddingValues(bottom = 16.dp)
|
||||
private val TextPadding = PaddingValues(bottom = 24.dp)
|
||||
|
||||
private val MinWidth = 280.dp
|
||||
private val MaxWidth = 560.dp
|
||||
@ -0,0 +1,44 @@
|
||||
package tachiyomi.presentation.core.components.material
|
||||
|
||||
import androidx.compose.foundation.background
|
||||
import androidx.compose.foundation.layout.Box
|
||||
import androidx.compose.foundation.layout.fillMaxHeight
|
||||
import androidx.compose.foundation.layout.fillMaxWidth
|
||||
import androidx.compose.foundation.layout.height
|
||||
import androidx.compose.foundation.layout.width
|
||||
import androidx.compose.material3.DividerDefaults
|
||||
import androidx.compose.runtime.Composable
|
||||
import androidx.compose.ui.Modifier
|
||||
import androidx.compose.ui.draw.alpha
|
||||
import androidx.compose.ui.graphics.Color
|
||||
import androidx.compose.ui.unit.dp
|
||||
|
||||
const val DIVIDER_ALPHA = 0.2f
|
||||
|
||||
@Composable
|
||||
fun Divider(
|
||||
modifier: Modifier = Modifier,
|
||||
color: Color = DividerDefaults.color,
|
||||
) {
|
||||
Box(
|
||||
modifier
|
||||
.fillMaxWidth()
|
||||
.height(1.dp)
|
||||
.background(color = color)
|
||||
.alpha(DIVIDER_ALPHA),
|
||||
)
|
||||
}
|
||||
|
||||
@Composable
|
||||
fun VerticalDivider(
|
||||
modifier: Modifier = Modifier,
|
||||
color: Color = DividerDefaults.color,
|
||||
) {
|
||||
Box(
|
||||
modifier
|
||||
.fillMaxHeight()
|
||||
.width(1.dp)
|
||||
.background(color = color)
|
||||
.alpha(DIVIDER_ALPHA),
|
||||
)
|
||||
}
|
||||
@ -0,0 +1,116 @@
|
||||
package tachiyomi.presentation.core.components.material
|
||||
|
||||
import androidx.compose.animation.AnimatedVisibility
|
||||
import androidx.compose.animation.core.CubicBezierEasing
|
||||
import androidx.compose.animation.core.animateDpAsState
|
||||
import androidx.compose.animation.core.tween
|
||||
import androidx.compose.animation.expandHorizontally
|
||||
import androidx.compose.animation.fadeIn
|
||||
import androidx.compose.animation.fadeOut
|
||||
import androidx.compose.animation.shrinkHorizontally
|
||||
import androidx.compose.foundation.interaction.MutableInteractionSource
|
||||
import androidx.compose.foundation.layout.Row
|
||||
import androidx.compose.foundation.layout.Spacer
|
||||
import androidx.compose.foundation.layout.padding
|
||||
import androidx.compose.foundation.layout.sizeIn
|
||||
import androidx.compose.foundation.layout.width
|
||||
import androidx.compose.material3.FloatingActionButton
|
||||
import androidx.compose.material3.FloatingActionButtonDefaults
|
||||
import androidx.compose.material3.FloatingActionButtonElevation
|
||||
import androidx.compose.material3.MaterialTheme
|
||||
import androidx.compose.material3.contentColorFor
|
||||
import androidx.compose.runtime.Composable
|
||||
import androidx.compose.runtime.getValue
|
||||
import androidx.compose.runtime.remember
|
||||
import androidx.compose.ui.Alignment
|
||||
import androidx.compose.ui.Modifier
|
||||
import androidx.compose.ui.graphics.Color
|
||||
import androidx.compose.ui.graphics.Shape
|
||||
import androidx.compose.ui.unit.dp
|
||||
|
||||
/**
|
||||
* ExtendedFloatingActionButton with custom transition between collapsed/expanded state.
|
||||
*
|
||||
* @see androidx.compose.material3.ExtendedFloatingActionButton
|
||||
*/
|
||||
@Composable
|
||||
fun ExtendedFloatingActionButton(
|
||||
text: @Composable () -> Unit,
|
||||
icon: @Composable () -> Unit,
|
||||
onClick: () -> Unit,
|
||||
modifier: Modifier = Modifier,
|
||||
expanded: Boolean = true,
|
||||
interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
|
||||
shape: Shape = MaterialTheme.shapes.large,
|
||||
containerColor: Color = MaterialTheme.colorScheme.primaryContainer,
|
||||
contentColor: Color = contentColorFor(containerColor),
|
||||
elevation: FloatingActionButtonElevation = FloatingActionButtonDefaults.elevation(),
|
||||
) {
|
||||
val minWidth by animateDpAsState(if (expanded) ExtendedFabMinimumWidth else FabContainerWidth)
|
||||
FloatingActionButton(
|
||||
modifier = modifier.sizeIn(minWidth = minWidth),
|
||||
onClick = onClick,
|
||||
interactionSource = interactionSource,
|
||||
shape = shape,
|
||||
containerColor = containerColor,
|
||||
contentColor = contentColor,
|
||||
elevation = elevation,
|
||||
) {
|
||||
val startPadding by animateDpAsState(if (expanded) ExtendedFabIconSize / 2 else 0.dp)
|
||||
val endPadding by animateDpAsState(if (expanded) ExtendedFabTextPadding else 0.dp)
|
||||
|
||||
Row(
|
||||
modifier = Modifier.padding(start = startPadding, end = endPadding),
|
||||
verticalAlignment = Alignment.CenterVertically,
|
||||
) {
|
||||
icon()
|
||||
AnimatedVisibility(
|
||||
visible = expanded,
|
||||
enter = ExtendedFabExpandAnimation,
|
||||
exit = ExtendedFabCollapseAnimation,
|
||||
) {
|
||||
Row {
|
||||
Spacer(Modifier.width(ExtendedFabIconPadding))
|
||||
text()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
private val EasingLinearCubicBezier = CubicBezierEasing(0.0f, 0.0f, 1.0f, 1.0f)
|
||||
private val EasingEmphasizedCubicBezier = CubicBezierEasing(0.2f, 0.0f, 0.0f, 1.0f)
|
||||
|
||||
private val ExtendedFabMinimumWidth = 80.dp
|
||||
private val ExtendedFabIconSize = 24.0.dp
|
||||
private val ExtendedFabIconPadding = 12.dp
|
||||
private val ExtendedFabTextPadding = 20.dp
|
||||
|
||||
private val ExtendedFabCollapseAnimation = fadeOut(
|
||||
animationSpec = tween(
|
||||
durationMillis = 100,
|
||||
easing = EasingLinearCubicBezier,
|
||||
),
|
||||
) + shrinkHorizontally(
|
||||
animationSpec = tween(
|
||||
durationMillis = 500,
|
||||
easing = EasingEmphasizedCubicBezier,
|
||||
),
|
||||
shrinkTowards = Alignment.Start,
|
||||
)
|
||||
|
||||
private val ExtendedFabExpandAnimation = fadeIn(
|
||||
animationSpec = tween(
|
||||
durationMillis = 200,
|
||||
delayMillis = 100,
|
||||
easing = EasingLinearCubicBezier,
|
||||
),
|
||||
) + expandHorizontally(
|
||||
animationSpec = tween(
|
||||
durationMillis = 500,
|
||||
easing = EasingEmphasizedCubicBezier,
|
||||
),
|
||||
expandFrom = Alignment.Start,
|
||||
)
|
||||
|
||||
private val FabContainerWidth = 56.0.dp
|
||||
@ -0,0 +1,56 @@
|
||||
package tachiyomi.presentation.core.components.material
|
||||
|
||||
import androidx.compose.foundation.layout.Box
|
||||
import androidx.compose.foundation.layout.PaddingValues
|
||||
import androidx.compose.foundation.layout.padding
|
||||
import androidx.compose.material.pullrefresh.PullRefreshIndicator
|
||||
import androidx.compose.material.pullrefresh.pullRefresh
|
||||
import androidx.compose.material.pullrefresh.rememberPullRefreshState
|
||||
import androidx.compose.material3.MaterialTheme
|
||||
import androidx.compose.runtime.Composable
|
||||
import androidx.compose.ui.Alignment
|
||||
import androidx.compose.ui.Modifier
|
||||
import androidx.compose.ui.draw.clipToBounds
|
||||
import androidx.compose.ui.unit.dp
|
||||
|
||||
/**
|
||||
* @param refreshing Whether the layout is currently refreshing
|
||||
* @param onRefresh Lambda which is invoked when a swipe to refresh gesture is completed.
|
||||
* @param enabled Whether the the layout should react to swipe gestures or not.
|
||||
* @param indicatorPadding Content padding for the indicator, to inset the indicator in if required.
|
||||
* @param content The content containing a vertically scrollable composable.
|
||||
*
|
||||
* Code reference: [Accompanist SwipeRefresh](https://github.com/google/accompanist/blob/677bc4ca0ee74677a8ba73793d04d85fe4ab55fb/swiperefresh/src/main/java/com/google/accompanist/swiperefresh/SwipeRefresh.kt#L265-L283)
|
||||
*/
|
||||
@Composable
|
||||
fun PullRefresh(
|
||||
refreshing: Boolean,
|
||||
onRefresh: () -> Unit,
|
||||
enabled: Boolean,
|
||||
indicatorPadding: PaddingValues = PaddingValues(0.dp),
|
||||
content: @Composable () -> Unit,
|
||||
) {
|
||||
val state = rememberPullRefreshState(
|
||||
refreshing = refreshing,
|
||||
onRefresh = onRefresh,
|
||||
)
|
||||
|
||||
Box(Modifier.pullRefresh(state, enabled)) {
|
||||
content()
|
||||
|
||||
Box(
|
||||
Modifier
|
||||
.padding(indicatorPadding)
|
||||
.matchParentSize()
|
||||
.clipToBounds(),
|
||||
) {
|
||||
PullRefreshIndicator(
|
||||
refreshing = refreshing,
|
||||
state = state,
|
||||
modifier = Modifier.align(Alignment.TopCenter),
|
||||
backgroundColor = MaterialTheme.colorScheme.primary,
|
||||
contentColor = MaterialTheme.colorScheme.onPrimary,
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,360 @@
|
||||
/*
|
||||
* Copyright 2021 The Android Open Source Project
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
package tachiyomi.presentation.core.components.material
|
||||
|
||||
import androidx.compose.foundation.layout.MutableWindowInsets
|
||||
import androidx.compose.foundation.layout.PaddingValues
|
||||
import androidx.compose.foundation.layout.WindowInsets
|
||||
import androidx.compose.foundation.layout.asPaddingValues
|
||||
import androidx.compose.foundation.layout.calculateEndPadding
|
||||
import androidx.compose.foundation.layout.calculateStartPadding
|
||||
import androidx.compose.foundation.layout.exclude
|
||||
import androidx.compose.foundation.layout.onConsumedWindowInsetsChanged
|
||||
import androidx.compose.material3.ExperimentalMaterial3Api
|
||||
import androidx.compose.material3.MaterialTheme
|
||||
import androidx.compose.material3.ScaffoldDefaults
|
||||
import androidx.compose.material3.TopAppBarDefaults
|
||||
import androidx.compose.material3.TopAppBarScrollBehavior
|
||||
import androidx.compose.material3.contentColorFor
|
||||
import androidx.compose.material3.rememberTopAppBarState
|
||||
import androidx.compose.runtime.Composable
|
||||
import androidx.compose.runtime.CompositionLocalProvider
|
||||
import androidx.compose.runtime.Immutable
|
||||
import androidx.compose.runtime.remember
|
||||
import androidx.compose.runtime.staticCompositionLocalOf
|
||||
import androidx.compose.ui.Modifier
|
||||
import androidx.compose.ui.graphics.Color
|
||||
import androidx.compose.ui.input.nestedscroll.nestedScroll
|
||||
import androidx.compose.ui.layout.SubcomposeLayout
|
||||
import androidx.compose.ui.unit.Constraints
|
||||
import androidx.compose.ui.unit.LayoutDirection
|
||||
import androidx.compose.ui.unit.dp
|
||||
import androidx.compose.ui.unit.max
|
||||
import androidx.compose.ui.util.fastForEach
|
||||
import androidx.compose.ui.util.fastMap
|
||||
import androidx.compose.ui.util.fastMaxBy
|
||||
import kotlin.math.max
|
||||
|
||||
/**
|
||||
* <a href="https://material.io/design/layout/understanding-layout.html" class="external" target="_blank">Material Design layout</a>.
|
||||
*
|
||||
* Scaffold implements the basic material design visual layout structure.
|
||||
*
|
||||
* This component provides API to put together several material components to construct your
|
||||
* screen, by ensuring proper layout strategy for them and collecting necessary data so these
|
||||
* components will work together correctly.
|
||||
*
|
||||
* Simple example of a Scaffold with [SmallTopAppBar], [FloatingActionButton]:
|
||||
*
|
||||
* @sample androidx.compose.material3.samples.SimpleScaffoldWithTopBar
|
||||
*
|
||||
* To show a [Snackbar], use [SnackbarHostState.showSnackbar].
|
||||
*
|
||||
* @sample androidx.compose.material3.samples.ScaffoldWithSimpleSnackbar
|
||||
*
|
||||
* Tachiyomi changes:
|
||||
* * Pass scroll behavior to top bar by default
|
||||
* * Remove height constraint for expanded app bar
|
||||
* * Also take account of fab height when providing inner padding
|
||||
* * Fixes for fab and snackbar horizontal placements when [contentWindowInsets] is used
|
||||
* * Handle consumed window insets
|
||||
* * Add startBar slot for Navigation Rail
|
||||
*
|
||||
* @param modifier the [Modifier] to be applied to this scaffold
|
||||
* @param topBar top app bar of the screen, typically a [SmallTopAppBar]
|
||||
* @param startBar side bar on the start of the screen, typically a [NavigationRail]
|
||||
* @param bottomBar bottom bar of the screen, typically a [NavigationBar]
|
||||
* @param snackbarHost component to host [Snackbar]s that are pushed to be shown via
|
||||
* [SnackbarHostState.showSnackbar], typically a [SnackbarHost]
|
||||
* @param floatingActionButton Main action button of the screen, typically a [FloatingActionButton]
|
||||
* @param floatingActionButtonPosition position of the FAB on the screen. See [FabPosition].
|
||||
* @param containerColor the color used for the background of this scaffold. Use [Color.Transparent]
|
||||
* to have no color.
|
||||
* @param contentColor the preferred color for content inside this scaffold. Defaults to either the
|
||||
* matching content color for [containerColor], or to the current [LocalContentColor] if
|
||||
* [containerColor] is not a color from the theme.
|
||||
* @param contentWindowInsets window insets to be passed to content slot via PaddingValues params.
|
||||
* Scaffold will take the insets into account from the top/bottom only if the topBar/ bottomBar
|
||||
* are not present, as the scaffold expect topBar/bottomBar to handle insets instead
|
||||
* @param content content of the screen. The lambda receives a [PaddingValues] that should be
|
||||
* applied to the content root via [Modifier.padding] and [Modifier.consumeWindowInsets] to
|
||||
* properly offset top and bottom bars. If using [Modifier.verticalScroll], apply this modifier to
|
||||
* the child of the scroll, and not on the scroll itself.
|
||||
*/
|
||||
@ExperimentalMaterial3Api
|
||||
@Composable
|
||||
fun Scaffold(
|
||||
modifier: Modifier = Modifier,
|
||||
topBarScrollBehavior: TopAppBarScrollBehavior = TopAppBarDefaults.pinnedScrollBehavior(rememberTopAppBarState()),
|
||||
topBar: @Composable (TopAppBarScrollBehavior) -> Unit = {},
|
||||
bottomBar: @Composable () -> Unit = {},
|
||||
startBar: @Composable () -> Unit = {},
|
||||
snackbarHost: @Composable () -> Unit = {},
|
||||
floatingActionButton: @Composable () -> Unit = {},
|
||||
floatingActionButtonPosition: FabPosition = FabPosition.End,
|
||||
containerColor: Color = MaterialTheme.colorScheme.background,
|
||||
contentColor: Color = contentColorFor(containerColor),
|
||||
contentWindowInsets: WindowInsets = ScaffoldDefaults.contentWindowInsets,
|
||||
content: @Composable (PaddingValues) -> Unit,
|
||||
) {
|
||||
// Tachiyomi: Handle consumed window insets
|
||||
val remainingWindowInsets = remember { MutableWindowInsets() }
|
||||
androidx.compose.material3.Surface(
|
||||
modifier = Modifier
|
||||
.nestedScroll(topBarScrollBehavior.nestedScrollConnection)
|
||||
.onConsumedWindowInsetsChanged { remainingWindowInsets.insets = contentWindowInsets.exclude(it) }
|
||||
.then(modifier),
|
||||
color = containerColor,
|
||||
contentColor = contentColor,
|
||||
) {
|
||||
ScaffoldLayout(
|
||||
fabPosition = floatingActionButtonPosition,
|
||||
topBar = { topBar(topBarScrollBehavior) },
|
||||
startBar = startBar,
|
||||
bottomBar = bottomBar,
|
||||
content = content,
|
||||
snackbar = snackbarHost,
|
||||
contentWindowInsets = remainingWindowInsets,
|
||||
fab = floatingActionButton,
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Layout for a [Scaffold]'s content.
|
||||
*
|
||||
* @param fabPosition [FabPosition] for the FAB (if present)
|
||||
* @param topBar the content to place at the top of the [Scaffold], typically a [SmallTopAppBar]
|
||||
* @param content the main 'body' of the [Scaffold]
|
||||
* @param snackbar the [Snackbar] displayed on top of the [content]
|
||||
* @param fab the [FloatingActionButton] displayed on top of the [content], below the [snackbar]
|
||||
* and above the [bottomBar]
|
||||
* @param bottomBar the content to place at the bottom of the [Scaffold], on top of the
|
||||
* [content], typically a [NavigationBar].
|
||||
*/
|
||||
@OptIn(ExperimentalMaterial3Api::class)
|
||||
@Composable
|
||||
private fun ScaffoldLayout(
|
||||
fabPosition: FabPosition,
|
||||
topBar: @Composable () -> Unit,
|
||||
startBar: @Composable () -> Unit,
|
||||
content: @Composable (PaddingValues) -> Unit,
|
||||
snackbar: @Composable () -> Unit,
|
||||
fab: @Composable () -> Unit,
|
||||
contentWindowInsets: WindowInsets,
|
||||
bottomBar: @Composable () -> Unit,
|
||||
) {
|
||||
SubcomposeLayout { constraints ->
|
||||
val layoutWidth = constraints.maxWidth
|
||||
val layoutHeight = constraints.maxHeight
|
||||
|
||||
val looseConstraints = constraints.copy(minWidth = 0, minHeight = 0)
|
||||
|
||||
/**
|
||||
* Tachiyomi: Remove height constraint for expanded app bar
|
||||
*/
|
||||
val topBarConstraints = looseConstraints.copy(maxHeight = Constraints.Infinity)
|
||||
|
||||
layout(layoutWidth, layoutHeight) {
|
||||
val leftInset = contentWindowInsets.getLeft(this@SubcomposeLayout, layoutDirection)
|
||||
val rightInset = contentWindowInsets.getRight(this@SubcomposeLayout, layoutDirection)
|
||||
val bottomInset = contentWindowInsets.getBottom(this@SubcomposeLayout)
|
||||
|
||||
// Tachiyomi: Add startBar slot for Navigation Rail
|
||||
val startBarPlaceables = subcompose(ScaffoldLayoutContent.StartBar, startBar).fastMap {
|
||||
it.measure(looseConstraints)
|
||||
}
|
||||
val startBarWidth = startBarPlaceables.fastMaxBy { it.width }?.width ?: 0
|
||||
|
||||
// Tachiyomi: layoutWidth after horizontal insets
|
||||
val insetLayoutWidth = layoutWidth - leftInset - rightInset - startBarWidth
|
||||
|
||||
val topBarPlaceables = subcompose(ScaffoldLayoutContent.TopBar, topBar).fastMap {
|
||||
it.measure(topBarConstraints)
|
||||
}
|
||||
|
||||
val topBarHeight = topBarPlaceables.fastMaxBy { it.height }?.height ?: 0
|
||||
|
||||
val snackbarPlaceables = subcompose(ScaffoldLayoutContent.Snackbar, snackbar).fastMap {
|
||||
it.measure(looseConstraints)
|
||||
}
|
||||
|
||||
val snackbarHeight = snackbarPlaceables.fastMaxBy { it.height }?.height ?: 0
|
||||
val snackbarWidth = snackbarPlaceables.fastMaxBy { it.width }?.width ?: 0
|
||||
|
||||
// Tachiyomi: Calculate insets for snackbar placement offset
|
||||
val snackbarLeft = if (snackbarPlaceables.isNotEmpty()) {
|
||||
(insetLayoutWidth - snackbarWidth) / 2 + leftInset
|
||||
} else {
|
||||
0
|
||||
}
|
||||
|
||||
val fabPlaceables =
|
||||
subcompose(ScaffoldLayoutContent.Fab, fab).fastMap { measurable ->
|
||||
measurable.measure(looseConstraints)
|
||||
}
|
||||
|
||||
val fabWidth = fabPlaceables.fastMaxBy { it.width }?.width ?: 0
|
||||
val fabHeight = fabPlaceables.fastMaxBy { it.height }?.height ?: 0
|
||||
|
||||
val fabPlacement = if (fabPlaceables.isNotEmpty() && fabWidth != 0 && fabHeight != 0) {
|
||||
// FAB distance from the left of the layout, taking into account LTR / RTL
|
||||
// Tachiyomi: Calculate insets for fab placement offset
|
||||
val fabLeftOffset = if (fabPosition == FabPosition.End) {
|
||||
if (layoutDirection == LayoutDirection.Ltr) {
|
||||
layoutWidth - FabSpacing.roundToPx() - fabWidth - rightInset
|
||||
} else {
|
||||
FabSpacing.roundToPx() + leftInset
|
||||
}
|
||||
} else {
|
||||
leftInset + ((insetLayoutWidth - fabWidth) / 2)
|
||||
}
|
||||
|
||||
FabPlacement(
|
||||
left = fabLeftOffset,
|
||||
width = fabWidth,
|
||||
height = fabHeight,
|
||||
)
|
||||
} else {
|
||||
null
|
||||
}
|
||||
|
||||
val bottomBarPlaceables = subcompose(ScaffoldLayoutContent.BottomBar) {
|
||||
CompositionLocalProvider(
|
||||
LocalFabPlacement provides fabPlacement,
|
||||
content = bottomBar,
|
||||
)
|
||||
}.fastMap { it.measure(looseConstraints) }
|
||||
|
||||
val bottomBarHeight = bottomBarPlaceables
|
||||
.fastMaxBy { it.height }
|
||||
?.height
|
||||
?.takeIf { it != 0 }
|
||||
val fabOffsetFromBottom = fabPlacement?.let {
|
||||
max(bottomBarHeight ?: 0, bottomInset) + it.height + FabSpacing.roundToPx()
|
||||
}
|
||||
|
||||
val snackbarOffsetFromBottom = if (snackbarHeight != 0) {
|
||||
snackbarHeight + (fabOffsetFromBottom ?: max(bottomBarHeight ?: 0, bottomInset))
|
||||
} else {
|
||||
0
|
||||
}
|
||||
|
||||
val bodyContentPlaceables = subcompose(ScaffoldLayoutContent.MainContent) {
|
||||
val insets = contentWindowInsets.asPaddingValues(this@SubcomposeLayout)
|
||||
val fabOffsetDp = fabOffsetFromBottom?.toDp() ?: 0.dp
|
||||
val bottomBarHeightPx = bottomBarHeight ?: 0
|
||||
val innerPadding = PaddingValues(
|
||||
top =
|
||||
if (topBarPlaceables.isEmpty()) {
|
||||
insets.calculateTopPadding()
|
||||
} else {
|
||||
topBarHeight.toDp()
|
||||
},
|
||||
bottom = // Tachiyomi: Also take account of fab height when providing inner padding
|
||||
if (bottomBarPlaceables.isEmpty() || bottomBarHeightPx == 0) {
|
||||
max(insets.calculateBottomPadding(), fabOffsetDp)
|
||||
} else {
|
||||
max(bottomBarHeightPx.toDp(), fabOffsetDp)
|
||||
},
|
||||
start = max(insets.calculateStartPadding((this@SubcomposeLayout).layoutDirection), startBarWidth.toDp()),
|
||||
end = insets.calculateEndPadding((this@SubcomposeLayout).layoutDirection),
|
||||
)
|
||||
content(innerPadding)
|
||||
}.fastMap { it.measure(looseConstraints) }
|
||||
|
||||
// Placing to control drawing order to match default elevation of each placeable
|
||||
|
||||
bodyContentPlaceables.fastForEach {
|
||||
it.place(0, 0)
|
||||
}
|
||||
startBarPlaceables.fastForEach {
|
||||
it.placeRelative(0, 0)
|
||||
}
|
||||
topBarPlaceables.fastForEach {
|
||||
it.place(0, 0)
|
||||
}
|
||||
snackbarPlaceables.fastForEach {
|
||||
it.place(
|
||||
snackbarLeft,
|
||||
layoutHeight - snackbarOffsetFromBottom,
|
||||
)
|
||||
}
|
||||
// The bottom bar is always at the bottom of the layout
|
||||
bottomBarPlaceables.fastForEach {
|
||||
it.place(0, layoutHeight - (bottomBarHeight ?: 0))
|
||||
}
|
||||
// Explicitly not using placeRelative here as `leftOffset` already accounts for RTL
|
||||
fabPlaceables.fastForEach {
|
||||
it.place(fabPlacement?.left ?: 0, layoutHeight - (fabOffsetFromBottom ?: 0))
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* The possible positions for a [FloatingActionButton] attached to a [Scaffold].
|
||||
*/
|
||||
@ExperimentalMaterial3Api
|
||||
@JvmInline
|
||||
value class FabPosition internal constructor(@Suppress("unused") private val value: Int) {
|
||||
companion object {
|
||||
/**
|
||||
* Position FAB at the bottom of the screen in the center, above the [NavigationBar] (if it
|
||||
* exists)
|
||||
*/
|
||||
val Center = FabPosition(0)
|
||||
|
||||
/**
|
||||
* Position FAB at the bottom of the screen at the end, above the [NavigationBar] (if it
|
||||
* exists)
|
||||
*/
|
||||
val End = FabPosition(1)
|
||||
}
|
||||
|
||||
override fun toString(): String {
|
||||
return when (this) {
|
||||
Center -> "FabPosition.Center"
|
||||
else -> "FabPosition.End"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Placement information for a [FloatingActionButton] inside a [Scaffold].
|
||||
*
|
||||
* @property left the FAB's offset from the left edge of the bottom bar, already adjusted for RTL
|
||||
* support
|
||||
* @property width the width of the FAB
|
||||
* @property height the height of the FAB
|
||||
*/
|
||||
@Immutable
|
||||
internal class FabPlacement(
|
||||
val left: Int,
|
||||
val width: Int,
|
||||
val height: Int,
|
||||
)
|
||||
|
||||
/**
|
||||
* CompositionLocal containing a [FabPlacement] that is used to calculate the FAB bottom offset.
|
||||
*/
|
||||
internal val LocalFabPlacement = staticCompositionLocalOf<FabPlacement?> { null }
|
||||
|
||||
// FAB spacing above the bottom bar / bottom of the Scaffold
|
||||
private val FabSpacing = 16.dp
|
||||
|
||||
private enum class ScaffoldLayoutContent { TopBar, MainContent, Snackbar, Fab, BottomBar, StartBar }
|
||||
Reference in New Issue
Block a user