Starting Bet Creation Screen
continuous-integration/drone/push Build is passing
Details
continuous-integration/drone/push Build is passing
Details
parent
455cec10ae
commit
16f3a5808f
@ -0,0 +1,47 @@
|
||||
package fr.iut.alldev.allin.ui.betcreation
|
||||
|
||||
import androidx.compose.foundation.layout.Box
|
||||
import androidx.compose.foundation.layout.fillMaxSize
|
||||
import androidx.compose.foundation.layout.padding
|
||||
import androidx.compose.runtime.Composable
|
||||
import androidx.compose.ui.Alignment
|
||||
import androidx.compose.ui.Modifier
|
||||
import androidx.compose.ui.res.stringResource
|
||||
import androidx.compose.ui.unit.dp
|
||||
import fr.iut.alldev.allin.R
|
||||
import fr.iut.alldev.allin.ui.betcreation.tabs.BetCreationScreenAnswerTab
|
||||
import fr.iut.alldev.allin.ui.betcreation.tabs.BetCreationScreenQuestionTab
|
||||
import fr.iut.alldev.allin.ui.core.AllInSections
|
||||
import fr.iut.alldev.allin.ui.core.RainbowButton
|
||||
import fr.iut.alldev.allin.ui.core.SectionElement
|
||||
|
||||
@Composable
|
||||
fun BetCreationScreen() {
|
||||
Box(
|
||||
Modifier
|
||||
.fillMaxSize()
|
||||
.padding(horizontal = 30.dp, vertical = 20.dp)
|
||||
) {
|
||||
AllInSections(
|
||||
modifier = Modifier
|
||||
.align(Alignment.TopCenter)
|
||||
.fillMaxSize(),
|
||||
sections = listOf(
|
||||
SectionElement(stringResource(id = R.string.Question)){
|
||||
BetCreationScreenQuestionTab()
|
||||
},
|
||||
SectionElement(stringResource(id = R.string.Answer)){
|
||||
BetCreationScreenAnswerTab()
|
||||
}
|
||||
)
|
||||
)
|
||||
RainbowButton(
|
||||
text = stringResource(id = R.string.Publish),
|
||||
modifier = Modifier
|
||||
.align(Alignment.BottomCenter)
|
||||
.padding(bottom = 14.dp),
|
||||
onClick = {
|
||||
}
|
||||
)
|
||||
}
|
||||
}
|
@ -0,0 +1,11 @@
|
||||
package fr.iut.alldev.allin.ui.betcreation.tabs
|
||||
|
||||
import androidx.compose.material3.Text
|
||||
import androidx.compose.runtime.Composable
|
||||
import androidx.compose.ui.res.stringResource
|
||||
import fr.iut.alldev.allin.R
|
||||
|
||||
@Composable
|
||||
fun BetCreationScreenAnswerTab() {
|
||||
Text(text = stringResource(id = R.string.Answer))
|
||||
}
|
@ -0,0 +1,43 @@
|
||||
package fr.iut.alldev.allin.ui.betcreation.tabs
|
||||
|
||||
import androidx.compose.foundation.layout.Column
|
||||
import androidx.compose.foundation.layout.Spacer
|
||||
import androidx.compose.foundation.layout.height
|
||||
import androidx.compose.foundation.layout.padding
|
||||
import androidx.compose.material.icons.Icons
|
||||
import androidx.compose.material.icons.filled.Lock
|
||||
import androidx.compose.material.icons.filled.Public
|
||||
import androidx.compose.material3.Text
|
||||
import androidx.compose.runtime.*
|
||||
import androidx.compose.ui.Modifier
|
||||
import androidx.compose.ui.res.stringResource
|
||||
import androidx.compose.ui.unit.dp
|
||||
import fr.iut.alldev.allin.R
|
||||
import fr.iut.alldev.allin.ui.core.AllInIconChip
|
||||
|
||||
@Composable
|
||||
fun BetCreationScreenQuestionTab() {
|
||||
Column(Modifier.padding(20.dp)){
|
||||
var isPublic by remember{
|
||||
mutableStateOf(true)
|
||||
}
|
||||
Text(text = stringResource(id = R.string.Question))
|
||||
Spacer(modifier = Modifier.height(7.dp))
|
||||
AllInIconChip(
|
||||
text = "Public",
|
||||
leadingIcon = Icons.Default.Public,
|
||||
onClick = {
|
||||
isPublic = true
|
||||
},
|
||||
isSelected = isPublic
|
||||
)
|
||||
AllInIconChip(
|
||||
text = "Privé",
|
||||
leadingIcon = Icons.Default.Lock,
|
||||
onClick = {
|
||||
isPublic = false
|
||||
},
|
||||
isSelected = !isPublic
|
||||
)
|
||||
}
|
||||
}
|
@ -0,0 +1,90 @@
|
||||
package fr.iut.alldev.allin.ui.core
|
||||
|
||||
import android.content.res.Configuration
|
||||
import androidx.compose.foundation.BorderStroke
|
||||
import androidx.compose.foundation.layout.Arrangement
|
||||
import androidx.compose.foundation.layout.Row
|
||||
import androidx.compose.foundation.layout.padding
|
||||
import androidx.compose.material.icons.Icons
|
||||
import androidx.compose.material.icons.filled.Public
|
||||
import androidx.compose.material3.*
|
||||
import androidx.compose.runtime.Composable
|
||||
import androidx.compose.ui.Alignment
|
||||
import androidx.compose.ui.Modifier
|
||||
import androidx.compose.ui.graphics.Color
|
||||
import androidx.compose.ui.graphics.vector.ImageVector
|
||||
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.dp
|
||||
import androidx.compose.ui.unit.sp
|
||||
import fr.iut.alldev.allin.ui.theme.AllInTheme
|
||||
import racra.compose.smooth_corner_rect_library.AbsoluteSmoothCornerShape
|
||||
|
||||
@OptIn(ExperimentalMaterial3Api::class)
|
||||
@Composable
|
||||
fun AllInIconChip(
|
||||
text: String,
|
||||
isSelected: Boolean = false,
|
||||
onClick: ()->Unit = {},
|
||||
modifier: Modifier = Modifier,
|
||||
radius: Dp = 15.dp,
|
||||
selectedColor: Color = AllInTheme.colors.allIn_Purple,
|
||||
unselectedColor: Color = AllInTheme.themeColors.background,
|
||||
leadingIcon: ImageVector
|
||||
) {
|
||||
val contentColor = if(isSelected) AllInTheme.colors.white else selectedColor
|
||||
Card(
|
||||
modifier = modifier,
|
||||
shape = AbsoluteSmoothCornerShape(radius, 100),
|
||||
onClick = onClick,
|
||||
border = if(!isSelected) BorderStroke(1.dp, AllInTheme.themeColors.border) else null,
|
||||
colors = CardDefaults.cardColors(
|
||||
containerColor = if(isSelected) selectedColor else unselectedColor
|
||||
)
|
||||
) {
|
||||
Row(
|
||||
horizontalArrangement = Arrangement.spacedBy(7.dp),
|
||||
verticalAlignment = Alignment.CenterVertically,
|
||||
modifier = Modifier.padding(vertical = 15.dp, horizontal = 18.dp)
|
||||
) {
|
||||
Icon(
|
||||
imageVector = leadingIcon,
|
||||
contentDescription = null,
|
||||
tint = contentColor
|
||||
)
|
||||
Text(
|
||||
text = text,
|
||||
textAlign = TextAlign.Center,
|
||||
style = AllInTheme.typography.h1,
|
||||
color = contentColor,
|
||||
fontSize = 18.sp
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@Preview
|
||||
@Preview(uiMode = Configuration.UI_MODE_NIGHT_YES)
|
||||
@Composable
|
||||
private fun AllInIconChipPreviewUnselected() {
|
||||
AllInTheme {
|
||||
AllInIconChip(
|
||||
text = "Public",
|
||||
isSelected = false,
|
||||
leadingIcon = Icons.Default.Public
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
@Preview
|
||||
@Composable
|
||||
private fun AllInIconChipPreviewSelected() {
|
||||
AllInTheme {
|
||||
AllInIconChip(
|
||||
text = "Public",
|
||||
isSelected = true,
|
||||
leadingIcon = Icons.Default.Public
|
||||
)
|
||||
}
|
||||
}
|
@ -0,0 +1,69 @@
|
||||
package fr.iut.alldev.allin.ui.core
|
||||
|
||||
import android.content.res.Configuration
|
||||
import androidx.compose.animation.animateContentSize
|
||||
import androidx.compose.foundation.text.ClickableText
|
||||
import androidx.compose.runtime.Composable
|
||||
import androidx.compose.ui.Modifier
|
||||
import androidx.compose.ui.text.AnnotatedString
|
||||
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.sp
|
||||
import fr.iut.alldev.allin.ui.theme.AllInTheme
|
||||
|
||||
|
||||
@Composable
|
||||
fun AllInSectionButton(
|
||||
text: String,
|
||||
isSelected: Boolean,
|
||||
onClick: (Int)->Unit
|
||||
) {
|
||||
val style = if(isSelected){
|
||||
AllInTheme.typography.h3.copy(
|
||||
color = AllInTheme.themeColors.on_main_surface,
|
||||
fontSize = 15.sp,
|
||||
textAlign = TextAlign.Center,
|
||||
fontWeight = FontWeight.ExtraBold
|
||||
)
|
||||
}else{
|
||||
AllInTheme.typography.h3.copy(
|
||||
color = AllInTheme.themeColors.on_background_2,
|
||||
fontSize = 15.sp,
|
||||
textAlign = TextAlign.Center,
|
||||
fontWeight = FontWeight.SemiBold
|
||||
)
|
||||
}
|
||||
ClickableText(
|
||||
text = AnnotatedString(text),
|
||||
style = style,
|
||||
onClick = onClick,
|
||||
modifier = Modifier.animateContentSize()
|
||||
)
|
||||
}
|
||||
|
||||
@Preview
|
||||
@Preview(uiMode = Configuration.UI_MODE_NIGHT_YES)
|
||||
@Composable
|
||||
private fun AllInSectionButtonPreview() {
|
||||
AllInTheme {
|
||||
AllInSectionButton(
|
||||
text = "Test",
|
||||
isSelected = false,
|
||||
onClick = {}
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
@Preview
|
||||
@Preview(uiMode = Configuration.UI_MODE_NIGHT_YES)
|
||||
@Composable
|
||||
private fun AllInSectionButtonSelectedPreview() {
|
||||
AllInTheme {
|
||||
AllInSectionButton(
|
||||
text = "Test",
|
||||
isSelected = true,
|
||||
onClick = {}
|
||||
)
|
||||
}
|
||||
}
|
@ -0,0 +1,66 @@
|
||||
package fr.iut.alldev.allin.ui.core
|
||||
|
||||
import android.content.res.Configuration
|
||||
import androidx.compose.foundation.layout.Arrangement
|
||||
import androidx.compose.foundation.layout.Column
|
||||
import androidx.compose.foundation.lazy.LazyRow
|
||||
import androidx.compose.foundation.lazy.items
|
||||
import androidx.compose.material3.Text
|
||||
import androidx.compose.runtime.*
|
||||
import androidx.compose.ui.Alignment
|
||||
import androidx.compose.ui.Modifier
|
||||
import androidx.compose.ui.tooling.preview.Preview
|
||||
import androidx.compose.ui.unit.Dp
|
||||
import androidx.compose.ui.unit.dp
|
||||
import fr.iut.alldev.allin.ui.theme.AllInTheme
|
||||
|
||||
class SectionElement(
|
||||
val text: String,
|
||||
val content: @Composable ()->Unit
|
||||
)
|
||||
|
||||
@Composable
|
||||
fun AllInSections(
|
||||
sections: List<SectionElement>,
|
||||
interSectionsPadding: Dp = 56.dp,
|
||||
modifier: Modifier = Modifier
|
||||
) {
|
||||
var selected by remember{
|
||||
mutableStateOf(sections.firstOrNull())
|
||||
}
|
||||
Column(
|
||||
modifier = modifier,
|
||||
horizontalAlignment = Alignment.CenterHorizontally
|
||||
) {
|
||||
LazyRow(
|
||||
horizontalArrangement = Arrangement.spacedBy(interSectionsPadding)
|
||||
) {
|
||||
items(sections) { section ->
|
||||
AllInSectionButton(
|
||||
text = section.text,
|
||||
isSelected = selected == section,
|
||||
onClick = { selected = section }
|
||||
)
|
||||
}
|
||||
}
|
||||
selected?.content?.let { it() }
|
||||
}
|
||||
}
|
||||
|
||||
@Preview
|
||||
@Preview(uiMode = Configuration.UI_MODE_NIGHT_YES)
|
||||
@Composable
|
||||
private fun AllInSectionsPreview() {
|
||||
AllInTheme {
|
||||
AllInSections(
|
||||
sections = listOf(
|
||||
SectionElement("Page 1") {
|
||||
Text("This is page 1")
|
||||
},
|
||||
SectionElement("Page 2") {
|
||||
Text("This is page 2")
|
||||
},
|
||||
)
|
||||
)
|
||||
}
|
||||
}
|
After Width: | Height: | Size: 39 KiB |
Loading…
Reference in new issue