From fa66ffc06dccf3f895a3f13f3121a29ebe73865f Mon Sep 17 00:00:00 2001 From: jonnyandrew Date: Mon, 30 Oct 2023 12:41:05 +0000 Subject: [PATCH] Improve composer UI scaling (#1689) --- .../element/android/libraries/textcomposer/TextComposer.kt | 6 +++--- .../textcomposer/components/ComposerOptionsButton.kt | 2 +- .../textcomposer/components/DismissTextFormattingButton.kt | 2 +- .../libraries/textcomposer/components/FormattingOption.kt | 6 ++++-- .../libraries/textcomposer/components/LiveWaveformView.kt | 3 ++- .../libraries/textcomposer/components/RecordButton.kt | 2 +- .../textcomposer/components/VoiceMessageDeleteButton.kt | 2 +- .../textcomposer/components/VoiceMessagePreview.kt | 4 +++- .../textcomposer/components/VoiceMessageRecording.kt | 7 ++++--- 9 files changed, 20 insertions(+), 14 deletions(-) diff --git a/libraries/textcomposer/impl/src/main/kotlin/io/element/android/libraries/textcomposer/TextComposer.kt b/libraries/textcomposer/impl/src/main/kotlin/io/element/android/libraries/textcomposer/TextComposer.kt index a9236c6bfd..513b5f6a3f 100644 --- a/libraries/textcomposer/impl/src/main/kotlin/io/element/android/libraries/textcomposer/TextComposer.kt +++ b/libraries/textcomposer/impl/src/main/kotlin/io/element/android/libraries/textcomposer/TextComposer.kt @@ -136,7 +136,7 @@ fun TextComposer( @Composable { ComposerOptionsButton( modifier = Modifier - .size(48.dp), + .size(48.dp.applyScaleUp()), onClick = onAddAttachment ) } @@ -183,7 +183,7 @@ fun TextComposer( } val uploadVoiceProgress = @Composable { CircularProgressIndicator( - modifier = Modifier.size(24.dp), + modifier = Modifier.size(24.dp.applyScaleUp()), ) } @@ -429,7 +429,7 @@ private fun TextInput( // This prevents it gaining focus and mutating the state. registerStateUpdates = !subcomposing, modifier = Modifier - .padding(top = 6.dp, bottom = 6.dp) + .padding(top = 6.dp.applyScaleUp(), bottom = 6.dp.applyScaleUp()) .fillMaxWidth(), style = ElementRichTextEditorStyle.create( hasFocus = state.hasFocus diff --git a/libraries/textcomposer/impl/src/main/kotlin/io/element/android/libraries/textcomposer/components/ComposerOptionsButton.kt b/libraries/textcomposer/impl/src/main/kotlin/io/element/android/libraries/textcomposer/components/ComposerOptionsButton.kt index d1c7355861..6721a9bf4c 100644 --- a/libraries/textcomposer/impl/src/main/kotlin/io/element/android/libraries/textcomposer/components/ComposerOptionsButton.kt +++ b/libraries/textcomposer/impl/src/main/kotlin/io/element/android/libraries/textcomposer/components/ComposerOptionsButton.kt @@ -37,7 +37,7 @@ internal fun ComposerOptionsButton( ) { IconButton( modifier = modifier - .size(48.dp), + .size(48.dp.applyScaleUp()), onClick = onClick ) { Icon( diff --git a/libraries/textcomposer/impl/src/main/kotlin/io/element/android/libraries/textcomposer/components/DismissTextFormattingButton.kt b/libraries/textcomposer/impl/src/main/kotlin/io/element/android/libraries/textcomposer/components/DismissTextFormattingButton.kt index c6ebe270bf..51a5f1b09e 100644 --- a/libraries/textcomposer/impl/src/main/kotlin/io/element/android/libraries/textcomposer/components/DismissTextFormattingButton.kt +++ b/libraries/textcomposer/impl/src/main/kotlin/io/element/android/libraries/textcomposer/components/DismissTextFormattingButton.kt @@ -37,7 +37,7 @@ internal fun DismissTextFormattingButton( ) { IconButton( modifier = modifier - .size(48.dp), + .size(48.dp.applyScaleUp()), onClick = onClick ) { Icon( diff --git a/libraries/textcomposer/impl/src/main/kotlin/io/element/android/libraries/textcomposer/components/FormattingOption.kt b/libraries/textcomposer/impl/src/main/kotlin/io/element/android/libraries/textcomposer/components/FormattingOption.kt index b7874af386..eed1e490f7 100644 --- a/libraries/textcomposer/impl/src/main/kotlin/io/element/android/libraries/textcomposer/components/FormattingOption.kt +++ b/libraries/textcomposer/impl/src/main/kotlin/io/element/android/libraries/textcomposer/components/FormattingOption.kt @@ -68,7 +68,7 @@ internal fun FormattingOption( interactionSource = remember { MutableInteractionSource() }, indication = rememberRipple( bounded = false, - radius = 20.dp, + radius = 20.dp.applyScaleUp(), ), ) .size(48.dp.applyScaleUp()) @@ -80,7 +80,9 @@ internal fun FormattingOption( .background(backgroundColor, shape = RoundedCornerShape(8.dp.applyScaleUp())) ) { Icon( - modifier = Modifier.align(Alignment.Center), + modifier = Modifier + .align(Alignment.Center) + .size(20.dp.applyScaleUp()), imageVector = imageVector, contentDescription = contentDescription, tint = foregroundColor, diff --git a/libraries/textcomposer/impl/src/main/kotlin/io/element/android/libraries/textcomposer/components/LiveWaveformView.kt b/libraries/textcomposer/impl/src/main/kotlin/io/element/android/libraries/textcomposer/components/LiveWaveformView.kt index d92851c378..ae2544abf4 100644 --- a/libraries/textcomposer/impl/src/main/kotlin/io/element/android/libraries/textcomposer/components/LiveWaveformView.kt +++ b/libraries/textcomposer/impl/src/main/kotlin/io/element/android/libraries/textcomposer/components/LiveWaveformView.kt @@ -41,6 +41,7 @@ import androidx.compose.ui.unit.dp import io.element.android.libraries.designsystem.components.media.drawWaveform import io.element.android.libraries.designsystem.preview.ElementPreview import io.element.android.libraries.designsystem.preview.PreviewsDayNight +import io.element.android.libraries.designsystem.text.applyScaleUp import io.element.android.libraries.theme.ElementTheme import kotlinx.collections.immutable.ImmutableList import kotlinx.collections.immutable.toPersistentList @@ -70,7 +71,7 @@ fun LiveWaveformView( Box(contentAlignment = Alignment.CenterEnd, modifier = modifier .fillMaxWidth() - .height(waveFormHeight) + .height(waveFormHeight.applyScaleUp()) .onSizeChanged { parentWidth = it.width } ) { Canvas( diff --git a/libraries/textcomposer/impl/src/main/kotlin/io/element/android/libraries/textcomposer/components/RecordButton.kt b/libraries/textcomposer/impl/src/main/kotlin/io/element/android/libraries/textcomposer/components/RecordButton.kt index f8dd6dc05f..58a674f8cf 100644 --- a/libraries/textcomposer/impl/src/main/kotlin/io/element/android/libraries/textcomposer/components/RecordButton.kt +++ b/libraries/textcomposer/impl/src/main/kotlin/io/element/android/libraries/textcomposer/components/RecordButton.kt @@ -97,7 +97,7 @@ private fun RecordButtonView( ) { IconButton( modifier = modifier - .size(48.dp), + .size(48.dp.applyScaleUp()), onClick = {}, ) { Icon( diff --git a/libraries/textcomposer/impl/src/main/kotlin/io/element/android/libraries/textcomposer/components/VoiceMessageDeleteButton.kt b/libraries/textcomposer/impl/src/main/kotlin/io/element/android/libraries/textcomposer/components/VoiceMessageDeleteButton.kt index 4d584d674e..87a837f405 100644 --- a/libraries/textcomposer/impl/src/main/kotlin/io/element/android/libraries/textcomposer/components/VoiceMessageDeleteButton.kt +++ b/libraries/textcomposer/impl/src/main/kotlin/io/element/android/libraries/textcomposer/components/VoiceMessageDeleteButton.kt @@ -39,7 +39,7 @@ fun VoiceMessageDeleteButton( ) { IconButton( modifier = modifier - .size(48.dp), + .size(48.dp.applyScaleUp()), enabled = enabled, onClick = onClick, ) { diff --git a/libraries/textcomposer/impl/src/main/kotlin/io/element/android/libraries/textcomposer/components/VoiceMessagePreview.kt b/libraries/textcomposer/impl/src/main/kotlin/io/element/android/libraries/textcomposer/components/VoiceMessagePreview.kt index 97457b519d..efd7bf72e1 100644 --- a/libraries/textcomposer/impl/src/main/kotlin/io/element/android/libraries/textcomposer/components/VoiceMessagePreview.kt +++ b/libraries/textcomposer/impl/src/main/kotlin/io/element/android/libraries/textcomposer/components/VoiceMessagePreview.kt @@ -66,7 +66,7 @@ internal fun VoiceMessagePreview( shape = MaterialTheme.shapes.medium, ) .padding(start = 8.dp, end = 20.dp, top = 6.dp, bottom = 6.dp) - .heightIn(26.dp), + .heightIn(26.dp.applyScaleUp()), verticalAlignment = Alignment.CenterVertically, ) { if (isPlaying) { @@ -135,12 +135,14 @@ private fun PlayerButton( private fun PauseIcon() = Icon( resourceId = R.drawable.ic_pause, contentDescription = stringResource(id = CommonStrings.a11y_pause), + modifier = Modifier.size(20.dp.applyScaleUp()), ) @Composable private fun PlayIcon() = Icon( resourceId = R.drawable.ic_play, contentDescription = stringResource(id = CommonStrings.a11y_play), + modifier = Modifier.size(20.dp.applyScaleUp()), ) @PreviewsDayNight diff --git a/libraries/textcomposer/impl/src/main/kotlin/io/element/android/libraries/textcomposer/components/VoiceMessageRecording.kt b/libraries/textcomposer/impl/src/main/kotlin/io/element/android/libraries/textcomposer/components/VoiceMessageRecording.kt index 608a20200d..255ad6dc88 100644 --- a/libraries/textcomposer/impl/src/main/kotlin/io/element/android/libraries/textcomposer/components/VoiceMessageRecording.kt +++ b/libraries/textcomposer/impl/src/main/kotlin/io/element/android/libraries/textcomposer/components/VoiceMessageRecording.kt @@ -40,6 +40,7 @@ import androidx.compose.ui.draw.alpha import androidx.compose.ui.unit.dp import io.element.android.libraries.designsystem.preview.ElementPreview import io.element.android.libraries.designsystem.preview.PreviewsDayNight +import io.element.android.libraries.designsystem.text.applyScaleUp import io.element.android.libraries.designsystem.theme.components.Text import io.element.android.libraries.theme.ElementTheme import io.element.android.libraries.ui.utils.time.formatShort @@ -62,7 +63,7 @@ internal fun VoiceMessageRecording( shape = MaterialTheme.shapes.medium, ) .padding(start = 12.dp, end = 20.dp, top = 8.dp, bottom = 8.dp) - .heightIn(26.dp), + .heightIn(26.dp.applyScaleUp()), verticalAlignment = Alignment.CenterVertically, ) { RedRecordingDot() @@ -80,7 +81,7 @@ internal fun VoiceMessageRecording( LiveWaveformView( modifier = Modifier - .height(26.dp) + .height(26.dp.applyScaleUp()) .weight(1f), levels = levels ) @@ -103,7 +104,7 @@ private fun RedRecordingDot( ) Box( modifier = modifier - .size(8.dp) + .size(8.dp.applyScaleUp()) .alpha(alpha) .background(color = ElementTheme.colors.textCriticalPrimary, shape = CircleShape) )