Apply gradient to focused Event.
This commit is contained in:
@@ -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,
|
||||
),
|
||||
)
|
||||
}
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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,
|
||||
)
|
||||
)
|
||||
}
|
||||
|
||||
@@ -64,6 +64,7 @@ class KonsistPreviewTest {
|
||||
"ColorAliasesPreview",
|
||||
"DefaultRoomListTopBarWithIndicatorPreview",
|
||||
"FocusedEventPreview",
|
||||
"FocusedEventEnterprisePreview",
|
||||
"GradientFloatingActionButtonCircleShapePreview",
|
||||
"HeaderFooterPageScrollablePreview",
|
||||
"IconsCompoundPreview",
|
||||
|
||||
Reference in New Issue
Block a user