Merge pull request #45 from Nexters/fix/textfield

Fix/textfield

core/designsystem/src/main/java/com/goalpanzi/mission_mate/core/designsystem/component/TextField.kt

@@ -34,9 +34,10 @@ import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import com.goalpanzi.mission_mate.core.designsystem.R
 import com.goalpanzi.mission_mate.core.designsystem.theme.ColorGray1_FF404249
+import com.goalpanzi.mission_mate.core.designsystem.theme.ColorGray2_FF4F505C
 import com.goalpanzi.mission_mate.core.designsystem.theme.ColorGray3_FF727484
 import com.goalpanzi.mission_mate.core.designsystem.theme.ColorGray4_FFE5E5E5
-import com.goalpanzi.mission_mate.core.designsystem.theme.ColorGray5_80F5F6F9
+import com.goalpanzi.mission_mate.core.designsystem.theme.ColorGray5_FFF5F6F9
 import com.goalpanzi.mission_mate.core.designsystem.theme.ColorRed_FFFF5858
 import com.goalpanzi.mission_mate.core.designsystem.theme.ColorWhite_FFFFFFFF
 import com.goalpanzi.mission_mate.core.designsystem.theme.MissionMateTypography
@@ -57,8 +58,9 @@ fun MissionMateTextField(
     guidanceColor : Color = Color(0xFF4F505C),
     errorColor : Color = Color(0xFFFF6464),
     containerColor: Color = ColorWhite_FFFFFFFF,
-    unfocusedHintColor: Color = ColorGray5_80F5F6F9,
-    borderStroke: BorderStroke = BorderStroke(1.dp, ColorGray4_FFE5E5E5),
+    unfocusedContainerColor: Color = ColorGray5_FFF5F6F9,
+    unfocusedHintColor: Color = ColorGray3_FF727484,
+    borderStroke: BorderStroke = BorderStroke(1.dp, ColorGray5_FFF5F6F9),
     focusedBorderStroke: BorderStroke = BorderStroke(1.dp, ColorGray4_FFE5E5E5),
     errorBorderStroke: BorderStroke = BorderStroke(2.dp, ColorRed_FFFF5858),
     shape: Shape = RoundedCornerShape(12.dp),
@@ -101,7 +103,8 @@ fun MissionMateTextField(
                             shape = shape
                         )
                         .background(
-                            if (!isFocused && text.isEmpty()) unfocusedHintColor
+                            if(text.isNotEmpty()) containerColor
+                            else if (!isFocused) unfocusedContainerColor
                             else containerColor
                         )
                         .padding(contentPadding),
@@ -111,7 +114,7 @@ fun MissionMateTextField(
                         Text(
                             text = hintId?.let { stringResource(id = it) } ?: "",
                             style = hintStyle,
-                            color = hintColor
+                            color = if(isFocused) hintColor else unfocusedHintColor
                         )
                     }
                     innerTextField()

core/designsystem/src/main/java/com/goalpanzi/mission_mate/core/designsystem/ext/Modifier.kt

@@ -1,6 +1,8 @@
 package com.goalpanzi.mission_mate.core.designsystem.ext
 
 import android.graphics.BlurMaskFilter
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.drawBehind
 import androidx.compose.ui.geometry.Size
@@ -39,4 +41,17 @@ fun Modifier.dropShadow(
         canvas.drawOutline(shadowOutline, paint)
         canvas.restore()
     }
+}
+
+fun Modifier.clickableWithoutRipple(
+    onClick : () -> Unit,
+) : Modifier {
+    return then(
+        Modifier.clickable(
+            interactionSource = MutableInteractionSource(),
+            indication = null,
+            onClick = onClick
+        )
+    )
+
 }

core/designsystem/src/main/java/com/goalpanzi/mission_mate/core/designsystem/theme/Color.kt

@@ -11,7 +11,7 @@ val ColorGray3_FF727484 = Color(0xFF727484)
 
 val ColorGray4_FFE5E5E5 = Color(0xFFE5E5E5)
 val ColorGray5_FFF5F6F9 = Color(0xFFF5F6F9)
-val ColorGray5_80F5F6F9 = Color(0x80F5F6F9)
+val ColorGray5_80F5F6F9_opacity_50 = Color(0x80F5F6F9)
 val ColorDisabled_FFB3B3B3 = Color(0xFFB3B3B3)
 
 val ColorRed_FFFF5858 = Color(0xFFFF5858)

