Merge pull request #7262 from thundernest/image_with_baseline (8df862b9) · Commits · e / os / Mail

core/ui/compose/common/src/main/kotlin/app/k9mail/core/ui/compose/common/baseline/BaselineModifier.kt

0 → 100644

+31 −0

Original line number	Diff line number	Diff line
		package app.k9mail.core.ui.compose.common.baseline

		import androidx.compose.foundation.layout.RowScope
		import androidx.compose.ui.Modifier
		import androidx.compose.ui.layout.FirstBaseline
		import androidx.compose.ui.layout.LastBaseline
		import androidx.compose.ui.layout.layout
		import androidx.compose.ui.unit.Dp

		/**
		* Adds a baseline to a Composable that typically doesn't have one.
		*
		* This can be used to align e.g. an icon to the baseline of some text next to it. See e.g. [RowScope.alignByBaseline].
		*
		* @param baseline The number of device-independent pixels (dp) the baseline is from the top of the Composable.
		*/
		fun Modifier.withBaseline(baseline: Dp) = layout { measurable, constraints ->
		val placeable = measurable.measure(constraints)
		val baselineInPx = baseline.roundToPx()

		layout(
		width = placeable.width,
		height = placeable.height,
		alignmentLines = mapOf(
		FirstBaseline to baselineInPx,
		LastBaseline to baselineInPx,
		),
		) {
		placeable.placeRelative(x = 0, y = 0)
		}
		}

core/ui/compose/common/src/main/kotlin/app/k9mail/core/ui/compose/common/image/ImageWithBaseline.kt

0 → 100644

+11 −0

Original line number	Diff line number	Diff line
		package app.k9mail.core.ui.compose.common.image

		import androidx.compose.runtime.Immutable
		import androidx.compose.ui.graphics.vector.ImageVector
		import androidx.compose.ui.unit.Dp

		@Immutable
		data class ImageWithBaseline(
		val image: ImageVector,
		val baseline: Dp,
		)

core/ui/compose/theme/src/main/java/app/k9mail/core/ui/compose/theme/IconsWithBaseline.kt

0 → 100644

+16 −0

Original line number	Diff line number	Diff line
		package app.k9mail.core.ui.compose.theme

		import androidx.compose.material.icons.filled.Warning
		import androidx.compose.ui.unit.dp
		import app.k9mail.core.ui.compose.common.image.ImageWithBaseline
		import androidx.compose.material.icons.Icons as MaterialIcons

		// We're using "by lazy" so not all icons are loaded into memory as soon as a nested object is accessed. But once a
		// property is accessed we want to retain the `ImageWithBaseline` instance.
		object IconsWithBaseline {
		object Filled {
		val warning: ImageWithBaseline by lazy {
		ImageWithBaseline(image = MaterialIcons.Filled.Warning, baseline = 21.dp)
		}
		}
		}

feature/account/server/certificate/src/main/kotlin/app/k9mail/feature/account/server/certificate/ui/ServerCertificateErrorScreen.kt

+27 −1

Original line number	Diff line number	Diff line
		@@ -2,16 +2,20 @@ package app.k9mail.feature.account.server.certificate.ui

		import androidx.activity.compose.BackHandler
		import androidx.compose.foundation.layout.Column
		import androidx.compose.foundation.layout.Row
		import androidx.compose.foundation.layout.Spacer
		import androidx.compose.foundation.layout.fillMaxWidth
		import androidx.compose.foundation.layout.height
		import androidx.compose.foundation.layout.padding
		import androidx.compose.foundation.layout.requiredSize
		import androidx.compose.foundation.rememberScrollState
		import androidx.compose.foundation.verticalScroll
		import androidx.compose.runtime.Composable
		import androidx.compose.ui.Modifier
		import app.k9mail.core.ui.compose.common.DevicePreviews
		import app.k9mail.core.ui.compose.common.baseline.withBaseline
		import app.k9mail.core.ui.compose.common.mvi.observe
		import app.k9mail.core.ui.compose.designsystem.atom.Icon
		import app.k9mail.core.ui.compose.designsystem.atom.button.Button
		import app.k9mail.core.ui.compose.designsystem.atom.button.ButtonOutlined
		import app.k9mail.core.ui.compose.designsystem.atom.text.TextBody1
		@@ -19,6 +23,7 @@ import app.k9mail.core.ui.compose.designsystem.atom.text.TextHeadline4
		import app.k9mail.core.ui.compose.designsystem.atom.text.TextSubtitle1
		import app.k9mail.core.ui.compose.designsystem.template.ResponsiveWidthContainer
		import app.k9mail.core.ui.compose.designsystem.template.Scaffold
		import app.k9mail.core.ui.compose.theme.IconsWithBaseline
		import app.k9mail.core.ui.compose.theme.K9Theme
		import app.k9mail.core.ui.compose.theme.MainTheme
		import app.k9mail.feature.account.server.certificate.data.InMemoryServerCertificateErrorRepository
		@@ -32,6 +37,7 @@ import org.koin.androidx.compose.koinViewModel

		// Note: This is a placeholder with mostly hardcoded text.
		// TODO: Replace with final design.
		@Suppress("LongMethod")
		@Composable
		fun ServerCertificateErrorScreen(
		onCertificateAccepted: () -> Unit,
		@@ -79,7 +85,27 @@ fun ServerCertificateErrorScreen(
		.verticalScroll(rememberScrollState())
		.padding(all = MainTheme.spacings.double),
		) {
		TextHeadline4(text = "Warning")
		Row {
		val warningIcon = IconsWithBaseline.Filled.warning
		val iconSize = MainTheme.sizes.medium
		val iconScalingFactor = iconSize / warningIcon.image.defaultHeight
		val iconBaseline = warningIcon.baseline * iconScalingFactor

		Icon(
		imageVector = warningIcon.image,
		tint = MainTheme.colors.warning,
		modifier = Modifier
		.padding(end = MainTheme.spacings.default)
		.requiredSize(iconSize)
		.withBaseline(iconBaseline)
		.alignByBaseline(),
		)
		TextHeadline4(
		text = "Warning",
		modifier = Modifier.alignByBaseline(),
		)
		}

		TextSubtitle1("Invalid certificate")

		Spacer(modifier = Modifier.height(MainTheme.spacings.quadruple))