From bea28a16a3cc087549879a399a5c1abba469210e Mon Sep 17 00:00:00 2001 From: MohitMaliFtechiz Date: Sat, 28 Jun 2025 01:08:25 +0530 Subject: [PATCH] Fixed: The donation layout was not respecting the dark theme. * Fixed: The alignment of donation layout. * Improved the `DonationLayout` code for better readability and maintainability. --- .../core/main/reader/DonationLayout.kt | 135 +++++++++++------- .../core/main/reader/ReaderScreen.kt | 29 +--- 2 files changed, 81 insertions(+), 83 deletions(-) diff --git a/core/src/main/java/org/kiwix/kiwixmobile/core/main/reader/DonationLayout.kt b/core/src/main/java/org/kiwix/kiwixmobile/core/main/reader/DonationLayout.kt index 23f06fb6b..564ceedb6 100644 --- a/core/src/main/java/org/kiwix/kiwixmobile/core/main/reader/DonationLayout.kt +++ b/core/src/main/java/org/kiwix/kiwixmobile/core/main/reader/DonationLayout.kt @@ -18,6 +18,7 @@ package org.kiwix.kiwixmobile.core.main.reader +import android.content.res.Configuration import androidx.annotation.StringRes import androidx.compose.foundation.Image import androidx.compose.foundation.layout.Arrangement @@ -37,14 +38,17 @@ import androidx.compose.material3.TextButton import androidx.compose.runtime.Composable import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier +import androidx.compose.ui.platform.LocalConfiguration +import androidx.compose.ui.platform.LocalWindowInfo import androidx.compose.ui.res.painterResource import androidx.compose.ui.res.stringResource -import androidx.compose.ui.tooling.preview.Preview +import androidx.compose.ui.unit.Dp +import androidx.compose.ui.unit.dp import org.kiwix.kiwixmobile.core.R import org.kiwix.kiwixmobile.core.ui.theme.DenimBlue800 -import org.kiwix.kiwixmobile.core.ui.theme.White -import org.kiwix.kiwixmobile.core.ui.theme.dimHighlightedTextLight import org.kiwix.kiwixmobile.core.utils.ComposeDimens +import org.kiwix.kiwixmobile.core.utils.ComposeDimens.DONATION_LAYOUT_MAXIMUM_WIDTH +import org.kiwix.kiwixmobile.core.utils.ComposeDimens.SIXTEEN_DP @Composable fun DonationLayout( @@ -52,11 +56,21 @@ fun DonationLayout( onDonateButtonClick: () -> Unit, onLaterButtonClick: () -> Unit ) { + val donationLayoutWidth = getDonationLayoutWidth() Column( verticalArrangement = Arrangement.Bottom, - horizontalAlignment = Alignment.CenterHorizontally + horizontalAlignment = Alignment.CenterHorizontally, + modifier = Modifier + .then( + if (donationLayoutWidth != Dp.Unspecified) { + Modifier.width(donationLayoutWidth) + } else { + Modifier.fillMaxWidth() + } + ) + .padding(horizontal = SIXTEEN_DP), ) { - DonationDialogComposable( + DonationDialogCard( appName, onDonateButtonClick, onLaterButtonClick @@ -65,7 +79,7 @@ fun DonationLayout( } @Composable -fun DonationDialogComposable( +fun DonationDialogCard( appName: String, onDonateButtonClick: () -> Unit, onLaterButtonClick: () -> Unit @@ -74,57 +88,65 @@ fun DonationDialogComposable( modifier = Modifier .fillMaxWidth() .wrapContentHeight() - .padding(all = ComposeDimens.SIXTEEN_DP), + .padding(ComposeDimens.SIXTEEN_DP), shape = MaterialTheme.shapes.medium, elevation = CardDefaults.cardElevation(defaultElevation = ComposeDimens.SIX_DP), - colors = CardDefaults.cardColors( - containerColor = White - ) + colors = CardDefaults.cardColors(containerColor = MaterialTheme.colorScheme.surfaceContainer) ) { Column( modifier = Modifier - .padding( - start = ComposeDimens.SIXTEEN_DP, - end = ComposeDimens.SIXTEEN_DP, - top = ComposeDimens.SIXTEEN_DP - ) + .padding(horizontal = ComposeDimens.SIXTEEN_DP) + .padding(top = ComposeDimens.SIXTEEN_DP) ) { - Row( - modifier = Modifier.fillMaxWidth(), - verticalAlignment = Alignment.Top - ) { - Image( - painter = painterResource(id = R.drawable.ic_donation_icon), - contentDescription = stringResource(id = R.string.donation_dialog_title), - modifier = Modifier - .size(ComposeDimens.FIFTY_DP) - ) - Spacer(modifier = Modifier.width(ComposeDimens.TWELVE_DP)) - Column { - DonationDialogHeadingText() - DonationDialogSubHeadingText(appName = appName) - } - } - Row( - modifier = Modifier - .fillMaxWidth(), - verticalAlignment = Alignment.CenterVertically - ) { - Spacer(modifier = Modifier.weight(1f)) - - DonationDialogButton( - onButtonClick = onLaterButtonClick, - buttonText = R.string.rate_dialog_neutral - ) - DonationDialogButton( - onButtonClick = onDonateButtonClick, - buttonText = R.string.make_donation - ) - } + DonationDialogContent(appName) + DonationDialogButtons(onDonateButtonClick, onLaterButtonClick) } } } +@Composable +private fun DonationDialogContent(appName: String) { + Row( + modifier = Modifier.fillMaxWidth(), + verticalAlignment = Alignment.Top + ) { + Image( + painter = painterResource(id = R.drawable.ic_donation_icon), + contentDescription = stringResource(id = R.string.donation_dialog_title), + modifier = Modifier + .size(ComposeDimens.FIFTY_DP) + ) + Spacer(modifier = Modifier.width(ComposeDimens.TWELVE_DP)) + Column { + DonationDialogHeadingText() + DonationDialogSubHeadingText(appName = appName) + } + } +} + +@Composable +private fun DonationDialogButtons( + onDonateButtonClick: () -> Unit, + onLaterButtonClick: () -> Unit +) { + Row( + modifier = Modifier + .fillMaxWidth(), + verticalAlignment = Alignment.CenterVertically + ) { + Spacer(modifier = Modifier.weight(1f)) + + DonationDialogButton( + onButtonClick = onLaterButtonClick, + buttonText = R.string.rate_dialog_neutral + ) + DonationDialogButton( + onButtonClick = onDonateButtonClick, + buttonText = R.string.make_donation + ) + } +} + @Composable fun DonationDialogButton( onButtonClick: () -> Unit, @@ -157,17 +179,20 @@ fun DonationDialogSubHeadingText(appName: String) { appName ), fontSize = ComposeDimens.FOURTEEN_SP, - color = dimHighlightedTextLight, + color = MaterialTheme.colorScheme.onTertiary, modifier = Modifier.padding(top = ComposeDimens.FOUR_DP) ) } -@Preview() @Composable -fun DonationDialogComposablePreview() { - DonationLayout( - appName = "kiwix", - onDonateButtonClick = {}, - onLaterButtonClick = {} - ) +private fun getDonationLayoutWidth(): Dp { + val configuration = LocalWindowInfo.current + val screenWidth = configuration.containerSize.width.dp + val isLandscape = LocalConfiguration.current.orientation == Configuration.ORIENTATION_LANDSCAPE + + return if (screenWidth > DONATION_LAYOUT_MAXIMUM_WIDTH || isLandscape) { + DONATION_LAYOUT_MAXIMUM_WIDTH + } else { + Dp.Unspecified + } } diff --git a/core/src/main/java/org/kiwix/kiwixmobile/core/main/reader/ReaderScreen.kt b/core/src/main/java/org/kiwix/kiwixmobile/core/main/reader/ReaderScreen.kt index 9e4036770..b9a77c81d 100644 --- a/core/src/main/java/org/kiwix/kiwixmobile/core/main/reader/ReaderScreen.kt +++ b/core/src/main/java/org/kiwix/kiwixmobile/core/main/reader/ReaderScreen.kt @@ -18,7 +18,6 @@ package org.kiwix.kiwixmobile.core.main.reader -import android.content.res.Configuration import android.view.View import android.view.ViewGroup import android.view.ViewGroup.LayoutParams.MATCH_PARENT @@ -90,7 +89,6 @@ import androidx.compose.ui.draw.alpha import androidx.compose.ui.draw.clip import androidx.compose.ui.graphics.Color import androidx.compose.ui.graphics.graphicsLayer -import androidx.compose.ui.platform.LocalConfiguration import androidx.compose.ui.platform.LocalContext import androidx.compose.ui.platform.LocalDensity import androidx.compose.ui.platform.LocalWindowInfo @@ -132,7 +130,6 @@ import org.kiwix.kiwixmobile.core.utils.ComposeDimens.BACK_TO_TOP_BUTTON_BOTTOM_ import org.kiwix.kiwixmobile.core.utils.ComposeDimens.CLOSE_ALL_TAB_BUTTON_BOTTOM_PADDING import org.kiwix.kiwixmobile.core.utils.ComposeDimens.CLOSE_TAB_ICON_ANIMATION_TIMEOUT import org.kiwix.kiwixmobile.core.utils.ComposeDimens.CLOSE_TAB_ICON_SIZE -import org.kiwix.kiwixmobile.core.utils.ComposeDimens.DONATION_LAYOUT_MAXIMUM_WIDTH import org.kiwix.kiwixmobile.core.utils.ComposeDimens.EIGHT_DP import org.kiwix.kiwixmobile.core.utils.ComposeDimens.FIVE_DP import org.kiwix.kiwixmobile.core.utils.ComposeDimens.FOUR_DP @@ -591,18 +588,7 @@ private fun BottomAppBarButtonIcon( @Composable private fun ShowDonationLayout(state: ReaderScreenState) { if (state.shouldShowDonationPopup) { - val popupWidth = getDonationPopupWidth() - Box( - modifier = Modifier - .then( - if (popupWidth != Dp.Unspecified) { - Modifier.width(popupWidth) - } else { - Modifier.fillMaxWidth() - } - ) - .padding(horizontal = SIXTEEN_DP) - ) { + Box(contentAlignment = Alignment.Center, modifier = Modifier.fillMaxWidth()) { DonationLayout( state.appName, state.donateButtonClick, @@ -612,19 +598,6 @@ private fun ShowDonationLayout(state: ReaderScreenState) { } } -@Composable -private fun getDonationPopupWidth(): Dp { - val configuration = LocalWindowInfo.current - val screenWidth = configuration.containerSize.width.dp - val isLandscape = LocalConfiguration.current.orientation == Configuration.ORIENTATION_LANDSCAPE - - return if (screenWidth > DONATION_LAYOUT_MAXIMUM_WIDTH || isLandscape) { - DONATION_LAYOUT_MAXIMUM_WIDTH - } else { - Dp.Unspecified - } -} - @Composable fun TabSwitcherView( webViews: List,