From a05e2c5e7cc56ef131aac925bb9f22d2f3212540 Mon Sep 17 00:00:00 2001 From: cemal Date: Thu, 21 Dec 2023 11:29:45 +0100 Subject: [PATCH] Added tab and shift+tab on Form --- src/main/kotlin/main/Form.kt | 120 +++++++++++++++++++++++++++++++---- src/main/kotlin/main/Home.kt | 6 +- 2 files changed, 114 insertions(+), 12 deletions(-) diff --git a/src/main/kotlin/main/Form.kt b/src/main/kotlin/main/Form.kt index 145ba27..e5c9249 100644 --- a/src/main/kotlin/main/Form.kt +++ b/src/main/kotlin/main/Form.kt @@ -11,17 +11,23 @@ import androidx.compose.material.icons.filled.ArrowBack import androidx.compose.material.icons.filled.Check import androidx.compose.runtime.* import androidx.compose.ui.Alignment +import androidx.compose.ui.ExperimentalComposeUiApi import androidx.compose.ui.Modifier import androidx.compose.ui.draw.clip +import androidx.compose.ui.focus.FocusRequester +import androidx.compose.ui.focus.focusOrder +import androidx.compose.ui.focus.focusRequester import androidx.compose.ui.graphics.Color +import androidx.compose.ui.input.key.* import androidx.compose.ui.unit.dp import kotlinx.serialization.encodeToString import kotlinx.serialization.json.Json import java.io.File import java.io.IOException + var appState = AppState -@OptIn(ExperimentalMaterialApi::class) +@OptIn(ExperimentalMaterialApi::class, ExperimentalComposeUiApi::class) @Composable fun formPage(glossary: Glossary, onCancelClick: () -> Unit) { // State to track whether to show the snackbar @@ -67,8 +73,8 @@ fun formPage(glossary: Glossary, onCancelClick: () -> Unit) { } ) } - MaterialTheme { + val focusRequesters = List(7) { FocusRequester() } Column( modifier = Modifier.padding(16.dp), verticalArrangement = Arrangement.spacedBy(8.dp), @@ -80,23 +86,47 @@ fun formPage(glossary: Glossary, onCancelClick: () -> Unit) { value = name.value, onValueChange = { name.value = it }, label = { Text("Mot *") }, + singleLine = true, colors = TextFieldDefaults.textFieldColors( focusedIndicatorColor = customRedColor, unfocusedIndicatorColor = Color.Gray, focusedLabelColor = customRedColor - ) + ), + modifier = Modifier + .focusRequester(focusRequesters[0]) + .onKeyEvent { event -> + if (event.type == KeyEventType.KeyDown && event.key == Key.Tab) { + focusRequesters[1].requestFocus() + true + } else { + false + } + } ) - TextField( value = description.value, onValueChange = { description.value = it }, label = { Text("Description") }, + singleLine = true, colors = TextFieldDefaults.textFieldColors( focusedIndicatorColor = customRedColor, unfocusedIndicatorColor = Color.Gray, focusedLabelColor = customRedColor - ) + ), + modifier = Modifier + .focusRequester(focusRequesters[1]) + .onKeyEvent { event -> + if (event.type == KeyEventType.KeyDown && event.key == Key.Tab && !event.isShiftPressed) { + focusRequesters[2].requestFocus() + true + } else if (event.type == KeyEventType.KeyDown && event.key == Key.Tab && event.isShiftPressed) { + focusRequesters[0].requestFocus() + true + } else { + false + } + } ) @@ -122,13 +152,26 @@ fun formPage(glossary: Glossary, onCancelClick: () -> Unit) { listToShow = contextList.filter { word -> word.startsWith(mainContext.value, ignoreCase = true) } }, + singleLine = true, label = { Text("Contexte principal *") }, colors = TextFieldDefaults.textFieldColors( focusedIndicatorColor = customRedColor, unfocusedIndicatorColor = Color.Gray, focusedLabelColor = customRedColor - ) - + ), + modifier = Modifier + .focusRequester(focusRequesters[2]) + .onKeyEvent { event -> + if (event.type == KeyEventType.KeyDown && event.key == Key.Tab && !event.isShiftPressed) { + focusRequesters[3].requestFocus() + true + } else if (event.type == KeyEventType.KeyDown && event.key == Key.Tab && event.isShiftPressed) { + focusRequesters[1].requestFocus() + true + } else { + false + } + } ) var dropHeight = (listToShow.count() * 60 + 30) @@ -183,44 +226,99 @@ fun formPage(glossary: Glossary, onCancelClick: () -> Unit) { value = secondaryContext.value, onValueChange = { secondaryContext.value = it }, label = { Text("Contexte 2") }, + singleLine = true, colors = TextFieldDefaults.textFieldColors( focusedIndicatorColor = customRedColor, unfocusedIndicatorColor = Color.Gray, focusedLabelColor = customRedColor - ) + ), + modifier = Modifier + .focusRequester(focusRequesters[3]) + .onKeyEvent { event -> + if (event.type == KeyEventType.KeyDown && event.key == Key.Tab && !event.isShiftPressed) { + focusRequesters[4].requestFocus() + true + } else if (event.type == KeyEventType.KeyDown && event.key == Key.Tab && event.isShiftPressed) { + focusRequesters[2].requestFocus() + true + } else { + false + } + } ) TextField( value = relatedTo.value, onValueChange = { relatedTo.value = it }, label = { Text("Lié à") }, + singleLine = true, colors = TextFieldDefaults.textFieldColors( focusedIndicatorColor = customRedColor, unfocusedIndicatorColor = Color.Gray, focusedLabelColor = customRedColor - ) + ), + modifier = Modifier + .focusRequester(focusRequesters[4]) + .onKeyEvent { event -> + if (event.type == KeyEventType.KeyDown && event.key == Key.Tab && !event.isShiftPressed) { + focusRequesters[5].requestFocus() + true + } else if (event.type == KeyEventType.KeyDown && event.key == Key.Tab && event.isShiftPressed) { + focusRequesters[3].requestFocus() + true + } else { + false + } + } ) TextField( value = synonymous.value, onValueChange = { synonymous.value = it }, label = { Text("Synonyme") }, + singleLine = true, colors = TextFieldDefaults.textFieldColors( focusedIndicatorColor = customRedColor, unfocusedIndicatorColor = Color.Gray, focusedLabelColor = customRedColor - ) + ), + modifier = Modifier + .focusRequester(focusRequesters[5]) + .onKeyEvent { event -> + if (event.type == KeyEventType.KeyDown && event.key == Key.Tab && !event.isShiftPressed) { + focusRequesters[6].requestFocus() + true + } else if (event.type == KeyEventType.KeyDown && event.key == Key.Tab && event.isShiftPressed) { + focusRequesters[4].requestFocus() + true + } else { + false + } + } ) TextField( value = antonym.value, onValueChange = { antonym.value = it }, label = { Text("Antonyme") }, + singleLine = true, colors = TextFieldDefaults.textFieldColors( focusedIndicatorColor = customRedColor, unfocusedIndicatorColor = Color.Gray, focusedLabelColor = customRedColor - ) + ), + modifier = Modifier + .focusRequester(focusRequesters[6]) + .onKeyEvent { event -> + if (event.type == KeyEventType.KeyDown && event.key == Key.Tab && !event.isShiftPressed) { + true + } else if (event.type == KeyEventType.KeyDown && event.key == Key.Tab && event.isShiftPressed) { + focusRequesters[5].requestFocus() + true + } else { + false + } + } ) Row( diff --git a/src/main/kotlin/main/Home.kt b/src/main/kotlin/main/Home.kt index e4e95b8..f9a6599 100644 --- a/src/main/kotlin/main/Home.kt +++ b/src/main/kotlin/main/Home.kt @@ -202,7 +202,11 @@ fun glossaryList(glossaries: List, onGlossarySelected: (Glossary) -> U val scrollState = rememberLazyListState() LazyColumn( state = scrollState, - modifier = Modifier.padding(10.dp).width(250.dp).height(300.dp).border(1.dp, Color.Black), + modifier = Modifier + .padding(10.dp) + .width(200.dp) + .height(300.dp) + .border(1.dp, Color.Black), verticalArrangement = Arrangement.spacedBy(10.dp) ) { if (glossaries.isEmpty()) {