Merge pull request #986 from vector-im/feature/bma/bigFontSizeImprovement

Big font size improvements
This commit is contained in:
Benoit Marty 2023-07-28 17:02:29 +02:00 committed by GitHub
commit 5ed29b1466
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
20 changed files with 250 additions and 49 deletions

View file

@ -44,8 +44,10 @@ import androidx.compose.ui.graphics.ColorFilter
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import io.element.android.libraries.designsystem.preview.ElementPreviewDark
import io.element.android.libraries.designsystem.preview.ElementPreviewLight
import io.element.android.libraries.designsystem.text.toDp
import io.element.android.libraries.theme.ElementTheme
import io.element.android.libraries.ui.strings.CommonStrings
@ -85,14 +87,14 @@ private fun Indicator(modifier: Modifier = Modifier) {
.statusBarsPadding()
.padding(vertical = 6.dp),
horizontalArrangement = Arrangement.Center,
verticalAlignment = Alignment.Bottom,
verticalAlignment = Alignment.CenterVertically,
) {
val tint = MaterialTheme.colorScheme.primary
Image(
imageVector = Icons.Outlined.WifiOff,
contentDescription = null,
colorFilter = ColorFilter.tint(tint),
modifier = Modifier.size(16.dp),
modifier = Modifier.size(16.sp.toDp()),
)
Spacer(modifier = Modifier.width(8.dp))
Text(

View file

@ -17,13 +17,11 @@
package io.element.android.features.roomdetails.impl
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.ExperimentalLayoutApi
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.consumeWindowInsets
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
@ -226,22 +224,28 @@ internal fun RoomHeaderSection(
roomAlias: String?,
modifier: Modifier = Modifier
) {
Column(modifier.fillMaxWidth(), horizontalAlignment = Alignment.CenterHorizontally) {
Box(modifier = Modifier.size(70.dp)) {
Avatar(
avatarData = AvatarData(roomId, roomName, avatarUrl, AvatarSize.RoomHeader),
modifier = Modifier.fillMaxSize()
)
}
Column(
modifier = modifier
.fillMaxWidth()
.padding(horizontal = 16.dp),
horizontalAlignment = Alignment.CenterHorizontally,
) {
Avatar(
avatarData = AvatarData(roomId, roomName, avatarUrl, AvatarSize.RoomHeader),
modifier = Modifier.size(70.dp)
)
Spacer(modifier = Modifier.height(24.dp))
Text(roomName, style = ElementTheme.typography.fontHeadingLgBold)
Text(
text = roomName,
style = ElementTheme.typography.fontHeadingLgBold,
textAlign = TextAlign.Center,
)
if (roomAlias != null) {
Spacer(modifier = Modifier.height(6.dp))
Text(
text = roomAlias,
style = ElementTheme.typography.fontBodyLgRegular,
color = MaterialTheme.colorScheme.secondary,
modifier = Modifier.fillMaxWidth().padding(horizontal = 16.dp),
textAlign = TextAlign.Center,
)
}

View file

@ -43,6 +43,8 @@ import io.element.android.libraries.designsystem.components.avatar.Avatar
import io.element.android.libraries.designsystem.components.avatar.AvatarSize
import io.element.android.libraries.designsystem.preview.ElementPreviewDark
import io.element.android.libraries.designsystem.preview.ElementPreviewLight
import io.element.android.libraries.designsystem.text.applyScaleDown
import io.element.android.libraries.designsystem.text.toSp
import io.element.android.libraries.designsystem.theme.aliasScreenTitle
import io.element.android.libraries.designsystem.theme.components.DropdownMenu
import io.element.android.libraries.designsystem.theme.components.DropdownMenuItem
@ -114,7 +116,11 @@ private fun DefaultRoomListTopBar(
val fontStyle = if (scrollBehavior.state.collapsedFraction > 0.5)
ElementTheme.typography.aliasScreenTitle
else
ElementTheme.typography.fontHeadingLgBold
ElementTheme.typography.fontHeadingLgBold.copy(
// Due to a limitation of MediumTopAppBar, and to avoid the text to be truncated,
// ensure that the font size will never be bigger than 28.dp.
fontSize = 28.dp.applyScaleDown().toSp()
)
Text(
style = fontStyle,
text = stringResource(id = R.string.screen_roomlist_main_space_title)

View file

@ -42,6 +42,13 @@ const val DAY_MODE_NAME = "D"
*
* NB: Content should be wrapped into [ElementPreview] to apply proper theming.
*/
@Preview(name = DAY_MODE_NAME)
@Preview(name = NIGHT_MODE_NAME, uiMode = Configuration.UI_MODE_NIGHT_YES)
@Preview(
name = DAY_MODE_NAME,
fontScale = 1f,
)
@Preview(
name = NIGHT_MODE_NAME,
uiMode = Configuration.UI_MODE_NIGHT_YES,
fontScale = 1f,
)
annotation class DayNightPreviews

View file

@ -0,0 +1,38 @@
/*
* Copyright (c) 2023 New Vector Ltd
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
package io.element.android.libraries.designsystem.preview
import androidx.compose.runtime.Composable
import androidx.compose.runtime.CompositionLocalProvider
import androidx.compose.ui.platform.LocalDensity
import androidx.compose.ui.unit.Density
/**
* Showkase does not take into account the `fontScale` parameter of the Preview annotation, so alter the
* LocalDensity in the CompositionLocalProvider.
*/
@Composable
fun WithFontScale(fontScale: Float, content: @Composable () -> Unit) {
CompositionLocalProvider(
LocalDensity provides Density(
density = LocalDensity.current.density,
fontScale = fontScale
)
) {
content()
}
}

View file

@ -0,0 +1,126 @@
/*
* Copyright (c) 2023 New Vector Ltd
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
package io.element.android.libraries.designsystem.text
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.padding
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.LocalDensity
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp
import io.element.android.libraries.designsystem.preview.ElementPreviewLight
import io.element.android.libraries.designsystem.preview.WithFontScale
import io.element.android.libraries.designsystem.theme.components.Text
import io.element.android.libraries.theme.ElementTheme
/**
* Return the maximum value between the receiver value and the value with fontScale applied.
* So if fontScale is >= 1f, the same value is returned, and if fontScale is < 1f, so returned value
* will be smaller.
*/
@Composable
fun Dp.applyScaleDown(): Dp = with(LocalDensity.current) {
return this@applyScaleDown * fontScale.coerceAtMost(1f)
}
/**
* Return the minimum value between the receiver value and the value with fontScale applied.
* So if fontScale is <= 1f, the same value is returned, and if fontScale is > 1f, so returned value
* will be bigger.
*/
@Composable
fun Dp.applyScaleUp(): Dp = with(LocalDensity.current) {
return this@applyScaleUp * fontScale.coerceAtLeast(1f)
}
@Preview
@Composable
fun DpScalePreview_0_75f() = WithFontScale(0.75f) {
ElementPreviewLight {
val fontSizeInDp = 16.dp
Column(
modifier = Modifier.padding(4.dp),
verticalArrangement = Arrangement.spacedBy(6.dp)
) {
Text(
text = "Text with size of 16.sp",
style = ElementTheme.typography.fontBodyLgRegular.copy(fontSize = fontSizeInDp.toSp())
)
Text(
text = "Text with the same size (applyScaleUp)",
style = ElementTheme.typography.fontBodyLgRegular.copy(fontSize = fontSizeInDp.applyScaleUp().toSp())
)
Text(
text = "Text with a smaller size (applyScaleDown)",
style = ElementTheme.typography.fontBodyLgRegular.copy(fontSize = fontSizeInDp.applyScaleDown().toSp())
)
}
}
}
@Preview
@Composable
fun DpScalePreview_1_0f() = WithFontScale(1f) {
ElementPreviewLight {
val fontSizeInDp = 16.dp
Column(
modifier = Modifier.padding(4.dp),
verticalArrangement = Arrangement.spacedBy(6.dp)
) {
Text(
text = "Text with size of 16.sp",
style = ElementTheme.typography.fontBodyLgRegular.copy(fontSize = fontSizeInDp.toSp())
)
Text(
text = "Text with the same size (applyScaleUp)",
style = ElementTheme.typography.fontBodyLgRegular.copy(fontSize = fontSizeInDp.applyScaleUp().toSp())
)
Text(
text = "Text with the same size (applyScaleDown)",
style = ElementTheme.typography.fontBodyLgRegular.copy(fontSize = fontSizeInDp.applyScaleDown().toSp())
)
}
}
}
@Preview
@Composable
fun DpScalePreview_1_5f() = WithFontScale(1.5f) {
ElementPreviewLight {
val fontSizeInDp = 16.dp
Column(
modifier = Modifier.padding(4.dp),
verticalArrangement = Arrangement.spacedBy(6.dp)
) {
Text(
text = "Text with size of 16.sp",
style = ElementTheme.typography.fontBodyLgRegular.copy(fontSize = fontSizeInDp.toSp())
)
Text(
text = "Text with a bigger size (applyScaleUp)",
style = ElementTheme.typography.fontBodyLgRegular.copy(fontSize = fontSizeInDp.applyScaleUp().toSp())
)
Text(
text = "Text with the same size (applyScaleDown)",
style = ElementTheme.typography.fontBodyLgRegular.copy(fontSize = fontSizeInDp.applyScaleDown().toSp())
)
}
}
}

View file

@ -75,6 +75,7 @@ import io.element.android.libraries.designsystem.VectorIcons
import io.element.android.libraries.designsystem.modifiers.applyIf
import io.element.android.libraries.designsystem.preview.DayNightPreviews
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.components.Surface
import io.element.android.libraries.designsystem.theme.components.Text
@ -111,12 +112,15 @@ fun TextComposer(
) {
AttachmentButton(onClick = onAddAttachment, modifier = Modifier.padding(vertical = 6.dp))
Spacer(modifier = Modifier.width(12.dp))
val roundCornerSmall = 20.dp.applyScaleUp()
val roundCornerLarge = 28.dp.applyScaleUp()
var lineCount by remember { mutableStateOf(0) }
val roundedCornerSize = remember(lineCount, composerMode) {
if (lineCount > 1 || composerMode is MessageComposerMode.Special) {
20.dp
roundCornerSmall
} else {
28.dp
roundCornerLarge
}
}
val roundedCornerSizeState = animateDpAsState(
@ -126,7 +130,7 @@ fun TextComposer(
)
)
val roundedCorners = RoundedCornerShape(roundedCornerSizeState.value)
val minHeight = 42.dp
val minHeight = 42.dp.applyScaleUp()
val bgColor = ElementTheme.colors.bgSubtleSecondary
// Change border color depending on focus
var hasFocus by remember { mutableStateOf(false) }
@ -170,7 +174,12 @@ fun TextComposer(
singleLine = false,
visualTransformation = VisualTransformation.None,
shape = roundedCorners,
contentPadding = PaddingValues(top = 10.dp, bottom = 10.dp, start = 12.dp, end = 42.dp),
contentPadding = PaddingValues(
top = 10.dp.applyScaleUp(),
bottom = 10.dp.applyScaleUp(),
start = 12.dp.applyScaleUp(),
end = 42.dp.applyScaleUp(),
),
interactionSource = remember { MutableInteractionSource() },
placeholder = {
Text(stringResource(CommonStrings.common_message), style = defaultTypography)
@ -198,7 +207,7 @@ fun TextComposer(
canSendMessage = composerCanSendMessage,
onSendMessage = onSendMessage,
composerMode = composerMode,
modifier = Modifier.padding(end = 6.dp, bottom = 6.dp)
modifier = Modifier.padding(end = 6.dp.applyScaleUp(), bottom = 6.dp.applyScaleUp())
)
}
}
@ -258,7 +267,7 @@ private fun EditingModeView(
tint = ElementTheme.materialColors.secondary,
modifier = Modifier
.padding(vertical = 8.dp)
.size(16.dp),
.size(16.dp.applyScaleUp()),
)
Text(
stringResource(CommonStrings.common_editing),
@ -275,7 +284,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)
.size(16.dp.applyScaleUp())
.clickable(
enabled = true,
onClick = onResetComposerMode,
@ -338,7 +347,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)
.size(16.dp.applyScaleUp())
.clickable(
enabled = true,
onClick = onResetComposerMode,
@ -356,13 +365,13 @@ private fun AttachmentButton(
) {
Surface(
modifier
.size(30.dp)
.size(30.dp.applyScaleUp())
.clickable(onClick = onClick),
shape = CircleShape,
color = ElementTheme.colors.iconPrimary
) {
Image(
modifier = Modifier.size(12.5f.dp),
modifier = Modifier.size(12.5f.dp.applyScaleUp()),
painter = painterResource(R.drawable.ic_add_attachment),
contentDescription = stringResource(R.string.rich_text_editor_a11y_add_attachment),
contentScale = ContentScale.Inside,
@ -386,10 +395,10 @@ private fun BoxScope.SendButton(
modifier = modifier
.clip(CircleShape)
.background(if (canSendMessage) ElementTheme.colors.iconAccentTertiary else Color.Transparent)
.size(30.dp)
.size(30.dp.applyScaleUp())
.align(Alignment.BottomEnd)
.applyIf(composerMode !is MessageComposerMode.Edit, ifTrue = {
padding(start = 1.dp) // Center the arrow in the circle
padding(start = 1.dp.applyScaleUp()) // Center the arrow in the circle
})
.clickable(
enabled = canSendMessage,
@ -409,7 +418,7 @@ private fun BoxScope.SendButton(
else -> stringResource(CommonStrings.action_send)
}
Icon(
modifier = Modifier.size(16.dp),
modifier = Modifier.size(16.dp.applyScaleUp()),
resourceId = iconId,
contentDescription = contentDescription,
// Exception here, we use Color.White instead of ElementTheme.colors.iconOnSolidPrimary

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:da4188dc606f0735fd4093acad34897c866d8c4d20b3e0ec0618685f7302cbf5
size 9288
oid sha256:3f18e74bfbebd69109f36a7154b20d3ee61071bff0d8ebf28f4b3b35c58e2938
size 9256

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:e27b1ea7bfa4eb97af3c2d433fbe3f5ca21458e4458d91b39c9c2bb3d7b02abc
size 11306
oid sha256:eea203b9527f7c3dc3692e7db3e9d5cee20ca08fddf04977c948933dc2784022
size 11274

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:2bbeb21faf320226f42aad179b955952ad8e4b5d5645c45bfbbc02166baf0662
size 9641
oid sha256:b5c69ae7d27eb7024e9a2f9c7100b308562ef2fc702e28604098180cb02a3813
size 9645

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:499e17b52d57f8b0d8984e32457b3922c0647be5b835c02a01ed927fe004ec4d
size 11610
oid sha256:62149a4d9b0dd62ddb56e1cdb24fe401f189fda05d17dd16f8c0bc511eab6561
size 11616

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:3d368f7cc84b5a8850577fac658aaeb89a1c83a2890b7fd393577c9cde919069
size 53689
oid sha256:613d55031bc30060bdd84596fb78de043ead483ac59fd42e48b15f0e56947a36
size 53660

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:89520fd2999582229ace8fd9304644fc74ce01230a4024b90b47ce1cd61eb564
size 55678
oid sha256:632dfa6edc34b7283654e43c3b7d9eb0334507644e50bc5fc7bdf8b5c45ed874
size 55686

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:9e0c73b8d86c064ce46ade6477cc91803d543199657e597a15a7e21bdacab7be
size 6541
oid sha256:774ece5436ab5a025a6a7134120069922276329bf87408a90263bb8c425a0568
size 6510

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:3af4d7ce438da56851aa3041138558d8e57ac181775476b983646039a1cb62ae
size 6602
oid sha256:55aff072541c752abd0a8fe48c73b38b42ea47ab4779a2a3ae37a449f88ffd24
size 6606

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:8aa48154bf2cf3a6ec6da96e24a86c6a3f1e6eb11865c2301a4f2638e471bd34
size 37408
oid sha256:9c6477d7476baccee037e491930d99f7ea00e313d1285fdd882be3de99f705b0
size 37376

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:a8f155381ccc3f8833b58e076e797034dfa528bd55bafd982c34fb997e4db491
size 39830
oid sha256:5b589817850bc30e336e9d5e443b2153133991aa5ea919838bddef26d2b1df9e
size 39840

View file

@ -0,0 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:373fcfdea163cd59d1b929adb1abf7163c0e1aaa203033292931fd22cd5c60d6
size 22378

View file

@ -0,0 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:c1e171c6295cd93af0fc0533b8c3099c75d5343132477709e231848c0c51b35f
size 24366

View file

@ -0,0 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:45485288d1cd0552c371aa868600e1fd8c30232ea2d9cb26420ec36c539cdb6f
size 28228