reya/coop-mobile
1
0
Fork 0
Code Issues Pull Requests Releases 4 Wiki Activity

update onboarding screen

Browse Source
This commit is contained in:
Ren Amamiya
2026-05-07 15:27:47 +07:00
parent 8b5a8b0e48
commit 7acff87d9b
3 changed files with 201 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
composeApp/src/androidMain/composeResources/drawable/coop.xml Normal file
View File

@@ -0,0 +1,32 @@
<!--
~ Copyright (C) 2026 The Android Open Source Project
~
~ Licensed under the Apache License, Version 2.0 (the "License");
~ you may not use this file except in compliance with the License.
~ You may obtain a copy of the License at
~
~ http://www.apache.org/licenses/LICENSE-2.0
~
~ Unless required by applicable law or agreed to in writing, software
~ distributed under the License is distributed on an "AS IS" BASIS,
~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
~ See the License for the specific language governing permissions and
~ limitations under the License.
-->
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="750dp"
android:height="750dp"
android:viewportWidth="750"
android:viewportHeight="750">
<path
android:pathData="M353.02,681C488.9,681 599.05,570.85 599.05,434.98C599.05,422.63 589.03,412.61 576.68,412.61H129.37C117.01,412.61 107,422.63 107,434.98C107,570.85 217.15,681 353.02,681Z"
android:fillColor="#000000"
android:fillType="evenOdd"/>
<path
android:pathData="M461.72,151.67L317.71,156.11C317.71,156.11 307.55,142.16 308.32,132.29C309.29,119.83 317.72,109.73 328.88,105.93C328.22,103.04 327.53,100.13 327.77,97.03C329.07,80.3 343.74,67.8 360.51,69.09C370.4,69.85 378.36,75.51 383.33,83.23C389.44,76.36 398.21,72.01 408.1,72.77C423.68,73.97 435.15,86.83 435.69,102.04C437.83,101.74 439.89,101.08 442.14,101.26C458.92,102.55 471.44,117.15 470.14,133.88C469.51,142.02 461.72,151.67 461.72,151.67Z"
android:fillColor="#000000"/>
<path
android:pathData="M150.95,389.09C150.95,253.21 261.1,143.06 396.98,143.06C532.84,143.06 643,253.21 643,389.09C643,401.44 632.98,411.45 620.63,411.45H173.32C160.96,411.45 150.95,401.44 150.95,389.09ZM505.67,259.28C504.32,258.9 502.97,258.71 501.6,258.71C500.23,258.71 498.88,258.9 497.54,259.28C496.19,259.66 494.89,260.23 493.62,260.98C492.36,261.73 491.16,262.65 490.02,263.74C488.88,264.83 487.83,266.07 486.86,267.45C485.89,268.84 485.03,270.35 484.27,271.98C483.51,273.61 482.87,275.33 482.34,277.14C481.82,278.95 481.43,280.82 481.16,282.74C480.89,284.66 480.76,286.6 480.76,288.57C480.76,290.53 480.89,292.47 481.16,294.39C481.43,296.31 481.82,298.17 482.34,299.99C482.87,301.8 483.51,303.52 484.27,305.15C485.03,306.78 485.89,308.29 486.86,309.67C487.83,311.06 488.88,312.3 490.02,313.39C491.16,314.48 492.36,315.4 493.62,316.14C494.89,316.89 496.19,317.46 497.54,317.85C498.88,318.23 500.23,318.42 501.6,318.42C502.97,318.42 504.32,318.23 505.67,317.85C507.01,317.46 508.31,316.89 509.57,316.14C510.84,315.4 512.05,314.48 513.18,313.39C514.32,312.3 515.38,311.06 516.34,309.67C517.31,308.29 518.17,306.78 518.93,305.15C519.7,303.52 520.33,301.8 520.86,299.99C521.38,298.17 521.78,296.31 522.04,294.39C522.31,292.47 522.45,290.53 522.45,288.57C522.45,286.6 522.31,284.66 522.04,282.74C521.78,280.82 521.38,278.95 520.86,277.14C520.33,275.33 519.7,273.61 518.93,271.98C518.17,270.35 517.31,268.84 516.34,267.45C515.38,266.07 514.32,264.83 513.18,263.74C512.05,262.65 510.84,261.73 509.57,260.98C508.31,260.23 507.01,259.66 505.67,259.28Z"
android:fillColor="#000000"
android:fillType="evenOdd"/>
</vector>

9
composeApp/src/androidMain/composeResources/drawable/ic_scanner.xml Normal file
View File

@@ -0,0 +1,9 @@
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="960"
android:viewportHeight="960">
<path
android:fillColor="#000000"
android:pathData="M80,280L80,80L280,80L280,160L160,160L160,280L80,280ZM80,880L80,680L160,680L160,800L280,800L280,880L80,880ZM680,880L680,800L800,800L800,680L880,680L880,880L680,880ZM800,280L800,160L680,160L680,80L880,80L880,280L800,280ZM700,700L760,700L760,760L700,760L700,700ZM700,580L760,580L760,640L700,640L700,580ZM640,640L700,640L700,700L640,700L640,640ZM580,700L640,700L640,760L580,760L580,700ZM520,640L580,640L580,700L520,700L520,640ZM640,520L700,520L700,580L640,580L640,520ZM580,580L640,580L640,640L580,640L580,580ZM520,520L580,520L580,580L520,580L520,520ZM760,200L760,440L520,440L520,200L760,200ZM440,520L440,760L200,760L200,520L440,520ZM440,200L440,440L200,440L200,200L440,200ZM380,700L380,580L260,580L260,700L380,700ZM380,380L380,260L260,260L260,380L380,380ZM700,380L700,260L580,260L580,380L700,380Z" />
</vector>

