feat: Improving AboutScreen

This commit is contained in:
Myzel394 2023-10-25 18:19:40 +02:00
parent d6a95c4ce1
commit a024ef9154
No known key found for this signature in database
GPG Key ID: 79CC92F37B3E1A2B
4 changed files with 136 additions and 3 deletions

View File

@ -39,13 +39,13 @@ fun AboutTile(
modifier = Modifier
.padding(horizontal = 32.dp, vertical = 48.dp)
.fillMaxWidth()
.clip(MaterialTheme.shapes.medium)
.semantics {
contentDescription = label
}
.clickable {
navController.navigate(Screen.About.route)
}
.clip(MaterialTheme.shapes.medium)
.background(MaterialTheme.colorScheme.surfaceVariant)
.padding(16.dp),
horizontalArrangement = Arrangement.SpaceBetween,

View File

@ -2,6 +2,7 @@ package app.myzel394.alibi.ui.screens
import androidx.compose.foundation.Image
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
@ -13,6 +14,14 @@ import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.ArrowBack
import androidx.compose.material.icons.filled.CurrencyBitcoin
import androidx.compose.material.icons.filled.CurrencyFranc
import androidx.compose.material.icons.filled.CurrencyLira
import androidx.compose.material.icons.filled.CurrencyPound
import androidx.compose.material.icons.filled.CurrencyRuble
import androidx.compose.material.icons.filled.CurrencyRupee
import androidx.compose.material.icons.filled.CurrencyYen
import androidx.compose.material.icons.filled.CurrencyYuan
import androidx.compose.material.icons.filled.OpenInNew
import androidx.compose.material3.ButtonDefaults
import androidx.compose.material3.ExperimentalMaterial3Api
@ -25,18 +34,29 @@ import androidx.compose.material3.TopAppBar
import androidx.compose.material3.TopAppBarDefaults
import androidx.compose.material3.rememberTopAppBarState
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.saveable.rememberSaveable
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.ColorFilter
import androidx.compose.ui.input.nestedscroll.nestedScroll
import androidx.compose.ui.platform.LocalUriHandler
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.semantics.contentDescription
import androidx.compose.ui.semantics.semantics
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp
import androidx.navigation.NavController
import app.myzel394.alibi.R
import app.myzel394.alibi.BuildConfig
import kotlin.random.Random
const val GITHUB_URL = "https://github.com/Myzel394/Alibi"
const val CROWDIN_URL = "https://crowdin.com/project/alibi"
@OptIn(ExperimentalMaterial3Api::class)
@Composable
@ -46,6 +66,7 @@ fun AboutScreen(
val scrollBehavior = TopAppBarDefaults.exitUntilCollapsedScrollBehavior(
rememberTopAppBarState()
)
val uriHandler = LocalUriHandler.current
Scaffold(
topBar = {
@ -115,22 +136,30 @@ fun AboutScreen(
stringResource(R.string.ui_about_contribute_message),
style = MaterialTheme.typography.titleMedium,
)
val githubLabel = stringResource(R.string.accessibility_open_in_browser, GITHUB_URL)
Row(
modifier = Modifier
.fillMaxWidth()
.clip(MaterialTheme.shapes.medium)
.semantics {
contentDescription = githubLabel
}
.clickable {
uriHandler.openUri(GITHUB_URL)
}
.background(
MaterialTheme.colorScheme.surfaceVariant
)
.padding(16.dp),
horizontalArrangement = Arrangement.SpaceEvenly,
horizontalArrangement = Arrangement.SpaceBetween,
verticalAlignment = Alignment.CenterVertically,
) {
Image(
painter = painterResource(R.drawable.ic_github),
colorFilter = ColorFilter.tint(MaterialTheme.colorScheme.onSurfaceVariant),
contentDescription = null,
modifier = Modifier.size(ButtonDefaults.IconSize.times(1.5f))
modifier = Modifier.size(ButtonDefaults.IconSize.times(1.2f))
)
Text(
stringResource(R.string.ui_about_contribute_development),
@ -142,6 +171,83 @@ fun AboutScreen(
modifier = Modifier.size(ButtonDefaults.IconSize)
)
}
val crowdinLabel =
stringResource(R.string.accessibility_open_in_browser, CROWDIN_URL)
Row(
modifier = Modifier
.fillMaxWidth()
.clip(MaterialTheme.shapes.medium)
.semantics {
contentDescription = crowdinLabel
}
.clickable {
uriHandler.openUri(CROWDIN_URL)
}
.background(
MaterialTheme.colorScheme.surfaceVariant
)
.padding(16.dp),
horizontalArrangement = Arrangement.SpaceBetween,
verticalAlignment = Alignment.CenterVertically,
) {
Image(
painter = painterResource(R.drawable.ic_crowdin),
colorFilter = ColorFilter.tint(MaterialTheme.colorScheme.onSurfaceVariant),
contentDescription = null,
modifier = Modifier.size(ButtonDefaults.IconSize.times(1.2f))
)
Text(
stringResource(R.string.ui_about_contribute_translation),
fontWeight = FontWeight.Bold,
)
Icon(
Icons.Default.OpenInNew,
contentDescription = null,
modifier = Modifier.size(ButtonDefaults.IconSize)
)
}
var donationsOpened by rememberSaveable {
mutableStateOf(false)
}
val donationLabel = stringResource(R.string.ui_about_contribute_donatation)
Row(
modifier = Modifier
.fillMaxWidth()
.clip(MaterialTheme.shapes.medium)
.semantics {
contentDescription = donationLabel
}
.clickable {
donationsOpened = !donationsOpened
}
.background(
MaterialTheme.colorScheme.surfaceVariant
)
.padding(16.dp),
horizontalArrangement = Arrangement.spacedBy(8.dp),
verticalAlignment = Alignment.CenterVertically,
) {
Icon(
listOf(
Icons.Default.CurrencyBitcoin,
Icons.Default.CurrencyFranc,
Icons.Default.CurrencyLira,
Icons.Default.CurrencyPound,
Icons.Default.CurrencyRuble,
Icons.Default.CurrencyRupee,
Icons.Default.CurrencyYen,
Icons.Default.CurrencyYuan,
).asSequence().shuffled().first(),
contentDescription = null,
modifier = Modifier.size(ButtonDefaults.IconSize.times(1.2f))
)
Text(
stringResource(R.string.ui_about_contribute_donatation),
fontWeight = FontWeight.Bold,
)
}
}
}
}

View File

@ -0,0 +1,24 @@
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="248dp"
android:height="248dp"
android:viewportWidth="248"
android:viewportHeight="248">
<path
android:pathData="M163.02,177.31C157.02,177.31 151.67,175.51 147.24,171.99C141.95,167.85 137.74,161.67 137.6,154.4C137.52,150.73 141.52,150.73 141.52,150.73C141.52,150.73 148.02,150.65 151.17,150.65C154.31,150.73 155.24,155.11 155.38,156.2C156.6,166.05 162.17,170.35 166.45,172.31C169.02,173.48 168.38,177.16 163.02,177.31Z"
android:fillColor="#263238"/>
<path
android:pathData="M109.1,127.25C103.82,126.63 95.96,126.08 90.89,124.84C82.68,122.82 82.9,115.44 83.25,113.03C84.25,105.8 86.89,99.12 90.96,92.91C96.03,85.29 103.32,78.61 112.67,73.17C130.24,62.99 154.8,57.32 181.79,57.32C201.57,57.32 222.2,59.89 222.42,59.89C224.27,60.12 225.63,61.91 225.56,63.93C225.49,65.95 224.06,67.5 222.2,67.66C219.2,67.58 216.28,67.58 213.49,67.58C186,67.58 166.44,71.31 151.87,79.39C137.52,87.31 127.52,99.43 120.74,117.38C120.03,118.93 117.67,128.18 109.1,127.25Z"
android:fillColor="#263238"/>
<path
android:pathData="M133.09,201.33C119.45,201.33 106.59,195.44 96.86,184.68C88.62,175.57 83.65,166.39 82.73,154.61C82.16,146.92 85.57,144.25 90.19,144.72C93.38,145.03 103.33,145.5 109.01,146.68C113.27,147.54 116.11,149.9 116.82,154.77C120.59,180.68 136.92,190.88 146.65,193.08C148.36,193.48 149.43,194.57 149.35,196.54C149.28,198.42 148.01,199.99 146.3,200.3C141.97,201.01 137.42,201.33 133.09,201.33Z"
android:fillColor="#263238"/>
<path
android:pathData="M94.22,224.32C84.55,224.32 75.08,222.78 72.38,222.3C60.99,220.27 51.46,216.79 43.28,211.6C23.71,199.2 11.9,177.33 10.47,151.4C10.12,145.24 9.34,133.49 23.99,134.38C30.04,134.71 39.65,137.62 46.41,139.57C54.8,141.92 58.86,148.4 58.86,154.8C58.86,191.34 91.95,215.49 106.39,215.49C112.58,215.49 110.31,222.13 107.6,222.86C102.83,224.16 96.71,224.32 94.22,224.32Z"
android:fillColor="#263238"/>
<path
android:pathData="M43.75,116.95C38.03,115.92 32.44,113.55 27.01,112.21C10.19,108.03 13.05,91.07 14.63,86.41C29.94,41.36 78.52,26.29 117.73,22.26C154.65,18.47 193.29,21.39 229.28,31.41C232.22,32.2 241.3,34.41 236.08,39.86C232.79,43.25 219.98,39.7 216.55,39.46C195.44,37.88 174.54,37.65 153.51,40.88C131.26,44.28 108.36,51.3 89.97,66.13C81.1,73.31 73.3,82.47 68.08,93.28C66.72,96.12 65.64,98.96 64.71,101.8C63.78,104.8 60.28,119.87 43.75,116.95Z"
android:fillColor="#263238"/>
<path
android:pathData="M137.89,125.64C141.04,111.54 155.04,89.19 198.38,90.74C208.32,91.04 203.77,97.82 198.87,97.67C174.37,96.82 162.74,112.62 156.65,128.64C154.69,133.8 150.21,134.58 144.61,133.65C140.69,132.96 136.42,132.5 137.89,125.64Z"
android:fillColor="#263238"/>
</vector>

View File

@ -92,4 +92,7 @@
<string name="ui_about_contribute_title">Support Alibi</string>
<string name="ui_about_contribute_message">In my free time I develop Alibi and other free open source software. It would mean the world to me if you could help me in any way :)</string>
<string name="ui_about_contribute_development">Developing features or fixing bugs</string>
<string name="accessibility_open_in_browser">Open link in browser: %s</string>
<string name="ui_about_contribute_translation">Translate Alibi into your language</string>
<string name="ui_about_contribute_donatation">Make a donation</string>
</resources>