Merge pull request #986 from vector-im/feature/bma/bigFontSizeImprovement
Big font size improvements
This commit is contained in:
Benoit Marty
GitHub
commit
5ed29b1466
20 changed files with 250 additions and 49 deletions
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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()
|
||||
}
|
||||
}
|
||||
|
|
@ -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())
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue