Sulkta-OSS/element-x-ada
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Voice message button: Show proper disabled color. (#1682)

Browse source 
Also changes a bit our own IconButton api to allow to mirror material's and allow color customization.
This commit is contained in:
Marco Romano 2023-10-30 11:51:22 +01:00 • committed by GitHub
parent 2aa9bf967b
commit 7651cf1b33
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
28 changed files with 112 additions and 123 deletions
Download patch file Download diff file Expand all files Collapse all files

115
features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/event/TimelineItemVoiceView.kt
View file

@ -16,10 +16,7 @@
package io.element.android.features.messages.impl.timeline.components.event
import androidx.annotation.DrawableRes
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
@ -28,11 +25,10 @@ import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material3.IconButtonDefaults
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.semantics.contentDescription
import androidx.compose.ui.semantics.semantics
@ -51,6 +47,7 @@ import io.element.android.libraries.designsystem.preview.ElementPreview
import io.element.android.libraries.designsystem.preview.PreviewsDayNight
import io.element.android.libraries.designsystem.theme.components.CircularProgressIndicator
import io.element.android.libraries.designsystem.theme.components.Icon
import io.element.android.libraries.designsystem.theme.components.IconButton
import io.element.android.libraries.designsystem.theme.components.Text
import io.element.android.libraries.theme.ElementTheme
import io.element.android.libraries.ui.strings.CommonStrings
@ -78,7 +75,7 @@ fun TimelineItemVoiceView(
VoiceMessageState.Button.Pause -> PauseButton(onClick = ::playPause)
VoiceMessageState.Button.Downloading -> ProgressButton()
VoiceMessageState.Button.Retry -> RetryButton(onClick = ::playPause)
VoiceMessageState.Button.Disabled -> DisabledPlayButton()
VoiceMessageState.Button.Disabled -> PlayButton(onClick = {}, enabled = false)
}
Spacer(Modifier.width(8.dp))
Text(
@ -104,40 +101,54 @@ fun TimelineItemVoiceView(
@Composable
private fun PlayButton(
onClick: (() -> Unit)
onClick: () -> Unit,
enabled: Boolean = true,
) {
IconButton(
drawableRes = R.drawable.play,
contentDescription = stringResource(id = CommonStrings.a11y_play),
onClick = onClick
)
CustomIconButton(
onClick = onClick,
enabled = enabled,
) {
Icon(
resourceId = R.drawable.play,
contentDescription = stringResource(id = CommonStrings.a11y_play),
)
}
}
@Composable
private fun PauseButton(
onClick: (() -> Unit)
onClick: () -> Unit,
) {
IconButton(
drawableRes = R.drawable.pause,
contentDescription = stringResource(id = CommonStrings.a11y_play),
onClick = onClick
)
CustomIconButton(
onClick = onClick,
) {
Icon(
resourceId = R.drawable.pause,
contentDescription = stringResource(id = CommonStrings.a11y_play),
)
}
}
@Composable
private fun RetryButton(
onClick: (() -> Unit)
onClick: () -> Unit,
) {
IconButton(
drawableRes = R.drawable.retry,
contentDescription = stringResource(id = CommonStrings.action_retry),
onClick = onClick
)
CustomIconButton(
onClick = onClick,
) {
Icon(
resourceId = R.drawable.retry,
contentDescription = stringResource(id = CommonStrings.action_retry),
)
}
}
@Composable
private fun ProgressButton() {
Button {
CustomIconButton(
onClick = {},
enabled = false,
) {
CircularProgressIndicator(
modifier = Modifier
.padding(2.dp)
@ -149,49 +160,23 @@ private fun ProgressButton() {
}
@Composable
private fun DisabledPlayButton() {
IconButton(
drawableRes = R.drawable.play,
contentDescription = null,
onClick = null,
)
}
@Composable
private fun IconButton(
@DrawableRes drawableRes: Int,
contentDescription: String?,
onClick: (() -> Unit)?,
) {
Button(
onClick = onClick,
) {
Icon(
painter = painterResource(id = drawableRes),
contentDescription = contentDescription,
tint = ElementTheme.colors.iconSecondary,
modifier = Modifier.size(24.dp),
)
}
}
@Composable
private fun Button(
onClick: (() -> Unit)? = null,
private fun CustomIconButton(
onClick: () -> Unit,
enabled: Boolean = true,
content: @Composable () -> Unit,
) {
Box(
IconButton(
onClick = onClick,
modifier = Modifier
.size(36.dp)
.clip(CircleShape)
.background(ElementTheme.materialColors.background)
.let {
if (onClick != null) it.clickable(onClick = onClick) else it
},
contentAlignment = Alignment.Center,
) {
content()
}
.background(color = ElementTheme.colors.bgCanvasDefault, shape = CircleShape)
.size(36.dp),
enabled = enabled,
colors = IconButtonDefaults.iconButtonColors(
contentColor = ElementTheme.colors.iconSecondary,
disabledContentColor = ElementTheme.colors.iconDisabled,
),
content = content,
)
}
open class TimelineItemVoiceViewParametersProvider : PreviewParameterProvider<TimelineItemVoiceViewParameters> {

9
libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/IconButton.kt
View file

@ -19,6 +19,7 @@ package io.element.android.libraries.designsystem.theme.components
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.material3.IconButtonColors
import androidx.compose.material3.IconButtonDefaults
import androidx.compose.material3.LocalContentColor
import androidx.compose.runtime.Composable
@ -38,13 +39,13 @@ fun IconButton(
onClick: () -> Unit,
modifier: Modifier = Modifier,
enabled: Boolean = true,
colors: IconButtonColors = IconButtonDefaults.iconButtonColors(
contentColor = LocalContentColor.current,
disabledContentColor = ElementTheme.colors.iconDisabled,
),
interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
content: @Composable () -> Unit
) {
val colors = IconButtonDefaults.iconButtonColors(
contentColor = LocalContentColor.current,
disabledContentColor = ElementTheme.colors.iconDisabled,
)
androidx.compose.material3.IconButton(
onClick = onClick,
modifier = modifier,

11
libraries/textcomposer/impl/src/main/kotlin/io/element/android/libraries/textcomposer/components/VoiceMessagePreview.kt
View file

@ -28,6 +28,7 @@ import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material3.IconButtonDefaults
import androidx.compose.material3.MaterialTheme
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
@ -114,10 +115,14 @@ private fun PlayerButton(
) {
IconButton(
onClick = onClick,
enabled = enabled,
modifier = modifier
.background(color = ElementTheme.colors.bgCanvasDefault, shape = CircleShape)
.size(30.dp.applyScaleUp())
.size(30.dp.applyScaleUp()),
enabled = enabled,
colors = IconButtonDefaults.iconButtonColors(
contentColor = ElementTheme.colors.iconSecondary,
disabledContentColor = ElementTheme.colors.iconDisabled,
),
) {
when (type) {
PlayerButtonType.Play -> PlayIcon()
@ -130,14 +135,12 @@ private fun PlayerButton(
private fun PauseIcon() = Icon(
resourceId = R.drawable.ic_pause,
contentDescription = stringResource(id = CommonStrings.a11y_pause),
tint = ElementTheme.colors.iconSecondary,
)
@Composable
private fun PlayIcon() = Icon(
resourceId = R.drawable.ic_play,
contentDescription = stringResource(id = CommonStrings.a11y_play),
tint = ElementTheme.colors.iconSecondary,
)
@PreviewsDayNight

4
tests/uitests/src/test/snapshots/images/ui_S_t[f.messages.impl.timeline.components.event_null_TimelineItemVoiceView-D-41_41_null_14,NEXUS_5,1.0,en].png
View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:dcb3c53fff0cf52bf4ff8f8ca0bafaa7f21d1c7a6d504070de3de8f42dac2864
size 9906
oid sha256:ab61d047110a59bfbf327980f08572d9f6a48854a27e9ac256956ac465733043
size 9884

4
tests/uitests/src/test/snapshots/images/ui_S_t[f.messages.impl.timeline.components.event_null_TimelineItemVoiceView-D-41_41_null_4,NEXUS_5,1.0,en].png
View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:0f52f22ad35d11d5124cfcc5128f97e121021dd09caa19c96f23ae8f39aa8cfe
size 6053
oid sha256:49066b0adf53941af950614f1090de66e372f1550d3f0a2b8f88d1bf255f7e3b
size 6055

4
tests/uitests/src/test/snapshots/images/ui_S_t[f.messages.impl.timeline.components.event_null_TimelineItemVoiceView-D-41_41_null_9,NEXUS_5,1.0,en].png
View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:7eb5e7f99047da383a6bc5a45eb76bd902c21fcede196626fc4f6f5507097d51
size 7333
oid sha256:098a61f028e90cdf8b7e708793ebfaab20cde82a23ea117acb901469947dc713
size 7335

4
tests/uitests/src/test/snapshots/images/ui_S_t[f.messages.impl.timeline.components.event_null_TimelineItemVoiceView-N-41_42_null_0,NEXUS_5,1.0,en].png
View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:1bfffebea253932b08a308ac098a392910233e4a8524a898b459842849854c91
size 6036
oid sha256:9863144e5ee8fc010351509a11eac8d66332df97e56a8c5f81f2d0eb128fa368
size 6806

4
tests/uitests/src/test/snapshots/images/ui_S_t[f.messages.impl.timeline.components.event_null_TimelineItemVoiceView-N-41_42_null_1,NEXUS_5,1.0,en].png
View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:b846d71d9d0019f55ee34e4ef38375f1501663a855f2c05742239a08d5b7501d
size 6020
oid sha256:7e19c2813f5db4f4732d158e41211c2de175f9ab97c83296f719b5bfab615be2
size 6775

4
tests/uitests/src/test/snapshots/images/ui_S_t[f.messages.impl.timeline.components.event_null_TimelineItemVoiceView-N-41_42_null_10,NEXUS_5,1.0,en].png
View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:ca13f10ca5fd6194829c3cef02fa5cd0c00790f23c82d2cf70ac5d1d58babb54
size 9656
oid sha256:a294dfa6003a4bba8a780169ced0df7b8e9bb5bd4113dd21d2a5467325f58023
size 10396

4
tests/uitests/src/test/snapshots/images/ui_S_t[f.messages.impl.timeline.components.event_null_TimelineItemVoiceView-N-41_42_null_11,NEXUS_5,1.0,en].png
View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:1dfdaca0c643c81a281658b4cee4d0e938d542a57964c3831496d04db543da45
size 9827
oid sha256:ba5a558037ae529515716a21b37070e5e04a9c0f6e0293a65a69cc3017a74b0d
size 10591

4
tests/uitests/src/test/snapshots/images/ui_S_t[f.messages.impl.timeline.components.event_null_TimelineItemVoiceView-N-41_42_null_12,NEXUS_5,1.0,en].png
View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:ad2ccde01384563471412843a48180b7acb3ba9bbedb9af60f96d403e564073d
size 9566
oid sha256:28d5c962fb8528a96758e704d392a8444b1920dc36e49fd1bc684e5def2cf656
size 10312

4
tests/uitests/src/test/snapshots/images/ui_S_t[f.messages.impl.timeline.components.event_null_TimelineItemVoiceView-N-41_42_null_13,NEXUS_5,1.0,en].png
View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:e32db0169cf50c2120a16efea3cb2b0f8a72f81ddce7a303c13bc2bf38c487ff
size 9653
oid sha256:8adb090451574a5019a1e5c599fa6b2099035c830cc21cec816787e22fe4e690
size 10329

4
tests/uitests/src/test/snapshots/images/ui_S_t[f.messages.impl.timeline.components.event_null_TimelineItemVoiceView-N-41_42_null_14,NEXUS_5,1.0,en].png
View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:796854c3af1c45268c810f393842287d5fb3424f267f987f47bcd105e2a88448
size 9621
oid sha256:b9fd731cc3718c850372e3106969ec99180113dca0e41e02e5133b46a4efa745
size 10319

4
tests/uitests/src/test/snapshots/images/ui_S_t[f.messages.impl.timeline.components.event_null_TimelineItemVoiceView-N-41_42_null_2,NEXUS_5,1.0,en].png
View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:a0a6b88a5d7f001309dcb03da6151ac2949705b32a19301660a24fe02dc6fcdd
size 5562
oid sha256:72875fc0e93851a621ba9ded610c736133188e3609a9578209a90bce9e674641
size 6333

4
tests/uitests/src/test/snapshots/images/ui_S_t[f.messages.impl.timeline.components.event_null_TimelineItemVoiceView-N-41_42_null_3,NEXUS_5,1.0,en].png
View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:2f8562e1e599e16ecc05ec0471de70b9de9a88b347f622bc723f21cb5379b102
size 6033
oid sha256:393205bc33da82255be0f2f19846bdda87baa5f97ca7c623681ad9537fa3e677
size 6733

4
tests/uitests/src/test/snapshots/images/ui_S_t[f.messages.impl.timeline.components.event_null_TimelineItemVoiceView-N-41_42_null_4,NEXUS_5,1.0,en].png
View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:32eba449e245eed3bc67c1ffdf47e267a6de2bf6832739f2902949af297391aa
size 6001
oid sha256:9ecc36796f0404123f5ec125b4631535e50e1ad6ad70f5d933ae43879e580121
size 6740

4
tests/uitests/src/test/snapshots/images/ui_S_t[f.messages.impl.timeline.components.event_null_TimelineItemVoiceView-N-41_42_null_5,NEXUS_5,1.0,en].png
View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:d4a2824fdc49adb0e3fc155e7da319414544a87dc083bdece78e85ba72669d78
size 7155
oid sha256:7e63f75edead31ff90194fedcdd6122503705d758959961466e652489f0819b0
size 7879

4
tests/uitests/src/test/snapshots/images/ui_S_t[f.messages.impl.timeline.components.event_null_TimelineItemVoiceView-N-41_42_null_6,NEXUS_5,1.0,en].png
View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:3817e348ba2775528e3805ad6f5eed044f82b241f73692180c0638c95fb79fa2
size 7076
oid sha256:636a174a411d9d76212d1fe51717b147a2d0586ab55a73a29c42c3d139617f6e
size 7800

4
tests/uitests/src/test/snapshots/images/ui_S_t[f.messages.impl.timeline.components.event_null_TimelineItemVoiceView-N-41_42_null_7,NEXUS_5,1.0,en].png
View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:fd21f1c5ad2616b698a386d78d5efe0ab40aa1959382ed2a568c10441d093a8f
size 6692
oid sha256:172b277c375702a57bdb204a0addadec0baa86236eab9130eb44b125bd615058
size 7445

4
tests/uitests/src/test/snapshots/images/ui_S_t[f.messages.impl.timeline.components.event_null_TimelineItemVoiceView-N-41_42_null_8,NEXUS_5,1.0,en].png
View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:07f52161378dfab92ffb76b860680390ccb5dfcc05347c5fd99504c806dd3210
size 6930
oid sha256:3eeb21741d4caccb07cc93db32887ec423d1c149a5b769bc3cd4cd0d88aa566d
size 7624

4
tests/uitests/src/test/snapshots/images/ui_S_t[f.messages.impl.timeline.components.event_null_TimelineItemVoiceView-N-41_42_null_9,NEXUS_5,1.0,en].png
View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:4adce5249b20bdc9ed6f4d5f066140e8c9b0f62d04ebf953704a106a6ca2ff53
size 7178
oid sha256:4f3eb73f4a4ea4fb2e7b21d88393fab914b51cc63d9e01cd67fd4879ad856afe
size 7899

4
tests/uitests/src/test/snapshots/images/ui_S_t[f.messages.impl.timeline.components.event_null_TimelineItemVoiceViewUnified-D-42_42_null,NEXUS_5,1.0,en].png
View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:5c52825ef36b00ee13496c23db981c226a3f71c0d1755508835b4ab3a140cff6
size 46402
oid sha256:327a1fd51b242e1547878e58f32e6511e013cb440f4cd457a20e179ca3a1ed39
size 46377

4
tests/uitests/src/test/snapshots/images/ui_S_t[f.messages.impl.timeline.components.event_null_TimelineItemVoiceViewUnified-N-42_43_null,NEXUS_5,1.0,en].png
View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:ceb0cfa1b7ac95de658e339d29b4e18d8e4673d1a269db3d46bc6fd97381e9c2
size 45460
oid sha256:d277630d19b10150d18a660c06d38c02ce19cd5079667bd58cca385a7b540ae2
size 54302

4
tests/uitests/src/test/snapshots/images/ui_S_t[f.messages.impl.timeline_null_TimelineView-N-8_9_null_8,NEXUS_5,1.0,en].png
View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:be817a2061d43e210c105b193f1baed6060c51f11d97f45d0593cb40ab7acd98
size 56403
oid sha256:e3be541cea4b8775aa141fd0f5e8d9b83f295684b4e9c8a070e9b1a4511e1531
size 55884

4
tests/uitests/src/test/snapshots/images/ui_S_t[l.textcomposer.components_null_VoiceMessagePreview-D-16_16_null,NEXUS_5,1.0,en].png
View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:a53da79f9919d7f55884273fdcc473443a2d2a8eac36bc1e7c79baecff40b69e
size 22526
oid sha256:8521c3615973ebf8b5d09a596a6122866648f45fa2015b3261dcb64505ebc41d
size 22459

4
tests/uitests/src/test/snapshots/images/ui_S_t[l.textcomposer.components_null_VoiceMessagePreview-N-16_17_null,NEXUS_5,1.0,en].png
View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:195cb0e133075a7c8d2b429c32337dd62a7ce97ede7c0a62b630f03eaa145f63
size 19293
oid sha256:fca03bd3111ed7ee360ef60211c790aac9bb21dc3dcac8d0bcb8f3f315d6dd93
size 19232

4
tests/uitests/src/test/snapshots/images/ui_S_t[l.textcomposer_null_TextComposerVoice-D-4_4_null,NEXUS_5,1.0,en].png
View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:e2fe52c3e34e58ab38f7fa0b4b2281bdd8ef269acb3426449faa93fe7b434feb
size 27393
oid sha256:4008401117a064b6eed9cf06ada8c15273a52dd729ae0fe989d075808c928cb5
size 27376

4
tests/uitests/src/test/snapshots/images/ui_S_t[l.textcomposer_null_TextComposerVoice-N-4_5_null,NEXUS_5,1.0,en].png
View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:ffa7daeaf5e27170395307c87c68a7674fb115bb9806cfc0d438a905571ce37f
size 25100
oid sha256:875a8c7f394a0cd4c7944bf5cbf969a5e54108b8c3edee40c193d705c9ba3719
size 25065