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

Update the API and add UI screenshots demoing it.

Browse source
This commit is contained in:
Benoit Marty 2023-07-28 10:29:13 +02:00
parent 26bae1a831
commit 5ace169440
4 changed files with 136 additions and 54 deletions
Download patch file Download diff file Expand all files Collapse all files

119
libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/text/DpScale.kt Normal file
View file

@ -0,0 +1,119 @@
/*
* 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.theme.components.Text
import io.element.android.libraries.theme.ElementTheme
/**
* Return the maximum value between the receiver value and the value with fonScale 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 fonScale 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(fontScale = 0.75f)
@Composable
fun DpScalePreview_0_75f() = ElementPreviewLight {
val fontSizeInDp = 16.dp
Column(
modifier = Modifier.padding(4.dp),
verticalArrangement = Arrangement.spacedBy(6.dp)
) {
Text(
text = "A text should have a size of 16.sp",
style = ElementTheme.typography.fontBodyLgRegular.copy(fontSize = fontSizeInDp.toSp())
)
Text(
text = "A text should have the same size (applyScaleUp)",
style = ElementTheme.typography.fontBodyLgRegular.copy(fontSize = fontSizeInDp.applyScaleUp().toSp())
)
Text(
text = "A text should be smaller (applyScaleDown)",
style = ElementTheme.typography.fontBodyLgRegular.copy(fontSize = fontSizeInDp.applyScaleDown().toSp())
)
}
}
@Preview(fontScale = 1.0f)
@Composable
fun DpScalePreview_1_0f() = ElementPreviewLight {
val fontSizeInDp = 16.dp
Column(
modifier = Modifier.padding(4.dp),
verticalArrangement = Arrangement.spacedBy(6.dp)
) {
Text(
text = "A text with a size of 16.sp",
style = ElementTheme.typography.fontBodyLgRegular.copy(fontSize = fontSizeInDp.toSp())
)
Text(
text = "A text with the same size (applyScaleUp)",
style = ElementTheme.typography.fontBodyLgRegular.copy(fontSize = fontSizeInDp.applyScaleUp().toSp())
)
Text(
text = "A text with the same size (applyScaleDown)",
style = ElementTheme.typography.fontBodyLgRegular.copy(fontSize = fontSizeInDp.applyScaleDown().toSp())
)
}
}
@Preview(fontScale = 1.5f)
@Composable
fun DpScalePreview_1_5f() = ElementPreviewLight {
val fontSizeInDp = 16.dp
Column(
modifier = Modifier.padding(4.dp),
verticalArrangement = Arrangement.spacedBy(6.dp)
) {
Text(
text = "A text with a size of 16.sp",
style = ElementTheme.typography.fontBodyLgRegular.copy(fontSize = fontSizeInDp.toSp())
)
Text(
text = "A text with a bigger size (applyScaleUp)",
style = ElementTheme.typography.fontBodyLgRegular.copy(fontSize = fontSizeInDp.applyScaleUp().toSp())
)
Text(
text = "A text with the same size (applyScaleDown)",
style = ElementTheme.typography.fontBodyLgRegular.copy(fontSize = fontSizeInDp.applyScaleDown().toSp())
)
}
}

37
libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/text/FontSize.kt
View file

@ -1,37 +0,0 @@
/*
* 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.runtime.Composable
import androidx.compose.ui.platform.LocalDensity
import androidx.compose.ui.unit.Dp
/**
* Return the maximum value between the receiver value and the value with fonScale applied.
*/
@Composable
fun Dp.scaleMax(): Dp = with(LocalDensity.current) {
return this@scaleMax * fontScale.coerceAtMost(1f)
}
/**
* Return the minimum value between the receiver value and the value with fonScale applied.
*/
@Composable
fun Dp.scaleMin(): Dp = with(LocalDensity.current) {
return this@scaleMin * fontScale.coerceAtLeast(1f)
}