ui: redesign AboutScreen

app/src/main/java/com/kaajjo/libresudoku/core/Constants.kt

@@ -0,0 +1,9 @@
+package com.kaajjo.libresudoku.core
+
+const val GITHUB_REPOSITORY = "https://github.com/kaajjo/Libre-Sudoku"
+const val WEBLATE_ENGAGE = "https://hosted.weblate.org/engage/libresudoku/"
+const val TELEGRAM_CHANNEL = "https://t.me/libresudoku"
+const val CRYPTO_BTC = "bc1qhpx222kmk5v6tqrra524fezwjqr0lhjq77ee8q"
+const val CRYPTO_TON = "EQCKG3oMsmOlsLrskCKl_xOF1DZezscfEp4QCOlS62H59AH7"
+const val CRYPTO_USDT_TRC20 = "TDLEHdTVrWGU36h1q742AorJxUA6qyMUzV"
+const val CARD_MIR = "2202 2080 8068 0045"

app/src/main/java/com/kaajjo/libresudoku/ui/more/about/AboutScreen.kt

@@ -1,40 +1,78 @@
 package com.kaajjo.libresudoku.ui.more.about
 
+import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.ColumnScope
+import androidx.compose.foundation.layout.ExperimentalLayoutApi
+import androidx.compose.foundation.layout.FlowRow
+import androidx.compose.foundation.layout.FlowRowScope
 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.size
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.foundation.verticalScroll
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.outlined.Info
+import androidx.compose.material.icons.rounded.ContentCopy
+import androidx.compose.material.icons.rounded.Payments
 import androidx.compose.material3.ExperimentalMaterial3Api
-import androidx.compose.material3.HorizontalDivider
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Scaffold
 import androidx.compose.material3.Text
 import androidx.compose.material3.TopAppBar
+import androidx.compose.material3.surfaceColorAtElevation
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.vector.ImageVector
+import androidx.compose.ui.platform.LocalClipboardManager
 import androidx.compose.ui.platform.LocalUriHandler
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.res.vectorResource
+import androidx.compose.ui.text.AnnotatedString
 import androidx.compose.ui.unit.dp
 import com.kaajjo.libresudoku.BuildConfig
 import com.kaajjo.libresudoku.R
+import com.kaajjo.libresudoku.core.CARD_MIR
+import com.kaajjo.libresudoku.core.CRYPTO_BTC
+import com.kaajjo.libresudoku.core.CRYPTO_TON
+import com.kaajjo.libresudoku.core.CRYPTO_USDT_TRC20
+import com.kaajjo.libresudoku.core.GITHUB_REPOSITORY
+import com.kaajjo.libresudoku.core.TELEGRAM_CHANNEL
+import com.kaajjo.libresudoku.core.WEBLATE_ENGAGE
 import com.kaajjo.libresudoku.destinations.AboutLibrariesScreenDestination
 import com.kaajjo.libresudoku.ui.components.AnimatedNavigation
-import com.kaajjo.libresudoku.ui.components.PreferenceRow
+import com.kaajjo.libresudoku.ui.theme.ColorUtils.harmonizeWithPrimary
+import com.kaajjo.libresudoku.ui.theme.icons.Bitcoin
+import com.kaajjo.libresudoku.ui.theme.icons.ExteraGram
+import com.kaajjo.libresudoku.ui.theme.icons.LibreSudokuIconAlt
+import com.kaajjo.libresudoku.ui.theme.icons.Mir
+import com.kaajjo.libresudoku.ui.theme.icons.Ton
+import com.kaajjo.libresudoku.ui.theme.icons.Usdt
 import com.ramcosta.composedestinations.annotation.Destination
 import com.ramcosta.composedestinations.navigation.DestinationsNavigator
 
 @Destination(style = AnimatedNavigation::class)
