Style dialogs for UART

This commit is contained in:
Sylwester Zieliński
2022-05-10 10:25:30 +02:00
parent 7c08a933e3
commit 10a727313c
3 changed files with 60 additions and 91 deletions

View File

@@ -3,7 +3,7 @@
<string name="app_name">nRF Toolbox</string> <string name="app_name">nRF Toolbox</string>
<string name="dialog">Dialog</string> <string name="dialog">Dialog</string>
<string name="cancel">CANCEL</string> <string name="cancel">Cancel</string>
<string name="go_up">Back</string> <string name="go_up">Back</string>

View File

@@ -115,7 +115,7 @@ private fun DeleteConfigurationDialog(onEvent: (UARTViewEvent) -> Unit, onDismis
Text(text = stringResource(id = R.string.uart_delete_dialog_info)) Text(text = stringResource(id = R.string.uart_delete_dialog_info))
}, },
confirmButton = { confirmButton = {
Button(onClick = { TextButton(onClick = {
onDismiss() onDismiss()
onEvent(OnDeleteConfiguration) onEvent(OnDeleteConfiguration)
}) { }) {
@@ -123,7 +123,7 @@ private fun DeleteConfigurationDialog(onEvent: (UARTViewEvent) -> Unit, onDismis
} }
}, },
dismissButton = { dismissButton = {
Button(onClick = onDismiss) { TextButton(onClick = onDismiss) {
Text(text = stringResource(id = R.string.uart_delete_dialog_cancel)) Text(text = stringResource(id = R.string.uart_delete_dialog_cancel))
} }
} }

View File

@@ -8,8 +8,8 @@ import androidx.compose.foundation.lazy.grid.GridCells
import androidx.compose.foundation.lazy.grid.GridItemSpan import androidx.compose.foundation.lazy.grid.GridItemSpan
import androidx.compose.foundation.lazy.grid.LazyVerticalGrid import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.AlertDialog
import androidx.compose.material3.MaterialTheme import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text import androidx.compose.material3.Text
import androidx.compose.material3.TextButton import androidx.compose.material3.TextButton
import androidx.compose.runtime.Composable import androidx.compose.runtime.Composable
@@ -24,7 +24,6 @@ import androidx.compose.ui.graphics.ColorFilter
import androidx.compose.ui.res.painterResource import androidx.compose.ui.res.painterResource
import androidx.compose.ui.res.stringResource import androidx.compose.ui.res.stringResource
import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.dp
import androidx.compose.ui.window.Dialog
import no.nordicsemi.android.material.you.RadioButtonGroup import no.nordicsemi.android.material.you.RadioButtonGroup
import no.nordicsemi.android.material.you.RadioButtonItem import no.nordicsemi.android.material.you.RadioButtonItem
import no.nordicsemi.android.material.you.RadioGroupViewEntity import no.nordicsemi.android.material.you.RadioGroupViewEntity
@@ -44,99 +43,69 @@ internal fun UARTAddMacroDialog(macro: UARTMacro?, onEvent: (UARTViewEvent) -> U
val isError = rememberSaveable { mutableStateOf(false) } val isError = rememberSaveable { mutableStateOf(false) }
val selectedIcon = rememberSaveable { mutableStateOf(macro?.icon ?: MacroIcon.values()[0]) } val selectedIcon = rememberSaveable { mutableStateOf(macro?.icon ?: MacroIcon.values()[0]) }
Dialog(onDismissRequest = { onEvent(OnEditFinish) }) { AlertDialog(
Surface( onDismissRequest = { onEvent(OnEditFinish) },
color = MaterialTheme.colorScheme.background, dismissButton = {
shape = RoundedCornerShape(10.dp), TextButton(onClick = { onEvent(OnDeleteMacro) }) {
shadowElevation = 0.dp, Text(stringResource(id = R.string.uart_macro_dialog_delete))
) { }
Column { },
Text( confirmButton = {
text = stringResource(id = R.string.uart_macro_dialog_title), TextButton(onClick = {
style = MaterialTheme.typography.headlineSmall, if (isCommandValid(command.value)) {
modifier = Modifier onEvent(OnCreateMacro(UARTMacro(selectedIcon.value, command.value, newLineChar.value)))
.fillMaxWidth() } else {
.padding(16.dp) isError.value = true
) }
}) {
Text(stringResource(id = R.string.uart_macro_dialog_confirm))
}
},
title = {
Text(
text = stringResource(id = R.string.uart_macro_dialog_title),
style = MaterialTheme.typography.headlineSmall
)
},
text = {
LazyVerticalGrid(
columns = GridCells.Fixed(GRID_SIZE),
modifier = Modifier.wrapContentHeight()
) {
item(span = { GridItemSpan(GRID_SIZE) }) {
Column {
NewLineCharSection(newLineChar.value) { newLineChar.value = it }
LazyVerticalGrid( Spacer(modifier = Modifier.size(16.dp))
columns = GridCells.Fixed(GRID_SIZE), }
modifier = Modifier }
.padding(horizontal = 16.dp)
.wrapContentHeight()
) {
item(span = { GridItemSpan(GRID_SIZE) }) {
Column {
NewLineCharSection(newLineChar.value) { newLineChar.value = it }
Spacer(modifier = Modifier.size(16.dp)) item(span = { GridItemSpan(GRID_SIZE) }) {
} CommandInput(command, isError)
}
items(20) { item ->
val icon = MacroIcon.create(item)
val background = if (selectedIcon.value == icon) {
MaterialTheme.colorScheme.primaryContainer
} else {
Color.Transparent
} }
item(span = { GridItemSpan(GRID_SIZE) }) { Image(
CommandInput(command, isError) painter = painterResource(id = icon.toResId()),
} contentDescription = stringResource(id = R.string.uart_macro_icon),
colorFilter = ColorFilter.tint(MaterialTheme.colorScheme.onPrimaryContainer),
items(20) { item -> modifier = Modifier
val icon = MacroIcon.create(item) .size(40.dp)
val background = if (selectedIcon.value == icon) { .clip(RoundedCornerShape(10.dp))
MaterialTheme.colorScheme.primaryContainer .clickable { selectedIcon.value = icon }
} else { .background(background)
Color.Transparent )
}
Image(
painter = painterResource(id = icon.toResId()),
contentDescription = stringResource(id = R.string.uart_macro_icon),
colorFilter = ColorFilter.tint(MaterialTheme.colorScheme.onPrimaryContainer),
modifier = Modifier
.size(40.dp)
.clip(RoundedCornerShape(10.dp))
.clickable { selectedIcon.value = icon }
.background(background)
)
}
item(span = { GridItemSpan(GRID_SIZE) }) {
Row(
modifier = Modifier.fillMaxWidth(),
horizontalArrangement = Arrangement.End
) {
TextButton(onClick = { onEvent(OnEditFinish) }) {
Text(stringResource(id = R.string.uart_macro_dialog_dismiss))
}
Spacer(modifier = Modifier.size(16.dp))
TextButton(onClick = { onEvent(OnDeleteMacro) }) {
Text(stringResource(id = R.string.uart_macro_dialog_delete))
}
Spacer(modifier = Modifier.size(16.dp))
TextButton(onClick = {
if (isCommandValid(command.value)) {
onEvent(
OnCreateMacro(
UARTMacro(
selectedIcon.value,
command.value,
newLineChar.value
)
)
)
} else {
isError.value = true
}
}) {
Text(stringResource(id = R.string.uart_macro_dialog_confirm))
}
}
}
} }
} }
} }
} )
} }
@Composable @Composable