Apply gradient to focused Event.

This commit is contained in:
Benoit Marty
2025-07-07 15:03:30 +02:00
parent 5541ca7427
commit bcc01d5007
4 changed files with 46 additions and 31 deletions

View File

@@ -37,11 +37,11 @@ import io.element.android.features.messages.impl.timeline.model.event.TimelineIt
import io.element.android.features.messages.impl.timeline.model.event.TimelineItemVoiceContent
import io.element.android.features.messages.impl.timeline.protection.TimelineProtectionEvent
import io.element.android.features.messages.impl.timeline.protection.TimelineProtectionState
import io.element.android.libraries.designsystem.modifiers.subtleColorStops
import io.element.android.libraries.designsystem.preview.ElementPreview
import io.element.android.libraries.designsystem.preview.PreviewsDayNight
import io.element.android.libraries.designsystem.text.toPx
import io.element.android.libraries.designsystem.theme.LocalBuildMeta
import io.element.android.libraries.designsystem.theme.highlightedMessageBackgroundColor
import io.element.android.libraries.matrix.api.core.EventId
import io.element.android.libraries.matrix.api.user.MatrixUser
import io.element.android.libraries.ui.strings.CommonStrings
@@ -206,23 +206,20 @@ internal fun TimelineItemRow(
@Suppress("ModifierComposable")
@Composable
private fun Modifier.focusedEvent(
focusedEventOffset: Dp
focusedEventOffset: Dp,
isEnterpriseBuild: Boolean = LocalBuildMeta.current.isEnterpriseBuild,
): Modifier {
val highlightedLineColor = ElementTheme.colors.textActionAccent
val gradientFirstColor = if (LocalBuildMeta.current.isEnterpriseBuild) {
ElementTheme.colors.textActionAccent.copy(alpha = 0.125f)
val highlightedLineColor = if (isEnterpriseBuild) {
ElementTheme.colors.textActionAccent
} else {
ElementTheme.colors.highlightedMessageBackgroundColor
ElementTheme.colors.borderAccentSubtle
}
val gradientColors = listOf(
gradientFirstColor,
ElementTheme.colors.bgCanvasDefault,
)
val gradientColors = subtleColorStops(isEnterpriseBuild)
val verticalOffset = focusedEventOffset.toPx()
val verticalRatio = 0.7f
return drawWithCache {
val brush = Brush.verticalGradient(
colors = gradientColors,
colorStops = gradientColors,
endY = size.height * verticalRatio,
)
onDrawBehind {
@@ -251,3 +248,18 @@ internal fun FocusedEventPreview() = ElementPreview {
.focusedEvent(0.dp),
)
}
@PreviewsDayNight
@Composable
internal fun FocusedEventEnterprisePreview() = ElementPreview {
Box(
modifier = Modifier
.padding(16.dp)
.fillMaxWidth()
.height(160.dp)
.focusedEvent(
focusedEventOffset = 0.dp,
isEnterpriseBuild = true,
),
)
}

View File

@@ -34,26 +34,33 @@ fun Modifier.backgroundVerticalGradient(
if (!isVisible) return this
return background(
brush = Brush.verticalGradient(
colorStops = buildList {
if (isEnterpriseBuild) {
// For enterprise builds, ensure that we are theming the gradient
add(0f to ElementTheme.colors.textActionAccent.copy(alpha = 0.5f))
add(0.75f to ElementTheme.colors.bgCanvasDefault)
add(1f to Color.Transparent)
} else {
add(0f to ElementTheme.colors.gradientSubtleStop1)
add(1 / 5f to ElementTheme.colors.gradientSubtleStop2)
add(2 / 5f to ElementTheme.colors.gradientSubtleStop3)
add(3 / 5f to ElementTheme.colors.gradientSubtleStop4)
add(4 / 5f to ElementTheme.colors.gradientSubtleStop5)
add(1f to ElementTheme.colors.gradientSubtleStop6)
}
}.toTypedArray(),
colorStops = subtleColorStops(isEnterpriseBuild),
),
alpha = 0.75f,
)
}
@Composable
fun subtleColorStops(
isEnterpriseBuild: Boolean = LocalBuildMeta.current.isEnterpriseBuild,
): Array<Pair<Float, Color>> {
return buildList {
if (isEnterpriseBuild) {
// For enterprise builds, ensure that we are theming the gradient
add(0f to ElementTheme.colors.textActionAccent.copy(alpha = 0.5f))
add(0.75f to ElementTheme.colors.bgCanvasDefault)
add(1f to Color.Transparent)
} else {
add(0f to ElementTheme.colors.gradientSubtleStop1)
add(1 / 5f to ElementTheme.colors.gradientSubtleStop2)
add(2 / 5f to ElementTheme.colors.gradientSubtleStop3)
add(3 / 5f to ElementTheme.colors.gradientSubtleStop4)
add(4 / 5f to ElementTheme.colors.gradientSubtleStop5)
add(1f to ElementTheme.colors.gradientSubtleStop6)
}
}.toTypedArray()
}
@PreviewsDayNight
@Composable
internal fun BackgroundVerticalGradientPreview() = ElementPreview {

View File

@@ -100,10 +100,6 @@ val SemanticColors.mentionPillBackground
val SemanticColors.bigCheckmarkBorderColor
get() = if (isLight) LightColorTokens.colorGray400 else DarkColorTokens.colorGray400
@OptIn(CoreColorToken::class)
val SemanticColors.highlightedMessageBackgroundColor
get() = if (isLight) LightColorTokens.colorGreen300 else DarkColorTokens.colorGreen300
// Badge colors
@OptIn(CoreColorToken::class)
@@ -148,7 +144,6 @@ internal fun ColorAliasesPreview() = ElementPreview {
"temporaryColorBgSpecial" to ElementTheme.colors.temporaryColorBgSpecial,
"iconSuccessPrimaryBackground" to ElementTheme.colors.iconSuccessPrimaryBackground,
"bigCheckmarkBorderColor" to ElementTheme.colors.bigCheckmarkBorderColor,
"highlightedMessageBackgroundColor" to ElementTheme.colors.highlightedMessageBackgroundColor,
)
)
}

View File

@@ -64,6 +64,7 @@ class KonsistPreviewTest {
"ColorAliasesPreview",
"DefaultRoomListTopBarWithIndicatorPreview",
"FocusedEventPreview",
"FocusedEventEnterprisePreview",
"GradientFloatingActionButtonCircleShapePreview",
"HeaderFooterPageScrollablePreview",
"IconsCompoundPreview",