Iterate on the send button colors. Fixes #6312
This commit is contained in:
parent
bc957f2a50
commit
b6321209ed
1 changed files with 9 additions and 37 deletions
|
|
@ -8,6 +8,7 @@
|
||||||
|
|
||||||
package io.element.android.libraries.textcomposer.components
|
package io.element.android.libraries.textcomposer.components
|
||||||
|
|
||||||
|
import androidx.compose.foundation.background
|
||||||
import androidx.compose.foundation.layout.Box
|
import androidx.compose.foundation.layout.Box
|
||||||
import androidx.compose.foundation.layout.Row
|
import androidx.compose.foundation.layout.Row
|
||||||
import androidx.compose.foundation.layout.padding
|
import androidx.compose.foundation.layout.padding
|
||||||
|
|
@ -17,14 +18,10 @@ import androidx.compose.runtime.Composable
|
||||||
import androidx.compose.ui.Alignment
|
import androidx.compose.ui.Alignment
|
||||||
import androidx.compose.ui.Modifier
|
import androidx.compose.ui.Modifier
|
||||||
import androidx.compose.ui.draw.clip
|
import androidx.compose.ui.draw.clip
|
||||||
import androidx.compose.ui.draw.drawWithCache
|
import androidx.compose.ui.graphics.Color
|
||||||
import androidx.compose.ui.geometry.Offset
|
|
||||||
import androidx.compose.ui.graphics.LinearGradientShader
|
|
||||||
import androidx.compose.ui.graphics.ShaderBrush
|
|
||||||
import androidx.compose.ui.unit.dp
|
import androidx.compose.ui.unit.dp
|
||||||
import io.element.android.compound.theme.ElementTheme
|
import io.element.android.compound.theme.ElementTheme
|
||||||
import io.element.android.compound.tokens.generated.CompoundIcons
|
import io.element.android.compound.tokens.generated.CompoundIcons
|
||||||
import io.element.android.libraries.designsystem.colors.gradientActionColors
|
|
||||||
import io.element.android.libraries.designsystem.preview.ElementPreview
|
import io.element.android.libraries.designsystem.preview.ElementPreview
|
||||||
import io.element.android.libraries.designsystem.preview.PreviewsDayNight
|
import io.element.android.libraries.designsystem.preview.PreviewsDayNight
|
||||||
import io.element.android.libraries.designsystem.theme.components.Icon
|
import io.element.android.libraries.designsystem.theme.components.Icon
|
||||||
|
|
@ -33,7 +30,6 @@ import io.element.android.libraries.designsystem.theme.components.IconButton
|
||||||
/**
|
/**
|
||||||
* Send button for the message composer.
|
* Send button for the message composer.
|
||||||
* Figma: https://www.figma.com/design/G1xy0HDZKJf5TCRFmKb5d5/Compound-Android-Components?node-id=1956-37575&node-type=frame&m=dev
|
* Figma: https://www.figma.com/design/G1xy0HDZKJf5TCRFmKb5d5/Compound-Android-Components?node-id=1956-37575&node-type=frame&m=dev
|
||||||
* Temporary Figma : https://www.figma.com/design/Ni6Ii8YKtmXCKYNE90cC67/Timeline-(new)?node-id=2274-39944&m=dev
|
|
||||||
*/
|
*/
|
||||||
@Composable
|
@Composable
|
||||||
internal fun SendButtonIcon(
|
internal fun SendButtonIcon(
|
||||||
|
|
@ -49,11 +45,16 @@ internal fun SendButtonIcon(
|
||||||
isEditing -> 0.dp
|
isEditing -> 0.dp
|
||||||
else -> 2.dp
|
else -> 2.dp
|
||||||
}
|
}
|
||||||
|
val backgroundColor = if (canSendMessage) {
|
||||||
|
ElementTheme.colors.bgAccentRest
|
||||||
|
} else {
|
||||||
|
Color.Transparent
|
||||||
|
}
|
||||||
Box(
|
Box(
|
||||||
modifier = modifier
|
modifier = modifier
|
||||||
.clip(CircleShape)
|
.clip(CircleShape)
|
||||||
.size(36.dp)
|
.size(36.dp)
|
||||||
.buttonBackgroundModifier(canSendMessage)
|
.background(backgroundColor)
|
||||||
) {
|
) {
|
||||||
Icon(
|
Icon(
|
||||||
modifier = Modifier
|
modifier = Modifier
|
||||||
|
|
@ -63,11 +64,7 @@ internal fun SendButtonIcon(
|
||||||
// Note: accessibility is managed in TextComposer.
|
// Note: accessibility is managed in TextComposer.
|
||||||
contentDescription = null,
|
contentDescription = null,
|
||||||
tint = if (canSendMessage) {
|
tint = if (canSendMessage) {
|
||||||
if (ElementTheme.colors.isLight) {
|
ElementTheme.colors.iconOnSolidPrimary
|
||||||
ElementTheme.colors.iconOnSolidPrimary
|
|
||||||
} else {
|
|
||||||
ElementTheme.colors.iconPrimary
|
|
||||||
}
|
|
||||||
} else {
|
} else {
|
||||||
ElementTheme.colors.iconQuaternary
|
ElementTheme.colors.iconQuaternary
|
||||||
}
|
}
|
||||||
|
|
@ -75,31 +72,6 @@ internal fun SendButtonIcon(
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@Composable
|
|
||||||
private fun Modifier.buttonBackgroundModifier(
|
|
||||||
canSendMessage: Boolean,
|
|
||||||
) = then(
|
|
||||||
if (canSendMessage) {
|
|
||||||
val colors = gradientActionColors()
|
|
||||||
Modifier.drawWithCache {
|
|
||||||
val verticalGradientBrush = ShaderBrush(
|
|
||||||
LinearGradientShader(
|
|
||||||
from = Offset(0f, 0f),
|
|
||||||
to = Offset(0f, size.height),
|
|
||||||
colors = colors,
|
|
||||||
)
|
|
||||||
)
|
|
||||||
onDrawBehind {
|
|
||||||
drawRect(
|
|
||||||
brush = verticalGradientBrush,
|
|
||||||
)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
Modifier
|
|
||||||
}
|
|
||||||
)
|
|
||||||
|
|
||||||
@PreviewsDayNight
|
@PreviewsDayNight
|
||||||
@Composable
|
@Composable
|
||||||
internal fun SendButtonIconPreview() = ElementPreview {
|
internal fun SendButtonIconPreview() = ElementPreview {
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue