diff --git a/CHANGELOG.md b/CHANGELOG.md index 423fb87600a..33c7bf6b74b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -71,6 +71,7 @@ ### ⬆️ Improved ### ✅ Added +- Added `MessageDateSeparatorTheme` to customize the date separator component. [#5014](https://github.com/GetStream/stream-chat-android/pull/5014) ### ⚠️ Changed diff --git a/stream-chat-android-compose/api/stream-chat-android-compose.api b/stream-chat-android-compose/api/stream-chat-android-compose.api index 7ed31b68a38..3d6e8d59e09 100644 --- a/stream-chat-android-compose/api/stream-chat-android-compose.api +++ b/stream-chat-android-compose/api/stream-chat-android-compose.api @@ -1497,6 +1497,7 @@ public final class io/getstream/chat/android/compose/ui/theme/ChatTheme { public final fun getDateFormatter (Landroidx/compose/runtime/Composer;I)Lcom/getstream/sdk/chat/utils/DateFormatter; public final fun getDimens (Landroidx/compose/runtime/Composer;I)Lio/getstream/chat/android/compose/ui/theme/StreamDimens; public final fun getMessageAlignmentProvider (Landroidx/compose/runtime/Composer;I)Lio/getstream/chat/android/compose/ui/util/MessageAlignmentProvider; + public final fun getMessageDateSeparatorTheme (Landroidx/compose/runtime/Composer;I)Lio/getstream/chat/android/compose/ui/theme/MessageDateSeparatorTheme; public final fun getMessageOptionsUserReactionAlignment (Landroidx/compose/runtime/Composer;I)Lio/getstream/chat/android/common/MessageOptionsUserReactionAlignment; public final fun getMessagePreviewFormatter (Landroidx/compose/runtime/Composer;I)Lio/getstream/chat/android/compose/ui/util/MessagePreviewFormatter; public final fun getOtherMessageTheme (Landroidx/compose/runtime/Composer;I)Lio/getstream/chat/android/compose/ui/theme/MessageTheme; @@ -1508,7 +1509,18 @@ public final class io/getstream/chat/android/compose/ui/theme/ChatTheme { } public final class io/getstream/chat/android/compose/ui/theme/ChatThemeKt { - public static final fun ChatTheme (ZZLio/getstream/chat/android/compose/ui/theme/StreamColors;Lio/getstream/chat/android/compose/ui/theme/StreamDimens;Lio/getstream/chat/android/compose/ui/theme/StreamTypography;Lio/getstream/chat/android/compose/ui/theme/StreamShapes;Landroidx/compose/material/ripple/RippleTheme;Ljava/util/List;Ljava/util/List;Ljava/util/List;Lio/getstream/chat/android/compose/ui/util/ReactionIconFactory;Lcom/getstream/sdk/chat/utils/DateFormatter;Lio/getstream/chat/android/compose/ui/util/ChannelNameFormatter;Lio/getstream/chat/android/compose/ui/util/MessagePreviewFormatter;Lio/getstream/chat/android/compose/ui/util/StreamCoilImageLoaderFactory;Lio/getstream/chat/android/compose/ui/util/MessageAlignmentProvider;Lio/getstream/chat/android/common/MessageOptionsUserReactionAlignment;Ljava/util/List;Lio/getstream/chat/android/compose/ui/theme/MessageTheme;Lio/getstream/chat/android/compose/ui/theme/MessageTheme;Lkotlin/jvm/functions/Function2;Landroidx/compose/runtime/Composer;IIII)V + public static final fun ChatTheme (ZZLio/getstream/chat/android/compose/ui/theme/StreamColors;Lio/getstream/chat/android/compose/ui/theme/StreamDimens;Lio/getstream/chat/android/compose/ui/theme/StreamTypography;Lio/getstream/chat/android/compose/ui/theme/StreamShapes;Landroidx/compose/material/ripple/RippleTheme;Ljava/util/List;Ljava/util/List;Ljava/util/List;Lio/getstream/chat/android/compose/ui/util/ReactionIconFactory;Lcom/getstream/sdk/chat/utils/DateFormatter;Lio/getstream/chat/android/compose/ui/util/ChannelNameFormatter;Lio/getstream/chat/android/compose/ui/util/MessagePreviewFormatter;Lio/getstream/chat/android/compose/ui/util/StreamCoilImageLoaderFactory;Lio/getstream/chat/android/compose/ui/util/MessageAlignmentProvider;Lio/getstream/chat/android/common/MessageOptionsUserReactionAlignment;Ljava/util/List;Lio/getstream/chat/android/compose/ui/theme/MessageTheme;Lio/getstream/chat/android/compose/ui/theme/MessageTheme;Lio/getstream/chat/android/compose/ui/theme/MessageDateSeparatorTheme;Lkotlin/jvm/functions/Function2;Landroidx/compose/runtime/Composer;IIII)V +} + +public final class io/getstream/chat/android/compose/ui/theme/MessageDateSeparatorTheme { + public static final field Companion Lio/getstream/chat/android/compose/ui/theme/MessageDateSeparatorTheme$Companion; + public synthetic fun (Landroidx/compose/ui/text/TextStyle;JLkotlin/jvm/internal/DefaultConstructorMarker;)V + public final fun getBackgroundColor-0d7_KjU ()J + public final fun getTextStyle ()Landroidx/compose/ui/text/TextStyle; +} + +public final class io/getstream/chat/android/compose/ui/theme/MessageDateSeparatorTheme$Companion { + public final fun defaultTheme (Lio/getstream/chat/android/compose/ui/theme/StreamTypography;Lio/getstream/chat/android/compose/ui/theme/StreamColors;Landroidx/compose/runtime/Composer;II)Lio/getstream/chat/android/compose/ui/theme/MessageDateSeparatorTheme; } public final class io/getstream/chat/android/compose/ui/theme/MessageTheme { @@ -1538,8 +1550,8 @@ public final class io/getstream/chat/android/compose/ui/theme/MessageTheme$Compa public final class io/getstream/chat/android/compose/ui/theme/StreamColors { public static final field Companion Lio/getstream/chat/android/compose/ui/theme/StreamColors$Companion; - public synthetic fun (JJJJJJJJJJJJJJJJJJJJJJJJJJILkotlin/jvm/internal/DefaultConstructorMarker;)V - public synthetic fun (JJJJJJJJJJJJJJJJJJJJJJJJJJLkotlin/jvm/internal/DefaultConstructorMarker;)V + public synthetic fun (JJJJJJJJJJJJJJJJJJJJJJJJJJJILkotlin/jvm/internal/DefaultConstructorMarker;)V + public synthetic fun (JJJJJJJJJJJJJJJJJJJJJJJJJJJLkotlin/jvm/internal/DefaultConstructorMarker;)V public final fun component1-0d7_KjU ()J public final fun component10-0d7_KjU ()J public final fun component11-0d7_KjU ()J @@ -1559,6 +1571,7 @@ public final class io/getstream/chat/android/compose/ui/theme/StreamColors { public final fun component24-0d7_KjU ()J public final fun component25-0d7_KjU ()J public final fun component26-0d7_KjU ()J + public final fun component27-0d7_KjU ()J public final fun component3-0d7_KjU ()J public final fun component4-0d7_KjU ()J public final fun component5-0d7_KjU ()J @@ -1566,8 +1579,8 @@ public final class io/getstream/chat/android/compose/ui/theme/StreamColors { public final fun component7-0d7_KjU ()J public final fun component8-0d7_KjU ()J public final fun component9-0d7_KjU ()J - public final fun copy-CRp9MJE (JJJJJJJJJJJJJJJJJJJJJJJJJJ)Lio/getstream/chat/android/compose/ui/theme/StreamColors; - public static synthetic fun copy-CRp9MJE$default (Lio/getstream/chat/android/compose/ui/theme/StreamColors;JJJJJJJJJJJJJJJJJJJJJJJJJJILjava/lang/Object;)Lio/getstream/chat/android/compose/ui/theme/StreamColors; + public final fun copy-w9eWueE (JJJJJJJJJJJJJJJJJJJJJJJJJJJ)Lio/getstream/chat/android/compose/ui/theme/StreamColors; + public static synthetic fun copy-w9eWueE$default (Lio/getstream/chat/android/compose/ui/theme/StreamColors;JJJJJJJJJJJJJJJJJJJJJJJJJJJILjava/lang/Object;)Lio/getstream/chat/android/compose/ui/theme/StreamColors; public fun equals (Ljava/lang/Object;)Z public final fun getAppBackground-0d7_KjU ()J public final fun getBarsBackground-0d7_KjU ()J @@ -1592,6 +1605,7 @@ public final class io/getstream/chat/android/compose/ui/theme/StreamColors { public final fun getOwnMessagesBackground-0d7_KjU ()J public final fun getPrimaryAccent-0d7_KjU ()J public final fun getTextHighEmphasis-0d7_KjU ()J + public final fun getTextHighEmphasisInverse-0d7_KjU ()J public final fun getTextLowEmphasis-0d7_KjU ()J public final fun getThreadSeparatorGradientEnd-0d7_KjU ()J public final fun getThreadSeparatorGradientStart-0d7_KjU ()J diff --git a/stream-chat-android-compose/src/main/java/io/getstream/chat/android/compose/ui/messages/list/MessageContainer.kt b/stream-chat-android-compose/src/main/java/io/getstream/chat/android/compose/ui/messages/list/MessageContainer.kt index 26d855ad900..376855d9a3b 100644 --- a/stream-chat-android-compose/src/main/java/io/getstream/chat/android/compose/ui/messages/list/MessageContainer.kt +++ b/stream-chat-android-compose/src/main/java/io/getstream/chat/android/compose/ui/messages/list/MessageContainer.kt @@ -106,9 +106,10 @@ internal fun DefaultMessageDateSeparatorContent(dateSeparator: DateSeparatorStat Surface( modifier = Modifier .padding(vertical = 8.dp), - color = ChatTheme.colors.overlayDark, - shape = RoundedCornerShape(16.dp) + color = ChatTheme.messageDateSeparatorTheme.backgroundColor, + shape = RoundedCornerShape(16.dp), ) { + Text( modifier = Modifier.padding(vertical = 2.dp, horizontal = 16.dp), text = DateUtils.getRelativeTimeSpanString( @@ -117,8 +118,7 @@ internal fun DefaultMessageDateSeparatorContent(dateSeparator: DateSeparatorStat DateUtils.DAY_IN_MILLIS, DateUtils.FORMAT_ABBREV_RELATIVE ).toString(), - color = ChatTheme.colors.barsBackground, - style = ChatTheme.typography.body + style = ChatTheme.messageDateSeparatorTheme.textStyle, ) } } diff --git a/stream-chat-android-compose/src/main/java/io/getstream/chat/android/compose/ui/theme/ChatTheme.kt b/stream-chat-android-compose/src/main/java/io/getstream/chat/android/compose/ui/theme/ChatTheme.kt index 9274640e619..4c8ff54a336 100644 --- a/stream-chat-android-compose/src/main/java/io/getstream/chat/android/compose/ui/theme/ChatTheme.kt +++ b/stream-chat-android-compose/src/main/java/io/getstream/chat/android/compose/ui/theme/ChatTheme.kt @@ -98,6 +98,9 @@ private val LocalOwnMessageTheme = compositionLocalOf { private val LocalOtherMessageTheme = compositionLocalOf { error("No OtherMessageTheme provided! Make sure to wrap all usages of Stream components in a ChatTheme.") } +private val LocalMessageDateSeparatorTheme = compositionLocalOf { + error("No MessageDateSeparatorTheme provided! Make sure to wrap all usages of Stream components in a ChatTheme.") +} private val LocalAutoTranslationEnabled = compositionLocalOf { error( "No AutoTranslationEnabled Boolean provided! " + @@ -129,6 +132,7 @@ private val LocalAutoTranslationEnabled = compositionLocalOf { * @param attachmentsPickerTabFactories Attachments picker tab factories that we provide. * @param ownMessageTheme Theme of the current user messages. * @param otherMessageTheme Theme of the other users messages. + * @param messageDateSeparatorTheme Theme of the message date separator. * @param content The content shown within the theme wrapper. */ @Composable @@ -165,6 +169,10 @@ public fun ChatTheme( typography = typography, colors = colors, ), + messageDateSeparatorTheme: MessageDateSeparatorTheme = MessageDateSeparatorTheme.defaultTheme( + typography = typography, + colors = colors, + ), content: @Composable () -> Unit, ) { LaunchedEffect(Unit) { @@ -186,6 +194,7 @@ public fun ChatTheme( LocalMessagePreviewFormatter provides messagePreviewFormatter, LocalOwnMessageTheme provides ownMessageTheme, LocalOtherMessageTheme provides otherMessageTheme, + LocalMessageDateSeparatorTheme provides messageDateSeparatorTheme, LocalStreamImageLoader provides imageLoaderFactory.imageLoader(LocalContext.current.applicationContext), LocalMessageAlignmentProvider provides messageAlignmentProvider, LocalMessageOptionsUserReactionAlignment provides messageOptionsUserReactionAlignment, @@ -330,6 +339,14 @@ public object ChatTheme { @ReadOnlyComposable get() = LocalOtherMessageTheme.current + /** + * Retrieves the current [MessageDateSeparatorTheme] at the call site's position in the hierarchy. + */ + public val messageDateSeparatorTheme: MessageDateSeparatorTheme + @Composable + @ReadOnlyComposable + get() = LocalMessageDateSeparatorTheme.current + /** * Retrieves the current [autoTranslationEnabled] value at the call site's position in the hierarchy. */ diff --git a/stream-chat-android-compose/src/main/java/io/getstream/chat/android/compose/ui/theme/MessageDateSeparatorTheme.kt b/stream-chat-android-compose/src/main/java/io/getstream/chat/android/compose/ui/theme/MessageDateSeparatorTheme.kt new file mode 100644 index 00000000000..2037b1441b8 --- /dev/null +++ b/stream-chat-android-compose/src/main/java/io/getstream/chat/android/compose/ui/theme/MessageDateSeparatorTheme.kt @@ -0,0 +1,60 @@ +/* + * Copyright (c) 2014-2023 Stream.io Inc. All rights reserved. + * + * Licensed under the Stream License; + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * https://github.com/GetStream/stream-chat-android/blob/main/LICENSE + * + * 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 io.getstream.chat.android.compose.ui.theme + +import androidx.compose.foundation.isSystemInDarkTheme +import androidx.compose.runtime.Composable +import androidx.compose.runtime.Immutable +import androidx.compose.ui.graphics.Color +import androidx.compose.ui.text.TextStyle + +/** + * Represents message date separator theming. + * + * @param textStyle The text style for the date separator. + * @param backgroundColor The background color for the date separator. + */ +@Immutable +public class MessageDateSeparatorTheme( + public val textStyle: TextStyle, + public val backgroundColor: Color, +) { + + public companion object { + + /** + * Builds the default message date separator theme. + * + * @return A [MessageDateSeparatorTheme] instance holding the default theming. + */ + @Composable + public fun defaultTheme( + typography: StreamTypography = StreamTypography.defaultTypography(), + colors: StreamColors = when (isSystemInDarkTheme()) { + true -> StreamColors.defaultDarkColors() + else -> StreamColors.defaultColors() + }, + ): MessageDateSeparatorTheme { + return MessageDateSeparatorTheme( + textStyle = typography.body.copy( + color = colors.textHighEmphasisInverse, + ), + backgroundColor = colors.overlayDark, + ) + } + } +} diff --git a/stream-chat-android-compose/src/main/java/io/getstream/chat/android/compose/ui/theme/StreamColors.kt b/stream-chat-android-compose/src/main/java/io/getstream/chat/android/compose/ui/theme/StreamColors.kt index 9b4858b27aa..9d133098345 100644 --- a/stream-chat-android-compose/src/main/java/io/getstream/chat/android/compose/ui/theme/StreamColors.kt +++ b/stream-chat-android-compose/src/main/java/io/getstream/chat/android/compose/ui/theme/StreamColors.kt @@ -26,6 +26,8 @@ import io.getstream.chat.android.compose.R * Contains all the colors in our palette. Each color is used for various things an can be changed to * customize the app design style. * @param textHighEmphasis Used for main text and active icon status. + * @param textHighEmphasisInverse Used for contrasting backgrounds or elements against the main text and active icon + * status, providing better visibility and readability. * @param textLowEmphasis Used for secondary text, default icon state, deleted messages text and datestamp background. * @param disabled Used for disabled icons and empty states. * @param borders Used for borders, the background of self messages, selected items, pressed state, button dividers. @@ -55,6 +57,7 @@ import io.getstream.chat.android.compose.R @Immutable public data class StreamColors( public val textHighEmphasis: Color, + public val textHighEmphasisInverse: Color, public val textLowEmphasis: Color, public val disabled: Color, public val borders: Color, @@ -100,6 +103,7 @@ public data class StreamColors( @Composable public fun defaultColors(): StreamColors = StreamColors( textHighEmphasis = colorResource(R.color.stream_compose_text_high_emphasis), + textHighEmphasisInverse = colorResource(R.color.stream_compose_text_high_emphasis_inverse), textLowEmphasis = colorResource(R.color.stream_compose_text_low_emphasis), disabled = colorResource(R.color.stream_compose_disabled), borders = colorResource(R.color.stream_compose_borders), @@ -131,6 +135,7 @@ public data class StreamColors( @Composable public fun defaultDarkColors(): StreamColors = StreamColors( textHighEmphasis = colorResource(R.color.stream_compose_text_high_emphasis_dark), + textHighEmphasisInverse = colorResource(R.color.stream_compose_text_high_emphasis_inverse_dark), textLowEmphasis = colorResource(R.color.stream_compose_text_low_emphasis_dark), disabled = colorResource(R.color.stream_compose_disabled_dark), borders = colorResource(R.color.stream_compose_borders_dark), diff --git a/stream-chat-android-compose/src/main/res/values/colors.xml b/stream-chat-android-compose/src/main/res/values/colors.xml index 432818fc0a1..038ade1ce70 100644 --- a/stream-chat-android-compose/src/main/res/values/colors.xml +++ b/stream-chat-android-compose/src/main/res/values/colors.xml @@ -17,6 +17,7 @@ #000000 + #FFFFFF #72767E #B4B7BB #DBDDE1 @@ -33,6 +34,7 @@ #FFFFFF + #000000 #72767E #4C525C #272A30