feature/onboarding/src/main/java/com/goalpanzi/mission_mate/feature/onboarding/component/InvitationCodeTextField.kt

@@ -30,10 +30,11 @@ import androidx.compose.ui.text.input.VisualTransformation
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
+import com.goalpanzi.mission_mate.core.designsystem.theme.ColorDisabled_FFB3B3B3
 import com.goalpanzi.mission_mate.core.designsystem.theme.ColorGray1_FF404249
 import com.goalpanzi.mission_mate.core.designsystem.theme.ColorGray3_FF727484
 import com.goalpanzi.mission_mate.core.designsystem.theme.ColorGray4_FFE5E5E5
-import com.goalpanzi.mission_mate.core.designsystem.theme.ColorGray5_80F5F6F9
+import com.goalpanzi.mission_mate.core.designsystem.theme.ColorGray5_FFF5F6F9
 import com.goalpanzi.mission_mate.core.designsystem.theme.ColorRed_FFFF5858
 import com.goalpanzi.mission_mate.core.designsystem.theme.ColorWhite_FFFFFFFF
 import com.goalpanzi.mission_mate.core.designsystem.theme.MissionMateTypography
@@ -48,10 +49,10 @@ fun InvitationCodeTextField(
     textStyle: TextStyle = MissionMateTypography.heading_md_bold,
     hintStyle: TextStyle = MissionMateTypography.heading_md_bold,
     textColor: Color = ColorGray1_FF404249,
-    hintColor: Color = ColorGray3_FF727484,
+    hintColor: Color = ColorDisabled_FFB3B3B3,
     containerColor: Color = ColorWhite_FFFFFFFF,
-    unfocusedHintColor: Color = ColorGray5_80F5F6F9,
-    borderStroke: BorderStroke = BorderStroke(1.dp, ColorGray5_80F5F6F9),
+    unfocusedHintColor: Color = ColorGray5_FFF5F6F9,
+    borderStroke: BorderStroke = BorderStroke(1.dp, ColorGray5_FFF5F6F9),
     focusedBorderStroke: BorderStroke = BorderStroke(1.dp, ColorGray4_FFE5E5E5),
     errorBorderStroke: BorderStroke = BorderStroke(2.dp, ColorRed_FFFF5858),
     shape: Shape = RoundedCornerShape(12.dp),
@@ -92,7 +93,8 @@ fun InvitationCodeTextField(
                         shape = shape
                     )
                     .background(
-                        if (!isFocused && text.isEmpty()) unfocusedHintColor
+                        if(text.isNotEmpty()) containerColor
+                        else if (!isFocused ) unfocusedHintColor
                         else containerColor
                     )
                     .padding(contentPadding),

feature/onboarding/src/main/java/com/goalpanzi/mission_mate/feature/onboarding/screen/boardsetup/BoardSetupMission.kt

@@ -16,6 +16,7 @@ import com.goalpanzi.mission_mate.feature.onboarding.R
 @Composable
 fun BoardSetupMission(
     missionTitle: String,
+    isNotTitleValid : Boolean,
     onTitleChange: (String) -> Unit,
     modifier: Modifier = Modifier
 ) {
@@ -37,6 +38,7 @@ fun BoardSetupMission(
             modifier = modifier.fillMaxWidth(),
             text = missionTitle,
             onValueChange = onTitleChange,
+            isError = isNotTitleValid,
             useMaxLength = true,
             maxLength = 12,
             titleId = R.string.onboarding_board_setup_mission_input_title,

feature/onboarding/src/main/java/com/goalpanzi/mission_mate/feature/onboarding/screen/boardsetup/BoardSetupSchedule.kt

@@ -29,7 +29,6 @@ import com.goalpanzi.mission_mate.core.designsystem.theme.ColorGray1_FF404249
 import com.goalpanzi.mission_mate.core.designsystem.theme.ColorGray2_FF4F505C
 import com.goalpanzi.mission_mate.core.designsystem.theme.ColorGray3_FF727484
 import com.goalpanzi.mission_mate.core.designsystem.theme.ColorGray4_FFE5E5E5
-import com.goalpanzi.mission_mate.core.designsystem.theme.ColorGray5_80F5F6F9
 import com.goalpanzi.mission_mate.core.designsystem.theme.ColorGray5_FFF5F6F9
 import com.goalpanzi.mission_mate.core.designsystem.theme.ColorWhite_FFFFFFFF
 import com.goalpanzi.mission_mate.core.designsystem.theme.MissionMateTypography
@@ -107,7 +106,7 @@ fun Period(
                 border = if (startDate.isBlank()) null else BorderStroke(1.dp, ColorGray4_FFE5E5E5),
                 shape = RoundedCornerShape(12.dp),
                 colors = ButtonDefaults.buttonColors(
-                    containerColor = if (startDate.isBlank()) ColorGray5_80F5F6F9 else ColorWhite_FFFFFFFF
+                    containerColor = if (startDate.isBlank()) ColorGray5_FFF5F6F9 else ColorWhite_FFFFFFFF
                 ),
                 contentPadding = PaddingValues(horizontal = 16.dp),
                 onClick = onClickStartDate
@@ -132,7 +131,7 @@ fun Period(
                 border = if (endDate.isBlank()) null else BorderStroke(1.dp, ColorGray4_FFE5E5E5),
                 shape = RoundedCornerShape(12.dp),
                 colors = ButtonDefaults.buttonColors(
-                    containerColor = if (endDate.isBlank()) ColorGray5_80F5F6F9 else ColorWhite_FFFFFFFF
+                    containerColor = if (endDate.isBlank()) ColorGray5_FFF5F6F9 else ColorWhite_FFFFFFFF
                 ),
                 contentPadding = PaddingValues(horizontal = 16.dp),
                 onClick = onClickEndDate

feature/onboarding/src/main/java/com/goalpanzi/mission_mate/feature/onboarding/screen/boardsetup/BoardSetupScreen.kt

@@ -35,6 +35,7 @@ import androidx.hilt.navigation.compose.hiltViewModel
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import com.goalpanzi.mission_mate.core.designsystem.component.MissionMateButtonType
 import com.goalpanzi.mission_mate.core.designsystem.component.MissionMateTextButton
+import com.goalpanzi.mission_mate.core.designsystem.ext.clickableWithoutRipple
 import com.goalpanzi.mission_mate.core.designsystem.theme.ColorGray2_FF4F505C
 import com.goalpanzi.mission_mate.core.designsystem.theme.ColorOrange_FFFF5732
 import com.goalpanzi.mission_mate.core.designsystem.theme.ColorWhite_FFFFFFFF
@@ -65,6 +66,8 @@ fun BoardSetupRoute(
     val localFocusManager = LocalFocusManager.current
     val pagerState = rememberPagerState { BoardSetupStep.entries.size }
 
+    val isNotTitleValid by viewModel.isNotTitleValid.collectAsStateWithLifecycle()
+
     val startDate by viewModel.startDate.collectAsStateWithLifecycle()
     val endDate by viewModel.endDate.collectAsStateWithLifecycle()
     val selectedDays by viewModel.selectedDays.collectAsStateWithLifecycle()
@@ -129,13 +132,10 @@ fun BoardSetupRoute(
     }
 
     BoardSetupScreen(
-        modifier = Modifier.clickable(
-            MutableInteractionSource(),
-            null,
-            onClick = {
-                keyboardController?.hide()
-            }
-        ),
+        modifier = Modifier.clickableWithoutRipple {
+            keyboardController?.hide()
+            localFocusManager.clearFocus()
+        },
         currentStep = currentStep,
         missionTitle = viewModel.missionTitle,
         startDate = startDate?.let {
@@ -148,6 +148,7 @@ fun BoardSetupRoute(
         count = filterDatesByDayOfWeek(startDate, endDate, selectedDays),
         selectedVerificationTimeType = selectedVerificationTimeType,
         enabledDaysOfWeek = enabledDaysOfWeek,
+        isNotTitleValid = isNotTitleValid,
         enabledButton = enabledButton,
         pagerState = pagerState,
         onClickNextStep = viewModel::updateCurrentStepToNext,
@@ -184,6 +185,7 @@ fun BoardSetupScreen(
     count : Int,
     selectedVerificationTimeType: VerificationTimeType?,
     enabledDaysOfWeek : Set<DayOfWeek>,
+    isNotTitleValid : Boolean,
     enabledButton: Boolean,
     pagerState : PagerState,
     onClickNextStep: () -> Unit,
@@ -221,6 +223,7 @@ fun BoardSetupScreen(
                 0 -> {
                     BoardSetupMission(
                         missionTitle = missionTitle,
+                        isNotTitleValid = isNotTitleValid,
                         onTitleChange = onMissionTitleChange,
                     )
                 }

feature/onboarding/src/main/java/com/goalpanzi/mission_mate/feature/onboarding/screen/boardsetup/BoardSetupViewModel.kt

@@ -42,6 +42,9 @@ class BoardSetupViewModel @Inject constructor(
     private val _setupEvent = MutableSharedFlow<BoardSetupResult>()
     val setupEvent: SharedFlow<BoardSetupResult> = _setupEvent.asSharedFlow()
 
+    private val _isNotTitleValid = MutableStateFlow(false)
+    val isNotTitleValid: StateFlow<Boolean> = _isNotTitleValid.asStateFlow()
+
     private val _currentStep = MutableStateFlow(BoardSetupStep.MISSION)
     val currentStep: StateFlow<BoardSetupStep> = _currentStep.asStateFlow()
 
@@ -129,7 +132,9 @@ class BoardSetupViewModel @Inject constructor(
     }
 
     fun updateMissionTitle(title: String) {
-        if (title.length <= MISSION_TITLE_MAX_LENGTH) missionTitle = title
+        missionTitle = title
+        _isNotTitleValid.value = title.length in 1.. 3 || title.length > 12
+
     }
 
     fun updateStartDate(date: Long) {

feature/onboarding/src/main/java/com/goalpanzi/mission_mate/feature/onboarding/screen/invitation/InvitationCodeScreen.kt

@@ -3,6 +3,7 @@ package com.goalpanzi.mission_mate.feature.onboarding.screen.invitation
 import android.widget.Toast
 import androidx.compose.foundation.ScrollState
 import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
@@ -40,6 +41,7 @@ import androidx.hilt.navigation.compose.hiltViewModel
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import com.goalpanzi.mission_mate.core.designsystem.component.MissionMateButtonType
 import com.goalpanzi.mission_mate.core.designsystem.component.MissionMateTextButton
+import com.goalpanzi.mission_mate.core.designsystem.ext.clickableWithoutRipple
 import com.goalpanzi.mission_mate.core.designsystem.theme.ColorGray1_FF404249
 import com.goalpanzi.mission_mate.core.designsystem.theme.ColorGray2_FF4F505C
 import com.goalpanzi.mission_mate.core.designsystem.theme.ColorOrange_FFFF5732
@@ -84,6 +86,13 @@ fun InvitationCodeRoute(
                         localFocusManager.moveFocus(FocusDirection.Next)
                     }
 
+                    CodeActionEvent.SECOND_CLEAR,
+                    CodeActionEvent.THIRD_CLEAR,
+                    CodeActionEvent.FOURTH_CLEAR -> {
+                        delay(80)
+                        localFocusManager.moveFocus(FocusDirection.Previous)
+                    }
+
                     else -> {
 
                     }
@@ -166,7 +175,11 @@ fun InvitationCodeRoute(
         },
         onBackClick = onBackClick,
         isNotCodeValid = isNotCodeValid,
-        enabledButton = enabledButton
+        enabledButton = enabledButton,
+        modifier = Modifier.clickableWithoutRipple {
+            keyboardController?.hide()
+            localFocusManager.clearFocus()
+        }
     )
 }
 

feature/onboarding/src/main/java/com/goalpanzi/mission_mate/feature/onboarding/screen/invitation/InvitationCodeViewModel.kt

@@ -42,25 +42,25 @@ class InvitationCodeViewModel @Inject constructor(
     var codeFirst by mutableStateOf("")
         private set
 
-    private val isNotCodeFirstEmpty =
+    private val codeFirstFlow =
         snapshotFlow { codeFirst }
 
     var codeSecond by mutableStateOf("")
         private set
 
-    private val isNotCodeSecondEmpty =
+    private val codeSecondFlow =
         snapshotFlow { codeSecond }
 
     var codeThird by mutableStateOf("")
         private set
 
-    private val isNotCodeThirdEmpty =
+    private val codeThirdFlow =
         snapshotFlow { codeThird }
 
     var codeFourth by mutableStateOf("")
         private set
 
-    private val isNotCodeFourthEmpty =
+    private val codeFourthFlow =
         snapshotFlow { codeFourth }
 
     private val _isNotCodeValid = MutableStateFlow(false)
@@ -71,10 +71,10 @@ class InvitationCodeViewModel @Inject constructor(
 
     val enabledButton: StateFlow<Boolean> =
         combine(
-            isNotCodeFirstEmpty.map { it.isNotEmpty() },
-            isNotCodeSecondEmpty.map { it.isNotEmpty() },
-            isNotCodeThirdEmpty.map { it.isNotEmpty() },
-            isNotCodeFourthEmpty.map { it.isNotEmpty() },
+            codeFirstFlow.map { it.isNotEmpty() },
+            codeSecondFlow.map { it.isNotEmpty() },
+            codeThirdFlow.map { it.isNotEmpty() },
+            codeFourthFlow.map { it.isNotEmpty() },
             isNotCodeValid
         ) { isNotFirstEmpty, isNotSecondEmpty, isNotThirdEmpty, isNotFourthEmpty, isNotValid ->
             isNotFirstEmpty && isNotSecondEmpty && isNotThirdEmpty && isNotFourthEmpty && !isNotValid
@@ -86,9 +86,10 @@ class InvitationCodeViewModel @Inject constructor(
 
     val codeInputActionEvent: SharedFlow<CodeActionEvent> =
         merge(
-            isNotCodeFirstEmpty.filterNot { it.isEmpty() }.map { CodeActionEvent.FIRST_DONE },
-            isNotCodeSecondEmpty.filterNot { it.isEmpty() }.map { CodeActionEvent.SECOND_DONE },
-            isNotCodeThirdEmpty.filterNot { it.isEmpty() }.map { CodeActionEvent.THIRD_DONE }
+            codeFirstFlow.map { if(it.isNotEmpty()) CodeActionEvent.FIRST_DONE  else CodeActionEvent.FIRST_CLEAR },
+            codeSecondFlow.map { if(it.isNotEmpty()) CodeActionEvent.SECOND_DONE  else CodeActionEvent.SECOND_CLEAR },
+            codeThirdFlow.map { if(it.isNotEmpty()) CodeActionEvent.THIRD_DONE  else CodeActionEvent.THIRD_CLEAR },
+            codeFourthFlow.map { if(it.isNotEmpty()) CodeActionEvent.FOURTH_DONE  else CodeActionEvent.FOURTH_CLEAR }
         ).shareIn(
             scope = viewModelScope,
             started = SharingStarted.WhileSubscribed(500)
@@ -180,9 +181,14 @@ class InvitationCodeViewModel @Inject constructor(
     companion object {
         enum class CodeActionEvent {
             FIRST_DONE,
+            FIRST_CLEAR,
             SECOND_DONE,
+            SECOND_CLEAR,
             THIRD_DONE,
+            THIRD_CLEAR,
             FOURTH_DONE,
+            FOURTH_CLEAR
+
         }
     }
 }

feature/profile/src/main/java/com/luckyoct/feature/profile/ProfileScreen.kt

@@ -40,6 +40,8 @@ import androidx.compose.ui.draw.alpha
 import androidx.compose.ui.draw.paint
 import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.platform.LocalFocusManager
+import androidx.compose.ui.platform.LocalSoftwareKeyboardController
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.style.TextAlign
@@ -50,6 +52,7 @@ import androidx.lifecycle.viewmodel.compose.viewModel
 import com.goalpanzi.mission_mate.core.designsystem.component.MissionMateButtonType
 import com.goalpanzi.mission_mate.core.designsystem.component.MissionMateTextButton
 import com.goalpanzi.mission_mate.core.designsystem.component.MissionMateTextFieldGroup
+import com.goalpanzi.mission_mate.core.designsystem.ext.clickableWithoutRipple
 import com.goalpanzi.mission_mate.core.designsystem.theme.ColorGray1_FF404249
 import com.goalpanzi.mission_mate.core.designsystem.theme.ColorGray5_FFF5F6F9
 import com.goalpanzi.mission_mate.core.designsystem.theme.ColorWhite_FFFFFFFF
@@ -83,6 +86,9 @@ fun ProfileRoute(
     val uiState by viewModel.uiState.collectAsStateWithLifecycle()
     val isInvalidNickname by viewModel.isInvalidNickname.collectAsStateWithLifecycle()
 
+    val keyboardController = LocalSoftwareKeyboardController.current
+    val localFocusManager = LocalFocusManager.current
+
     LaunchedEffect(true) {
         viewModel.isSaveSuccess.collectLatest {
             if (it) onSaveSuccess()
@@ -91,6 +97,10 @@ fun ProfileRoute(
 
     Box(
         modifier = Modifier
+            .clickableWithoutRipple {
+                keyboardController?.hide()
+                localFocusManager.clearFocus()
+            }
             .fillMaxSize()
             .background(color = ColorWhite_FFFFFFFF)
             .systemBarsPadding()