From ef944218016d02a6e315421f813f7ea1c23ec228 Mon Sep 17 00:00:00 2001 From: jonnyandrew Date: Mon, 30 Oct 2023 13:23:01 +0000 Subject: [PATCH] Fix scaling of composer UI --- .../libraries/textcomposer/TextComposer.kt | 26 +++++++------------ .../components/ComposerOptionsButton.kt | 5 ++-- .../components/DismissTextFormattingButton.kt | 5 ++-- .../components/FormattingOption.kt | 11 ++++---- .../components/LiveWaveformView.kt | 3 +-- .../textcomposer/components/RecordButton.kt | 5 ++-- .../textcomposer/components/SendButton.kt | 7 +++-- .../components/TextInputRoundedCornerShape.kt | 5 ++-- .../components/VoiceMessageDeleteButton.kt | 5 ++-- .../components/VoiceMessagePreview.kt | 11 ++++---- .../components/VoiceMessageRecording.kt | 7 +++-- 11 files changed, 37 insertions(+), 53 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 513b5f6a3f..a2ad03a18e 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 @@ -51,7 +51,6 @@ import androidx.compose.ui.unit.dp import io.element.android.libraries.designsystem.components.media.createFakeWaveform 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.CircularProgressIndicator import io.element.android.libraries.designsystem.theme.components.Icon import io.element.android.libraries.designsystem.theme.components.Text @@ -136,7 +135,7 @@ fun TextComposer( @Composable { ComposerOptionsButton( modifier = Modifier - .size(48.dp.applyScaleUp()), + .size(48.dp), onClick = onAddAttachment ) } @@ -183,7 +182,7 @@ fun TextComposer( } val uploadVoiceProgress = @Composable { CircularProgressIndicator( - modifier = Modifier.size(24.dp.applyScaleUp()), + modifier = Modifier.size(24.dp), ) } @@ -289,7 +288,7 @@ private fun StandardLayout( Box( modifier = Modifier .padding(bottom = 5.dp, top = 5.dp, end = 3.dp, start = 3.dp) - .size(48.dp.applyScaleUp()), + .size(48.dp), contentAlignment = Alignment.Center, ) { voiceDeleteButton() @@ -322,7 +321,7 @@ private fun StandardLayout( Box( Modifier .padding(bottom = 5.dp, top = 5.dp, end = 6.dp, start = 6.dp) - .size(48.dp.applyScaleUp()), + .size(48.dp), contentAlignment = Alignment.Center, ) { endButton() @@ -393,7 +392,7 @@ private fun TextInput( .clip(roundedCorners) .border(0.5.dp, borderColor, roundedCorners) .background(color = bgColor) - .requiredHeightIn(min = 42.dp.applyScaleUp()) + .requiredHeightIn(min = 42.dp) .fillMaxSize(), ) { if (composerMode is MessageComposerMode.Special) { @@ -402,12 +401,7 @@ private fun TextInput( val defaultTypography = ElementTheme.typography.fontBodyLgRegular Box( modifier = Modifier - .padding( - top = 4.dp.applyScaleUp(), - bottom = 4.dp.applyScaleUp(), - start = 12.dp.applyScaleUp(), - end = 42.dp.applyScaleUp() - ) + .padding(top = 4.dp, bottom = 4.dp, start = 12.dp, end = 42.dp) .testTag(TestTags.richTextEditor), contentAlignment = Alignment.CenterStart, ) { @@ -429,7 +423,7 @@ private fun TextInput( // This prevents it gaining focus and mutating the state. registerStateUpdates = !subcomposing, modifier = Modifier - .padding(top = 6.dp.applyScaleUp(), bottom = 6.dp.applyScaleUp()) + .padding(top = 6.dp, bottom = 6.dp) .fillMaxWidth(), style = ElementRichTextEditorStyle.create( hasFocus = state.hasFocus @@ -481,7 +475,7 @@ private fun EditingModeView( tint = ElementTheme.materialColors.secondary, modifier = Modifier .padding(vertical = 8.dp) - .size(16.dp.applyScaleUp()), + .size(16.dp), ) Text( stringResource(CommonStrings.common_editing), @@ -498,7 +492,7 @@ private fun EditingModeView( tint = ElementTheme.materialColors.secondary, modifier = Modifier .padding(top = 8.dp, bottom = 8.dp, start = 16.dp, end = 12.dp) - .size(16.dp.applyScaleUp()) + .size(16.dp) .clickable( enabled = true, onClick = onResetComposerMode, @@ -561,7 +555,7 @@ private fun ReplyToModeView( tint = MaterialTheme.colorScheme.secondary, modifier = Modifier .padding(end = 4.dp, top = 4.dp, start = 16.dp, bottom = 16.dp) - .size(16.dp.applyScaleUp()) + .size(16.dp) .clickable( enabled = true, onClick = onResetComposerMode, 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 6721a9bf4c..8dbc33a0d8 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 @@ -23,7 +23,6 @@ import androidx.compose.ui.res.stringResource 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.Icon import io.element.android.libraries.designsystem.theme.components.IconButton import io.element.android.libraries.designsystem.utils.CommonDrawables @@ -37,11 +36,11 @@ internal fun ComposerOptionsButton( ) { IconButton( modifier = modifier - .size(48.dp.applyScaleUp()), + .size(48.dp), onClick = onClick ) { Icon( - modifier = Modifier.size(30.dp.applyScaleUp()), + modifier = Modifier.size(30.dp), resourceId = CommonDrawables.ic_plus, contentDescription = stringResource(R.string.rich_text_editor_a11y_add_attachment), tint = ElementTheme.colors.iconPrimary, 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 51a5f1b09e..e4b4fa3216 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 @@ -23,7 +23,6 @@ import androidx.compose.ui.res.stringResource 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.Icon import io.element.android.libraries.designsystem.theme.components.IconButton import io.element.android.libraries.designsystem.utils.CommonDrawables @@ -37,11 +36,11 @@ internal fun DismissTextFormattingButton( ) { IconButton( modifier = modifier - .size(48.dp.applyScaleUp()), + .size(48.dp), onClick = onClick ) { Icon( - modifier = Modifier.size(30.dp.applyScaleUp()), + modifier = Modifier.size(30.dp), resourceId = CommonDrawables.ic_cancel, contentDescription = stringResource(CommonStrings.action_close), tint = ElementTheme.colors.iconPrimary, 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 eed1e490f7..791bf7cc75 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 @@ -34,7 +34,6 @@ import androidx.compose.ui.res.vectorResource import androidx.compose.ui.unit.dp import io.element.android.libraries.designsystem.preview.PreviewsDayNight import io.element.android.libraries.designsystem.preview.ElementPreview -import io.element.android.libraries.designsystem.text.applyScaleUp import io.element.android.libraries.designsystem.theme.components.Icon import io.element.android.libraries.designsystem.theme.iconSuccessPrimaryBackground import io.element.android.libraries.designsystem.utils.CommonDrawables @@ -68,21 +67,21 @@ internal fun FormattingOption( interactionSource = remember { MutableInteractionSource() }, indication = rememberRipple( bounded = false, - radius = 20.dp.applyScaleUp(), + radius = 20.dp, ), ) - .size(48.dp.applyScaleUp()) + .size(48.dp) ) { Box( modifier = Modifier - .size(36.dp.applyScaleUp()) + .size(36.dp) .align(Alignment.Center) - .background(backgroundColor, shape = RoundedCornerShape(8.dp.applyScaleUp())) + .background(backgroundColor, shape = RoundedCornerShape(8.dp)) ) { Icon( modifier = Modifier .align(Alignment.Center) - .size(20.dp.applyScaleUp()), + .size(20.dp), 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 ae2544abf4..d92851c378 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,7 +41,6 @@ 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 @@ -71,7 +70,7 @@ fun LiveWaveformView( Box(contentAlignment = Alignment.CenterEnd, modifier = modifier .fillMaxWidth() - .height(waveFormHeight.applyScaleUp()) + .height(waveFormHeight) .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 58a674f8cf..e76a1b16b0 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 @@ -29,7 +29,6 @@ import androidx.compose.ui.res.stringResource 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.Icon import io.element.android.libraries.designsystem.theme.components.IconButton import io.element.android.libraries.designsystem.utils.CommonDrawables @@ -97,11 +96,11 @@ private fun RecordButtonView( ) { IconButton( modifier = modifier - .size(48.dp.applyScaleUp()), + .size(48.dp), onClick = {}, ) { Icon( - modifier = Modifier.size(24.dp.applyScaleUp()), + modifier = Modifier.size(24.dp), resourceId = if (isPressed) { CommonDrawables.ic_compound_mic_on_solid } else { diff --git a/libraries/textcomposer/impl/src/main/kotlin/io/element/android/libraries/textcomposer/components/SendButton.kt b/libraries/textcomposer/impl/src/main/kotlin/io/element/android/libraries/textcomposer/components/SendButton.kt index be258f07de..bbe947f6a1 100644 --- a/libraries/textcomposer/impl/src/main/kotlin/io/element/android/libraries/textcomposer/components/SendButton.kt +++ b/libraries/textcomposer/impl/src/main/kotlin/io/element/android/libraries/textcomposer/components/SendButton.kt @@ -32,7 +32,6 @@ import androidx.compose.ui.res.stringResource 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.Icon import io.element.android.libraries.designsystem.theme.components.IconButton import io.element.android.libraries.designsystem.utils.CommonDrawables @@ -49,7 +48,7 @@ internal fun SendButton( ) { IconButton( modifier = modifier - .size(48.dp.applyScaleUp()), + .size(48.dp), onClick = onClick, enabled = canSendMessage, ) { @@ -73,12 +72,12 @@ internal fun SendButton( Box( modifier = Modifier .clip(CircleShape) - .size(36.dp.applyScaleUp()) + .size(36.dp) .background(if (canSendMessage) ElementTheme.colors.iconAccentTertiary else Color.Transparent) ) { Icon( modifier = Modifier - .height(iconSize.applyScaleUp()) + .height(iconSize) .padding(start = iconStartPadding) .align(Alignment.Center), resourceId = iconId, diff --git a/libraries/textcomposer/impl/src/main/kotlin/io/element/android/libraries/textcomposer/components/TextInputRoundedCornerShape.kt b/libraries/textcomposer/impl/src/main/kotlin/io/element/android/libraries/textcomposer/components/TextInputRoundedCornerShape.kt index 81f64e6ebe..9a442edba6 100644 --- a/libraries/textcomposer/impl/src/main/kotlin/io/element/android/libraries/textcomposer/components/TextInputRoundedCornerShape.kt +++ b/libraries/textcomposer/impl/src/main/kotlin/io/element/android/libraries/textcomposer/components/TextInputRoundedCornerShape.kt @@ -21,15 +21,14 @@ import androidx.compose.animation.core.tween import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.runtime.Composable import androidx.compose.ui.unit.dp -import io.element.android.libraries.designsystem.text.applyScaleUp import io.element.android.libraries.textcomposer.model.MessageComposerMode @Composable internal fun textInputRoundedCornerShape( composerMode: MessageComposerMode, ): RoundedCornerShape { - val roundCornerSmall = 20.dp.applyScaleUp() - val roundCornerLarge = 21.dp.applyScaleUp() + val roundCornerSmall = 20.dp + val roundCornerLarge = 21.dp val roundedCornerSize = if (composerMode is MessageComposerMode.Special) { roundCornerSmall 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 87a837f405..88f77f7075 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 @@ -24,7 +24,6 @@ import androidx.compose.ui.res.stringResource 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.Icon import io.element.android.libraries.designsystem.theme.components.IconButton import io.element.android.libraries.designsystem.utils.CommonDrawables @@ -39,12 +38,12 @@ fun VoiceMessageDeleteButton( ) { IconButton( modifier = modifier - .size(48.dp.applyScaleUp()), + .size(48.dp), enabled = enabled, onClick = onClick, ) { Icon( - modifier = Modifier.size(24.dp.applyScaleUp()), + modifier = Modifier.size(24.dp), resourceId = CommonDrawables.ic_compound_delete, contentDescription = stringResource(CommonStrings.a11y_delete), tint = if (enabled) { 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 efd7bf72e1..51be2c476b 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 @@ -39,7 +39,6 @@ import io.element.android.libraries.designsystem.components.media.WaveformPlayba import io.element.android.libraries.designsystem.components.media.createFakeWaveform 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.Icon import io.element.android.libraries.designsystem.theme.components.IconButton import io.element.android.libraries.textcomposer.R @@ -66,7 +65,7 @@ internal fun VoiceMessagePreview( shape = MaterialTheme.shapes.medium, ) .padding(start = 8.dp, end = 20.dp, top = 6.dp, bottom = 6.dp) - .heightIn(26.dp.applyScaleUp()), + .heightIn(26.dp), verticalAlignment = Alignment.CenterVertically, ) { if (isPlaying) { @@ -92,7 +91,7 @@ internal fun VoiceMessagePreview( WaveformPlaybackView( modifier = Modifier .weight(1f) - .height(26.dp.applyScaleUp()), + .height(26.dp), playbackProgress = playbackProgress, showCursor = isInteractive, waveform = waveform, @@ -117,7 +116,7 @@ private fun PlayerButton( onClick = onClick, modifier = modifier .background(color = ElementTheme.colors.bgCanvasDefault, shape = CircleShape) - .size(30.dp.applyScaleUp()), + .size(30.dp), enabled = enabled, colors = IconButtonDefaults.iconButtonColors( contentColor = ElementTheme.colors.iconSecondary, @@ -135,14 +134,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()), + modifier = Modifier.size(20.dp), ) @Composable private fun PlayIcon() = Icon( resourceId = R.drawable.ic_play, contentDescription = stringResource(id = CommonStrings.a11y_play), - modifier = Modifier.size(20.dp.applyScaleUp()), + modifier = Modifier.size(20.dp), ) @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 255ad6dc88..608a20200d 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,7 +40,6 @@ 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 @@ -63,7 +62,7 @@ internal fun VoiceMessageRecording( shape = MaterialTheme.shapes.medium, ) .padding(start = 12.dp, end = 20.dp, top = 8.dp, bottom = 8.dp) - .heightIn(26.dp.applyScaleUp()), + .heightIn(26.dp), verticalAlignment = Alignment.CenterVertically, ) { RedRecordingDot() @@ -81,7 +80,7 @@ internal fun VoiceMessageRecording( LiveWaveformView( modifier = Modifier - .height(26.dp.applyScaleUp()) + .height(26.dp) .weight(1f), levels = levels ) @@ -104,7 +103,7 @@ private fun RedRecordingDot( ) Box( modifier = modifier - .size(8.dp.applyScaleUp()) + .size(8.dp) .alpha(alpha) .background(color = ElementTheme.colors.textCriticalPrimary, shape = CircleShape) )