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

Big font size improvements

features/networkmonitor/api/src/main/kotlin/io/element/android/features/networkmonitor/api/ui/ConnectivityIndicatorView.kt

@@ -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(

features/roomdetails/impl/src/main/kotlin/io/element/android/features/roomdetails/impl/RoomDetailsView.kt

@@ -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,
             )
         }

features/roomlist/impl/src/main/kotlin/io/element/android/features/roomlist/impl/components/RoomListTopBar.kt

@@ -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)

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/preview/DayNightPreviews.kt

@@ -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

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/preview/WithFontScale.kt

@@ -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()
+    }
+}

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/text/DpScale.kt

@@ -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())
+            )
+        }
+    }
+}

libraries/textcomposer/src/main/kotlin/io/element/android/libraries/textcomposer/TextComposer.kt

@@ -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