diff --git a/app/src/main/res/navigation/kiwix_nav_graph.xml b/app/src/main/res/navigation/kiwix_nav_graph.xml index 60f5534e0..13be224cf 100644 --- a/app/src/main/res/navigation/kiwix_nav_graph.xml +++ b/app/src/main/res/navigation/kiwix_nav_graph.xml @@ -129,8 +129,7 @@ + android:label="HelpFragment" /> , navigationIcon: @Composable () -> Unit ) { - val dividerColor = - if (isSystemInDarkTheme()) { - MineShaftGray600 - } else { - MineShaftGray350 - } + val dividerColor = if (isSystemInDarkTheme()) { + MineShaftGray600 + } else { + MineShaftGray350 + } KiwixTheme { Scaffold( topBar = { @@ -102,7 +99,7 @@ fun SendReportRow() { Text( text = stringResource(R.string.send_report), color = if (isDarkTheme) Color.LightGray else Color.DarkGray, - style = MaterialTheme.typography.titleMedium, + style = MaterialTheme.typography.titleMedium.copy(fontWeight = FontWeight.Normal), modifier = Modifier.minimumInteractiveComponentSize() ) } @@ -110,46 +107,10 @@ fun SendReportRow() { @Composable fun HelpItemList(data: List, dividerColor: Color) { - LazyColumn( - modifier = Modifier - .fillMaxWidth() - ) { + LazyColumn(modifier = Modifier.fillMaxWidth()) { itemsIndexed(data, key = { _, item -> item.title }) { _, item -> HelpScreenItem(data = item) 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 1629cf3f2..2e754499e 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 @@ -18,6 +18,11 @@ package org.kiwix.kiwixmobile.core.help +import android.content.Context +import android.text.method.LinkMovementMethod +import android.text.util.Linkify +import android.view.Gravity +import android.widget.TextView import androidx.compose.animation.AnimatedVisibility import androidx.compose.animation.core.animateFloatAsState import androidx.compose.animation.core.tween @@ -30,11 +35,13 @@ import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.Spacer +import androidx.compose.foundation.layout.defaultMinSize import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.padding import androidx.compose.material.icons.Icons import androidx.compose.material.icons.filled.KeyboardArrowDown +import androidx.compose.material3.MaterialTheme import androidx.compose.material3.Text import androidx.compose.material3.minimumInteractiveComponentSize import androidx.compose.runtime.Composable @@ -47,21 +54,20 @@ 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.graphics.toArgb +import androidx.compose.ui.platform.LocalContext 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.sp +import androidx.compose.ui.viewinterop.AndroidView +import androidx.core.text.util.LinkifyCompat import org.kiwix.kiwixmobile.core.R +import org.kiwix.kiwixmobile.core.ui.theme.MineShaftGray900 import org.kiwix.kiwixmobile.core.utils.ComposeDimens.EIGHT_DP +import org.kiwix.kiwixmobile.core.utils.ComposeDimens.HELP_SCREEN_ARROW_ICON_SIZE 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 +import org.kiwix.kiwixmobile.core.utils.ComposeDimens.SIXTEEN_DP -// Define constants for spacing, font sizes, etc. - -private val HelpItemDescriptionFontSize = 17.sp 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 @@ -73,20 +79,18 @@ fun HelpScreenItem( initiallyOpened: Boolean = false ) { var isOpen by remember { mutableStateOf(initiallyOpened) } - val itemColor = if (isSystemInDarkTheme()) Color.White else Color.Black - val horizontalPadding: Dp = dimensionResource(id = R.dimen.activity_horizontal_margin) Column( modifier = modifier .fillMaxWidth() - .padding(vertical = EIGHT_DP), + .padding(vertical = EIGHT_DP, horizontal = SIXTEEN_DP), verticalArrangement = Arrangement.Center, horizontalAlignment = Alignment.CenterHorizontally ) { - HelpItemHeader(data.title, isOpen, itemColor, horizontalPadding) { isOpen = !isOpen } + HelpItemHeader(data.title, isOpen) { isOpen = !isOpen } AnimatedVisibility(visible = isOpen) { Spacer(modifier = Modifier.height(EIGHT_DP)) - HelpItemDescription(data.description, itemColor, horizontalPadding) + HelpItemDescription(LocalContext.current, data.description) } } } @@ -95,8 +99,6 @@ fun HelpScreenItem( fun HelpItemHeader( title: String, isOpen: Boolean, - itemColor: Color, - horizontalPadding: Dp, onToggle: () -> Unit ) { val arrowRotation by animateFloatAsState( @@ -112,13 +114,11 @@ fun HelpItemHeader( modifier = Modifier .fillMaxWidth() .clickable(interactionSource = interactionSource, indication = null, onClick = onToggle) - .padding(horizontal = horizontalPadding, vertical = EIGHT_DP) ) { Text( text = title, fontSize = HELP_SCREEN_ITEM_TITLE_TEXT_SIZE, - color = itemColor, - fontWeight = FontWeight.Medium, + style = MaterialTheme.typography.headlineMedium.copy(fontWeight = FontWeight.Medium), letterSpacing = HELP_SCREEN_ITEM_TITLE_LETTER_SPACING, modifier = Modifier.minimumInteractiveComponentSize() ) @@ -129,28 +129,44 @@ fun HelpItemHeader( .graphicsLayer { rotationZ = arrowRotation } + .defaultMinSize( + minWidth = HELP_SCREEN_ARROW_ICON_SIZE, + minHeight = HELP_SCREEN_ARROW_ICON_SIZE + ) .minimumInteractiveComponentSize(), - contentScale = ContentScale.Inside, - colorFilter = ColorFilter.tint(color = itemColor) + colorFilter = ColorFilter.tint(color = MaterialTheme.colorScheme.onSurface) ) } } @Composable -fun HelpItemDescription(description: String, itemColor: Color, horizontalPadding: Dp) { +fun HelpItemDescription(context: Context, description: String) { + val textColor = if (isSystemInDarkTheme()) { + Color.LightGray + } else { + MineShaftGray900 + } + val helpItemDescription = remember { TextView(context) } Box( contentAlignment = Alignment.Center, modifier = Modifier .fillMaxWidth() - .padding(start = horizontalPadding, end = horizontalPadding) + .padding(top = SIXTEEN_DP) ) { - Text( - text = description, - fontSize = HelpItemDescriptionFontSize, - textAlign = TextAlign.Left, - color = itemColor, - modifier = Modifier.padding(bottom = horizontalPadding), - fontWeight = FontWeight.Normal - ) + AndroidView( + factory = { helpItemDescription }, + modifier = Modifier.padding(bottom = SIXTEEN_DP) + ) { textView -> + textView.apply { + text = description + setTextAppearance(R.style.TextAppearance_KiwixTheme_Subtitle2) + setTextColor(textColor.toArgb()) + minHeight = + context.resources.getDimensionPixelSize(R.dimen.material_minimum_height_and_width) + gravity = Gravity.CENTER or Gravity.START + LinkifyCompat.addLinks(this, Linkify.WEB_URLS) + movementMethod = LinkMovementMethod.getInstance() + } + } } } 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 ca79aeca4..d597ba518 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 @@ -103,5 +103,5 @@ object ComposeDimens { 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 + val HELP_SCREEN_ARROW_ICON_SIZE = 35.dp } diff --git a/core/src/main/res/layout/fragment_help.xml b/core/src/main/res/layout/fragment_help.xml deleted file mode 100644 index e25e528db..000000000 --- a/core/src/main/res/layout/fragment_help.xml +++ /dev/null @@ -1,54 +0,0 @@ - - - - - - - - - - - - - - diff --git a/core/src/main/res/layout/fragment_page.xml b/core/src/main/res/layout/fragment_page.xml index d4e449bd2..2fb96ca8a 100644 --- a/core/src/main/res/layout/fragment_page.xml +++ b/core/src/main/res/layout/fragment_page.xml @@ -9,8 +9,7 @@ android:id="@+id/app_bar" android:layout_width="match_parent" android:layout_height="wrap_content" - app:layout_constraintTop_toTopOf="parent" - tools:showIn="@layout/fragment_help"> + app:layout_constraintTop_toTopOf="parent"> - - - - - - - - diff --git a/core/src/main/res/layout/layout_standard_app_bar.xml b/core/src/main/res/layout/layout_standard_app_bar.xml index 15e881b34..9cef6de5a 100644 --- a/core/src/main/res/layout/layout_standard_app_bar.xml +++ b/core/src/main/res/layout/layout_standard_app_bar.xml @@ -6,8 +6,7 @@ android:id="@+id/app_bar" android:layout_width="match_parent" android:layout_height="wrap_content" - app:layout_constraintTop_toTopOf="parent" - tools:showIn="@layout/fragment_help"> + app:layout_constraintTop_toTopOf="parent">