Bet Creation Screen : Tooltip and bug correction

src/app/src/main/java/fr/iut/alldev/allin/ui/betcreation/BetCreationScreen.kt

@@ -34,7 +34,7 @@ fun BetCreationScreen(
     var isPublic by remember{ mutableStateOf(true) }
     val betTypes = remember { BetType.values().toList() }
     val selectedFriends = remember { mutableListOf<Int>() }
-    val selectedBetType by remember { mutableStateOf(betTypes[0]) }
+    var selectedBetType by remember { mutableStateOf(betTypes[0]) }
     var selectionElements by remember { mutableStateOf(listOf<SelectionElement>()) }
     var selectedBetTypeElement by remember { mutableStateOf<SelectionElement?>(null)}
 
@@ -48,6 +48,10 @@ fun BetCreationScreen(
         selectedBetTypeElement = selectionElements.getOrNull(0)
     }
 
+    LaunchedEffect(key1 = selectedBetTypeElement){
+        selectedBetType = betTypes[selectionElements.indexOf(selectedBetTypeElement)]
+    }
+
     val (showRegisterDatePicker, setRegisterDatePicker) = remember { mutableStateOf(false) }
     val (showEndDatePicker, setEndDatePicker) = remember { mutableStateOf(false) }
 

src/app/src/main/java/fr/iut/alldev/allin/ui/betcreation/tabs/BetCreationScreenQuestionTab.kt

@@ -54,7 +54,7 @@ fun BetCreationScreenQuestionTab(
             setRegisterTimeDialog = setRegisterTimeDialog,
             setEndTimeDialog = setEndTimeDialog
         )
-        Spacer(modifier = Modifier.height(44.dp))
+        Spacer(modifier = Modifier.height(35.dp))
         QuestionTabPrivacySection(
             isPublic = isPublic,
             setIsPublic = setIsPublic,

src/app/src/main/java/fr/iut/alldev/allin/ui/betcreation/tabs/sections/QuestionTabDateTimeSection.kt

@@ -11,7 +11,7 @@ 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.components.BetCreationScreenDateTimeRow
-import fr.iut.alldev.allin.ui.core.AllInTextAndIcon
+import fr.iut.alldev.allin.ui.core.AllInTitleInfo
 
 @Composable
 internal fun QuestionTabDateTimeSection(
@@ -24,11 +24,11 @@ internal fun QuestionTabDateTimeSection(
     endDate: String,
     endTime: String
 ) {
-    AllInTextAndIcon(
+    AllInTitleInfo(
         text = stringResource(id = R.string.End_registration_date),
         icon = Icons.AutoMirrored.Outlined.HelpOutline,
         modifier = Modifier.padding(start = 11.dp, bottom = 8.dp),
-        onClick = {}
+        tooltipText = "Bonjour"
     )
     BetCreationScreenDateTimeRow(
         date = registerDate,
@@ -37,11 +37,11 @@ internal fun QuestionTabDateTimeSection(
         onClickTime = { setRegisterTimeDialog(true) },
     )
     Spacer(modifier = Modifier.height(12.dp))
-    AllInTextAndIcon(
+    AllInTitleInfo(
         text = stringResource(id = R.string.End_bet_date),
         icon = Icons.AutoMirrored.Outlined.HelpOutline,
         modifier = Modifier.padding(start = 11.dp, bottom = 8.dp),
-        onClick = {}
+        tooltipText = "Bonjour"
     )
     BetCreationScreenDateTimeRow(
         date = endDate,

src/app/src/main/java/fr/iut/alldev/allin/ui/betcreation/tabs/sections/QuestionTabPrivacySection.kt

@@ -16,7 +16,7 @@ import fr.iut.alldev.allin.ui.betcreation.components.BetCreationScreenBottomText
 import fr.iut.alldev.allin.ui.betcreation.components.BetCreationScreenFriendLine
 import fr.iut.alldev.allin.ui.core.AllInIconChip
 import fr.iut.alldev.allin.ui.core.AllInRetractableCard
-import fr.iut.alldev.allin.ui.core.AllInTextAndIcon
+import fr.iut.alldev.allin.ui.core.AllInTitleInfo
 import fr.iut.alldev.allin.ui.theme.AllInTheme
 
 @Composable
@@ -26,11 +26,11 @@ fun QuestionTabPrivacySection(
     nbFriends: Int,
     selectedFriends: MutableList<Int>
 ) {
-    AllInTextAndIcon(
+    AllInTitleInfo(
         text = stringResource(id = R.string.Bet_privacy),
         icon = Icons.AutoMirrored.Outlined.HelpOutline,
         modifier = Modifier.padding(start = 11.dp, bottom = 8.dp),
-        onClick = {}
+        tooltipText = "Généralement une question qui sera répondu par les utilisateurs."
     )
     Row(
         modifier = Modifier.padding(bottom = 10.dp),
@@ -85,12 +85,8 @@ fun QuestionTabPrivacySection(
                     modifier = Modifier.height(165.dp)
                 ){
                     items(nbFriends){
-                        val isSelected = remember{
+                        var isSelected by remember{
-                            selectedFriends.contains(it)
+                            mutableStateOf(selectedFriends.contains(it))
-                        }
-
-                        var wasClicked by remember{
-                            mutableStateOf(isSelected)
                         }
 
                         if(it!=0){
@@ -99,14 +95,14 @@ fun QuestionTabPrivacySection(
                         BetCreationScreenFriendLine(
                             username = "Dave",
                             allCoinsAmount = 542,
-                            isSelected = wasClicked
+                            isSelected = isSelected
                         ) {
-                            wasClicked = ! wasClicked
                             if (isSelected) {
                                 selectedFriends.remove(it)
                             } else {
                                 selectedFriends.add(it)
                             }
+                            isSelected = ! isSelected
                         }
                     }
                 }

src/app/src/main/java/fr/iut/alldev/allin/ui/betcreation/tabs/sections/QuestionTabThemePhraseSection.kt

@@ -14,7 +14,7 @@ import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import fr.iut.alldev.allin.R
-import fr.iut.alldev.allin.ui.core.AllInTextAndIcon
+import fr.iut.alldev.allin.ui.core.AllInTitleInfo
 import fr.iut.alldev.allin.ui.core.AllInTextField
 import fr.iut.alldev.allin.ui.theme.AllInTheme
 
@@ -27,11 +27,11 @@ internal fun QuestionTabThemePhraseSection(
     setBetPhrase: (String)->Unit,
     bringIntoViewRequester: BringIntoViewRequester
 ) {
-    AllInTextAndIcon(
+    AllInTitleInfo(
         text = stringResource(id = R.string.Theme),
         icon = Icons.AutoMirrored.Outlined.HelpOutline,
         modifier = Modifier.padding(start = 11.dp, bottom = 8.dp),
-        onClick = {}
+        tooltipText = "Bonjour"
     )
     AllInTextField(
         placeholder = stringResource(id = R.string.Theme_placeholder),
@@ -43,12 +43,12 @@ internal fun QuestionTabThemePhraseSection(
         placeholderFontSize = 13.sp,
         modifier = Modifier.fillMaxWidth()
     )
-    Spacer(modifier = Modifier.height(12.dp))
+    Spacer(modifier = Modifier.height(10.dp))
-    AllInTextAndIcon(
+    AllInTitleInfo(
         text = stringResource(id = R.string.Bet_Phrase),
         icon = Icons.AutoMirrored.Outlined.HelpOutline,
         modifier = Modifier.padding(start = 11.dp, bottom = 8.dp),
-        onClick = {}
+        tooltipText = "Généralement une question qui sera répondu par les utilisateurs."
     )
     AllInTextField(
         placeholder = stringResource(id = R.string.Bet_Phrase_placeholder),

src/app/src/main/java/fr/iut/alldev/allin/ui/core/AllInTextField.kt

@@ -27,7 +27,7 @@ import fr.iut.alldev.allin.ui.theme.AllInTheme
 import kotlinx.coroutines.launch
 import racra.compose.smooth_corner_rect_library.AbsoluteSmoothCornerShape
 
-@OptIn(ExperimentalFoundationApi::class)
+@OptIn(ExperimentalFoundationApi::class, ExperimentalMaterial3Api::class)
 @Composable
 fun AllInTextField(
     placeholder: String,

src/app/src/main/java/fr/iut/alldev/allin/ui/core/AllInTitleInfo.kt

@@ -9,10 +9,10 @@ import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.automirrored.outlined.HelpOutline
-import androidx.compose.material3.Icon
+import androidx.compose.material3.*
-import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.remember
+import androidx.compose.runtime.rememberCoroutineScope
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.alpha
@@ -22,21 +22,33 @@ 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
+import kotlinx.coroutines.launch
 
+@OptIn(ExperimentalMaterial3Api::class)
 @Composable
-fun AllInTextAndIcon(
+fun AllInTitleInfo(
     text: String,
+    tooltipText: String,
     icon: ImageVector,
-    modifier: Modifier = Modifier,
+    tooltipState: TooltipState  = rememberTooltipState(),
-    onClick: ()->Unit
+    modifier: Modifier = Modifier
 ) {
+    val scope = rememberCoroutineScope()
     val interactionSource = remember { MutableInteractionSource() }
     Row(
         modifier = modifier
             .clickable(
                 interactionSource = interactionSource,
                 indication = null,
-            onClick = onClick
+                onClick = {
+                    scope.launch {
+                        if(tooltipState.isVisible){
+                            tooltipState.dismiss()
+                        }else{
+                            tooltipState.show()
+                        }
+                    }
+                }
             ),
         verticalAlignment = Alignment.CenterVertically
     ) {
@@ -48,6 +60,7 @@ fun AllInTextAndIcon(
             color = AllInTheme.themeColors.on_main_surface
         )
         Spacer(modifier = Modifier.width(5.dp))
+        AllInTooltip(text = tooltipText, state = tooltipState) {
             Icon(
                 imageVector = icon,
                 contentDescription = null,
@@ -57,15 +70,18 @@ fun AllInTextAndIcon(
                     .alpha(.8f)
             )
         }
-
+    }
 }
 
 @Preview
 @Preview(uiMode = Configuration.UI_MODE_NIGHT_YES)
 @Composable
-private fun AllInTextAndIconPreview() {
+private fun AllInTitleInfoPreview() {
     AllInTheme {
-        AllInTextAndIcon(text = "Texte", icon = Icons.AutoMirrored.Outlined.HelpOutline) {
+        AllInTitleInfo(
-        }
+            text = "Texte",
+            icon = Icons.AutoMirrored.Outlined.HelpOutline,
+            tooltipText = "Bonjour"
+        )
     }
 }

src/app/src/main/java/fr/iut/alldev/allin/ui/core/AllInTooltip.kt

@@ -0,0 +1,129 @@
+package fr.iut.alldev.allin.ui.core
+
+import androidx.compose.foundation.BorderStroke
+import androidx.compose.foundation.layout.*
+import androidx.compose.material3.*
+import androidx.compose.runtime.*
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.geometry.Size
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.Outline
+import androidx.compose.ui.graphics.Path
+import androidx.compose.ui.graphics.Shape
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.*
+import fr.iut.alldev.allin.ui.theme.AllInTheme
+import racra.compose.smooth_corner_rect_library.AbsoluteSmoothCornerShape
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun AllInTooltip(
+    text: String,
+    state: TooltipState = rememberTooltipState(),
+    content: @Composable () -> Unit,
+) {
+
+    TooltipBox(
+        positionProvider = TooltipDefaults.rememberPlainTooltipPositionProvider(),
+        tooltip = {
+            AllInPlainTooltip{
+                Text(
+                    text = text,
+                    color = AllInTheme.colors.allIn_LightGrey200,
+                    style = AllInTheme.typography.r,
+                    fontSize = 10.sp
+                )
+          }
+        },
+        state = state
+    ) {
+        content()
+    }
+}
+
+internal val TooltipMinHeight = 24.dp
+internal val TooltipMinWidth = 40.dp
+private val AllInPlainTooltipMaxWidth = 188.dp
+private val AllInPlainTooltipTopPadding = 3.dp
+private val AllInPlainTooltipBottomPadding = 11.dp
+private val AllInPlainTooltipHorizontalPadding = 8.dp
+private val AllInPlainTooltipArrowSize = 9.dp
+private val AllInPlainTooltipContentPadding =
+    PaddingValues(
+        top = AllInPlainTooltipTopPadding,
+        bottom = AllInPlainTooltipBottomPadding,
+        start = AllInPlainTooltipHorizontalPadding,
+        end = AllInPlainTooltipHorizontalPadding
+    )
+
+@Composable
+fun AllInPlainTooltip(
+    modifier: Modifier = Modifier,
+    containerColor: Color = AllInTheme.colors.allIn_Dark,
+    borderWidth: Dp = 1.dp,
+    borderColor: Color = AllInTheme.colors.allIn_DarkGrey100,
+    shape: Shape = AbsoluteSmoothCornerShape(10.dp, 100),
+    content: @Composable () -> Unit
+) {
+    Column(
+        horizontalAlignment = Alignment.CenterHorizontally
+    ){
+        Surface(
+            shape = shape,
+            border = BorderStroke(borderWidth, borderColor),
+            color = containerColor
+        ) {
+            Box(
+                modifier = modifier
+                    .sizeIn(
+                        minWidth = TooltipMinWidth,
+                        maxWidth = AllInPlainTooltipMaxWidth,
+                        minHeight = TooltipMinHeight
+                    )
+                    .padding(AllInPlainTooltipContentPadding)
+            ) {
+                content()
+            }
+        }
+        Surface(
+            shape = AllInArrowShape(),
+            border = BorderStroke(borderWidth, borderColor),
+            color = containerColor,
+            modifier = Modifier
+                .size(AllInPlainTooltipArrowSize)
+                .offset(y = -borderWidth)
+        ) {
+
+        }
+    }
+}
+
+class AllInArrowShape : Shape {
+    override fun createOutline(
+        size: Size,
+        layoutDirection: LayoutDirection,
+        density: Density,
+    ) =
+        Outline.Generic(
+            Path().apply {
+                lineTo(size.width /2 , size.height)
+                lineTo(size.width , 0f)
+            }
+        )
+}
+
+@Preview
+@Composable
+private fun AllInTooltipPreview() {
+    AllInTheme {
+        AllInPlainTooltip(content = {
+            Text(
+                text = "Généralement une question qui sera répondu par les utilisateurs.",
+                color = AllInTheme.colors.allIn_LightGrey200,
+                style = AllInTheme.typography.r,
+                fontSize = 10.sp
+            )
+        })
+    }
+}

src/data/src/main/java/fr/iut/alldev/allin/data/ext/DateExt.kt

@@ -5,7 +5,7 @@ import java.time.format.DateTimeFormatter
 
 fun ZonedDateTime.formatToMediumDate(): String {
     return this.format(
-        DateTimeFormatter.ofPattern("dd MMM. yyyy")
+        DateTimeFormatter.ofPattern("dd MMM yyyy")
     ).replaceFirstChar { it.uppercase() }
 }