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

Improve composer UI scaling (#1689)

Browse source
This commit is contained in:
jonnyandrew 2023-10-30 12:41:05 +00:00 • committed by GitHub
parent 6f49d689f4
commit 59a4d34a1a
9 changed files with 20 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

6
libraries/textcomposer/impl/src/main/kotlin/io/element/android/libraries/textcomposer/TextComposer.kt
View file

@ -136,7 +136,7 @@ fun TextComposer(
@Composable { @Composable {
ComposerOptionsButton( ComposerOptionsButton(
modifier = Modifier modifier = Modifier
.size(48.dp), .size(48.dp.applyScaleUp()),
onClick = onAddAttachment onClick = onAddAttachment
) )
} }
@ -183,7 +183,7 @@ fun TextComposer(
} }
val uploadVoiceProgress = @Composable { val uploadVoiceProgress = @Composable {
CircularProgressIndicator( 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. // This prevents it gaining focus and mutating the state.
registerStateUpdates = !subcomposing, registerStateUpdates = !subcomposing,
modifier = Modifier modifier = Modifier
.padding(top = 6.dp, bottom = 6.dp) .padding(top = 6.dp.applyScaleUp(), bottom = 6.dp.applyScaleUp())
.fillMaxWidth(), .fillMaxWidth(),
style = ElementRichTextEditorStyle.create( style = ElementRichTextEditorStyle.create(
hasFocus = state.hasFocus hasFocus = state.hasFocus

2
libraries/textcomposer/impl/src/main/kotlin/io/element/android/libraries/textcomposer/components/ComposerOptionsButton.kt
View file

@ -37,7 +37,7 @@ internal fun ComposerOptionsButton(
) { ) {
IconButton( IconButton(
modifier = modifier modifier = modifier
.size(48.dp), .size(48.dp.applyScaleUp()),
onClick = onClick onClick = onClick
) { ) {
Icon( Icon(

2
libraries/textcomposer/impl/src/main/kotlin/io/element/android/libraries/textcomposer/components/DismissTextFormattingButton.kt
View file

@ -37,7 +37,7 @@ internal fun DismissTextFormattingButton(
) { ) {
IconButton( IconButton(
modifier = modifier modifier = modifier
.size(48.dp), .size(48.dp.applyScaleUp()),
onClick = onClick onClick = onClick
) { ) {
Icon( Icon(

6
libraries/textcomposer/impl/src/main/kotlin/io/element/android/libraries/textcomposer/components/FormattingOption.kt
View file

@ -68,7 +68,7 @@ internal fun FormattingOption(
interactionSource = remember { MutableInteractionSource() }, interactionSource = remember { MutableInteractionSource() },
indication = rememberRipple( indication = rememberRipple(
bounded = false, bounded = false,
radius = 20.dp, radius = 20.dp.applyScaleUp(),
), ),
) )
.size(48.dp.applyScaleUp()) .size(48.dp.applyScaleUp())
@ -80,7 +80,9 @@ internal fun FormattingOption(
.background(backgroundColor, shape = RoundedCornerShape(8.dp.applyScaleUp())) .background(backgroundColor, shape = RoundedCornerShape(8.dp.applyScaleUp()))
) { ) {
Icon( Icon(
modifier = Modifier.align(Alignment.Center), modifier = Modifier
.align(Alignment.Center)
.size(20.dp.applyScaleUp()),
imageVector = imageVector, imageVector = imageVector,
contentDescription = contentDescription, contentDescription = contentDescription,
tint = foregroundColor, tint = foregroundColor,

3
libraries/textcomposer/impl/src/main/kotlin/io/element/android/libraries/textcomposer/components/LiveWaveformView.kt
View file

@ -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.components.media.drawWaveform
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.text.applyScaleUp
import io.element.android.libraries.theme.ElementTheme import io.element.android.libraries.theme.ElementTheme
import kotlinx.collections.immutable.ImmutableList import kotlinx.collections.immutable.ImmutableList
import kotlinx.collections.immutable.toPersistentList import kotlinx.collections.immutable.toPersistentList
@ -70,7 +71,7 @@ fun LiveWaveformView(
Box(contentAlignment = Alignment.CenterEnd, Box(contentAlignment = Alignment.CenterEnd,
modifier = modifier modifier = modifier
.fillMaxWidth() .fillMaxWidth()
.height(waveFormHeight) .height(waveFormHeight.applyScaleUp())
.onSizeChanged { parentWidth = it.width } .onSizeChanged { parentWidth = it.width }
) { ) {
Canvas( Canvas(

2
libraries/textcomposer/impl/src/main/kotlin/io/element/android/libraries/textcomposer/components/RecordButton.kt
View file

@ -97,7 +97,7 @@ private fun RecordButtonView(
) { ) {
IconButton( IconButton(
modifier = modifier modifier = modifier
.size(48.dp), .size(48.dp.applyScaleUp()),
onClick = {}, onClick = {},
) { ) {
Icon( Icon(

2
libraries/textcomposer/impl/src/main/kotlin/io/element/android/libraries/textcomposer/components/VoiceMessageDeleteButton.kt
View file

@ -39,7 +39,7 @@ fun VoiceMessageDeleteButton(
) { ) {
IconButton( IconButton(
modifier = modifier modifier = modifier
.size(48.dp), .size(48.dp.applyScaleUp()),
enabled = enabled, enabled = enabled,
onClick = onClick, onClick = onClick,
) { ) {

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

@ -66,7 +66,7 @@ internal fun VoiceMessagePreview(
shape = MaterialTheme.shapes.medium, shape = MaterialTheme.shapes.medium,
) )
.padding(start = 8.dp, end = 20.dp, top = 6.dp, bottom = 6.dp) .padding(start = 8.dp, end = 20.dp, top = 6.dp, bottom = 6.dp)
.heightIn(26.dp), .heightIn(26.dp.applyScaleUp()),
verticalAlignment = Alignment.CenterVertically, verticalAlignment = Alignment.CenterVertically,
) { ) {
if (isPlaying) { if (isPlaying) {
@ -135,12 +135,14 @@ private fun PlayerButton(
private fun PauseIcon() = Icon( private fun PauseIcon() = Icon(
resourceId = R.drawable.ic_pause, resourceId = R.drawable.ic_pause,
contentDescription = stringResource(id = CommonStrings.a11y_pause), contentDescription = stringResource(id = CommonStrings.a11y_pause),
modifier = Modifier.size(20.dp.applyScaleUp()),
) )
@Composable @Composable
private fun PlayIcon() = Icon( private fun PlayIcon() = Icon(
resourceId = R.drawable.ic_play, resourceId = R.drawable.ic_play,
contentDescription = stringResource(id = CommonStrings.a11y_play), contentDescription = stringResource(id = CommonStrings.a11y_play),
modifier = Modifier.size(20.dp.applyScaleUp()),
) )
@PreviewsDayNight @PreviewsDayNight

7
libraries/textcomposer/impl/src/main/kotlin/io/element/android/libraries/textcomposer/components/VoiceMessageRecording.kt
View file

@ -40,6 +40,7 @@ import androidx.compose.ui.draw.alpha
import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.dp
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.text.applyScaleUp
import io.element.android.libraries.designsystem.theme.components.Text import io.element.android.libraries.designsystem.theme.components.Text
import io.element.android.libraries.theme.ElementTheme import io.element.android.libraries.theme.ElementTheme
import io.element.android.libraries.ui.utils.time.formatShort import io.element.android.libraries.ui.utils.time.formatShort
@ -62,7 +63,7 @@ internal fun VoiceMessageRecording(
shape = MaterialTheme.shapes.medium, shape = MaterialTheme.shapes.medium,
) )
.padding(start = 12.dp, end = 20.dp, top = 8.dp, bottom = 8.dp) .padding(start = 12.dp, end = 20.dp, top = 8.dp, bottom = 8.dp)
.heightIn(26.dp), .heightIn(26.dp.applyScaleUp()),
verticalAlignment = Alignment.CenterVertically, verticalAlignment = Alignment.CenterVertically,
) { ) {
RedRecordingDot() RedRecordingDot()
@ -80,7 +81,7 @@ internal fun VoiceMessageRecording(
LiveWaveformView( LiveWaveformView(
modifier = Modifier modifier = Modifier
.height(26.dp) .height(26.dp.applyScaleUp())
.weight(1f), .weight(1f),
levels = levels levels = levels
) )
@ -103,7 +104,7 @@ private fun RedRecordingDot(
) )
Box( Box(
modifier = modifier modifier = modifier
.size(8.dp) .size(8.dp.applyScaleUp())
.alpha(alpha) .alpha(alpha)
.background(color = ElementTheme.colors.textCriticalPrimary, shape = CircleShape) .background(color = ElementTheme.colors.textCriticalPrimary, shape = CircleShape)
) )