-@OptIn(ExperimentalMaterial3Api::class)
+@OptIn(ExperimentalMaterial3Api::class, ExperimentalLayoutApi::class)
 @Composable
 fun AboutScreen(
     navigator: DestinationsNavigator
 ) {
+    val uriHandler = LocalUriHandler.current
+    val clipboardManager = LocalClipboardManager.current
+
     Scaffold(
         topBar = {
             TopAppBar(
@@ -49,59 +87,255 @@ fun AboutScreen(
                 }
             )
         }
-    ) {
+    ) { paddingValues ->
         Column(
             modifier = Modifier
-                .padding(it)
+                .padding(paddingValues)
                 .fillMaxWidth()
+                .verticalScroll(rememberScrollState())
         ) {
+
+            Box(
+                modifier = Modifier
+                    .clip(CircleShape)
+                    .background(MaterialTheme.colorScheme.surfaceContainerHighest)
+                    .align(Alignment.CenterHorizontally)
+            ) {
+                Icon(
+                    modifier = Modifier
+                        .padding(12.dp)
+                        .align(Alignment.Center)
+                        .size(48.dp),
+                    imageVector = Icons.Rounded.LibreSudokuIconAlt,
+                    contentDescription = null
+                )
+            }
+            Spacer(modifier = Modifier.height(16.dp))
             Row(
                 modifier = Modifier
-                    .fillMaxWidth()
-                    .padding(vertical = 8.dp),
+                    .fillMaxWidth(),
                 horizontalArrangement = Arrangement.Center,
                 verticalAlignment = Alignment.CenterVertically
             ) {
-                Icon(
-                    modifier = Modifier.size(56.dp),
-                    painter = painterResource(R.drawable.ic_launcher_foreground),
-                    contentDescription = null,
-                )
                 Text(
                     text = stringResource(R.string.app_name),
                     style = MaterialTheme.typography.titleLarge
                 )
             }
+            Spacer(modifier = Modifier.height(4.dp))
+            Box(
+                modifier = Modifier
+                    .clip(MaterialTheme.shapes.large)
+                    .background(MaterialTheme.colorScheme.surfaceContainerHighest)
+                    .align(Alignment.CenterHorizontally)
+            ) {
+                Text(
+                    "Версия ${BuildConfig.VERSION_NAME} (${BuildConfig.VERSION_CODE})",
+                    style = MaterialTheme.typography.labelMedium,
+                    modifier = Modifier.padding(vertical = 4.dp, horizontal = 8.dp)
+                )
+            }
 
-            HorizontalDivider()
-
-            PreferenceRow(
-                title = stringResource(R.string.about_version),
-                subtitle = BuildConfig.VERSION_NAME,
-                painter = painterResource(R.drawable.ic_outline_info_24),
-            )
+            FlowRow(
+                modifier = Modifier
+                    .padding(horizontal = 12.dp, vertical = 8.dp)
+                    .align(Alignment.CenterHorizontally)
+                    .fillMaxWidth(),
+                horizontalArrangement = Arrangement.spacedBy(8.dp),
+                verticalArrangement = Arrangement.spacedBy(8.dp),
+                maxItemsInEachRow = 3
+            ) {
+                AboutSectionBox(
+                    title = stringResource(R.string.about_github_project),
+                    subtitle = stringResource(R.string.about_github_source_code),
+                    icon = ImageVector.vectorResource(R.drawable.ic_github_24dp),
+                    onClick = { uriHandler.openUri(GITHUB_REPOSITORY) }
+                )
+                AboutSectionBox(
+                    title = stringResource(R.string.weblate),
+                    subtitle = stringResource(R.string.help_translate),
+                    icon = ImageVector.vectorResource(R.drawable.ic_weblate),
+                    onClick = { uriHandler.openUri(WEBLATE_ENGAGE) }
+                )
+                AboutSectionBox(
+                    title = stringResource(R.string.telegram),
+                    subtitle = stringResource(R.string.telegram_link),
+                    icon = Icons.Rounded.ExteraGram,
+                    onClick = { uriHandler.openUri(TELEGRAM_CHANNEL) }
+                )
+                AboutSectionBox(
+                    title = stringResource(R.string.libraries_licenses),
+                    subtitle = stringResource(R.string.libraries_licenses_title),
+                    icon = Icons.Outlined.Info,
+                    onClick = { navigator.navigate(AboutLibrariesScreenDestination()) }
+                )
+            }
 
-            val uriHandler = LocalUriHandler.current
-            PreferenceRow(
-                title = stringResource(R.string.about_github_project),
-                painter = painterResource(R.drawable.ic_github_24dp),
-                onClick = {
-                    uriHandler.openUri("https://github.com/kaajjo/Libre-Sudoku")
+            Box(
+                modifier = Modifier
+                    .padding(horizontal = 12.dp)
+                    .clip(MaterialTheme.shapes.large)
+                    .background(MaterialTheme.colorScheme.surfaceContainer)
+                    .fillMaxWidth()
+            ) {
+                Column(
+                    modifier = Modifier
+                        .padding(vertical = 12.dp, horizontal = 8.dp)
+                ) {
+                    Row(
+                        verticalAlignment = Alignment.CenterVertically
+                    ) {
+                        Spacer(modifier = Modifier.width(4.dp))
+                        Icon(
+                            imageVector = Icons.Rounded.Payments,
+                            contentDescription = null
+                        )
+                        Spacer(modifier = Modifier.width(8.dp))
+                        Text(
+                            text = stringResource(R.string.donation_title),
+                            style = MaterialTheme.typography.titleMedium
+                        )
+                    }
+                    Column(
+                        modifier = Modifier
+                            .padding(top = 4.dp)
+                            .clip(MaterialTheme.shapes.medium)
+                            .background(MaterialTheme.colorScheme.surfaceColorAtElevation(7.dp))
+                    ) {
+                        Text(
+                            text = stringResource(R.string.donation_description),
+                            style = MaterialTheme.typography.labelMedium,
+                            modifier = Modifier.padding(8.dp)
+                        )
+                    }
+                    Spacer(modifier = Modifier.height(8.dp))
+                    Column(
+                        verticalArrangement = Arrangement.spacedBy(8.dp)
+                    ) {
+                        DonationItem(
+                            title = stringResource(R.string.crypto_bitcoin),
+                            information = CRYPTO_BTC,
+                            icon = Icons.Filled.Bitcoin,
+                            onClick = { clipboardManager.setText(AnnotatedString(text = CRYPTO_BTC)) }
+                        )
+                        DonationItem(
+                            title = stringResource(R.string.crypto_ton),
+                            information = CRYPTO_TON,
+                            icon = Icons.Rounded.Ton,
+                            onClick = { clipboardManager.setText(AnnotatedString(text = CRYPTO_TON)) }
+                        )
+                        DonationItem(
+                            title = stringResource(R.string.crypto_usdt),
+                            information = CRYPTO_USDT_TRC20,
+                            icon = Icons.Rounded.Usdt,
+                            onClick = { clipboardManager.setText(AnnotatedString(text = CRYPTO_USDT_TRC20)) }
+                        )
+                        DonationItem(
+                            title = stringResource(R.string.card_mir),
+                            information = CARD_MIR,
+                            icon = Icons.Filled.Mir,
+                            onClick = { clipboardManager.setText(AnnotatedString(text = CARD_MIR.filter { it != ' ' })) }
+                        )
+                    }
                 }
-            )
+            }
+        }
+    }
+}
 
-            PreferenceRow(
-                title = stringResource(R.string.help_translate),
-                painter = painterResource(R.drawable.ic_weblate),
-                onClick = {
-                    uriHandler.openUri("https://hosted.weblate.org/engage/libresudoku/")
-                }
-            )
 
-            PreferenceRow(
-                title = stringResource(R.string.libraries_licenses_title),
-                painter = painterResource(R.drawable.ic_outline_info_24),
-                onClick = { navigator.navigate(AboutLibrariesScreenDestination()) }
+@OptIn(ExperimentalLayoutApi::class)
+@Composable
+fun FlowRowScope.AboutSectionBox(
+    title: String,
+    icon: ImageVector,
+    onClick: () -> Unit,
+    modifier: Modifier = Modifier,
+    subtitle: String? = null,
+    additionalContent: @Composable (ColumnScope.() -> Unit)? = null
+) {
+    Box(
+        modifier = modifier
+            .clip(MaterialTheme.shapes.large)
+            .background(MaterialTheme.colorScheme.surfaceContainer)
+            .fillMaxRowHeight()
+            .weight(1f)
+            .clickable(onClick = onClick)
+    ) {
+        Column(
+            modifier = Modifier.padding(16.dp)
+        ) {
+            Row(
+                verticalAlignment = Alignment.CenterVertically
+            ) {
+                Icon(
+                    imageVector = icon,
+                    contentDescription = null,
+                    tint = MaterialTheme.colorScheme.onSurface.harmonizeWithPrimary(),
+                    modifier = Modifier.size(24.dp)
+                )
+                Spacer(modifier = Modifier.width(8.dp))
+                Text(
+                    text = title,
+                    style = MaterialTheme.typography.titleLarge
+                )
+            }
+            if (subtitle != null) {
+                Spacer(modifier = Modifier.height(12.dp))
+                Text(
+                    text = subtitle
+                )
+            }
+            if (additionalContent != null) {
+                additionalContent()
+            }
+        }
+    }
+}
+
+@Composable
+fun DonationItem(
+    title: String,
+    information: String,
+    icon: ImageVector,
+    onClick: () -> Unit,
+    modifier: Modifier = Modifier
+) {
+    Row(
+        modifier = modifier
+            .clip(MaterialTheme.shapes.medium)
+            .background(MaterialTheme.colorScheme.surfaceContainerHighest.harmonizeWithPrimary())
+            .fillMaxWidth()
+            .clickable(onClick = onClick)
+            .padding(start = 12.dp, top = 8.dp, bottom = 8.dp),
+        verticalAlignment = Alignment.CenterVertically,
+        horizontalArrangement = Arrangement.SpaceBetween
+    ) {
+
+        Row(
+            modifier = Modifier.weight(1f),
+            verticalAlignment = Alignment.CenterVertically
+        ) {
+            Icon(
+                imageVector = icon,
+                contentDescription = null
+            )
+            Spacer(modifier = Modifier.width(8.dp))
+            Column {
+                Text(
+                    text = title,
+                    style = MaterialTheme.typography.labelLarge
+                )
+                Text(
+                    text = information,
+                    style = MaterialTheme.typography.bodySmall
+                )
+            }
+        }
+        IconButton(onClick = onClick) {
+            Icon(
+                imageVector = Icons.Rounded.ContentCopy,
+                contentDescription = null
             )
         }
     }

app/src/main/java/com/kaajjo/libresudoku/ui/theme/icons/Bitcoin.kt

@@ -0,0 +1,12 @@
+package com.kaajjo.libresudoku.ui.theme.icons
+
+import androidx.compose.material.icons.Icons
+import com.kaajjo.libresudoku.ui.util.iconFromXmlPath
+
+val Icons.Filled.Bitcoin by lazy {
+    iconFromXmlPath(
+        pathStr = "M11.5 11.5v-2.5c1.75 0 2.789.25 2.789 1.25 0 1.172-1.684 1.25-2.789 1.25zm0 .997v2.503c1.984 0 3.344-.188 3.344-1.258 0-1.148-1.469-1.245-3.344-1.245zm12.5-.497c0 6.627-5.373 12-12 12s-12-5.373-12-12 5.373-12 12-12 12 5.373 12 12zm-7 1.592c0-1.279-1.039-1.834-1.789-2.025.617-.223 1.336-1.138 1.046-2.228-.245-.922-1.099-1.74-3.257-1.813v-1.526h-1v1.5h-.5v-1.5h-1v1.5h-2.5v1.5h.817c.441 0 .683.286.683.702v4.444c0 .429-.253.854-.695.854h-.539l-.25 1.489h2.484v1.511h1v-1.511h.5v1.511h1v-1.5c2.656 0 4-1.167 4-2.908z",
+        viewportHeight = 24f,
+        viewportWidth = 24f
+    )
+}