From 52f7b295779a1ed63959032377685735d5030be2 Mon Sep 17 00:00:00 2001 From: Benoit Marty Date: Fri, 19 Apr 2024 17:36:49 +0200 Subject: [PATCH] Fix missing background issue. --- .../features/joinroom/impl/JoinRoomView.kt | 71 ++++++++++--------- .../impl/RoomAliasResolverView.kt | 41 ++++++----- .../background/LightGradientBackground.kt | 50 ++++++------- 3 files changed, 85 insertions(+), 77 deletions(-) diff --git a/features/joinroom/impl/src/main/kotlin/io/element/android/features/joinroom/impl/JoinRoomView.kt b/features/joinroom/impl/src/main/kotlin/io/element/android/features/joinroom/impl/JoinRoomView.kt index 7deed58450..89e7457fee 100644 --- a/features/joinroom/impl/src/main/kotlin/io/element/android/features/joinroom/impl/JoinRoomView.kt +++ b/features/joinroom/impl/src/main/kotlin/io/element/android/features/joinroom/impl/JoinRoomView.kt @@ -16,15 +16,15 @@ package io.element.android.features.joinroom.impl -import androidx.compose.foundation.background import androidx.compose.foundation.layout.Arrangement +import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.PaddingValues +import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.material3.ExperimentalMaterial3Api import androidx.compose.material3.MaterialTheme 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 @@ -64,38 +64,41 @@ fun JoinRoomView( onKnockSuccess: () -> Unit, modifier: Modifier = Modifier, ) { - val gradientBackground = remember { LightGradientBackground() } - HeaderFooterPage( - modifier = modifier.background(gradientBackground), - containerColor = Color.Transparent, - paddingValues = PaddingValues(16.dp), - topBar = { - JoinRoomTopBar(onBackClicked = onBackPressed) - }, - content = { - JoinRoomContent(contentState = state.contentState) - }, - footer = { - JoinRoomFooter( - state = state, - onAcceptInvite = { - state.eventSink(JoinRoomEvents.AcceptInvite) - }, - onDeclineInvite = { - state.eventSink(JoinRoomEvents.DeclineInvite) - }, - onJoinRoom = { - state.eventSink(JoinRoomEvents.JoinRoom) - }, - onKnockRoom = { - state.eventSink(JoinRoomEvents.KnockRoom) - }, - onRetry = { - state.eventSink(JoinRoomEvents.RetryFetchingContent) - } - ) - } - ) + Box( + modifier = modifier.fillMaxSize(), + ) { + LightGradientBackground() + HeaderFooterPage( + containerColor = Color.Transparent, + paddingValues = PaddingValues(16.dp), + topBar = { + JoinRoomTopBar(onBackClicked = onBackPressed) + }, + content = { + JoinRoomContent(contentState = state.contentState) + }, + footer = { + JoinRoomFooter( + state = state, + onAcceptInvite = { + state.eventSink(JoinRoomEvents.AcceptInvite) + }, + onDeclineInvite = { + state.eventSink(JoinRoomEvents.DeclineInvite) + }, + onJoinRoom = { + state.eventSink(JoinRoomEvents.JoinRoom) + }, + onKnockRoom = { + state.eventSink(JoinRoomEvents.KnockRoom) + }, + onRetry = { + state.eventSink(JoinRoomEvents.RetryFetchingContent) + } + ) + } + ) + } AsyncActionView( async = state.knockAction, diff --git a/features/roomaliasresolver/impl/src/main/kotlin/io/element/android/features/roomaliasresolver/impl/RoomAliasResolverView.kt b/features/roomaliasresolver/impl/src/main/kotlin/io/element/android/features/roomaliasresolver/impl/RoomAliasResolverView.kt index e12ef4170d..cd5bd042c8 100644 --- a/features/roomaliasresolver/impl/src/main/kotlin/io/element/android/features/roomaliasresolver/impl/RoomAliasResolverView.kt +++ b/features/roomaliasresolver/impl/src/main/kotlin/io/element/android/features/roomaliasresolver/impl/RoomAliasResolverView.kt @@ -16,17 +16,17 @@ package io.element.android.features.roomaliasresolver.impl -import androidx.compose.foundation.background import androidx.compose.foundation.layout.Arrangement +import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.PaddingValues import androidx.compose.foundation.layout.Row +import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.material3.ExperimentalMaterial3Api import androidx.compose.material3.MaterialTheme import androidx.compose.runtime.Composable import androidx.compose.runtime.LaunchedEffect import androidx.compose.runtime.getValue -import androidx.compose.runtime.remember import androidx.compose.runtime.rememberUpdatedState import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Color @@ -65,23 +65,26 @@ fun RoomAliasResolverView( latestOnAliasResolved(state.resolveState.data) } } - val gradientBackground = remember { LightGradientBackground() } - HeaderFooterPage( - modifier = modifier.background(gradientBackground), - containerColor = Color.Transparent, - paddingValues = PaddingValues(16.dp), - topBar = { - RoomAliasResolverTopBar(onBackClicked = onBackPressed) - }, - content = { - RoomAliasResolverContent(state = state) - }, - footer = { - RoomAliasResolverFooter( - state = state, - ) - } - ) + Box( + modifier = modifier.fillMaxSize(), + ) { + LightGradientBackground() + HeaderFooterPage( + containerColor = Color.Transparent, + paddingValues = PaddingValues(16.dp), + topBar = { + RoomAliasResolverTopBar(onBackClicked = onBackPressed) + }, + content = { + RoomAliasResolverContent(state = state) + }, + footer = { + RoomAliasResolverFooter( + state = state, + ) + } + ) + } } @Composable diff --git a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/background/LightGradientBackground.kt b/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/background/LightGradientBackground.kt index 89eede3bc0..793f4891f5 100644 --- a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/background/LightGradientBackground.kt +++ b/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/background/LightGradientBackground.kt @@ -16,46 +16,48 @@ package io.element.android.libraries.designsystem.background -import androidx.compose.foundation.background -import androidx.compose.foundation.layout.Box +import androidx.compose.foundation.Canvas import androidx.compose.foundation.layout.fillMaxSize +import androidx.compose.material3.MaterialTheme import androidx.compose.runtime.Composable -import androidx.compose.runtime.remember import androidx.compose.ui.Modifier -import androidx.compose.ui.geometry.Size import androidx.compose.ui.geometry.center import androidx.compose.ui.graphics.Color import androidx.compose.ui.graphics.RadialGradientShader -import androidx.compose.ui.graphics.Shader import androidx.compose.ui.graphics.ShaderBrush import io.element.android.libraries.designsystem.preview.ElementPreview import io.element.android.libraries.designsystem.preview.PreviewsDayNight -class LightGradientBackground( - private val firstColor: Color = Color(0x1E0DBD8B), - private val secondColor: Color = Color(0x001273EB), - private val ratio: Float = 642 / 775f, -) : ShaderBrush() { - override fun createShader(size: Size): Shader { +/** + * Light gradient background for Join room screens. + */ +@Composable +fun LightGradientBackground( + modifier: Modifier = Modifier, + backgroundColor: Color = MaterialTheme.colorScheme.background, + firstColor: Color = Color(0x1E0DBD8B), + secondColor: Color = Color(0x001273EB), + ratio: Float = 642 / 775f, +) { + Canvas( + modifier = modifier.fillMaxSize() + ) { val biggerDimension = size.width * 1.98f - return RadialGradientShader( - colors = listOf(firstColor, secondColor), - center = size.center.copy(x = size.width * ratio, y = size.height * ratio), - radius = biggerDimension / 2f, - colorStops = listOf(0f, 0.95f) + val gradientShaderBrush = ShaderBrush( + RadialGradientShader( + colors = listOf(firstColor, secondColor), + center = size.center.copy(x = size.width * ratio, y = size.height * ratio), + radius = biggerDimension / 2f, + colorStops = listOf(0f, 0.95f) + ) ) + drawRect(backgroundColor, size = size) + drawRect(brush = gradientShaderBrush, size = size) } } @PreviewsDayNight @Composable internal fun LightGradientBackgroundPreview() = ElementPreview { - val gradientBackground = remember { - LightGradientBackground() - } - Box( - modifier = Modifier - .fillMaxSize() - .background(gradientBackground) - ) + LightGradientBackground() }