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">