From 18046aa18a8bec968f0493c5b42106d584380c49 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Saleniuk?= Date: Thu, 19 Dec 2024 18:06:51 +0100 Subject: [PATCH 1/5] fix: attachments menu blends with background [WPB-15102] --- .../participantsview/ParticipantTile.kt | 2 +- .../messagecomposer/EnabledMessageComposer.kt | 70 +++++++++++++------ .../wire/android/ui/theme/WireColorScheme.kt | 2 +- 3 files changed, 52 insertions(+), 22 deletions(-) diff --git a/app/src/main/kotlin/com/wire/android/ui/calling/ongoing/participantsview/ParticipantTile.kt b/app/src/main/kotlin/com/wire/android/ui/calling/ongoing/participantsview/ParticipantTile.kt index 34dfecc6af2..8fe6dadd09c 100644 --- a/app/src/main/kotlin/com/wire/android/ui/calling/ongoing/participantsview/ParticipantTile.kt +++ b/app/src/main/kotlin/com/wire/android/ui/calling/ongoing/participantsview/ParticipantTile.kt @@ -390,7 +390,7 @@ private fun UsernameTile( modifier: Modifier = Modifier, ) { val color = - if (isSpeaking) colorsScheme().primary else darkColorsScheme().surfaceContainerLowest + if (isSpeaking) colorsScheme().primary else darkColorsScheme().inverseOnSurface val nameLabelColor = when { isSpeaking -> colorsScheme().onPrimary diff --git a/app/src/main/kotlin/com/wire/android/ui/home/messagecomposer/EnabledMessageComposer.kt b/app/src/main/kotlin/com/wire/android/ui/home/messagecomposer/EnabledMessageComposer.kt index cf94cf8bfe1..7dec32d446b 100644 --- a/app/src/main/kotlin/com/wire/android/ui/home/messagecomposer/EnabledMessageComposer.kt +++ b/app/src/main/kotlin/com/wire/android/ui/home/messagecomposer/EnabledMessageComposer.kt @@ -43,7 +43,7 @@ import androidx.compose.foundation.layout.isImeVisible import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.wrapContentHeight import androidx.compose.foundation.layout.wrapContentSize -import androidx.compose.foundation.shape.RoundedCornerShape +import androidx.compose.foundation.shape.GenericShape import androidx.compose.material3.Surface import androidx.compose.runtime.Composable import androidx.compose.runtime.LaunchedEffect @@ -55,12 +55,20 @@ import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.draw.clip import androidx.compose.ui.draw.drawBehind +import androidx.compose.ui.geometry.CornerRadius import androidx.compose.ui.geometry.Offset +import androidx.compose.ui.geometry.Rect +import androidx.compose.ui.geometry.RoundRect import androidx.compose.ui.geometry.Size +import androidx.compose.ui.geometry.toRect import androidx.compose.ui.graphics.Color -import androidx.compose.ui.graphics.RectangleShape +import androidx.compose.ui.graphics.Path +import androidx.compose.ui.graphics.drawscope.Fill +import androidx.compose.ui.graphics.drawscope.Stroke import androidx.compose.ui.platform.LocalContext import androidx.compose.ui.platform.LocalDensity +import androidx.compose.ui.unit.Density +import androidx.compose.ui.unit.Dp import androidx.compose.ui.unit.IntOffset import androidx.compose.ui.unit.dp import androidx.compose.ui.window.Popup @@ -326,11 +334,12 @@ fun EnabledMessageComposer( showAttachments(false) } ) { - val rippleColor = colorsScheme().surface - val shape = if (isImeVisible) { - RectangleShape - } else { - RoundedCornerShape(dimensions().corner14x) + val rippleColor = colorsScheme().surfaceContainerLowest + val borderColor = colorsScheme().divider + val borderWidthPx = dimensions().spacing1x.toPx(density) + val cornerRadiusPx = if (isImeVisible) 0f else dimensions().corner14x.toPx(density) + val shape = GenericShape { size, _ -> + addPath(calculateOptionsPath(cornerRadiusPx, rippleProgress.value, isImeVisible, size)) } Box( @@ -351,19 +360,17 @@ fun EnabledMessageComposer( .clip(shape) .drawBehind { if (!hideRipple || rippleProgress.value > 0f) { - val maxRadius = size.getDistanceToCorner(Offset(0f, 0f)) - val currentRadius = maxRadius * rippleProgress.value - - drawCircle( + val path = calculateOptionsPath(cornerRadiusPx, rippleProgress.value, isImeVisible, size) + drawPath( + path = path, color = rippleColor, - radius = currentRadius, - center = Offset( - 0f, - if (isImeVisible) { - 0f - } else { - size.height - } + style = Fill + ) + drawPath( + path = path, + color = borderColor, + style = Stroke( + width = borderWidthPx * 2f // double to make it inner stroke, outer half is clipped anyway ) ) } @@ -402,7 +409,30 @@ fun EnabledMessageComposer( } } -fun Size.getDistanceToCorner(corner: Offset): Float { +private fun Size.getDistanceToCorner(corner: Offset): Float { val cornerOffset = Offset(width - corner.x, height - corner.y) return cornerOffset.getDistance() } + +private fun calculateOptionsPath(cornerRadiusPx: Float, rippleProgress: Float, isImeVisible: Boolean, size: Size): Path { + val ripplePath = Path() + ripplePath.addOval( + oval = Rect( + center = Offset( + x = 0f, + y = if (isImeVisible) 0f else size.height + ), + radius = rippleProgress * size.getDistanceToCorner(Offset(0f, 0f)) + ) + ) + val shapePath = Path() + shapePath.addRoundRect( + roundRect = RoundRect( + rect = size.toRect(), + cornerRadius = CornerRadius(cornerRadiusPx, cornerRadiusPx) + ) + ) + return ripplePath.and(shapePath) +} + +private fun Dp.toPx(density: Density) = with(density) { toPx() } diff --git a/core/ui-common/src/main/kotlin/com/wire/android/ui/theme/WireColorScheme.kt b/core/ui-common/src/main/kotlin/com/wire/android/ui/theme/WireColorScheme.kt index e6599228ef0..ea4f6f8b5e6 100644 --- a/core/ui-common/src/main/kotlin/com/wire/android/ui/theme/WireColorScheme.kt +++ b/core/ui-common/src/main/kotlin/com/wire/android/ui/theme/WireColorScheme.kt @@ -207,7 +207,7 @@ private val DarkWireColorScheme = WireColorScheme( surfaceVariant = WireColorPalette.Gray90, onSurfaceVariant = Color.White, inverseSurface = Color.White, inverseOnSurface = Color.Black, surfaceBright = WireColorPalette.Gray70, surfaceDim = WireColorPalette.Gray95, - surfaceContainerLowest = Color.Black, + surfaceContainerLowest = WireColorPalette.Gray100, surfaceContainerLow = WireColorPalette.Gray95, surfaceContainer = WireColorPalette.Gray90, surfaceContainerHigh = WireColorPalette.Gray80, From d97fcdacc8dd6955ed3240f03375b575c1b74094 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Saleniuk?= Date: Thu, 19 Dec 2024 18:17:40 +0100 Subject: [PATCH 2/5] do not add border if keyboard is visible --- .../android/ui/home/messagecomposer/EnabledMessageComposer.kt | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/src/main/kotlin/com/wire/android/ui/home/messagecomposer/EnabledMessageComposer.kt b/app/src/main/kotlin/com/wire/android/ui/home/messagecomposer/EnabledMessageComposer.kt index 7dec32d446b..34300749ac2 100644 --- a/app/src/main/kotlin/com/wire/android/ui/home/messagecomposer/EnabledMessageComposer.kt +++ b/app/src/main/kotlin/com/wire/android/ui/home/messagecomposer/EnabledMessageComposer.kt @@ -336,7 +336,7 @@ fun EnabledMessageComposer( ) { val rippleColor = colorsScheme().surfaceContainerLowest val borderColor = colorsScheme().divider - val borderWidthPx = dimensions().spacing1x.toPx(density) + val borderWidthPx = if (isImeVisible) 0f else dimensions().spacing1x.toPx(density) val cornerRadiusPx = if (isImeVisible) 0f else dimensions().corner14x.toPx(density) val shape = GenericShape { size, _ -> addPath(calculateOptionsPath(cornerRadiusPx, rippleProgress.value, isImeVisible, size)) From ad7b5a116094040339765d9cc3a3fd75918f1fec Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Saleniuk?= Date: Thu, 19 Dec 2024 18:18:06 +0100 Subject: [PATCH 3/5] do not add border if keyboard is visible --- .../home/messagecomposer/EnabledMessageComposer.kt | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/app/src/main/kotlin/com/wire/android/ui/home/messagecomposer/EnabledMessageComposer.kt b/app/src/main/kotlin/com/wire/android/ui/home/messagecomposer/EnabledMessageComposer.kt index 34300749ac2..299029e0807 100644 --- a/app/src/main/kotlin/com/wire/android/ui/home/messagecomposer/EnabledMessageComposer.kt +++ b/app/src/main/kotlin/com/wire/android/ui/home/messagecomposer/EnabledMessageComposer.kt @@ -366,13 +366,15 @@ fun EnabledMessageComposer( color = rippleColor, style = Fill ) - drawPath( - path = path, - color = borderColor, - style = Stroke( - width = borderWidthPx * 2f // double to make it inner stroke, outer half is clipped anyway + if (borderWidthPx > 0f) { + drawPath( + path = path, + color = borderColor, + style = Stroke( + width = borderWidthPx * 2f // double to make it inner stroke, outer half is clipped anyway + ) ) - ) + } } } From 573022703a46c475b93a14e5c6fb160b457447b0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Saleniuk?= Date: Thu, 19 Dec 2024 18:26:31 +0100 Subject: [PATCH 4/5] fix detekt --- .../android/ui/home/messagecomposer/EnabledMessageComposer.kt | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/app/src/main/kotlin/com/wire/android/ui/home/messagecomposer/EnabledMessageComposer.kt b/app/src/main/kotlin/com/wire/android/ui/home/messagecomposer/EnabledMessageComposer.kt index 299029e0807..028e46b9968 100644 --- a/app/src/main/kotlin/com/wire/android/ui/home/messagecomposer/EnabledMessageComposer.kt +++ b/app/src/main/kotlin/com/wire/android/ui/home/messagecomposer/EnabledMessageComposer.kt @@ -360,7 +360,9 @@ fun EnabledMessageComposer( .clip(shape) .drawBehind { if (!hideRipple || rippleProgress.value > 0f) { - val path = calculateOptionsPath(cornerRadiusPx, rippleProgress.value, isImeVisible, size) + val path = calculateOptionsPath( + cornerRadiusPx, rippleProgress.value, isImeVisible, size + ) drawPath( path = path, color = rippleColor, From 3a0639314f88e033ed566ab1f59ae67940de9130 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Saleniuk?= Date: Fri, 20 Dec 2024 10:01:24 +0100 Subject: [PATCH 5/5] fix detekt --- .../messagecomposer/EnabledMessageComposer.kt | 27 +++++++++---------- 1 file changed, 13 insertions(+), 14 deletions(-) diff --git a/app/src/main/kotlin/com/wire/android/ui/home/messagecomposer/EnabledMessageComposer.kt b/app/src/main/kotlin/com/wire/android/ui/home/messagecomposer/EnabledMessageComposer.kt index 028e46b9968..f1b64a76de9 100644 --- a/app/src/main/kotlin/com/wire/android/ui/home/messagecomposer/EnabledMessageComposer.kt +++ b/app/src/main/kotlin/com/wire/android/ui/home/messagecomposer/EnabledMessageComposer.kt @@ -360,22 +360,21 @@ fun EnabledMessageComposer( .clip(shape) .drawBehind { if (!hideRipple || rippleProgress.value > 0f) { - val path = calculateOptionsPath( - cornerRadiusPx, rippleProgress.value, isImeVisible, size - ) - drawPath( - path = path, - color = rippleColor, - style = Fill - ) - if (borderWidthPx > 0f) { + calculateOptionsPath(cornerRadiusPx, rippleProgress.value, isImeVisible, size).let { drawPath( - path = path, - color = borderColor, - style = Stroke( - width = borderWidthPx * 2f // double to make it inner stroke, outer half is clipped anyway - ) + path = it, + color = rippleColor, + style = Fill ) + if (borderWidthPx > 0f) { + drawPath( + path = it, + color = borderColor, + style = Stroke( + width = borderWidthPx * 2f // double to make inner stroke, outer half is clipped anyway + ) + ) + } } } }