From 71edb91bf3cac9c159acd908f34861cd32ffb01d Mon Sep 17 00:00:00 2001 From: "maxence.guitard" Date: Thu, 21 Mar 2024 01:06:49 +0100 Subject: [PATCH] feat : Multipage responsive --- .../com/example/mathseduc/MultiActivity.kt | 13 +-- .../example/mathseduc/ui/activity_multi.kt | 82 ++++++++++++------- 2 files changed, 53 insertions(+), 42 deletions(-) diff --git a/Android/app/src/main/java/com/example/mathseduc/MultiActivity.kt b/Android/app/src/main/java/com/example/mathseduc/MultiActivity.kt index f56166b..9ac22b9 100644 --- a/Android/app/src/main/java/com/example/mathseduc/MultiActivity.kt +++ b/Android/app/src/main/java/com/example/mathseduc/MultiActivity.kt @@ -3,25 +3,14 @@ package com.example.mathseduc import android.os.Bundle import androidx.activity.ComponentActivity import androidx.activity.compose.setContent -import androidx.compose.runtime.Composable -import androidx.compose.ui.tooling.preview.Preview import com.example.mathseduc.ui.MultiPage -import com.example.mathseduc.ui.theme.MathsEducTheme class MultiActivity : ComponentActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { - MultiPage() + MultiPage(activity = this@MultiActivity) } } -} - -@Preview(showBackground = true) -@Composable -fun MultiPreview() { - MathsEducTheme { - MultiPage() - } } \ No newline at end of file diff --git a/Android/app/src/main/java/com/example/mathseduc/ui/activity_multi.kt b/Android/app/src/main/java/com/example/mathseduc/ui/activity_multi.kt index f326b9c..1c5897d 100644 --- a/Android/app/src/main/java/com/example/mathseduc/ui/activity_multi.kt +++ b/Android/app/src/main/java/com/example/mathseduc/ui/activity_multi.kt @@ -2,29 +2,34 @@ package com.example.mathseduc.ui import android.content.Context import android.content.Intent +import android.content.res.Configuration import android.util.Log import android.widget.Toast import androidx.compose.foundation.background +import androidx.compose.foundation.border import androidx.compose.foundation.clickable -import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.layout.size import androidx.compose.foundation.lazy.LazyColumn import androidx.compose.foundation.lazy.items import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.foundation.text.KeyboardOptions import androidx.compose.material.icons.Icons -import androidx.compose.material.icons.rounded.ArrowBack +import androidx.compose.material.icons.filled.ArrowBack import androidx.compose.material3.AlertDialog import androidx.compose.material3.Button import androidx.compose.material3.ButtonDefaults +import androidx.compose.material3.ExperimentalMaterial3Api import androidx.compose.material3.Icon import androidx.compose.material3.IconButton import androidx.compose.material3.OutlinedTextField import androidx.compose.material3.Text +import androidx.compose.material3.TopAppBar +import androidx.compose.material3.TopAppBarDefaults import androidx.compose.runtime.Composable import androidx.compose.runtime.DisposableEffect import androidx.compose.runtime.getValue @@ -36,13 +41,18 @@ 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.Color +import androidx.compose.ui.platform.LocalConfiguration import androidx.compose.ui.platform.LocalContext import androidx.compose.ui.text.input.KeyboardType import androidx.compose.ui.text.input.PasswordVisualTransformation import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.sp +import androidx.core.view.WindowCompat +import androidx.core.view.WindowInsetsCompat import com.example.mathseduc.CreateLobbyActivity import com.example.mathseduc.MainActivity +import com.example.mathseduc.MultiActivity import com.example.mathseduc.ServerDetailsActivity import com.example.mathseduc.controllers.ControllerChapter import com.example.mathseduc.controllers.ControllerLobby @@ -55,14 +65,26 @@ import kotlinx.coroutines.launch import kotlinx.coroutines.withContext import okhttp3.MultipartBody +@OptIn(ExperimentalMaterial3Api::class) @Composable -fun MultiPage() { +fun MultiPage(activity: MultiActivity) { val context = LocalContext.current var selectedItem by rememberSaveable { mutableStateOf(null) } var lobbyList by remember { mutableStateOf>(emptyList()) } val scope = rememberCoroutineScope() var refreshState by remember { mutableStateOf(true) } + val isPortrait = LocalConfiguration.current.orientation == Configuration.ORIENTATION_PORTRAIT + + WindowCompat.setDecorFitsSystemWindows(activity.window, false) + + val windowInsetsController = remember { + WindowCompat.getInsetsController(activity.window, activity.window.decorView) + } + + // Hide the status bar + windowInsetsController?.hide(WindowInsetsCompat.Type.statusBars()) + // Fonction pour actualiser la liste des lobbies suspend fun refreshLobbyList() { val refreshedLobbyList = withContext(Dispatchers.IO) { @@ -93,43 +115,43 @@ fun MultiPage() { } } - Box( - modifier = Modifier - .fillMaxSize() - .padding(16.dp) - ) { - IconButton( - onClick = { - val intent = Intent(context, MainActivity::class.java) - context.startActivity(intent) + TopAppBar( + colors = TopAppBarDefaults.topAppBarColors( + containerColor = Color.Transparent, + ), + title = {}, + navigationIcon = { + IconButton( + onClick = { activity.finish() }, + modifier = Modifier.size(60.dp) + ) { + Icon( + imageVector = Icons.Filled.ArrowBack, + contentDescription = "Retour", + modifier = Modifier.size(36.dp), + tint = Color.White + ) + } }, - modifier = Modifier - .align(Alignment.TopStart) - ) { - Icon( - Icons.Rounded.ArrowBack, - "arrow_back", - tint = Colors.White - ) - } - + ) Column( modifier = Modifier .fillMaxSize() - .padding(top = 48.dp) + .padding(start = 16.dp, top = 62.dp, end = 16.dp) ) { Row( modifier = Modifier .fillMaxWidth() - .padding(vertical = 10.dp), + .padding(bottom = 10.dp), verticalAlignment = Alignment.CenterVertically ) { Text( text = "Liste des lobbies", color = Colors.White, + fontSize = 17.sp, modifier = Modifier - .weight(1f) - .padding(start = 20.dp) + .weight(if (isPortrait) 1f else 0.6f) + .padding(start = 25.dp) ) Button( onClick = { @@ -139,7 +161,7 @@ fun MultiPage() { }, shape = RoundedCornerShape(15), modifier = Modifier - .weight(1f) + .weight(if (isPortrait) 1f else 0.4f) .padding(end = 20.dp), colors = ButtonDefaults.buttonColors(Colors.Blue) ) { @@ -150,7 +172,8 @@ fun MultiPage() { LazyColumn( modifier = Modifier .fillMaxSize() - .weight(0.85f) + .border(2.dp, Color.White,shape = RoundedCornerShape(3)) + .weight(0.85f), ) { items(lobbyList) { lobby -> LobbyItem(lobby, selectedItem == lobby) { @@ -176,7 +199,6 @@ fun MultiPage() { } } } -} // Fonction pour créer un Utiliser pour le lobby sélectionné private suspend fun createUtiliserForLobby(context: Context, lobby: Lobby) { @@ -211,9 +233,9 @@ fun LobbyItem(lobby: Lobby, isSelected: Boolean, onItemClick: (Lobby) -> Unit) { onItemClick(lobby) } } + .clip(RoundedCornerShape(8.dp)) .background(if (isSelected) Colors.Orange else Colors.Grey) .padding(16.dp) - .clip(RoundedCornerShape(8.dp)) ) { Text( text = lobby.name,