169
composeApp/src/androidMain/kotlin/su/reya/coop/screens/OnboardingScreen.kt
View File

@@ -1,29 +1,180 @@
package su.reya.coop.screens
import androidx.compose.foundation.Canvas
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.fillMaxSize
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.material3.Button
import androidx.compose.material3.ButtonDefaults
import androidx.compose.material3.ExperimentalMaterial3ExpressiveApi
import androidx.compose.material3.FilledTonalButton
import androidx.compose.material3.FilledTonalIconButton
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButtonDefaults
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Scaffold
import androidx.compose.material3.SnackbarHost
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.geometry.Size
import androidx.compose.ui.graphics.ColorFilter
import androidx.compose.ui.graphics.drawscope.rotate
import androidx.compose.ui.graphics.drawscope.translate
import androidx.compose.ui.graphics.painter.Painter
import androidx.compose.ui.unit.dp
import coop.composeapp.generated.resources.Res
import coop.composeapp.generated.resources.coop
import coop.composeapp.generated.resources.ic_scanner
import org.jetbrains.compose.resources.painterResource
import su.reya.coop.LocalSnackbarHostState
@OptIn(ExperimentalMaterial3ExpressiveApi::class)
@Composable
fun OnboardingScreen(onOpenImport: () -> Unit, onOpenNew: () -> Unit) {
Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
Column(horizontalAlignment = Alignment.CenterHorizontally) {
Text("Onboarding Screen")
Spacer(modifier = Modifier.height(16.dp))
Button(onClick = onOpenImport) {
Text("Import")
val snackbarHostState = LocalSnackbarHostState.current
val logoPainter = painterResource(Res.drawable.coop)
Scaffold(
containerColor = MaterialTheme.colorScheme.surfaceContainer,
snackbarHost = { SnackbarHost(snackbarHostState) },
content = { innerPadding ->
Box(
modifier = Modifier
.fillMaxSize()
.padding(bottom = innerPadding.calculateBottomPadding())
) {
LogoRepeatingBackground(
painter = logoPainter,
logosPerRow = 6,
rotationDegrees = -25f,
horizontalOffset = 0.5f
)
Column(
modifier = Modifier.fillMaxSize(),
) {
Box(
modifier = Modifier
.weight(2f)
.fillMaxWidth(),
contentAlignment = Alignment.Center,
) {
// TODO: Add headline
}
Box(
modifier = Modifier
.weight(1f)
.fillMaxWidth()
.padding(bottom = innerPadding.calculateBottomPadding()),
contentAlignment = Alignment.BottomEnd,
) {
Column(
modifier = Modifier.padding(horizontal = innerPadding.calculateBottomPadding()),
) {
Button(
onClick = onOpenNew,
modifier = Modifier
.fillMaxWidth()
.size(ButtonDefaults.LargeContainerHeight),
) {
Text(
text = "Start messaging",
style = MaterialTheme.typography.titleLargeEmphasized,
)
}
Spacer(modifier = Modifier.size(16.dp))
Row(
modifier = Modifier.fillMaxWidth(),
) {
FilledTonalButton(
onClick = onOpenImport,
modifier = Modifier
.weight(2f)
.height(ButtonDefaults.MediumContainerHeight),
) {
Text(
text = "Import identity",
style = MaterialTheme.typography.titleMediumEmphasized,
)
}
Spacer(modifier = Modifier.width(8.dp))
FilledTonalIconButton(
onClick = onOpenImport,
modifier = Modifier
.weight(1f)
.height(ButtonDefaults.MediumContainerHeight),
colors = IconButtonDefaults.filledTonalIconButtonColors(
containerColor = MaterialTheme.colorScheme.tertiaryContainer,
contentColor = MaterialTheme.colorScheme.onTertiaryContainer
)
) {
Icon(
painter = painterResource(Res.drawable.ic_scanner),
contentDescription = "Scan QR"
)
}
}
}
}
}
}
Spacer(modifier = Modifier.height(8.dp))
Button(onClick = onOpenNew) {
Text("New")
}
)
}
@Composable
fun LogoRepeatingBackground(
painter: Painter,
logosPerRow: Int,
rotationDegrees: Float = 0f,
horizontalOffset: Float = 0.5f
) {
val tintColor = MaterialTheme.colorScheme.primary
Canvas(modifier = Modifier.fillMaxSize()) {
val canvasWidth = size.width
val canvasHeight = size.height
val logoSize = canvasWidth / logosPerRow
val offsetX = logoSize * horizontalOffset
val extraPadding = 2
val cols = logosPerRow + (extraPadding * 2)
val rows = (canvasHeight / logoSize).toInt() + 1
for (row in 0 until rows) {
for (col in -extraPadding until cols) {
val px = (col * logoSize) - offsetX
val py = row * logoSize
rotate(
degrees = rotationDegrees,
pivot = Offset(
px + logoSize / 2,
py + logoSize / 2
)
) {
translate(left = px, top = py) {
with(painter) {
draw(
size = Size(logoSize, logoSize),
alpha = 0.1f,
colorFilter = ColorFilter.tint(
tintColor
)
)
}
}
}
}
}
}