From 056b8097176bda7f6e0e01c5d3bcdca01391dc4f Mon Sep 17 00:00:00 2001 From: MohitMaliFtechiz Date: Wed, 26 Mar 2025 18:40:50 +0530 Subject: [PATCH] Improved the divider height on HelpScreen to match the previous design. --- .../kiwix/kiwixmobile/core/help/HelpScreen.kt | 52 ++++++++++++++++--- .../kiwixmobile/core/help/HelpScreenItem.kt | 34 ++++++------ .../kiwixmobile/core/utils/ComposeDimens.kt | 6 +++ 3 files changed, 70 insertions(+), 22 deletions(-) diff --git a/core/src/main/java/org/kiwix/kiwixmobile/core/help/HelpScreen.kt b/core/src/main/java/org/kiwix/kiwixmobile/core/help/HelpScreen.kt index a466338b1..5904e6db0 100644 --- a/core/src/main/java/org/kiwix/kiwixmobile/core/help/HelpScreen.kt +++ b/core/src/main/java/org/kiwix/kiwixmobile/core/help/HelpScreen.kt @@ -19,6 +19,7 @@ package org.kiwix.kiwixmobile.core.help import android.app.Activity +import android.content.res.Configuration import androidx.compose.foundation.Image import androidx.compose.foundation.clickable import androidx.compose.foundation.isSystemInDarkTheme @@ -33,6 +34,7 @@ import androidx.compose.material3.HorizontalDivider import androidx.compose.material3.MaterialTheme import androidx.compose.material3.Scaffold import androidx.compose.material3.Text +import androidx.compose.material3.minimumInteractiveComponentSize import androidx.compose.runtime.Composable import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier @@ -40,13 +42,16 @@ import androidx.compose.ui.graphics.Color import androidx.compose.ui.platform.LocalContext import androidx.compose.ui.res.painterResource import androidx.compose.ui.res.stringResource +import androidx.compose.ui.tooling.preview.Preview import org.kiwix.kiwixmobile.core.R import org.kiwix.kiwixmobile.core.error.DiagnosticReportActivity import org.kiwix.kiwixmobile.core.extensions.ActivityExtensions.start import org.kiwix.kiwixmobile.core.ui.components.KiwixAppBar +import org.kiwix.kiwixmobile.core.ui.components.NavigationIcon import org.kiwix.kiwixmobile.core.ui.theme.KiwixTheme import org.kiwix.kiwixmobile.core.ui.theme.MineShaftGray350 import org.kiwix.kiwixmobile.core.ui.theme.MineShaftGray600 +import org.kiwix.kiwixmobile.core.utils.ComposeDimens.HELP_SCREEN_DIVIDER_HEIGHT import org.kiwix.kiwixmobile.core.utils.ComposeDimens.SIXTEEN_DP @Suppress("ComposableLambdaParameterNaming") @@ -69,7 +74,7 @@ fun HelpScreen( ) { innerPadding -> Column(modifier = Modifier.padding(innerPadding)) { SendReportRow() - HorizontalDivider(color = dividerColor) + HorizontalDivider(color = dividerColor, thickness = HELP_SCREEN_DIVIDER_HEIGHT) HelpItemList(data, dividerColor) } } @@ -79,7 +84,7 @@ fun HelpScreen( @Composable fun SendReportRow() { val context = LocalContext.current - // val isDarkTheme = isSystemInDarkTheme() + val isDarkTheme = isSystemInDarkTheme() Row( modifier = Modifier @@ -91,14 +96,14 @@ fun SendReportRow() { Image( painter = painterResource(R.drawable.ic_feedback_orange_24dp), contentDescription = stringResource(R.string.send_report), - modifier = Modifier - .padding(SIXTEEN_DP) + modifier = Modifier.padding(SIXTEEN_DP) ) Text( text = stringResource(R.string.send_report), - // color = if (isDarkTheme) Color.LightGray else Color.DarkGray, - style = MaterialTheme.typography.titleMedium + color = if (isDarkTheme) Color.LightGray else Color.DarkGray, + style = MaterialTheme.typography.titleMedium, + modifier = Modifier.minimumInteractiveComponentSize() ) } } @@ -111,7 +116,40 @@ fun HelpItemList(data: List, dividerColor: Color) { ) { itemsIndexed(data, key = { _, item -> item.title }) { _, item -> HelpScreenItem(data = item) - HorizontalDivider(color = dividerColor) + HorizontalDivider(color = dividerColor, thickness = HELP_SCREEN_DIVIDER_HEIGHT) } } } + +@Preview(uiMode = Configuration.UI_MODE_NIGHT_YES) +// @Preview() +@Composable +fun PreviewScreen() { + HelpScreen( + data = transformToHelpScreenData(LocalContext.current, rawTitleDescriptionMap()) + ) { NavigationIcon(onClick = { }) } +} + +fun rawTitleDescriptionMap(): List> = + listOf( + R.string.help_2 to R.array.description_help_2, + R.string.help_5 to R.array.description_help_5, + R.string.how_to_update_content to R.array.update_content_description + ) + +// fun transformToHelpScreenData( +// context: Context, +// rawTitleDescriptionMap: List> +// ): List { +// return rawTitleDescriptionMap.map { (titleResId, description) -> +// val title = context.getString(titleResId) +// val descriptionValue = when (description) { +// is String -> description +// is Int -> context.resources.getStringArray(description).joinToString(separator = "\n") +// else -> { +// throw IllegalArgumentException("Invalid description resource type for title: $titleResId") +// } +// } +// HelpScreenItemDataClass(title, descriptionValue) +// } +// } diff --git a/core/src/main/java/org/kiwix/kiwixmobile/core/help/HelpScreenItem.kt b/core/src/main/java/org/kiwix/kiwixmobile/core/help/HelpScreenItem.kt index 26fe6c08e..1629cf3f2 100644 --- a/core/src/main/java/org/kiwix/kiwixmobile/core/help/HelpScreenItem.kt +++ b/core/src/main/java/org/kiwix/kiwixmobile/core/help/HelpScreenItem.kt @@ -21,6 +21,7 @@ package org.kiwix.kiwixmobile.core.help import androidx.compose.animation.AnimatedVisibility import androidx.compose.animation.core.animateFloatAsState import androidx.compose.animation.core.tween +import androidx.compose.foundation.Image import androidx.compose.foundation.clickable import androidx.compose.foundation.interaction.MutableInteractionSource import androidx.compose.foundation.isSystemInDarkTheme @@ -32,11 +33,10 @@ 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.size import androidx.compose.material.icons.Icons import androidx.compose.material.icons.filled.KeyboardArrowDown -import androidx.compose.material3.Icon import androidx.compose.material3.Text +import androidx.compose.material3.minimumInteractiveComponentSize import androidx.compose.runtime.Composable import androidx.compose.runtime.getValue import androidx.compose.runtime.mutableStateOf @@ -45,21 +45,23 @@ import androidx.compose.runtime.setValue import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Color +import androidx.compose.ui.graphics.ColorFilter import androidx.compose.ui.graphics.graphicsLayer +import androidx.compose.ui.layout.ContentScale import androidx.compose.ui.res.dimensionResource import androidx.compose.ui.res.stringResource import androidx.compose.ui.text.font.FontWeight import androidx.compose.ui.text.style.TextAlign import androidx.compose.ui.unit.Dp -import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.sp import org.kiwix.kiwixmobile.core.R +import org.kiwix.kiwixmobile.core.utils.ComposeDimens.EIGHT_DP +import org.kiwix.kiwixmobile.core.utils.ComposeDimens.HELP_SCREEN_ITEM_TITLE_LETTER_SPACING +import org.kiwix.kiwixmobile.core.utils.ComposeDimens.HELP_SCREEN_ITEM_TITLE_TEXT_SIZE // Define constants for spacing, font sizes, etc. -private val HelpItemTitleFontSize = 22.sp private val HelpItemDescriptionFontSize = 17.sp -private val IconSize = 36.dp private const val HELP_ITEM_ANIMATION_DURATION = 300 private const val HELP_ITEM_ARROW_ROTATION_OPEN = 180f private const val HELP_ITEM_ARROW_ROTATION_CLOSE = 0f @@ -72,19 +74,18 @@ fun HelpScreenItem( ) { var isOpen by remember { mutableStateOf(initiallyOpened) } val itemColor = if (isSystemInDarkTheme()) Color.White else Color.Black - - val topPadding: Dp = dimensionResource(id = R.dimen.dimen_medium_padding) val horizontalPadding: Dp = dimensionResource(id = R.dimen.activity_horizontal_margin) Column( modifier = modifier - .fillMaxWidth(), + .fillMaxWidth() + .padding(vertical = EIGHT_DP), verticalArrangement = Arrangement.Center, horizontalAlignment = Alignment.CenterHorizontally ) { HelpItemHeader(data.title, isOpen, itemColor, horizontalPadding) { isOpen = !isOpen } AnimatedVisibility(visible = isOpen) { - Spacer(modifier = Modifier.height(topPadding)) + Spacer(modifier = Modifier.height(EIGHT_DP)) HelpItemDescription(data.description, itemColor, horizontalPadding) } } @@ -111,23 +112,26 @@ fun HelpItemHeader( modifier = Modifier .fillMaxWidth() .clickable(interactionSource = interactionSource, indication = null, onClick = onToggle) - .padding(horizontal = horizontalPadding, vertical = horizontalPadding) + .padding(horizontal = horizontalPadding, vertical = EIGHT_DP) ) { Text( text = title, - fontSize = HelpItemTitleFontSize, + fontSize = HELP_SCREEN_ITEM_TITLE_TEXT_SIZE, color = itemColor, - fontWeight = FontWeight.Normal + fontWeight = FontWeight.Medium, + letterSpacing = HELP_SCREEN_ITEM_TITLE_LETTER_SPACING, + modifier = Modifier.minimumInteractiveComponentSize() ) - Icon( + Image( imageVector = Icons.Default.KeyboardArrowDown, contentDescription = stringResource(R.string.expand), modifier = Modifier .graphicsLayer { rotationZ = arrowRotation } - .size(IconSize), - tint = itemColor + .minimumInteractiveComponentSize(), + contentScale = ContentScale.Inside, + colorFilter = ColorFilter.tint(color = itemColor) ) } } diff --git a/core/src/main/java/org/kiwix/kiwixmobile/core/utils/ComposeDimens.kt b/core/src/main/java/org/kiwix/kiwixmobile/core/utils/ComposeDimens.kt index c4ac32a1f..ca79aeca4 100644 --- a/core/src/main/java/org/kiwix/kiwixmobile/core/utils/ComposeDimens.kt +++ b/core/src/main/java/org/kiwix/kiwixmobile/core/utils/ComposeDimens.kt @@ -98,4 +98,10 @@ object ComposeDimens { // LocalLibraryFragment dimens val FAB_ICON_BOTTOM_MARGIN = 50.dp + + // HelpFragment dimens + val HELP_SCREEN_DIVIDER_HEIGHT = 0.7.dp + val HELP_SCREEN_ITEM_TITLE_TEXT_SIZE = 20.sp + val HELP_SCREEN_ITEM_TITLE_LETTER_SPACING = 0.0125.em + val HELP_SCREEN_ARROW_ICON_MINIMUM_SIZE = 48.dp }