From d0950cb02687ad99a1f7947b136419ee27ca5b7d Mon Sep 17 00:00:00 2001 From: arkon Date: Sun, 9 Oct 2022 11:48:46 -0400 Subject: [PATCH] Document copied M3 component customizations --- .../category/components/CategoryDialogs.kt | 2 +- .../kanade/presentation/components/Button.kt | 10 + .../components/FloatingActionButton.kt | 5 + .../presentation/components/IconButton.kt | 184 +----------------- .../kanade/presentation/components/Surface.kt | 5 + .../library/components/LazyLibraryGrid.kt | 2 +- .../library/components/LibraryList.kt | 2 +- .../components/ClearDatabaseDialogs.kt | 2 +- 8 files changed, 26 insertions(+), 186 deletions(-) diff --git a/app/src/main/java/eu/kanade/presentation/category/components/CategoryDialogs.kt b/app/src/main/java/eu/kanade/presentation/category/components/CategoryDialogs.kt index 95a7c9a949..9efa490a23 100644 --- a/app/src/main/java/eu/kanade/presentation/category/components/CategoryDialogs.kt +++ b/app/src/main/java/eu/kanade/presentation/category/components/CategoryDialogs.kt @@ -3,6 +3,7 @@ package eu.kanade.presentation.category.components import androidx.compose.material3.AlertDialog import androidx.compose.material3.OutlinedTextField import androidx.compose.material3.Text +import androidx.compose.material3.TextButton import androidx.compose.runtime.Composable import androidx.compose.runtime.LaunchedEffect import androidx.compose.runtime.mutableStateOf @@ -12,7 +13,6 @@ import androidx.compose.ui.focus.FocusRequester import androidx.compose.ui.focus.focusRequester import androidx.compose.ui.res.stringResource import eu.kanade.domain.category.model.Category -import eu.kanade.presentation.components.TextButton import eu.kanade.tachiyomi.R import kotlinx.coroutines.delay diff --git a/app/src/main/java/eu/kanade/presentation/components/Button.kt b/app/src/main/java/eu/kanade/presentation/components/Button.kt index 2f261f9c41..18c2e9c124 100644 --- a/app/src/main/java/eu/kanade/presentation/components/Button.kt +++ b/app/src/main/java/eu/kanade/presentation/components/Button.kt @@ -41,6 +41,11 @@ import androidx.compose.ui.unit.dp import eu.kanade.presentation.util.animateElevation import androidx.compose.material3.ButtonDefaults as M3ButtonDefaults +/** + * TextButton with additional onLongClick functionality. + * + * @see androidx.compose.material3.TextButton + */ @Composable fun TextButton( onClick: () -> Unit, @@ -74,6 +79,11 @@ fun TextButton( content = content, ) +/** + * Button with additional onLongClick functionality. + * + * @see androidx.compose.material3.TextButton + */ @Composable fun Button( onClick: () -> Unit, diff --git a/app/src/main/java/eu/kanade/presentation/components/FloatingActionButton.kt b/app/src/main/java/eu/kanade/presentation/components/FloatingActionButton.kt index 25d70dd0e1..ebb29032b3 100644 --- a/app/src/main/java/eu/kanade/presentation/components/FloatingActionButton.kt +++ b/app/src/main/java/eu/kanade/presentation/components/FloatingActionButton.kt @@ -28,6 +28,11 @@ 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, diff --git a/app/src/main/java/eu/kanade/presentation/components/IconButton.kt b/app/src/main/java/eu/kanade/presentation/components/IconButton.kt index 3cfbc44035..1bd39fd13a 100644 --- a/app/src/main/java/eu/kanade/presentation/components/IconButton.kt +++ b/app/src/main/java/eu/kanade/presentation/components/IconButton.kt @@ -1,192 +1,12 @@ -/* - * 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 eu.kanade.presentation.components -import androidx.compose.foundation.background -import androidx.compose.foundation.combinedClickable -import androidx.compose.foundation.interaction.Interaction -import androidx.compose.foundation.interaction.MutableInteractionSource -import androidx.compose.foundation.layout.Box -import androidx.compose.foundation.layout.size -import androidx.compose.material.ripple.rememberRipple -import androidx.compose.material3.FilledIconButton -import androidx.compose.material3.Icon -import androidx.compose.material3.IconButton -import androidx.compose.material3.LocalContentColor -import androidx.compose.material3.OutlinedIconButton -import androidx.compose.runtime.Composable -import androidx.compose.runtime.CompositionLocalProvider -import androidx.compose.runtime.Immutable -import androidx.compose.runtime.State -import androidx.compose.runtime.remember -import androidx.compose.runtime.rememberUpdatedState -import androidx.compose.ui.Alignment -import androidx.compose.ui.Modifier -import androidx.compose.ui.graphics.Color -import androidx.compose.ui.semantics.Role import androidx.compose.ui.unit.dp -import eu.kanade.presentation.util.minimumTouchTargetSize /** - * Material Design standard icon button. + * Exposing some internal tokens. * - * Icon buttons help people take supplementary actions with a single tap. They’re used when a - * compact button is required, such as in a toolbar or image list. - * - * ![Standard icon button image](https://developer.android.com/images/reference/androidx/compose/material3/standard-icon-button.png) - * - * [content] should typically be an [Icon] (see [androidx.compose.material.icons.Icons]). If using a - * custom icon, note that the typical size for the internal icon is 24 x 24 dp. - * This icon button has an overall minimum touch target size of 48 x 48dp, to meet accessibility - * guidelines. - * - * @sample androidx.compose.material3.samples.IconButtonSample - * - * Tachiyomi changes: - * * Add on long click - * - * @param onClick called when this icon button is clicked - * @param modifier the [Modifier] to be applied to this icon button - * @param enabled controls the enabled state of this icon button. When `false`, this component will - * not respond to user input, and it will appear visually disabled and disabled to accessibility - * services. - * @param interactionSource the [MutableInteractionSource] representing the stream of [Interaction]s - * for this icon button. You can create and pass in your own `remember`ed instance to observe - * [Interaction]s and customize the appearance / behavior of this icon button in different states. - * @param colors [IconButtonColors] that will be used to resolve the colors used for this icon - * button in different states. See [IconButtonDefaults.iconButtonColors]. - * @param content the content of this icon button, typically an [Icon] + * @see androidx.compose.material3.tokens.IconButtonTokens */ -@Composable -fun IconButton( - onClick: () -> Unit, - onLongClick: () -> Unit, - modifier: Modifier = Modifier, - enabled: Boolean = true, - interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, - colors: IconButtonColors = IconButtonDefaults.iconButtonColors(), - content: @Composable () -> Unit, -) { - Box( - modifier = - modifier - .minimumTouchTargetSize() - .size(IconButtonTokens.StateLayerSize) - .background(color = colors.containerColor(enabled).value) - .combinedClickable( - onClick = onClick, - onLongClick = onLongClick, - enabled = enabled, - role = Role.Button, - interactionSource = interactionSource, - indication = rememberRipple( - bounded = false, - radius = IconButtonTokens.StateLayerSize / 2, - ), - ), - contentAlignment = Alignment.Center, - ) { - val contentColor = colors.contentColor(enabled).value - CompositionLocalProvider(LocalContentColor provides contentColor, content = content) - } -} - -object IconButtonDefaults { - /** - * Creates a [IconButtonColors] that represents the default colors used in a [IconButton]. - * - * @param containerColor the container color of this icon button when enabled. - * @param contentColor the content color of this icon button when enabled. - * @param disabledContainerColor the container color of this icon button when not enabled. - * @param disabledContentColor the content color of this icon button when not enabled. - */ - @Composable - fun iconButtonColors( - containerColor: Color = Color.Transparent, - contentColor: Color = LocalContentColor.current, - disabledContainerColor: Color = Color.Transparent, - disabledContentColor: Color = contentColor.copy(alpha = 0.38f), - ): IconButtonColors = - IconButtonColors( - containerColor = containerColor, - contentColor = contentColor, - disabledContainerColor = disabledContainerColor, - disabledContentColor = disabledContentColor, - ) -} - object IconButtonTokens { val StateLayerSize = 40.0.dp } - -/** - * Represents the container and content colors used in an icon button in different states. - * - * - See [IconButtonDefaults.filledIconButtonColors] and - * [IconButtonDefaults.filledTonalIconButtonColors] for the default colors used in a - * [FilledIconButton]. - * - See [IconButtonDefaults.outlinedIconButtonColors] for the default colors used in an - * [OutlinedIconButton]. - */ -@Immutable -class IconButtonColors internal constructor( - private val containerColor: Color, - private val contentColor: Color, - private val disabledContainerColor: Color, - private val disabledContentColor: Color, -) { - /** - * Represents the container color for this icon button, depending on [enabled]. - * - * @param enabled whether the icon button is enabled - */ - @Composable - internal fun containerColor(enabled: Boolean): State { - return rememberUpdatedState(if (enabled) containerColor else disabledContainerColor) - } - - /** - * Represents the content color for this icon button, depending on [enabled]. - * - * @param enabled whether the icon button is enabled - */ - @Composable - internal fun contentColor(enabled: Boolean): State { - return rememberUpdatedState(if (enabled) contentColor else disabledContentColor) - } - - override fun equals(other: Any?): Boolean { - if (this === other) return true - if (other == null || other !is IconButtonColors) return false - - if (containerColor != other.containerColor) return false - if (contentColor != other.contentColor) return false - if (disabledContainerColor != other.disabledContainerColor) return false - if (disabledContentColor != other.disabledContentColor) return false - - return true - } - - override fun hashCode(): Int { - var result = containerColor.hashCode() - result = 31 * result + contentColor.hashCode() - result = 31 * result + disabledContainerColor.hashCode() - result = 31 * result + disabledContentColor.hashCode() - - return result - } -} diff --git a/app/src/main/java/eu/kanade/presentation/components/Surface.kt b/app/src/main/java/eu/kanade/presentation/components/Surface.kt index b20dd525b9..d44dc966ec 100644 --- a/app/src/main/java/eu/kanade/presentation/components/Surface.kt +++ b/app/src/main/java/eu/kanade/presentation/components/Surface.kt @@ -30,6 +30,11 @@ import androidx.compose.ui.unit.dp import eu.kanade.presentation.util.minimumTouchTargetSize import kotlin.math.ln +/** + * Surface with additional onLongClick functionality. + * + * @see androidx.compose.material3.Surface + */ @Composable @NonRestartableComposable fun Surface( diff --git a/app/src/main/java/eu/kanade/presentation/library/components/LazyLibraryGrid.kt b/app/src/main/java/eu/kanade/presentation/library/components/LazyLibraryGrid.kt index 8e89f781b3..d2b8419cea 100644 --- a/app/src/main/java/eu/kanade/presentation/library/components/LazyLibraryGrid.kt +++ b/app/src/main/java/eu/kanade/presentation/library/components/LazyLibraryGrid.kt @@ -6,13 +6,13 @@ import androidx.compose.foundation.lazy.grid.GridCells import androidx.compose.foundation.lazy.grid.GridItemSpan import androidx.compose.foundation.lazy.grid.LazyGridScope import androidx.compose.material3.Text +import androidx.compose.material3.TextButton import androidx.compose.runtime.Composable import androidx.compose.ui.Modifier import androidx.compose.ui.res.stringResource import androidx.compose.ui.unit.dp import androidx.compose.ui.zIndex import eu.kanade.presentation.components.FastScrollLazyVerticalGrid -import eu.kanade.presentation.components.TextButton import eu.kanade.presentation.util.plus import eu.kanade.tachiyomi.R import eu.kanade.tachiyomi.widget.TachiyomiBottomNavigationView.Companion.bottomNavPadding diff --git a/app/src/main/java/eu/kanade/presentation/library/components/LibraryList.kt b/app/src/main/java/eu/kanade/presentation/library/components/LibraryList.kt index 1138177ea4..901291305c 100644 --- a/app/src/main/java/eu/kanade/presentation/library/components/LibraryList.kt +++ b/app/src/main/java/eu/kanade/presentation/library/components/LibraryList.kt @@ -11,6 +11,7 @@ import androidx.compose.foundation.layout.padding import androidx.compose.foundation.lazy.items import androidx.compose.material3.MaterialTheme import androidx.compose.material3.Text +import androidx.compose.material3.TextButton import androidx.compose.runtime.Composable import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier @@ -24,7 +25,6 @@ import eu.kanade.presentation.components.Badge import eu.kanade.presentation.components.BadgeGroup import eu.kanade.presentation.components.FastScrollLazyColumn import eu.kanade.presentation.components.MangaCover.Square -import eu.kanade.presentation.components.TextButton import eu.kanade.presentation.util.horizontalPadding import eu.kanade.presentation.util.plus import eu.kanade.presentation.util.selectedBackground diff --git a/app/src/main/java/eu/kanade/presentation/more/settings/database/components/ClearDatabaseDialogs.kt b/app/src/main/java/eu/kanade/presentation/more/settings/database/components/ClearDatabaseDialogs.kt index 94e77b94a5..60416a4478 100644 --- a/app/src/main/java/eu/kanade/presentation/more/settings/database/components/ClearDatabaseDialogs.kt +++ b/app/src/main/java/eu/kanade/presentation/more/settings/database/components/ClearDatabaseDialogs.kt @@ -2,9 +2,9 @@ package eu.kanade.presentation.more.settings.database.components import androidx.compose.material3.AlertDialog import androidx.compose.material3.Text +import androidx.compose.material3.TextButton import androidx.compose.runtime.Composable import androidx.compose.ui.res.stringResource -import eu.kanade.presentation.components.TextButton import eu.kanade.tachiyomi.R @Composable