From 151c4e6264f86f5e6e300418a1ba706924fb1501 Mon Sep 17 00:00:00 2001 From: IRedDragonICY <hendik.suwoto@gmail.com> Date: Tue, 19 Mar 2024 15:43:09 +0700 Subject: [PATCH] feat: improve home view layout and add games activity dependency This commit revamps the home view layout for better user experience by adding more interactive elements such as clickable cards and icon buttons. It also includes a new dependency for games activity. The changes include: - Replaced text elements with cards to display user IPK and total SKS. - Added clickable functionality to the IPK card to toggle visibility. - Replaced navigation buttons with icon buttons for better visual appeal. - Added games-activity:3.0.0 to the app dependencies in the build.gradle file. --- app/build.gradle.kts | 1 + .../java/com/uad/portal/views/HomeView.kt | 122 ++++++++++++++---- 2 files changed, 95 insertions(+), 28 deletions(-) diff --git a/app/build.gradle.kts b/app/build.gradle.kts index e21f3ca..668791f 100644 --- a/app/build.gradle.kts +++ b/app/build.gradle.kts @@ -70,6 +70,7 @@ dependencies { implementation("androidx.lifecycle:lifecycle-viewmodel-compose:2.7.0") implementation("androidx.work:work-runtime-ktx:2.9.0") implementation("androidx.appcompat:appcompat:1.6.1") + implementation("androidx.games:games-activity:3.0.0") testImplementation("junit:junit:4.13.2") androidTestImplementation("androidx.test.ext:junit:1.1.5") androidTestImplementation("androidx.test.espresso:espresso-core:3.5.1") diff --git a/app/src/main/java/com/uad/portal/views/HomeView.kt b/app/src/main/java/com/uad/portal/views/HomeView.kt index de1d9b7..4435811 100644 --- a/app/src/main/java/com/uad/portal/views/HomeView.kt +++ b/app/src/main/java/com/uad/portal/views/HomeView.kt @@ -1,50 +1,116 @@ package com.uad.portal.views import androidx.compose.foundation.Image +import androidx.compose.foundation.clickable import androidx.compose.foundation.layout.* -import androidx.compose.material3.Button +import androidx.compose.foundation.shape.CircleShape +import androidx.compose.foundation.shape.RoundedCornerShape +import androidx.compose.material.icons.Icons +import androidx.compose.material.icons.filled.Book +import androidx.compose.material.icons.filled.CalendarToday +import androidx.compose.material.icons.filled.ExitToApp +import androidx.compose.material.icons.filled.Settings +import androidx.compose.material3.Card +import androidx.compose.material3.Icon +import androidx.compose.material3.IconButton import androidx.compose.material3.Text import androidx.compose.runtime.Composable +import androidx.compose.runtime.mutableStateOf +import androidx.compose.runtime.remember +import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier +import androidx.compose.ui.draw.clip +import androidx.compose.ui.text.TextStyle +import androidx.compose.ui.text.font.FontWeight import androidx.compose.ui.unit.dp +import androidx.compose.ui.unit.sp import coil.compose.rememberImagePainter import com.uad.portal.MainViewModel + @Composable fun HomeView(mainViewModel: MainViewModel) { - Column(modifier = Modifier - .fillMaxWidth() - .padding(horizontal = 32.dp)) { - Text("You are logged in as ${mainViewModel.userInfoState.value?.username ?: "Unknown"}") - Text("Your IPK is ${mainViewModel.userInfoState.value?.ipk ?: "Unknown"}") - Text("Your total SKS is ${mainViewModel.userInfoState.value?.sks ?: "Unknown"}") - mainViewModel.userInfoState.value?.avatarUrl?.let { - if (it.isNotEmpty()) { - Image( - painter = rememberImagePainter(it), - contentDescription = "User Avatar", - modifier = Modifier.size(100.dp) - ) + val ipkVisible = remember { mutableStateOf(false) } + Column( + modifier = Modifier + .fillMaxWidth() + .padding(24.dp), + verticalArrangement = Arrangement.Top + ) { + + Row(verticalAlignment = Alignment.CenterVertically) { + mainViewModel.userInfoState.value?.avatarUrl?.let { + if (it.isNotEmpty()) { + Image( + painter = rememberImagePainter(it), + contentDescription = "User Avatar", + modifier = Modifier + .size(64.dp) + .clip(CircleShape) + ) + } } + Spacer(modifier = Modifier.width(16.dp)) + Text("Halo, ${mainViewModel.userInfoState.value?.username ?: "Unknown"} 🤚", style = TextStyle(fontSize = 24.sp, fontWeight = FontWeight.Bold)) } - Spacer(modifier = Modifier.height(16.dp)) - Button(onClick = { mainViewModel.navigate(Screen.Attendance) }) { - Text("Absensi") - } + Spacer(modifier = Modifier.height(24.dp)) - Spacer(modifier = Modifier.height(16.dp)) - Button(onClick = { mainViewModel.navigate(Screen.Reglab) }) { - Text("Reglab") - } + Row( + modifier = Modifier.fillMaxWidth(), + horizontalArrangement = Arrangement.SpaceBetween + ) { + Card( + modifier = Modifier + .weight(1f) + .aspectRatio(1f) + .clickable { ipkVisible.value = !ipkVisible.value }, + shape = RoundedCornerShape(16.dp) + ) { + Box(contentAlignment = Alignment.Center) { + if (ipkVisible.value) { + Text("IPK: ${mainViewModel.userInfoState.value?.ipk ?: "Unknown"}", style = TextStyle(fontSize = 20.sp, fontWeight = FontWeight.Bold)) + } else { + Text("Tekan untuk melihat IPK", style = TextStyle(fontSize = 20.sp, fontWeight = FontWeight.Bold)) // Add this line + } + } + } + + Spacer(modifier = Modifier.width(24.dp)) - Spacer(modifier = Modifier.height(16.dp)) - Button(onClick = { mainViewModel.navigate(Screen.Settings) }) { - Text("Settings") + Card( + modifier = Modifier + .weight(1f) + .aspectRatio(1f), + shape = RoundedCornerShape(16.dp) + ) { + Box(contentAlignment = Alignment.Center) { + Text("Total SKS: ${mainViewModel.userInfoState.value?.sks ?: "Unknown"}", style = TextStyle(fontSize = 20.sp, fontWeight = FontWeight.Bold)) + } + } } - Spacer(modifier = Modifier.height(16.dp)) - Button(onClick = mainViewModel::logout) { - Text("Logout") + + Spacer(modifier = Modifier.height(24.dp)) + + Row( + modifier = Modifier.fillMaxWidth(), + horizontalArrangement = Arrangement.SpaceBetween + ) { + IconButton(onClick = { mainViewModel.navigate(Screen.Attendance) }) { + Icon(Icons.Filled.CalendarToday, contentDescription = "Absensi") + } + + IconButton(onClick = { mainViewModel.navigate(Screen.Reglab) }) { + Icon(Icons.Filled.Book, contentDescription = "Reglab") + } + + IconButton(onClick = { mainViewModel.navigate(Screen.Settings) }) { + Icon(Icons.Filled.Settings, contentDescription = "Settings") + } + + IconButton(onClick = mainViewModel::logout) { + Icon(Icons.Filled.ExitToApp, contentDescription = "Logout") + } } } }