Basic initial port of About screen to Compose

2025-11-12 12:08:56 +01:00 · 2022-04-23 12:05:00 -04:00
parent 070abd79ce
commit d6c87ec10e
9 changed files with 359 additions and 99 deletions
--- a/app/src/main/java/eu/kanade/presentation/components/LinkIcon.kt
+++ b/app/src/main/java/eu/kanade/presentation/components/LinkIcon.kt
@@ -0,0 +1,39 @@
+package eu.kanade.presentation.components
+
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.Icon
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.painter.Painter
+import androidx.compose.ui.platform.LocalUriHandler
+import androidx.compose.ui.unit.dp
+
+@Composable
+fun LinkIcon(
+    modifier: Modifier = Modifier,
+    label: String,
+    painter: Painter,
+    url: String,
+) {
+    val uriHandler = LocalUriHandler.current
+    LinkIcon(modifier, label, painter) { uriHandler.openUri(url) }
+}
+
+@Composable
+fun LinkIcon(
+    modifier: Modifier = Modifier,
+    label: String,
+    painter: Painter,
+    onClick: () -> Unit,
+) {
+    Icon(
+        modifier = modifier
+            .clickable(onClick = onClick)
+            .padding(16.dp),
+        painter = painter,
+        tint = MaterialTheme.colorScheme.primary,
+        contentDescription = label,
+    )
+}
--- a/app/src/main/java/eu/kanade/presentation/components/Preferences.kt
+++ b/app/src/main/java/eu/kanade/presentation/components/Preferences.kt
@@ -0,0 +1,89 @@
+package eu.kanade.presentation.components
+
+import androidx.compose.foundation.combinedClickable
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.requiredHeight
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.widthIn
+import androidx.compose.material3.Icon
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Text
+import androidx.compose.material3.contentColorFor
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.vector.ImageVector
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.style.TextOverflow
+import androidx.compose.ui.unit.dp
+import eu.kanade.presentation.util.horizontalPadding
+
+@Composable
+fun PreferenceRow(
+    title: String,
+    icon: ImageVector? = null,
+    onClick: () -> Unit = {},
+    onLongClick: () -> Unit = {},
+    subtitle: String? = null,
+    action: @Composable (() -> Unit)? = null,
+) {
+    val height = if (subtitle != null) 72.dp else 56.dp
+
+    // TODO: adjust text styles, especially subtitles
+    val textStyle = MaterialTheme.typography.titleMedium.copy(
+        color = contentColorFor(MaterialTheme.colorScheme.background),
+    )
+
+    Row(
+        modifier = Modifier
+            .fillMaxWidth()
+            .requiredHeight(height)
+            .combinedClickable(
+                onLongClick = onLongClick,
+                onClick = onClick
+            ),
+        verticalAlignment = Alignment.CenterVertically
+    ) {
+        if (icon != null) {
+            Icon(
+                imageVector = icon,
+                modifier = Modifier
+                    .padding(horizontal = horizontalPadding)
+                    .size(24.dp),
+                tint = MaterialTheme.colorScheme.primary,
+                contentDescription = null
+            )
+        }
+        Column(
+            Modifier
+                .padding(horizontal = horizontalPadding)
+                .weight(1f)
+        ) {
+            Text(
+                text = title,
+                overflow = TextOverflow.Ellipsis,
+                maxLines = 1,
+                style = textStyle,
+            )
+            if (subtitle != null) {
+                Text(
+                    text = subtitle,
+                    overflow = TextOverflow.Ellipsis,
+                    maxLines = 1,
+                    style = textStyle.copy(
+                        fontWeight = FontWeight.Normal,
+                    ),
+                )
+            }
+        }
+        if (action != null) {
+            Box(Modifier.widthIn(min = 56.dp)) {
+                action()
+            }
+        }
+    }
+}
--- a/app/src/main/java/eu/kanade/presentation/more/AboutScreen.kt
+++ b/app/src/main/java/eu/kanade/presentation/more/AboutScreen.kt
@@ -0,0 +1,144 @@
+package eu.kanade.presentation.more
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.outlined.Public
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.vector.rememberVectorPainter
+import androidx.compose.ui.input.nestedscroll.NestedScrollConnection
+import androidx.compose.ui.input.nestedscroll.nestedScroll
+import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.platform.LocalUriHandler
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
+import eu.kanade.presentation.components.LinkIcon
+import eu.kanade.presentation.components.PreferenceRow
+import eu.kanade.tachiyomi.BuildConfig
+import eu.kanade.tachiyomi.R
+import eu.kanade.tachiyomi.data.updater.RELEASE_URL
+import eu.kanade.tachiyomi.util.CrashLogUtil
+import eu.kanade.tachiyomi.util.system.copyToClipboard
+
+@Composable
+fun AboutScreen(
+    nestedScrollInterop: NestedScrollConnection,
+    checkVersion: () -> Unit,
+    getFormattedBuildTime: () -> String,
+    onClickLicenses: () -> Unit,
+) {
+    val context = LocalContext.current
+    val uriHandler = LocalUriHandler.current
+
+    LazyColumn(
+        modifier = Modifier.nestedScroll(nestedScrollInterop),
+    ) {
+        item {
+            LogoHeader()
+        }
+
+        item {
+            PreferenceRow(
+                title = stringResource(R.string.version),
+                subtitle = when {
+                    BuildConfig.DEBUG -> {
+                        "Debug ${BuildConfig.COMMIT_SHA} (${getFormattedBuildTime()})"
+                    }
+                    BuildConfig.PREVIEW -> {
+                        "Preview r${BuildConfig.COMMIT_COUNT} (${BuildConfig.COMMIT_SHA}, ${getFormattedBuildTime()})"
+                    }
+                    else -> {
+                        "Stable ${BuildConfig.VERSION_NAME} (${getFormattedBuildTime()})"
+                    }
+                },
+                onClick = {
+                    val deviceInfo = CrashLogUtil(context).getDebugInfo()
+                    context.copyToClipboard("Debug information", deviceInfo)
+                },
+            )
+        }
+
+        if (BuildConfig.INCLUDE_UPDATER) {
+            item {
+                PreferenceRow(
+                    title = stringResource(R.string.check_for_updates),
+                    onClick = {
+                        checkVersion()
+                    },
+                )
+            }
+        }
+        if (!BuildConfig.DEBUG) {
+            item {
+                PreferenceRow(
+                    title = stringResource(R.string.whats_new),
+                    onClick = {
+                        uriHandler.openUri(RELEASE_URL)
+                    },
+                )
+            }
+        }
+
+        item {
+            PreferenceRow(
+                title = stringResource(R.string.help_translate),
+                onClick = { uriHandler.openUri("https://tachiyomi.org/help/contribution/#translation") },
+            )
+        }
+
+        item {
+            PreferenceRow(
+                title = stringResource(R.string.licenses),
+                onClick = onClickLicenses,
+            )
+        }
+
+        item {
+            PreferenceRow(
+                title = stringResource(R.string.privacy_policy),
+                onClick = { uriHandler.openUri("https://tachiyomi.org/privacy") },
+            )
+        }
+
+        item {
+            Row(
+                modifier = Modifier.fillMaxWidth(),
+                horizontalArrangement = Arrangement.Center,
+            ) {
+                LinkIcon(
+                    label = stringResource(R.string.website),
+                    painter = rememberVectorPainter(Icons.Outlined.Public),
+                    url = "https://tachiyomi.org",
+                )
+                LinkIcon(
+                    label = "Discord",
+                    painter = painterResource(R.drawable.ic_discord_24dp),
+                    url = "https://discord.gg/tachiyomi",
+                )
+                LinkIcon(
+                    label = "Twitter",
+                    painter = painterResource(R.drawable.ic_twitter_24dp),
+                    url = "https://twitter.com/tachiyomiorg",
+                )
+                LinkIcon(
+                    label = "Facebook",
+                    painter = painterResource(R.drawable.ic_facebook_24dp),
+                    url = "https://facebook.com/tachiyomiorg",
+                )
+                LinkIcon(
+                    label = "Reddit",
+                    painter = painterResource(R.drawable.ic_reddit_24dp),
+                    url = "https://www.reddit.com/r/Tachiyomi",
+                )
+                LinkIcon(
+                    label = "GitHub",
+                    painter = painterResource(R.drawable.ic_github_24dp),
+                    url = "https://github.com/tachiyomiorg",
+                )
+            }
+        }
+    }
+}
--- a/app/src/main/java/eu/kanade/presentation/more/LicensesScreen.kt
+++ b/app/src/main/java/eu/kanade/presentation/more/LicensesScreen.kt
@@ -0,0 +1,28 @@
+package eu.kanade.presentation.more
+
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.contentColorFor
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.input.nestedscroll.NestedScrollConnection
+import androidx.compose.ui.input.nestedscroll.nestedScroll
+import com.mikepenz.aboutlibraries.ui.compose.LibrariesContainer
+import com.mikepenz.aboutlibraries.ui.compose.LibraryDefaults
+
+@Composable
+fun LicensesScreen(
+    nestedScrollInterop: NestedScrollConnection,
+) {
+    LibrariesContainer(
+        modifier = Modifier
+            .fillMaxSize()
+            .nestedScroll(nestedScrollInterop),
+        colors = LibraryDefaults.libraryColors(
+            backgroundColor = MaterialTheme.colorScheme.background,
+            contentColor = contentColorFor(MaterialTheme.colorScheme.background),
+            badgeBackgroundColor = MaterialTheme.colorScheme.primary,
+            badgeContentColor = contentColorFor(MaterialTheme.colorScheme.primary),
+        ),
+    )
+}
--- a/app/src/main/java/eu/kanade/presentation/more/LogoHeader.kt
+++ b/app/src/main/java/eu/kanade/presentation/more/LogoHeader.kt
@@ -0,0 +1,36 @@
+package eu.kanade.presentation.more
+
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.material3.Divider
+import androidx.compose.material3.Icon
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Surface
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.unit.dp
+import eu.kanade.tachiyomi.R
+
+@Composable
+fun LogoHeader() {
+    Column {
+        Surface(
+            modifier = Modifier.fillMaxWidth()
+        ) {
+            Icon(
+                painter = painterResource(R.drawable.ic_tachi),
+                contentDescription = null,
+                tint = MaterialTheme.colorScheme.onSurface,
+                modifier = Modifier
+                    .padding(32.dp)
+                    .size(56.dp),
+            )
+        }
+
+        // TODO: proper color
+        Divider()
+    }
+}