Skip to content

Commit

Permalink
[i200] add MessageDateSeparatorTheme (#5014)
Browse files Browse the repository at this point in the history
* [i200] DateSeparator uses BG color for text

(cherry picked from commit 34e0499)

# Conflicts:
#	stream-chat-android-compose/src/main/java/io/getstream/chat/android/compose/ui/messages/list/MessageContainer.kt

* [i200] add MessageDateSeparatorTheme

(cherry picked from commit 429b41e)

# Conflicts:
#	stream-chat-android-compose/src/main/java/io/getstream/chat/android/compose/ui/messages/list/MessageContainer.kt
#	stream-chat-android-compose/src/main/java/io/getstream/chat/android/compose/ui/theme/ChatTheme.kt

* [i200] add CHANGELOG

* [i200] fix api dump
  • Loading branch information
kanat authored Oct 24, 2023
1 parent db4dc26 commit 334b6c2
Show file tree
Hide file tree
Showing 7 changed files with 108 additions and 9 deletions.
1 change: 1 addition & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
24 changes: 19 additions & 5 deletions stream-chat-android-compose/api/stream-chat-android-compose.api
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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 <init> (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 {
Expand Down Expand Up @@ -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 <init> (JJJJJJJJJJJJJJJJJJJJJJJJJJILkotlin/jvm/internal/DefaultConstructorMarker;)V
public synthetic fun <init> (JJJJJJJJJJJJJJJJJJJJJJJJJJLkotlin/jvm/internal/DefaultConstructorMarker;)V
public synthetic fun <init> (JJJJJJJJJJJJJJJJJJJJJJJJJJJILkotlin/jvm/internal/DefaultConstructorMarker;)V
public synthetic fun <init> (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
Expand All @@ -1559,15 +1571,16 @@ 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
public final fun component6-0d7_KjU ()J
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
Expand All @@ -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
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand All @@ -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,
)
}
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -98,6 +98,9 @@ private val LocalOwnMessageTheme = compositionLocalOf<MessageTheme> {
private val LocalOtherMessageTheme = compositionLocalOf<MessageTheme> {
error("No OtherMessageTheme provided! Make sure to wrap all usages of Stream components in a ChatTheme.")
}
private val LocalMessageDateSeparatorTheme = compositionLocalOf<MessageDateSeparatorTheme> {
error("No MessageDateSeparatorTheme provided! Make sure to wrap all usages of Stream components in a ChatTheme.")
}
private val LocalAutoTranslationEnabled = compositionLocalOf<Boolean> {
error(
"No AutoTranslationEnabled Boolean provided! " +
Expand Down Expand Up @@ -129,6 +132,7 @@ private val LocalAutoTranslationEnabled = compositionLocalOf<Boolean> {
* @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
Expand Down Expand Up @@ -165,6 +169,10 @@ public fun ChatTheme(
typography = typography,
colors = colors,
),
messageDateSeparatorTheme: MessageDateSeparatorTheme = MessageDateSeparatorTheme.defaultTheme(
typography = typography,
colors = colors,
),
content: @Composable () -> Unit,
) {
LaunchedEffect(Unit) {
Expand All @@ -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,
Expand Down Expand Up @@ -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.
*/
Expand Down
Original file line number Diff line number Diff line change
@@ -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,
)
}
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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),
Expand Down Expand Up @@ -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),
Expand Down
2 changes: 2 additions & 0 deletions stream-chat-android-compose/src/main/res/values/colors.xml
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@
<resources>
<!-- Default colors -->
<color name="stream_compose_text_high_emphasis">#000000</color>
<color name="stream_compose_text_high_emphasis_inverse">#FFFFFF</color>
<color name="stream_compose_text_low_emphasis">#72767E</color>
<color name="stream_compose_disabled">#B4B7BB</color>
<color name="stream_compose_borders">#DBDDE1</color>
Expand All @@ -33,6 +34,7 @@

<!-- Default Dark colors -->
<color name="stream_compose_text_high_emphasis_dark">#FFFFFF</color>
<color name="stream_compose_text_high_emphasis_inverse_dark">#000000</color>
<color name="stream_compose_text_low_emphasis_dark">#72767E</color>
<color name="stream_compose_disabled_dark">#4C525C</color>
<color name="stream_compose_borders_dark">#272A30</color>
Expand Down

0 comments on commit 334b6c2

Please sign in to comment.