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

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

Browse source 
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
Download patch file Download diff file Expand all files Collapse all files

11
libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/preview/DayNightPreviews.kt
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

38
libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/preview/WithFontScale.kt Normal file
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()
}
}

126
libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/text/DpScale.kt Normal file
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())
)
}
}
}