Added tab and shift+tab on Form

main
Cemal Odabasioglu 2023-12-21 11:29:45 +01:00
parent bdf9492185
commit a05e2c5e7c
2 changed files with 114 additions and 12 deletions

View File

@ -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(

View File

@ -202,7 +202,11 @@ fun glossaryList(glossaries: List<Glossary>, 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()) {