diff --git a/composeApp/src/commonMain/kotlin/mg/dot/feufaro/ui/QRDisplay.kt b/composeApp/src/commonMain/kotlin/mg/dot/feufaro/ui/QRDisplay.kt index ffb8731..28f2ce6 100644 --- a/composeApp/src/commonMain/kotlin/mg/dot/feufaro/ui/QRDisplay.kt +++ b/composeApp/src/commonMain/kotlin/mg/dot/feufaro/ui/QRDisplay.kt @@ -5,7 +5,9 @@ import androidx.compose.foundation.Image import androidx.compose.foundation.background import androidx.compose.foundation.clickable import androidx.compose.foundation.layout.* +import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.material3.Card +import androidx.compose.material3.CardDefaults import androidx.compose.material3.CircularProgressIndicator import androidx.compose.material3.MaterialTheme import androidx.compose.material3.Text @@ -14,14 +16,20 @@ import androidx.compose.runtime.getValue import androidx.compose.runtime.produceState import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier +import androidx.compose.ui.draw.clip import androidx.compose.ui.draw.shadow +import androidx.compose.ui.graphics.Color import androidx.compose.ui.graphics.ImageBitmap import androidx.compose.ui.text.font.FontWeight import androidx.compose.ui.unit.dp +import androidx.compose.ui.unit.sp +import feufaro.composeapp.generated.resources.Res +import feufaro.composeapp.generated.resources.compose_multiplatform import mg.dot.feufaro.FileRepository import mg.dot.feufaro.solfa.ColorPrefixA import mg.dot.feufaro.solfa.ColorPrefixB import mg.dot.feufaro.solfa.ColorValue +import org.jetbrains.compose.resources.painterResource import java.io.ByteArrayOutputStream import java.util.zip.GZIPOutputStream import kotlin.io.encoding.Base64 @@ -47,53 +55,91 @@ fun QRDisplay(sharedScreenModel: SharedScreenModel, fileRepository: FileReposito val compressedData = Base64.UrlSafe.encode(compressedBytes).trim('=') val uri = "feufaro://song?file=${compressedData}&name=$fileName" - value = generateQRCode(uri, size = 800) + value = generateQRCode(uri, size = 1200) } } Box( modifier = Modifier .fillMaxSize() - .background(MaterialTheme.colorScheme.scrim.copy(alpha = 0.5f)) // Fond semi-transparent + .background(Color.Black.copy(alpha = 0.6f)) // Assombrissement moderne .clickable { sharedScreenModel.toggleQRCodeVisibility() } // Fermer au clic .imePadding() .systemBarsPadding(), contentAlignment = Alignment.Center ) { Card( - modifier = Modifier.wrapContentSize().shadow(16.dp, shape = MaterialTheme.shapes.large) + modifier = Modifier + .width(400.dp) + .wrapContentHeight() + .shadow(24.dp, shape = RoundedCornerShape(28.dp)), + shape = RoundedCornerShape(28.dp), + colors = CardDefaults.cardColors(containerColor = MaterialTheme.colorScheme.surface) ) { Column( horizontalAlignment = Alignment.CenterHorizontally, modifier = Modifier.padding(24.dp) ) { - Text("Scanner pour ouvrir ce partition") - if (qrCodeImage != null) { - Image( - bitmap = qrCodeImage!!, - contentDescription = "Code QR du fichier actif", - modifier = Modifier.size(400.dp) + Text( + text = "Partager la partition", + style = MaterialTheme.typography.titleLarge.copy( + fontWeight = FontWeight.Bold, + letterSpacing = 0.5.sp ) + ) + + Text( + text = "Scannez pour ouvrir instantanément", + style = MaterialTheme.typography.bodyMedium.copy( + color = MaterialTheme.colorScheme.onSurfaceVariant + ), + modifier = Modifier.padding(top = 4.dp, bottom = 24.dp) + ) + + if (qrCodeImage != null) { + Box( + contentAlignment = Alignment.Center, + modifier = Modifier + .size(350.dp) + .clip(RoundedCornerShape(16.dp)) + .background(Color.White) + .padding(5.dp) + ) { + Image( + bitmap = qrCodeImage!!, + contentDescription = "Code QR du fichier actif", + modifier = Modifier.fillMaxSize() + ) + + Box( + modifier = Modifier + .size(54.dp) + .background(Color.White, shape = RoundedCornerShape(12.dp)) + .padding(4.dp), + contentAlignment = Alignment.Center + ) { + Image( + painter = painterResource(Res.drawable.compose_multiplatform), + contentDescription = "App Logo", + modifier = Modifier + .fillMaxSize() + .clip(RoundedCornerShape(8.dp)) + ) + } + } } else { Box( - modifier = Modifier - .size(400.dp) - .padding(16.dp), + modifier = Modifier.size(280.dp), contentAlignment = Alignment.Center ) { - Column( - horizontalAlignment = Alignment.CenterHorizontally, - verticalArrangement = Arrangement.Center - ) { + Column(horizontalAlignment = Alignment.CenterHorizontally) { CircularProgressIndicator( modifier = Modifier.size(48.dp), color = ColorPrefixA, strokeWidth = 4.dp, trackColor = ColorPrefixB.copy(alpha = 0.2f) ) - Spacer(modifier = Modifier.height(16.dp)) - Text( text = "Génération du QR Code...", style = MaterialTheme.typography.bodyMedium.copy( @@ -104,6 +150,8 @@ fun QRDisplay(sharedScreenModel: SharedScreenModel, fileRepository: FileReposito } } } + + Spacer(modifier = Modifier.height(12.dp)) } } }