Menu improvement

app_sample/src/main/java/br/com/leandroferreira/app_sample/screens/menu/ui/screen/ChooseNoteScreen.kt

@@ -14,6 +14,7 @@ import androidx.compose.foundation.lazy.items
 import androidx.compose.foundation.lazy.staggeredgrid.LazyVerticalStaggeredGrid
 import androidx.compose.foundation.lazy.staggeredgrid.StaggeredGridCells
 import androidx.compose.foundation.lazy.staggeredgrid.items
+import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.Add
@@ -35,6 +36,7 @@ import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.font.FontWeight
@@ -66,8 +68,6 @@ fun ChooseNoteScreen(
 ) {
     chooseNoteViewModel.requestDocuments()
 
-    var configOptionsAppears by remember { mutableStateOf(false) }
-
     MaterialTheme {
         Scaffold(
             topBar = {
@@ -78,10 +78,9 @@ fun ChooseNoteScreen(
                     actions = {
                         Icon(
                             modifier = Modifier
-                                .padding(10.dp)
-                                .clickable {
-                                    configOptionsAppears = !configOptionsAppears
-                                },
+                                .clip(CircleShape)
+                                .clickable(onClick = chooseNoteViewModel::editMenu)
+                                .padding(10.dp),
                             imageVector = Icons.Default.MoreVert,
                             contentDescription = stringResource(R.string.more_options),
                             tint = MaterialTheme.colorScheme.onPrimary
@@ -106,7 +105,6 @@ fun ChooseNoteScreen(
                 chooseNoteViewModel = chooseNoteViewModel,
                 navigateToNote = navigateToNote,
                 paddingValues = paddingValues,
-                editState = configOptionsAppears
             )
         }
     }
@@ -118,7 +116,6 @@ private fun Content(
     chooseNoteViewModel: ChooseNoteViewModel,
     navigateToNote: (String) -> Unit,
     paddingValues: PaddingValues,
-    editState: Boolean
 ) {
     Box(
         modifier = Modifier
@@ -127,8 +124,11 @@ private fun Content(
     ) {
         Notes(chooseNoteViewModel = chooseNoteViewModel, navigateToNote = navigateToNote)
 
+        val editState by chooseNoteViewModel.editState.collectAsStateWithLifecycle()
+
         ConfigurationsMenu(
             editState = editState,
+            outsideClick = chooseNoteViewModel::cancelMenu,
             listOptionClick = chooseNoteViewModel::listArrangementSelected,
             gridOptionClick = chooseNoteViewModel::gridArrangementSelected,
             sortingSelected = chooseNoteViewModel::sortingSelected

app_sample/src/main/java/br/com/leandroferreira/app_sample/screens/menu/ui/screen/ConfigurationsMenu.kt

@@ -1,12 +1,14 @@
 package br.com.leandroferreira.app_sample.screens.menu.ui.screen
 
+import android.graphics.drawable.ColorDrawable
 import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.BoxScope
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
@@ -40,10 +42,21 @@ private const val INNER_PADDING = 3
 @Composable
 internal fun BoxScope.ConfigurationsMenu(
     editState: Boolean,
+    outsideClick: () -> Unit,
     listOptionClick: () -> Unit,
     gridOptionClick: () -> Unit,
     sortingSelected: (OrderBy) -> Unit,
 ) {
+
+    if (editState) {
+        Box(
+            modifier = Modifier
+                .fillMaxSize()
+                .background(Color(0xCC000000))
+                .clickable(onClick = outsideClick)
+        )
+    }
+
     // Todo: Extract to a global use function
     SlideInBox(
         modifier = Modifier
@@ -199,7 +212,7 @@ private fun Modifier.orderConfigModifier(clickable: () -> Unit): Modifier =
 @Composable
 private fun ConfigurationsMenu_Preview() {
     Box(modifier = Modifier.fillMaxWidth()) {
-        ConfigurationsMenu(true, {}, {}, {})
+        ConfigurationsMenu(true, {}, {}, {}, {})
     }
 }
 

app_sample/src/main/java/br/com/leandroferreira/app_sample/screens/menu/viewmodel/ChooseNoteViewModel.kt

@@ -27,6 +27,9 @@ class ChooseNoteViewModel(
     private val _notesArrangement = MutableStateFlow<NotesArrangement?>(null)
     val notesArrangement = _notesArrangement.asStateFlow()
 
+    private val _editState = MutableStateFlow(false)
+    val editState = _editState.asStateFlow()
+
     fun requestDocuments() {
         if (documentsState.value !is ResultData.Complete) {
             viewModelScope.launch(Dispatchers.IO) {
@@ -35,6 +38,14 @@ class ChooseNoteViewModel(
         }
     }
 
+    fun editMenu() {
+        _editState.value = !editState.value
+    }
+
+    fun cancelMenu() {
+        _editState.value = false
+    }
+
     private suspend fun refreshDocuments() {
         _documentsState.value = ResultData.Loading()