parent
c652ef7eaa
commit
7a50efc19c
@ -0,0 +1,50 @@
|
||||
package fr.iut.alldev.allin.ui.core
|
||||
|
||||
import androidx.compose.foundation.BorderStroke
|
||||
import androidx.compose.foundation.layout.fillMaxWidth
|
||||
import androidx.compose.foundation.shape.RoundedCornerShape
|
||||
import androidx.compose.material3.Card
|
||||
import androidx.compose.material3.CardDefaults
|
||||
import androidx.compose.material3.ExperimentalMaterial3Api
|
||||
import androidx.compose.runtime.Composable
|
||||
import androidx.compose.ui.Modifier
|
||||
import androidx.compose.ui.graphics.Brush
|
||||
import androidx.compose.ui.graphics.Color
|
||||
import androidx.compose.ui.unit.Dp
|
||||
import fr.iut.alldev.allin.ui.theme.AllInTheme
|
||||
|
||||
@OptIn(ExperimentalMaterial3Api::class)
|
||||
@Composable
|
||||
fun AllInCard(
|
||||
modifier: Modifier = Modifier,
|
||||
onClick: (()->Unit)? = null,
|
||||
radius: Int = 15,
|
||||
backgroundColor: Color = AllInTheme.colors.white,
|
||||
borderWidth: Dp? = null,
|
||||
borderColor: Color = AllInTheme.colors.allIn_LightestGrey,
|
||||
borderBrush: Brush? = null,
|
||||
content: @Composable ()->Unit
|
||||
) {
|
||||
onClick?.let {
|
||||
Card(
|
||||
modifier = modifier.fillMaxWidth(),
|
||||
onClick = it,
|
||||
shape = RoundedCornerShape(radius),
|
||||
border = borderWidth?.let{ width -> borderBrush?.let{BorderStroke(width, it)} ?: BorderStroke(width, borderColor)},
|
||||
colors = CardDefaults.cardColors(containerColor = backgroundColor)
|
||||
) {
|
||||
content()
|
||||
}
|
||||
} ?: run {
|
||||
Card(
|
||||
modifier = modifier.fillMaxWidth(),
|
||||
shape = RoundedCornerShape(radius),
|
||||
border = borderWidth?.let{ width -> borderBrush?.let{BorderStroke(width, it)} ?: BorderStroke(width, borderColor)},
|
||||
colors = CardDefaults.cardColors(containerColor = backgroundColor)
|
||||
) {
|
||||
content()
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
@ -0,0 +1,59 @@
|
||||
package fr.iut.alldev.allin.ui.core
|
||||
|
||||
import androidx.compose.foundation.BorderStroke
|
||||
import androidx.compose.foundation.layout.padding
|
||||
import androidx.compose.foundation.layout.wrapContentSize
|
||||
import androidx.compose.foundation.shape.RoundedCornerShape
|
||||
import androidx.compose.material3.Card
|
||||
import androidx.compose.material3.CardDefaults
|
||||
import androidx.compose.material3.ExperimentalMaterial3Api
|
||||
import androidx.compose.material3.Text
|
||||
import androidx.compose.runtime.Composable
|
||||
import androidx.compose.ui.Modifier
|
||||
import androidx.compose.ui.text.font.FontWeight
|
||||
import androidx.compose.ui.text.style.TextAlign
|
||||
import androidx.compose.ui.tooling.preview.Preview
|
||||
import androidx.compose.ui.unit.dp
|
||||
import fr.iut.alldev.allin.ui.theme.AllInTheme
|
||||
|
||||
@OptIn(ExperimentalMaterial3Api::class)
|
||||
@Composable
|
||||
fun AllInChip(
|
||||
text: String,
|
||||
isSelected: Boolean = false,
|
||||
onClick: ()->Unit = {},
|
||||
modifier: Modifier = Modifier
|
||||
) {
|
||||
Card(
|
||||
modifier = modifier.wrapContentSize(),
|
||||
shape = RoundedCornerShape(50),
|
||||
onClick = onClick,
|
||||
border = if(!isSelected) BorderStroke(1.dp, AllInTheme.colors.allIn_LightestGrey) else null,
|
||||
colors = CardDefaults.cardColors(containerColor = with(AllInTheme.colors){
|
||||
if(isSelected) allIn_Purple else white
|
||||
})
|
||||
) {
|
||||
Text(
|
||||
text = text,
|
||||
modifier = Modifier.padding(vertical = 8.dp, horizontal = 22.dp),
|
||||
textAlign = TextAlign.Center,
|
||||
fontWeight = if(isSelected) FontWeight.W800 else null,
|
||||
color = with(AllInTheme.colors){
|
||||
if(isSelected) white else allIn_LightGrey
|
||||
}
|
||||
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
@Preview
|
||||
@Composable
|
||||
private fun AllInChipPreviewUnselected() {
|
||||
AllInChip("Public", false)
|
||||
}
|
||||
|
||||
@Preview
|
||||
@Composable
|
||||
private fun AllInChipPreviewSelected() {
|
||||
AllInChip("Public", true)
|
||||
}
|
@ -0,0 +1,38 @@
|
||||
package fr.iut.alldev.allin.ui.core
|
||||
|
||||
import androidx.compose.foundation.layout.fillMaxWidth
|
||||
import androidx.compose.foundation.layout.padding
|
||||
import androidx.compose.material3.Text
|
||||
import androidx.compose.runtime.Composable
|
||||
import androidx.compose.ui.Modifier
|
||||
import androidx.compose.ui.text.TextStyle
|
||||
import androidx.compose.ui.text.font.FontWeight
|
||||
import androidx.compose.ui.text.style.TextAlign
|
||||
import androidx.compose.ui.tooling.preview.Preview
|
||||
import androidx.compose.ui.unit.dp
|
||||
import androidx.compose.ui.unit.sp
|
||||
import fr.iut.alldev.allin.ui.theme.AllInTheme
|
||||
|
||||
@Composable
|
||||
fun RainbowButton(
|
||||
text: String,
|
||||
onClick: ()->Unit,
|
||||
modifier: Modifier = Modifier
|
||||
) {
|
||||
AllInCard(borderWidth = 1.dp, onClick = onClick, modifier = modifier) {
|
||||
Text(
|
||||
text = text,
|
||||
textAlign = TextAlign.Center,
|
||||
fontWeight = FontWeight.W700,
|
||||
fontSize = 30.sp,
|
||||
style = TextStyle(brush = AllInTheme.colors.allIn_TextGradient),
|
||||
modifier = Modifier.padding(vertical = 20.dp).fillMaxWidth(),
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
@Preview
|
||||
@Composable
|
||||
private fun RainbowButtonPreview() {
|
||||
RainbowButton(text = "Participer", onClick = { })
|
||||
}
|
@ -1,4 +1,4 @@
|
||||
package fr.iut.alldev.allin.ui.core
|
||||
package fr.iut.alldev.allin.ui.core.topbar
|
||||
|
||||
import androidx.compose.foundation.background
|
||||
import androidx.compose.foundation.layout.Row
|
@ -0,0 +1,138 @@
|
||||
package fr.iut.alldev.allin.ui.home.components
|
||||
|
||||
import androidx.compose.foundation.background
|
||||
import androidx.compose.foundation.layout.*
|
||||
import androidx.compose.material3.HorizontalDivider
|
||||
import androidx.compose.material3.Text
|
||||
import androidx.compose.runtime.Composable
|
||||
import androidx.compose.ui.Alignment
|
||||
import androidx.compose.ui.Alignment.Companion.CenterEnd
|
||||
import androidx.compose.ui.Alignment.Companion.CenterHorizontally
|
||||
import androidx.compose.ui.Modifier
|
||||
import androidx.compose.ui.text.font.FontWeight
|
||||
import androidx.compose.ui.tooling.preview.Preview
|
||||
import androidx.compose.ui.unit.dp
|
||||
import androidx.compose.ui.unit.sp
|
||||
import androidx.compose.ui.zIndex
|
||||
import fr.iut.alldev.allin.ui.core.AllInCard
|
||||
import fr.iut.alldev.allin.ui.core.ProfilePicture
|
||||
import fr.iut.alldev.allin.ui.core.RainbowButton
|
||||
import fr.iut.alldev.allin.ui.theme.AllInTheme
|
||||
|
||||
@Composable
|
||||
fun HomeBetCard(
|
||||
creator: String,
|
||||
category: String,
|
||||
title: String,
|
||||
date: String,
|
||||
time: String,
|
||||
nbPlayer: Int,
|
||||
modifier: Modifier = Modifier,
|
||||
onClickParticipate: ()->Unit
|
||||
) {
|
||||
AllInCard(
|
||||
radius = 7
|
||||
){
|
||||
Column(Modifier.fillMaxWidth()) {
|
||||
Row(
|
||||
Modifier
|
||||
.align(Alignment.End)
|
||||
.padding(top = 12.dp, end = 10.dp)) {
|
||||
Text(
|
||||
fontSize = 10.sp,
|
||||
text = "proposé par ",
|
||||
color = AllInTheme.colors.allIn_LightGrey
|
||||
)
|
||||
Text(
|
||||
fontSize = 10.sp,
|
||||
text = creator,
|
||||
fontWeight = FontWeight.W600
|
||||
|
||||
)
|
||||
}
|
||||
Column(Modifier.padding(horizontal = 19.dp, vertical = 11.dp)) {
|
||||
Text(
|
||||
text = category,
|
||||
fontSize = 15.sp,
|
||||
color = AllInTheme.colors.allIn_LightGrey,
|
||||
)
|
||||
Text(
|
||||
text = title,
|
||||
fontSize = 20.sp,
|
||||
fontWeight = FontWeight.W800
|
||||
)
|
||||
Spacer(modifier = Modifier.height(11.dp))
|
||||
Row(
|
||||
verticalAlignment = Alignment.CenterVertically,
|
||||
) {
|
||||
Text(
|
||||
text = "Commence le",
|
||||
fontSize = 15.sp,
|
||||
color = AllInTheme.colors.allIn_LightGrey,
|
||||
)
|
||||
HomeBetCardDateTimeChip(
|
||||
text = date,
|
||||
modifier = Modifier.padding(horizontal = 8.dp)
|
||||
)
|
||||
HomeBetCardDateTimeChip(time)
|
||||
}
|
||||
}
|
||||
HorizontalDivider(
|
||||
thickness = 1.dp,
|
||||
color = AllInTheme.colors.allIn_LightestGrey
|
||||
)
|
||||
Column(
|
||||
Modifier
|
||||
.background(AllInTheme.colors.allIn_LightestestGrey)
|
||||
) {
|
||||
Row(
|
||||
modifier = Modifier
|
||||
.align(CenterHorizontally)
|
||||
.padding(7.dp),
|
||||
verticalAlignment = Alignment.CenterVertically
|
||||
){
|
||||
val nRepeat = if (nbPlayer > 5) 5 else nbPlayer
|
||||
Box(
|
||||
Modifier.width((nRepeat*15).dp)
|
||||
){
|
||||
repeat(nRepeat) {
|
||||
ProfilePicture(
|
||||
size = 30.dp,
|
||||
modifier = Modifier
|
||||
.align(CenterEnd)
|
||||
.offset(x = (it * -15).dp)
|
||||
.zIndex(-it.toFloat())
|
||||
)
|
||||
}
|
||||
}
|
||||
Spacer(modifier = Modifier.width(12.dp))
|
||||
Text(
|
||||
text = "$nbPlayer joueurs en attente",
|
||||
color = AllInTheme.colors.allIn_LightGrey
|
||||
)
|
||||
}
|
||||
RainbowButton(
|
||||
modifier = Modifier.padding(6.dp),
|
||||
text = "Participer",
|
||||
onClick = onClickParticipate
|
||||
)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@Preview
|
||||
@Composable
|
||||
private fun HomeBetCardPreview() {
|
||||
HomeBetCard(
|
||||
creator = "Lucas",
|
||||
category = "Études",
|
||||
title = "Emre va réussir son TP de CI/CD mercredi?",
|
||||
date = "12 Sept.",
|
||||
time = "13:00",
|
||||
nbPlayer = 4,
|
||||
onClickParticipate = {}
|
||||
)
|
||||
}
|
@ -0,0 +1,41 @@
|
||||
package fr.iut.alldev.allin.ui.home.components
|
||||
|
||||
import androidx.compose.foundation.BorderStroke
|
||||
import androidx.compose.foundation.layout.padding
|
||||
import androidx.compose.foundation.layout.wrapContentSize
|
||||
import androidx.compose.foundation.shape.RoundedCornerShape
|
||||
import androidx.compose.material3.Card
|
||||
import androidx.compose.material3.CardDefaults
|
||||
import androidx.compose.material3.Text
|
||||
import androidx.compose.runtime.Composable
|
||||
import androidx.compose.ui.Modifier
|
||||
import androidx.compose.ui.text.style.TextAlign
|
||||
import androidx.compose.ui.tooling.preview.Preview
|
||||
import androidx.compose.ui.unit.dp
|
||||
import fr.iut.alldev.allin.ui.theme.AllInTheme
|
||||
|
||||
@Composable
|
||||
fun HomeBetCardDateTimeChip(
|
||||
text: String,
|
||||
modifier: Modifier = Modifier
|
||||
) {
|
||||
Card(
|
||||
modifier = modifier.wrapContentSize(),
|
||||
shape = RoundedCornerShape(50),
|
||||
border = BorderStroke(1.dp, AllInTheme.colors.allIn_LightestGrey),
|
||||
colors = CardDefaults.cardColors(containerColor = AllInTheme.colors.white)
|
||||
) {
|
||||
Text(
|
||||
text = text,
|
||||
modifier = Modifier.padding(vertical = 8.dp, horizontal = 16.dp),
|
||||
textAlign = TextAlign.Center,
|
||||
color = AllInTheme.colors.allIn_Purple
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
@Preview
|
||||
@Composable
|
||||
private fun HomeBetCardDateTimeChipPreview() {
|
||||
HomeBetCardDateTimeChip("11 Sept.")
|
||||
}
|
@ -0,0 +1,79 @@
|
||||
package fr.iut.alldev.allin.ui.home.components
|
||||
|
||||
import androidx.compose.foundation.layout.Column
|
||||
import androidx.compose.foundation.layout.Row
|
||||
import androidx.compose.foundation.layout.fillMaxWidth
|
||||
import androidx.compose.foundation.layout.padding
|
||||
import androidx.compose.foundation.shape.RoundedCornerShape
|
||||
import androidx.compose.material.icons.Icons
|
||||
import androidx.compose.material.icons.filled.LocalFireDepartment
|
||||
import androidx.compose.material3.Icon
|
||||
import androidx.compose.material3.Text
|
||||
import androidx.compose.runtime.Composable
|
||||
import androidx.compose.ui.Alignment
|
||||
import androidx.compose.ui.Modifier
|
||||
import androidx.compose.ui.draw.shadow
|
||||
import androidx.compose.ui.text.font.FontWeight
|
||||
import androidx.compose.ui.tooling.preview.Preview
|
||||
import androidx.compose.ui.unit.dp
|
||||
import androidx.compose.ui.unit.sp
|
||||
import fr.iut.alldev.allin.ui.core.AllInCard
|
||||
import fr.iut.alldev.allin.ui.theme.AllInTheme
|
||||
|
||||
@Composable
|
||||
fun HomePopularCards(
|
||||
nbPlayers: Int,
|
||||
points: String,
|
||||
title: String,
|
||||
modifier: Modifier = Modifier
|
||||
) {
|
||||
AllInCard(
|
||||
modifier = modifier.fillMaxWidth()
|
||||
.padding(6.dp)
|
||||
.shadow(elevation = 6.dp, shape = RoundedCornerShape(15)),
|
||||
backgroundColor = AllInTheme.colors.allIn_Dark,
|
||||
borderWidth = 2.dp,
|
||||
borderBrush = AllInTheme.colors.allIn_MainGradient
|
||||
) {
|
||||
Column(modifier = Modifier.padding(13.dp)) {
|
||||
Row(verticalAlignment = Alignment.CenterVertically) {
|
||||
Icon(imageVector = Icons.Filled.LocalFireDepartment,
|
||||
contentDescription = null,
|
||||
tint = AllInTheme.colors.allIn_Pink)
|
||||
Text(text = "Populaire",
|
||||
color = AllInTheme.colors.allIn_Pink,
|
||||
fontSize = 15.sp,
|
||||
fontWeight = FontWeight.W700
|
||||
)
|
||||
}
|
||||
Text(text = title,
|
||||
color = AllInTheme.colors.white,
|
||||
fontSize = 20.sp,
|
||||
fontWeight = FontWeight.W800,
|
||||
modifier = Modifier.padding(vertical = 22.dp))
|
||||
Row(modifier = Modifier.align(alignment = Alignment.CenterHorizontally)) {
|
||||
Text(text = nbPlayers.toString(),
|
||||
color = AllInTheme.colors.allIn_Pink,
|
||||
fontSize = 15.sp,
|
||||
fontWeight = FontWeight.W700)
|
||||
Text(text = " joueurs - ",
|
||||
color = AllInTheme.colors.white,
|
||||
fontSize = 15.sp)
|
||||
|
||||
Text(text = points,
|
||||
color = AllInTheme.colors.allIn_Pink,
|
||||
fontSize = 15.sp,
|
||||
fontWeight = FontWeight.W700)
|
||||
Text(text = " points en jeu",
|
||||
color = AllInTheme.colors.white,
|
||||
fontSize = 15.sp)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@Preview
|
||||
@Composable
|
||||
private fun HomePopularCardsPreview() {
|
||||
HomePopularCards(nbPlayers = 12, points = "2.35k", title = "Emre va réussir son TP de CI/CD mercredi?")
|
||||
}
|
@ -1,9 +1,68 @@
|
||||
package fr.iut.alldev.allin.ui.home
|
||||
|
||||
import androidx.compose.material3.Text
|
||||
import androidx.compose.runtime.Composable
|
||||
import androidx.compose.foundation.layout.*
|
||||
import androidx.compose.foundation.lazy.LazyColumn
|
||||
import androidx.compose.foundation.lazy.LazyRow
|
||||
import androidx.compose.foundation.lazy.items
|
||||
import androidx.compose.runtime.*
|
||||
import androidx.compose.ui.Modifier
|
||||
import androidx.compose.ui.tooling.preview.Preview
|
||||
import androidx.compose.ui.unit.dp
|
||||
import fr.iut.alldev.allin.ui.core.AllInChip
|
||||
import fr.iut.alldev.allin.ui.home.components.HomeBetCard
|
||||
import fr.iut.alldev.allin.ui.home.components.HomePopularCards
|
||||
|
||||
@Composable
|
||||
@Preview
|
||||
fun Home(){
|
||||
Text(text = "HOME")
|
||||
}
|
||||
|
||||
val horizontalPadding = 23.dp
|
||||
|
||||
Column {
|
||||
HomePopularCards(
|
||||
modifier = Modifier
|
||||
.padding(horizontal = horizontalPadding)
|
||||
.padding(top = 23.dp),
|
||||
nbPlayers = 12,
|
||||
points = "2.35k",
|
||||
title = "Emre va réussir son TP de CI/CD mercredi?")
|
||||
LazyRow(
|
||||
modifier = Modifier.padding(vertical = 19.dp),
|
||||
horizontalArrangement = Arrangement.spacedBy(9.dp)
|
||||
){
|
||||
item{
|
||||
Spacer(modifier = Modifier.width(horizontalPadding))
|
||||
}
|
||||
items(items){
|
||||
var isSelected by remember { mutableStateOf(false) }
|
||||
AllInChip(text = it, isSelected = isSelected, onClick = {isSelected = !isSelected})
|
||||
}
|
||||
item{
|
||||
Spacer(modifier = Modifier.width(horizontalPadding))
|
||||
}
|
||||
}
|
||||
LazyColumn(
|
||||
modifier = Modifier.padding(horizontal = horizontalPadding),
|
||||
verticalArrangement = Arrangement.spacedBy(24.dp)
|
||||
){
|
||||
items(5){
|
||||
HomeBetCard(
|
||||
creator = "Lucas",
|
||||
category = "Études",
|
||||
title = "Emre va réussir son TP de CI/CD mercredi?",
|
||||
date = "11 Sept.",
|
||||
time = "13:00",
|
||||
nbPlayer = 4,
|
||||
onClickParticipate = { /* TODO */ }
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
val items = listOf(
|
||||
"Public",
|
||||
"En cours",
|
||||
"Invitation",
|
||||
"Terminés"
|
||||
)
|
@ -1,4 +1,4 @@
|
||||
package fr.iut.alldev.allin.ui.core
|
||||
package fr.iut.alldev.allin.ui.navigation.drawer
|
||||
|
||||
import android.media.Image
|
||||
import androidx.compose.foundation.BorderStroke
|
Loading…
Reference in new issue