fix(ui): Correct reorder mode behavior and layout
This commit fixes several issues related to the recently implemented reorder mode. - Adds the missing right-side drag handle in the detail view to support both left- and right-handed users. - Corrects the behavior of the back button in the detail view to first exit reorder mode before navigating away. - Implements a proper exit mechanism for reorder mode in the list view by changing the navigation icon to a back arrow.
This commit is contained in:
@@ -121,7 +121,7 @@ fun AppShell(
|
||||
|
||||
// Collect state from ViewModel
|
||||
val searchQuery by shoppingListsViewModel.searchQuery.collectAsState()
|
||||
val selectedItem by shoppingListsViewModel.selectedItem.collectAsState()
|
||||
val isReorderMode by shoppingListsViewModel.isReorderMode.collectAsState()
|
||||
val newItemName by shoppingListsViewModel.newItemName.collectAsState()
|
||||
val showCompletedItems by shoppingListsViewModel.showCompletedItems.collectAsState()
|
||||
val shoppingListWithItems by shoppingListsViewModel.getShoppingListWithItemsStream(selectedListId ?: 0)
|
||||
@@ -175,45 +175,45 @@ fun AppShell(
|
||||
}
|
||||
|
||||
Column {
|
||||
if (currentScreen == Screen.ShoppingListDetail) {
|
||||
TopAppBar(
|
||||
title = { Text(topBarTitle) },
|
||||
navigationIcon = {
|
||||
IconButton(onClick = {
|
||||
shoppingListsViewModel.disableReorderMode()
|
||||
currentScreen = Screen.ShoppingLists; selectedListId = null
|
||||
}) {
|
||||
TopAppBar(
|
||||
title = { Text(topBarTitle) },
|
||||
navigationIcon = {
|
||||
if (isReorderMode) {
|
||||
IconButton(onClick = { shoppingListsViewModel.disableReorderMode() }) {
|
||||
Icon(Icons.AutoMirrored.Filled.ArrowBack, contentDescription = stringResource(R.string.back))
|
||||
}
|
||||
},
|
||||
actions = {},
|
||||
colors = TopAppBarDefaults.topAppBarColors(
|
||||
containerColor = Color.Transparent
|
||||
)
|
||||
)
|
||||
} else {
|
||||
TopAppBar(
|
||||
title = { Text(topBarTitle, style = MaterialTheme.typography.titleMedium) },
|
||||
navigationIcon = {
|
||||
IconButton(onClick = { scope.launch { drawerState.apply { if (isClosed) open() else close() } } }) {
|
||||
Icon(imageVector = Icons.Default.Menu, contentDescription = stringResource(id = R.string.menu_open))
|
||||
} else {
|
||||
when (currentScreen) {
|
||||
is Screen.ShoppingListDetail -> {
|
||||
IconButton(onClick = {
|
||||
currentScreen = Screen.ShoppingLists; selectedListId = null
|
||||
}) {
|
||||
Icon(Icons.AutoMirrored.Filled.ArrowBack, contentDescription = stringResource(R.string.back))
|
||||
}
|
||||
}
|
||||
else -> {
|
||||
IconButton(onClick = { scope.launch { drawerState.apply { if (isClosed) open() else close() } } }) {
|
||||
Icon(imageVector = Icons.Default.Menu, contentDescription = stringResource(id = R.string.menu_open))
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
actions = {
|
||||
if (currentScreen == Screen.ShoppingLists) {
|
||||
IconButton(onClick = {
|
||||
shoppingListsViewModel.resetListDetails()
|
||||
showListDialog = true
|
||||
}) {
|
||||
Icon(Icons.Default.Add, contentDescription = stringResource(R.string.add_shopping_list))
|
||||
}
|
||||
}
|
||||
},
|
||||
colors = TopAppBarDefaults.topAppBarColors(
|
||||
containerColor = Color.Transparent
|
||||
)
|
||||
)
|
||||
}
|
||||
}
|
||||
},
|
||||
actions = {
|
||||
if (currentScreen == Screen.ShoppingLists && !isReorderMode) {
|
||||
IconButton(onClick = {
|
||||
shoppingListsViewModel.resetListDetails()
|
||||
showListDialog = true
|
||||
}) {
|
||||
Icon(Icons.Default.Add, contentDescription = stringResource(R.string.add_shopping_list))
|
||||
}
|
||||
}
|
||||
},
|
||||
colors = TopAppBarDefaults.topAppBarColors(
|
||||
containerColor = Color.Transparent
|
||||
)
|
||||
)
|
||||
|
||||
if (currentScreen == Screen.ShoppingLists) {
|
||||
OutlinedTextField(
|
||||
value = searchQuery,
|
||||
|
||||
@@ -148,7 +148,7 @@ fun ShoppingListDetailScreen(
|
||||
val reorderedItems = filteredItems.toMutableList().apply {
|
||||
add(to.index, removeAt(from.index))
|
||||
}
|
||||
viewModel.moveItem(listId ?: 0, reorderedItems)
|
||||
viewModel.moveItem(reorderedItems)
|
||||
}
|
||||
LazyColumn(
|
||||
state = lazyListState,
|
||||
@@ -220,6 +220,11 @@ fun ShoppingListDetailScreen(
|
||||
)
|
||||
}
|
||||
}
|
||||
if (isReorderMode) {
|
||||
IconButton(modifier = Modifier.draggableHandle(), onClick = {}) {
|
||||
Icon(Icons.Rounded.DragHandle, contentDescription = "Reorder")
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -42,6 +42,8 @@ import androidx.compose.runtime.rememberCoroutineScope
|
||||
import androidx.compose.runtime.setValue
|
||||
import androidx.compose.ui.Alignment
|
||||
import androidx.compose.ui.Modifier
|
||||
import androidx.compose.ui.input.pointer.pointerInput
|
||||
import androidx.compose.foundation.gestures.detectTapGestures
|
||||
import androidx.compose.ui.draw.shadow
|
||||
import androidx.compose.ui.graphics.Color
|
||||
import androidx.compose.ui.graphics.graphicsLayer
|
||||
|
||||
@@ -275,7 +275,7 @@ class ShoppingListsViewModel(private val noteshopRepository: NoteshopRepository)
|
||||
}
|
||||
}
|
||||
|
||||
fun moveItem(listId: Int, items: List<ShoppingListItem>) {
|
||||
fun moveItem(items: List<ShoppingListItem>) {
|
||||
viewModelScope.launch {
|
||||
val updatedItems = items.mapIndexed { index, item ->
|
||||
item.copy(displayOrder = index)
|
||||
|
||||
Reference in New Issue
Block a user