diff --git a/core/ui/src/main/java/com/tangem/core/ui/components/appbar/AppBar.kt b/core/ui/src/main/java/com/tangem/core/ui/components/appbar/AppBar.kt deleted file mode 100644 index 80afe74fd7..0000000000 --- a/core/ui/src/main/java/com/tangem/core/ui/components/appbar/AppBar.kt +++ /dev/null @@ -1,55 +0,0 @@ -package com.tangem.core.ui.components.appbar - -import android.content.res.Configuration -import androidx.compose.foundation.background -import androidx.compose.foundation.layout.Box -import androidx.compose.foundation.layout.fillMaxWidth -import androidx.compose.foundation.layout.padding -import androidx.compose.material3.Text -import androidx.compose.runtime.Composable -import androidx.compose.ui.Alignment -import androidx.compose.ui.Modifier -import androidx.compose.ui.tooling.preview.Preview -import com.tangem.core.ui.extensions.TextReference -import com.tangem.core.ui.extensions.resolveReference -import com.tangem.core.ui.extensions.stringReference -import com.tangem.core.ui.res.TangemTheme -import com.tangem.core.ui.res.TangemThemePreview - -/** - * App bar without buttons - * - * @param text title - * @param modifier modifier - * - * @see Figma component - */ -@Composable -fun AppBar(text: TextReference, modifier: Modifier = Modifier) { - Box(modifier = modifier.fillMaxWidth()) { - Text( - text = text.resolveReference(), - color = TangemTheme.colors.text.primary1, - maxLines = 1, - style = TangemTheme.typography.subtitle1, - modifier = Modifier - .align(Alignment.Center) - .padding(vertical = TangemTheme.dimens.spacing10), - ) - } -} - -// region Preview -@Preview(showBackground = true, widthDp = 360) -@Preview(showBackground = true, widthDp = 360, uiMode = Configuration.UI_MODE_NIGHT_YES) -@Composable -private fun AppBar_Preview() { - TangemThemePreview { - AppBar( - text = stringReference("Tangem"), - modifier = Modifier.background(TangemTheme.colors.background.primary), - ) - } -} -// endregion \ No newline at end of file diff --git a/core/ui/src/main/java/com/tangem/core/ui/components/appbar/AppBarWithAdditionalButtons.kt b/core/ui/src/main/java/com/tangem/core/ui/components/appbar/AppBarWithAdditionalButtons.kt deleted file mode 100644 index 07f48d4787..0000000000 --- a/core/ui/src/main/java/com/tangem/core/ui/components/appbar/AppBarWithAdditionalButtons.kt +++ /dev/null @@ -1,179 +0,0 @@ -package com.tangem.core.ui.components.appbar - -import android.content.res.Configuration -import androidx.compose.foundation.background -import androidx.compose.foundation.clickable -import androidx.compose.foundation.interaction.MutableInteractionSource -import androidx.compose.foundation.layout.Box -import androidx.compose.foundation.layout.fillMaxWidth -import androidx.compose.foundation.layout.padding -import androidx.compose.foundation.layout.size -import androidx.compose.material3.Icon -import androidx.compose.material3.Text -import androidx.compose.runtime.Composable -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.res.painterResource -import androidx.compose.ui.semantics.Role -import androidx.compose.ui.tooling.preview.Preview -import com.tangem.core.ui.R -import com.tangem.core.ui.components.appbar.models.AdditionalButton -import com.tangem.core.ui.extensions.TextReference -import com.tangem.core.ui.extensions.resolveReference -import com.tangem.core.ui.res.TangemTheme -import com.tangem.core.ui.res.TangemThemePreview - -/** - * App bar with title and two additional buttons - * - * @param startButton button information attached to the left edge - * @param endButton button information attached to the right edge - * - * @see - * Figma Component - */ -@Composable -fun AppBarWithAdditionalButtons( - text: TextReference, - modifier: Modifier = Modifier, - startButton: AdditionalButton? = null, - endButton: AdditionalButton? = null, - textColor: Color = TangemTheme.colors.text.primary1, - iconColor: Color = TangemTheme.colors.icon.primary1, -) { - AppBarWithAdditionalButtons( - text = text.resolveReference(), - startButton = startButton, - endButton = endButton, - modifier = modifier, - textColor = textColor, - iconColor = iconColor, - ) -} - -/** - * App bar with title and two additional buttons - * - * @param startButton button information attached to the left edge - * @param endButton button information attached to the right edge - * - * @see - * Figma Component - */ -@Composable -fun AppBarWithAdditionalButtons( - text: String, - modifier: Modifier = Modifier, - startButton: AdditionalButton? = null, - endButton: AdditionalButton? = null, - textColor: Color = TangemTheme.colors.text.primary1, - iconColor: Color = TangemTheme.colors.icon.primary1, -) { - Box( - modifier = modifier - .fillMaxWidth() - .padding(all = TangemTheme.dimens.spacing16), - ) { - if (startButton != null) { - Icon( - painter = painterResource(id = startButton.iconRes), - contentDescription = null, - tint = iconColor, - modifier = Modifier - .size(TangemTheme.dimens.size24) - .align(Alignment.CenterStart) - .clickable( - onClick = startButton.onIconClicked, - role = Role.Button, - interactionSource = remember { MutableInteractionSource() }, - indication = androidx.compose.material.ripple.rememberRipple( - bounded = false, - radius = TangemTheme.dimens.size24 / 2, - ), - ), - ) - } - - Text( - text = text, - modifier = Modifier.align(Alignment.Center), - color = textColor, - maxLines = 1, - style = TangemTheme.typography.subtitle1, - ) - - if (endButton != null) { - Icon( - painter = painterResource(id = endButton.iconRes), - contentDescription = null, - tint = iconColor, - modifier = Modifier - .size(TangemTheme.dimens.size24) - .align(Alignment.CenterEnd) - .clickable( - onClick = endButton.onIconClicked, - role = Role.Button, - interactionSource = remember { MutableInteractionSource() }, - indication = androidx.compose.material.ripple.rememberRipple( - bounded = false, - radius = TangemTheme.dimens.size24 / 2, - ), - ), - ) - } - } -} - -@Preview(widthDp = 360, heightDp = 56, showBackground = true) -@Preview(widthDp = 360, heightDp = 56, showBackground = true, uiMode = Configuration.UI_MODE_NIGHT_YES) -@Composable -private fun Preview_AppBarWithAdditionalButtons() { - TangemThemePreview { - AppBarWithAdditionalButtons( - text = "Tangem", - startButton = AdditionalButton( - iconRes = R.drawable.ic_scan_24, - onIconClicked = {}, - ), - endButton = AdditionalButton( - iconRes = R.drawable.ic_more_vertical_24, - onIconClicked = {}, - ), - modifier = Modifier.background(TangemTheme.colors.background.secondary), - ) - } -} - -@Preview(widthDp = 360, heightDp = 56, showBackground = true) -@Preview(widthDp = 360, heightDp = 56, showBackground = true, uiMode = Configuration.UI_MODE_NIGHT_YES) -@Composable -private fun Preview_AppBarWithOnlyStartButtons() { - TangemThemePreview { - AppBarWithAdditionalButtons( - text = "Tangem", - startButton = AdditionalButton( - iconRes = R.drawable.ic_scan_24, - onIconClicked = {}, - ), - modifier = Modifier.background(TangemTheme.colors.background.secondary), - ) - } -} - -@Preview(widthDp = 360, heightDp = 56, showBackground = true) -@Preview(widthDp = 360, heightDp = 56, showBackground = true, uiMode = Configuration.UI_MODE_NIGHT_YES) -@Composable -private fun Preview_AppBarWithOnlyEndButtons() { - TangemThemePreview { - AppBarWithAdditionalButtons( - text = "Tangem", - endButton = AdditionalButton( - iconRes = R.drawable.ic_more_vertical_24, - onIconClicked = {}, - ), - modifier = Modifier.background(TangemTheme.colors.background.secondary), - ) - } -} \ No newline at end of file diff --git a/core/ui/src/main/java/com/tangem/core/ui/components/appbar/AppBarWithBackButton.kt b/core/ui/src/main/java/com/tangem/core/ui/components/appbar/AppBarWithBackButton.kt index 80d3014615..65304bcf57 100644 --- a/core/ui/src/main/java/com/tangem/core/ui/components/appbar/AppBarWithBackButton.kt +++ b/core/ui/src/main/java/com/tangem/core/ui/components/appbar/AppBarWithBackButton.kt @@ -2,22 +2,12 @@ package com.tangem.core.ui.components.appbar import android.content.res.Configuration import androidx.annotation.DrawableRes -import androidx.compose.foundation.background -import androidx.compose.foundation.clickable -import androidx.compose.foundation.interaction.MutableInteractionSource -import androidx.compose.foundation.layout.* -import androidx.compose.material.Icon -import androidx.compose.material.Text -import androidx.compose.material.ripple.rememberRipple import androidx.compose.runtime.Composable -import androidx.compose.runtime.remember -import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier -import androidx.compose.ui.res.painterResource import androidx.compose.ui.tooling.preview.Preview import com.tangem.core.ui.R +import com.tangem.core.ui.components.appbar.models.TopAppBarButtonUM import com.tangem.core.ui.res.TangemThemePreview -import com.tangem.core.ui.res.TangemTheme /** * App bar with back button and optional title @@ -37,37 +27,17 @@ fun AppBarWithBackButton( text: String? = null, @DrawableRes iconRes: Int? = null, ) { - Row( - modifier = modifier - .background(color = TangemTheme.colors.background.secondary) - .fillMaxWidth() - .padding(all = TangemTheme.dimens.spacing16), - horizontalArrangement = Arrangement.spacedBy(TangemTheme.dimens.spacing16), - verticalAlignment = Alignment.CenterVertically, - ) { - Icon( - painter = painterResource(iconRes ?: R.drawable.ic_back_24), - contentDescription = null, - modifier = Modifier - .size(size = TangemTheme.dimens.size24) - .clickable( - indication = rememberRipple(bounded = false), - interactionSource = remember { MutableInteractionSource() }, - onClick = onBackClick, - ), - tint = TangemTheme.colors.icon.primary1, - ) - if (!text.isNullOrBlank()) { - Text( - text = text, - color = TangemTheme.colors.text.primary1, - maxLines = 1, - style = TangemTheme.typography.subtitle1, - ) - } - } + TangemTopAppBar( + modifier = modifier, + title = text, + startButton = TopAppBarButtonUM( + iconRes = iconRes ?: R.drawable.ic_back_24, + onIconClicked = onBackClick, + ), + ) } +// region Preview @Preview(widthDp = 360, heightDp = 56, showBackground = true) @Preview(widthDp = 360, heightDp = 56, showBackground = true, uiMode = Configuration.UI_MODE_NIGHT_YES) @Composable @@ -75,4 +45,5 @@ private fun PreviewAppBarWithBackButton() { TangemThemePreview { AppBarWithBackButton(text = "Title", onBackClick = {}) } -} \ No newline at end of file +} +// endregion \ No newline at end of file diff --git a/core/ui/src/main/java/com/tangem/core/ui/components/appbar/AppBarWithBackButtonAndIcon.kt b/core/ui/src/main/java/com/tangem/core/ui/components/appbar/AppBarWithBackButtonAndIcon.kt index 0006bdad9d..aaa6fcf804 100644 --- a/core/ui/src/main/java/com/tangem/core/ui/components/appbar/AppBarWithBackButtonAndIcon.kt +++ b/core/ui/src/main/java/com/tangem/core/ui/components/appbar/AppBarWithBackButtonAndIcon.kt @@ -2,18 +2,14 @@ package com.tangem.core.ui.components.appbar import android.content.res.Configuration import androidx.annotation.DrawableRes -import androidx.compose.animation.* -import androidx.compose.foundation.clickable -import androidx.compose.foundation.layout.size -import androidx.compose.material.Icon import androidx.compose.runtime.Composable import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Color -import androidx.compose.ui.res.painterResource import androidx.compose.ui.tooling.preview.Preview import com.tangem.core.ui.R -import com.tangem.core.ui.res.TangemThemePreview +import com.tangem.core.ui.components.appbar.models.TopAppBarButtonUM import com.tangem.core.ui.res.TangemTheme +import com.tangem.core.ui.res.TangemThemePreview @Composable fun AppBarWithBackButtonAndIcon( @@ -26,30 +22,22 @@ fun AppBarWithBackButtonAndIcon( onIconClick: (() -> Unit)? = null, backgroundColor: Color = TangemTheme.colors.background.secondary, ) { - AppBarWithBackButtonAndIconContent( - onBackClick = onBackClick, + TangemTopAppBar( modifier = modifier, - text = text, + title = text, subtitle = subtitle, - backIconRes = backIconRes, - backgroundColor = backgroundColor, - iconContent = { - AnimatedContent( - targetState = iconRes, - transitionSpec = { (fadeIn() + scaleIn()).togetherWith(fadeOut() + scaleOut()) }, - label = "Toolbar icon change", - ) { - if (onIconClick != null && it != null) { - Icon( - painter = painterResource(it), - contentDescription = null, - modifier = Modifier - .size(size = TangemTheme.dimens.size24) - .clickable { onIconClick() }, - tint = TangemTheme.colors.icon.primary1, - ) - } - } + containerColor = backgroundColor, + startButton = TopAppBarButtonUM( + iconRes = backIconRes ?: R.drawable.ic_back_24, + onIconClicked = onBackClick, + ), + endButton = if (iconRes != null && onIconClick != null) { + TopAppBarButtonUM( + iconRes = iconRes, + onIconClicked = onIconClick, + ) + } else { + null }, ) } diff --git a/core/ui/src/main/java/com/tangem/core/ui/components/appbar/AppBarWithBackButtonAndIconContent.kt b/core/ui/src/main/java/com/tangem/core/ui/components/appbar/AppBarWithBackButtonAndIconContent.kt deleted file mode 100644 index fae3598a38..0000000000 --- a/core/ui/src/main/java/com/tangem/core/ui/components/appbar/AppBarWithBackButtonAndIconContent.kt +++ /dev/null @@ -1,127 +0,0 @@ -package com.tangem.core.ui.components.appbar - -import android.content.res.Configuration -import androidx.annotation.DrawableRes -import androidx.compose.animation.* -import androidx.compose.foundation.background -import androidx.compose.foundation.clickable -import androidx.compose.foundation.interaction.MutableInteractionSource -import androidx.compose.foundation.layout.* -import androidx.compose.material.Icon -import androidx.compose.material.Text -import androidx.compose.material.ripple.rememberRipple -import androidx.compose.runtime.Composable -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.res.painterResource -import androidx.compose.ui.tooling.preview.Preview -import com.tangem.core.ui.R -import com.tangem.core.ui.res.TangemThemePreview -import com.tangem.core.ui.res.TangemTheme - -/** - * App bar with back button and icon content for any possible number/style of icons - * - * @param onBackClick callback for back button - * @param modifier modifier - * @param text appbar title - * @param backIconRes icon for back button - * @param backgroundColor background color - * @param iconContent icon content - */ -@Composable -fun AppBarWithBackButtonAndIconContent( - onBackClick: () -> Unit, - modifier: Modifier = Modifier, - text: String? = null, - subtitle: String? = null, - @DrawableRes backIconRes: Int? = null, - backIconTint: Color = TangemTheme.colors.icon.primary1, - backgroundColor: Color = TangemTheme.colors.background.secondary, - iconContent: @Composable () -> Unit, -) { - Row( - modifier = modifier - .height(TangemTheme.dimens.size56) - .background(color = backgroundColor) - .fillMaxWidth() - .padding(horizontal = TangemTheme.dimens.spacing16), - horizontalArrangement = Arrangement.spacedBy(TangemTheme.dimens.spacing16), - verticalAlignment = Alignment.CenterVertically, - ) { - Icon( - painter = painterResource(backIconRes ?: R.drawable.ic_back_24), - contentDescription = null, - modifier = Modifier - .padding(vertical = TangemTheme.dimens.spacing16) - .size(size = TangemTheme.dimens.size24) - .clickable( - interactionSource = remember { MutableInteractionSource() }, - indication = rememberRipple(bounded = false), - ) { onBackClick() }, - tint = backIconTint, - ) - Column( - verticalArrangement = Arrangement.Center, - modifier = Modifier.weight(1f) - .animateContentSize(), - ) { - AnimatedVisibility( - visible = !text.isNullOrBlank(), - enter = fadeIn(), - exit = fadeOut(), - label = "Toolbar title change", - ) { - Text( - text = text.orEmpty(), - color = TangemTheme.colors.text.primary1, - maxLines = 1, - style = TangemTheme.typography.subtitle1, - ) - } - AnimatedVisibility( - visible = !subtitle.isNullOrBlank(), - enter = fadeIn().plus(expandVertically()), - exit = fadeOut().plus(shrinkVertically()), - label = "Toolbar subtitle change", - ) { - Text( - text = subtitle.orEmpty(), - color = TangemTheme.colors.text.secondary, - maxLines = 1, - style = TangemTheme.typography.caption2, - ) - } - } - iconContent() - } -} - -@Preview(widthDp = 360, heightDp = 56, showBackground = true) -@Preview(widthDp = 360, heightDp = 56, showBackground = true, uiMode = Configuration.UI_MODE_NIGHT_YES) -@Composable -private fun PreviewAppBarWithBackButtonAndIcon() { - TangemThemePreview { - AppBarWithBackButtonAndIconContent( - text = "Title", - subtitle = "Subtitle", - onBackClick = {}, - iconContent = { - Row { - Icon( - painter = painterResource(id = R.drawable.ic_qrcode_scan_24), - tint = TangemTheme.colors.icon.primary1, - contentDescription = null, - ) - Icon( - painter = painterResource(id = R.drawable.ic_flash_on_24), - tint = TangemTheme.colors.icon.primary1, - contentDescription = null, - ) - } - }, - ) - } -} \ No newline at end of file diff --git a/core/ui/src/main/java/com/tangem/core/ui/components/appbar/TangemTopAppBar.kt b/core/ui/src/main/java/com/tangem/core/ui/components/appbar/TangemTopAppBar.kt new file mode 100644 index 0000000000..716d79978f --- /dev/null +++ b/core/ui/src/main/java/com/tangem/core/ui/components/appbar/TangemTopAppBar.kt @@ -0,0 +1,336 @@ +package com.tangem.core.ui.components.appbar + +import android.content.res.Configuration +import androidx.compose.animation.* +import androidx.compose.foundation.background +import androidx.compose.foundation.layout.* +import androidx.compose.material3.Text +import androidx.compose.runtime.Composable +import androidx.compose.runtime.ReadOnlyComposable +import androidx.compose.ui.Alignment +import androidx.compose.ui.Modifier +import androidx.compose.ui.graphics.Color +import androidx.compose.ui.text.style.TextOverflow +import androidx.compose.ui.tooling.preview.Preview +import androidx.compose.ui.tooling.preview.PreviewParameter +import androidx.compose.ui.tooling.preview.PreviewParameterProvider +import com.tangem.core.ui.R +import com.tangem.core.ui.components.appbar.models.TopAppBarButtonUM +import com.tangem.core.ui.extensions.TextReference +import com.tangem.core.ui.extensions.resolveReference +import com.tangem.core.ui.res.TangemTheme +import com.tangem.core.ui.res.TangemThemePreview + +/** + * [TangemTopAppBar] height options. + * */ +enum class TangemTopAppBarHeight { + BOTTOM_SHEET, DEFAULT, +} + +/** + * Top app bar with two optional buttons: [startButton] and [endButton]. + * + * @see + * Figma Component + */ +@Composable +fun TangemTopAppBar( + modifier: Modifier = Modifier, + startButton: TopAppBarButtonUM? = null, + endButton: TopAppBarButtonUM? = null, + textColor: Color = TangemTheme.colors.text.primary1, + iconTint: Color = TangemTheme.colors.icon.primary1, + containerColor: Color = Color.Transparent, + height: TangemTopAppBarHeight = TangemTopAppBarHeight.DEFAULT, +) { + TangemTopAppBar( + modifier = modifier, + title = null, + startButton = startButton, + endButton = endButton, + textColor = textColor, + iconTint = iconTint, + containerColor = containerColor, + height = height, + ) +} + +/** + * Top app bar with [title], optional [subtitle] and two optional buttons: [startButton] and [endButton]. + * + * Where [title] and [subtitle] are [TextReference]. + * + * @see + * Figma Component + */ +@Composable +fun TangemTopAppBar( + title: TextReference, + modifier: Modifier = Modifier, + subtitle: TextReference? = null, + startButton: TopAppBarButtonUM? = null, + endButton: TopAppBarButtonUM? = null, + textColor: Color = TangemTheme.colors.text.primary1, + iconTint: Color = TangemTheme.colors.icon.primary1, + titleAlignment: Alignment.Horizontal = Alignment.Start, + containerColor: Color = Color.Transparent, + height: TangemTopAppBarHeight = TangemTopAppBarHeight.DEFAULT, +) { + TangemTopAppBar( + modifier = modifier, + title = title.resolveReference(), + subtitle = subtitle?.resolveReference(), + startButton = startButton, + endButton = endButton, + textColor = textColor, + iconTint = iconTint, + titleAlignment = titleAlignment, + containerColor = containerColor, + height = height, + ) +} + +/** + * Top app bar with [title], optional [subtitle] and two optional buttons: [startButton] and [endButton]. + * + * Where [title] and [subtitle] are [String]. + * + * @see + * Figma Component + */ +@Composable +fun TangemTopAppBar( + title: String?, + modifier: Modifier = Modifier, + subtitle: String? = null, + startButton: TopAppBarButtonUM? = null, + endButton: TopAppBarButtonUM? = null, + textColor: Color = TangemTheme.colors.text.primary1, + iconTint: Color = TangemTheme.colors.icon.primary1, + titleAlignment: Alignment.Horizontal = Alignment.Start, + containerColor: Color = Color.Transparent, + height: TangemTopAppBarHeight = TangemTopAppBarHeight.DEFAULT, +) { + TangemTopAppBar( + title = title, + modifier = modifier, + subtitle = subtitle, + startButton = startButton, + textColor = textColor, + iconTint = iconTint, + titleAlignment = titleAlignment, + containerColor = containerColor, + height = height, + endContent = { + if (endButton != null) { + TopAppBarButton( + button = endButton, + tint = iconTint, + ) + } + }, + ) +} + +/** + * Top app bar with [title], optional [subtitle], optional [startButton] and [endContent]. + * + * Where [title] and [subtitle] are [String] and [endContent] is a lambda that provides a [RowScope] to build + * the end content. + * + * @see + * Figma Component + */ +@Composable +fun TangemTopAppBar( + title: String?, + modifier: Modifier = Modifier, + subtitle: String? = null, + startButton: TopAppBarButtonUM? = null, + textColor: Color = TangemTheme.colors.text.primary1, + iconTint: Color = TangemTheme.colors.icon.primary1, + titleAlignment: Alignment.Horizontal = Alignment.Start, + containerColor: Color = Color.Transparent, + height: TangemTopAppBarHeight = TangemTopAppBarHeight.DEFAULT, + endContent: @Composable RowScope.() -> Unit, +) { + Row( + modifier = modifier + .background(color = containerColor) + .fillMaxWidth() + .heightIn(min = height.dp), + verticalAlignment = Alignment.CenterVertically, + ) { + Box( + modifier = Modifier + .padding(horizontal = TangemTheme.dimens.spacing12) + .size(TangemTheme.dimens.size32), + contentAlignment = Alignment.Center, + ) { + if (startButton != null) { + TopAppBarButton( + button = startButton, + tint = iconTint, + ) + } + } + + TopAppBarTitle( + modifier = Modifier.weight(1f), + title = title, + subtitle = subtitle, + textColor = textColor, + titleAlignment = titleAlignment, + ) + + Row( + modifier = Modifier + .padding(horizontal = TangemTheme.dimens.spacing12) + .widthIn(min = TangemTheme.dimens.size32) + .height(TangemTheme.dimens.size32), + verticalAlignment = Alignment.CenterVertically, + horizontalArrangement = Arrangement.spacedBy(TangemTheme.dimens.spacing12, Alignment.End), + content = endContent, + ) + } +} + +@Composable +private fun TopAppBarTitle( + title: String?, + subtitle: String?, + textColor: Color, + titleAlignment: Alignment.Horizontal, + modifier: Modifier = Modifier, +) { + Box(modifier = modifier) { + AnimatedVisibility( + modifier = Modifier.fillMaxWidth(), + visible = !title.isNullOrBlank(), + enter = fadeIn() + expandVertically(), + exit = fadeOut() + shrinkVertically(), + ) { + Column( + modifier = Modifier.fillMaxWidth(), + verticalArrangement = Arrangement.Center, + horizontalAlignment = titleAlignment, + ) { + Text( + text = title.orEmpty(), + style = TangemTheme.typography.subtitle1, + color = textColor, + maxLines = 1, + overflow = TextOverflow.Ellipsis, + ) + + AnimatedVisibility( + visible = !subtitle.isNullOrBlank(), + enter = fadeIn() + expandVertically(), + exit = fadeOut() + shrinkVertically(), + label = "Toolbar subtitle visibility", + ) { + Text( + text = subtitle.orEmpty(), + style = TangemTheme.typography.caption2, + color = TangemTheme.colors.text.secondary, + maxLines = 1, + overflow = TextOverflow.Ellipsis, + ) + } + } + } + } +} + +private val TangemTopAppBarHeight.dp + @Composable + @ReadOnlyComposable + get() = when (this) { + TangemTopAppBarHeight.BOTTOM_SHEET -> TangemTheme.dimens.size44 + TangemTopAppBarHeight.DEFAULT -> TangemTheme.dimens.size56 + } + +// region Preview +@Composable +@Preview(showBackground = true, widthDp = 360) +@Preview(showBackground = true, widthDp = 360, uiMode = Configuration.UI_MODE_NIGHT_YES) +private fun Preview_BasicTopAppBar( + @PreviewParameter(BasicTopAppBarPMPreviewProvider::class) params: BasicTopAppBarPM, +) { + TangemThemePreview { + TangemTopAppBar( + title = params.title, + subtitle = params.subtitle, + startButton = params.startButton, + endButton = params.endButton, + titleAlignment = params.titleAlignment, + containerColor = TangemTheme.colors.background.secondary, + height = params.height, + ) + } +} + +private data class BasicTopAppBarPM( + val title: String? = "Tangem", + val subtitle: String? = null, + val startButton: TopAppBarButtonUM? = null, + val endButton: TopAppBarButtonUM? = null, + val titleAlignment: Alignment.Horizontal = Alignment.CenterHorizontally, + val height: TangemTopAppBarHeight = TangemTopAppBarHeight.DEFAULT, +) + +private class BasicTopAppBarPMPreviewProvider : PreviewParameterProvider { + override val values: Sequence + get() = sequenceOf( + BasicTopAppBarPM( + subtitle = "Subtitle", + titleAlignment = Alignment.Start, + startButton = TopAppBarButtonUM.Back { }, + ), + BasicTopAppBarPM( + title = null, + startButton = TopAppBarButtonUM.Back { }, + ), + BasicTopAppBarPM( + height = TangemTopAppBarHeight.BOTTOM_SHEET, + ), + BasicTopAppBarPM( + startButton = TopAppBarButtonUM( + iconRes = R.drawable.ic_scan_24, + onIconClicked = {}, + ), + endButton = TopAppBarButtonUM( + iconRes = R.drawable.ic_more_vertical_24, + onIconClicked = {}, + ), + ), + BasicTopAppBarPM( + startButton = TopAppBarButtonUM( + iconRes = R.drawable.ic_scan_24, + onIconClicked = {}, + ), + ), + BasicTopAppBarPM( + endButton = TopAppBarButtonUM( + iconRes = R.drawable.ic_more_vertical_24, + onIconClicked = {}, + ), + height = TangemTopAppBarHeight.BOTTOM_SHEET, + ), + BasicTopAppBarPM( + title = "1234567891011121314151617181920", + subtitle = "12345678910111213141516171819202122232425", + titleAlignment = Alignment.Start, + startButton = TopAppBarButtonUM( + iconRes = R.drawable.ic_scan_24, + onIconClicked = {}, + ), + endButton = TopAppBarButtonUM( + iconRes = R.drawable.ic_more_vertical_24, + onIconClicked = {}, + ), + ), + ) +} +// endregion Preview \ No newline at end of file diff --git a/core/ui/src/main/java/com/tangem/core/ui/components/appbar/TopAppBarButton.kt b/core/ui/src/main/java/com/tangem/core/ui/components/appbar/TopAppBarButton.kt new file mode 100644 index 0000000000..160e0148da --- /dev/null +++ b/core/ui/src/main/java/com/tangem/core/ui/components/appbar/TopAppBarButton.kt @@ -0,0 +1,26 @@ +package com.tangem.core.ui.components.appbar + +import androidx.compose.foundation.layout.size +import androidx.compose.material3.Icon +import androidx.compose.material3.IconButton +import androidx.compose.runtime.Composable +import androidx.compose.ui.Modifier +import androidx.compose.ui.graphics.Color +import androidx.compose.ui.res.painterResource +import com.tangem.core.ui.components.appbar.models.TopAppBarButtonUM +import com.tangem.core.ui.res.TangemTheme + +@Composable +fun TopAppBarButton(button: TopAppBarButtonUM, tint: Color, modifier: Modifier = Modifier) { + IconButton( + modifier = modifier.size(TangemTheme.dimens.size32), + onClick = button.onIconClicked, + ) { + Icon( + modifier = Modifier.size(TangemTheme.dimens.size24), + painter = painterResource(id = button.iconRes), + tint = tint, + contentDescription = null, + ) + } +} \ No newline at end of file diff --git a/core/ui/src/main/java/com/tangem/core/ui/components/appbar/models/AdditionalButton.kt b/core/ui/src/main/java/com/tangem/core/ui/components/appbar/models/AdditionalButton.kt deleted file mode 100644 index 2517f5ef41..0000000000 --- a/core/ui/src/main/java/com/tangem/core/ui/components/appbar/models/AdditionalButton.kt +++ /dev/null @@ -1,8 +0,0 @@ -package com.tangem.core.ui.components.appbar.models - -import androidx.annotation.DrawableRes - -data class AdditionalButton( - @DrawableRes val iconRes: Int, - val onIconClicked: () -> Unit, -) \ No newline at end of file diff --git a/core/ui/src/main/java/com/tangem/core/ui/components/appbar/models/TopAppBarButtonUM.kt b/core/ui/src/main/java/com/tangem/core/ui/components/appbar/models/TopAppBarButtonUM.kt new file mode 100644 index 0000000000..61e3f25d39 --- /dev/null +++ b/core/ui/src/main/java/com/tangem/core/ui/components/appbar/models/TopAppBarButtonUM.kt @@ -0,0 +1,19 @@ +package com.tangem.core.ui.components.appbar.models + +import androidx.annotation.DrawableRes +import com.tangem.core.ui.R + +data class TopAppBarButtonUM( + @DrawableRes val iconRes: Int, + val onIconClicked: () -> Unit, +) { + + @Suppress("FunctionName") + companion object { + + fun Back(onBackClicked: () -> Unit) = TopAppBarButtonUM( + iconRes = R.drawable.ic_back_24, + onIconClicked = onBackClicked, + ) + } +} \ No newline at end of file diff --git a/core/ui/src/main/java/com/tangem/core/ui/components/appbar/models/TopAppBarMedium.kt b/core/ui/src/main/java/com/tangem/core/ui/components/appbar/models/TopAppBarMedium.kt deleted file mode 100644 index d50a8f5c75..0000000000 --- a/core/ui/src/main/java/com/tangem/core/ui/components/appbar/models/TopAppBarMedium.kt +++ /dev/null @@ -1,75 +0,0 @@ -package com.tangem.core.ui.components.appbar.models - -import androidx.compose.foundation.layout.size -import androidx.compose.material3.* -import androidx.compose.runtime.* -import androidx.compose.ui.Modifier -import androidx.compose.ui.res.painterResource -import androidx.compose.ui.text.style.TextOverflow -import com.tangem.core.ui.R -import com.tangem.core.ui.extensions.TextReference -import com.tangem.core.ui.extensions.resolveReference -import com.tangem.core.ui.res.TangemTheme - -private const val COLLAPSED_APP_BAR_THRESHOLD = 0.4f - -@OptIn(ExperimentalMaterial3Api::class) -@Composable -fun TopAppBarMedium( - title: TextReference, - scrollBehavior: TopAppBarScrollBehavior, - onBackClick: () -> Unit, - modifier: Modifier = Modifier, - navigationIconResId: Int = R.drawable.ic_back_24, - colors: TopAppBarColors = TangemTopAppBarColors, -) { - MediumTopAppBar( - modifier = modifier, - scrollBehavior = scrollBehavior, - colors = colors, - title = { - val collapsedStyle = TangemTheme.typography.subtitle1 - val expandedStyle = TangemTheme.typography.h1 - val style by remember(scrollBehavior.state.collapsedFraction) { - derivedStateOf { - if (scrollBehavior.state.collapsedFraction >= COLLAPSED_APP_BAR_THRESHOLD) { - collapsedStyle - } else { - expandedStyle - } - } - } - - Text( - text = title.resolveReference(), - style = style, - maxLines = 1, - overflow = TextOverflow.Ellipsis, - ) - }, - navigationIcon = { - IconButton( - modifier = Modifier.size(TangemTheme.dimens.size32), - onClick = onBackClick, - ) { - Icon( - modifier = Modifier.size(TangemTheme.dimens.size24), - painter = painterResource(id = navigationIconResId), - contentDescription = null, - ) - } - }, - ) -} - -@OptIn(ExperimentalMaterial3Api::class) -internal val TangemTopAppBarColors: TopAppBarColors - @Composable - @ReadOnlyComposable - get() = TopAppBarColors( - containerColor = TangemTheme.colors.background.secondary, - scrolledContainerColor = TangemTheme.colors.background.secondary, - navigationIconContentColor = TangemTheme.colors.icon.primary1, - titleContentColor = TangemTheme.colors.text.primary1, - actionIconContentColor = TangemTheme.colors.icon.primary1, - ) \ No newline at end of file