RedJocker / OrdersMenu

0 stars 0 forks source link

consider changing clickable text to button #8

Closed RedJocker closed 1 year ago

RedJocker commented 1 year ago

Instead of the text "+" and "-" with the clickable modifier, it is better to use a regular Button composable with the same text. It's really a button, not clickable text. And as a result, it will be much easier to click on it, since the text takes up a very small space to click.

on revision by @Razotron

RedJocker commented 1 year ago

I did consider having a button instead of clickable text, it was actually the first thing I tried, but have changed for two reasons. One is that I could delay having a new prerequisite topic for buttons and the second one that actually weighted more on my choice is that to make it look good with the intended minimal style of the apps ui would require much more effort with button than with a clickable text because of the predefined styles that a button has. I did have a concern about the clickable area, but thought that the size of the text was big enough as to give a reasonably good amount of clickable area.

for the reasons above I intend to have this issue labeled as wontfix, but I will keep it open for the moment so that there is a chance to argue against this intended decision.

RazoTRON commented 1 year ago

It doesn't take a lot of work to do this. I recommend doing it in the following style:

@Composable
    fun OrderMenuItem(itemName: String) {
        Row(Modifier.fillMaxWidth(), Arrangement.SpaceBetween, Alignment.CenterVertically) {
            var quantity by remember { mutableStateOf(0) }

            Text(
                text = itemName,
                color = if (quantity >= 5) Color.Red else Color.Black,
                fontSize = 24.sp,
            )

            Text(text = "$quantity", fontSize = 24.sp)

            Row {
                OutlinedButton(onClick = { /*TODO*/ }, shape = CircleShape) {
                    Text(text = "+", fontSize = 24.sp)
                }

                OutlinedButton(onClick = { /*TODO*/ }, shape = CircleShape) {
                    Text(text = "-", fontSize = 24.sp)
                }
            }
        }
    }

photo_5458784802380564077_y

RedJocker commented 1 year ago

It doesn't take a lot of work to do this

It may not take a lot of effort to write this to someone that already has good skills with compose, but this does assumes more knowledge than the non-aligned version with clickable text. You need nested Rows, some comfort with using Arrangement and Alignment, knowing one extra composable and using shapes. Considering that we are targeting users that are new to programming, new to android and or new to compose I prefer keeping things as simple as possible. If this was not being intended to be as easy as possible within the theme and with fewer prerequisites as possible I would favor having a better looking UI.