Do some styling.

2023-01-20 08:58:51 +01:00
parent 8b4ce20c99
commit 57bb4deebe
6 changed files with 170 additions and 61 deletions
--- a/app/src/main/java/me/zobrist/tichucounter/ui/counter/CounterView.kt
+++ b/app/src/main/java/me/zobrist/tichucounter/ui/counter/CounterView.kt
@@ -3,23 +3,25 @@ package me.zobrist.tichucounter.ui.counter
 import android.content.res.Configuration
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
+import androidx.compose.material3.Surface
 import androidx.compose.runtime.*
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.LocalConfiguration


-
@Composable
 fun Counter(viewModel: CounterViewModel) {

    var orientation by remember { mutableStateOf(Configuration.ORIENTATION_PORTRAIT) }
    orientation = LocalConfiguration.current.orientation

-    if(orientation == Configuration.ORIENTATION_LANDSCAPE) {
+    Surface {
+        if (orientation == Configuration.ORIENTATION_LANDSCAPE) {
            Landscape(viewModel)
        } else {
            Portrait(viewModel)
        }
+    }
 }

@Composable
@@ -55,9 +57,8 @@ fun Landscape(viewModel: CounterViewModel) {
                { viewModel.digitClicked(it) },
                { viewModel.addSub100Clicked(it) },
                { viewModel.deleteClicked() },
-                { viewModel.negateClicked() },
-                { viewModel.submitClicked() }
-            )
+                { viewModel.negateClicked() }
+            ) { viewModel.submitClicked() }
        }
    }

@@ -94,8 +95,7 @@ fun Portrait(viewModel: CounterViewModel) {
            { viewModel.digitClicked(it) },
            { viewModel.addSub100Clicked(it) },
            { viewModel.deleteClicked() },
-            { viewModel.negateClicked() },
-            { viewModel.submitClicked() }
-        )
+            { viewModel.negateClicked() }
+        ) { viewModel.submitClicked() }
    }
 }
--- a/app/src/main/java/me/zobrist/tichucounter/ui/counter/KeyboardView.kt
+++ b/app/src/main/java/me/zobrist/tichucounter/ui/counter/KeyboardView.kt
@@ -1,8 +1,10 @@
 package me.zobrist.tichucounter.ui.counter

+import android.content.res.Configuration
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.outlined.Backspace
 import androidx.compose.material.icons.outlined.Check
@@ -14,8 +16,12 @@ import androidx.compose.ui.focus.FocusRequester
 import androidx.compose.ui.focus.focusRequester
 import androidx.compose.ui.focus.onFocusChanged
 import androidx.compose.ui.platform.LocalSoftwareKeyboardController
+import androidx.compose.ui.platform.SoftwareKeyboardController
 import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.tooling.preview.Preview
 import me.zobrist.tichucounter.R
+import me.zobrist.tichucounter.ui.AppTheme


@OptIn(ExperimentalMaterial3Api::class, ExperimentalComposeUiApi::class)
@@ -37,33 +43,27 @@ fun KeyboardView(

    Column {
        Row {
-            TextField(
-                value = scoreA,
-                onValueChange = { },
-                placeholder = { Text("0") },
-                singleLine = true,
-                readOnly = true,
-                modifier = Modifier
-                    .onFocusChanged {
-                        keyboardController?.hide()
-                        updateFocusStateA(it.isFocused)
+            Column(Modifier.weight(1f)) {
+
+                CenteredTextField(
+                    scoreA,
+                    keyboardController,
+                    requestFocusA
+                ) {
+                    updateFocusStateA(it)
+                }
+
+            }
+            Column(Modifier.weight(1f)) {
+
+                CenteredTextField(
+                    scoreB,
+                    keyboardController,
+                    null
+                ) {
+                    updateFocusStateB(it)
                }
-                    .focusRequester(requestFocusA)
-                    .weight(1f),
-            )
-            TextField(
-                value = scoreB,
-                onValueChange = { },
-                placeholder = { Text("0") },
-                singleLine = true,
-                readOnly = true,
-                modifier = Modifier
-                    .onFocusChanged {
-                        keyboardController?.hide()
-                        updateFocusStateB(it.isFocused)
            }
-                    .weight(1f)
-            )
        }

        Row {
@@ -119,7 +119,13 @@ fun KeyboardView(
            IconButton(
                onClick = { deleteClicked() },
                modifier = Modifier.weight(1F)
-            ) { Icon(Icons.Outlined.Backspace, stringResource(R.string.submit)) }
+            ) {
+                Icon(
+                    Icons.Outlined.Backspace,
+                    stringResource(R.string.back),
+                    tint = MaterialTheme.colorScheme.primary
+                )
+            }
        }
        Row {
            TextButton(
@@ -135,7 +141,75 @@ fun KeyboardView(
                onClick = { submitClicked() },
                modifier = Modifier.weight(1F),
                enabled = enableSubmit
-            ) { Icon(Icons.Outlined.Check, stringResource(R.string.submit)) }
+            ) {
+                Icon(
+                    Icons.Outlined.Check,
+                    stringResource(R.string.submit),
+                    tint = MaterialTheme.colorScheme.primary
+                )
+            }
        }
    }
 }
+
+@OptIn(ExperimentalComposeUiApi::class, ExperimentalMaterial3Api::class)
+@Composable
+fun CenteredTextField(
+    value: String,
+    keyboardController: SoftwareKeyboardController?,
+    focusRequester: FocusRequester?,
+    updateFocusState: (Boolean) -> Unit
+) {
+    var modifier = Modifier
+        .onFocusChanged {
+            keyboardController?.hide()
+            updateFocusState(it.isFocused)
+        }
+        .fillMaxWidth()
+
+    if (focusRequester != null) {
+        modifier.focusRequester(focusRequester)
+    }
+
+    TextField(
+        value = value,
+        onValueChange = { },
+        placeholder = {
+            Text(
+                "0",
+                textAlign = TextAlign.Center,
+                modifier = Modifier.fillMaxWidth()
+            )
+        },
+        textStyle = LocalTextStyle.current.copy(textAlign = TextAlign.Center),
+        singleLine = true,
+        readOnly = true,
+        modifier = modifier
+    )
+}
+
+
+@OptIn(ExperimentalMaterial3Api::class, ExperimentalComposeUiApi::class)
+@Preview(name = "Light Mode")
+@Preview(name = "Dark Mode", uiMode = Configuration.UI_MODE_NIGHT_YES, showBackground = true)
+@Composable
+fun KeyboardViewPreview() {
+    AppTheme {
+        Surface {
+            KeyboardView(
+                "",
+                "350",
+                FocusRequester(),
+                false,
+                {},
+                {},
+                {},
+                {},
+                {},
+                {},
+                {})
+        }
+    }
+
+
+}
--- a/app/src/main/java/me/zobrist/tichucounter/ui/counter/RoundListView.kt
+++ b/app/src/main/java/me/zobrist/tichucounter/ui/counter/RoundListView.kt
@@ -1,5 +1,6 @@
 package me.zobrist.tichucounter.ui.counter

+import android.content.res.Configuration
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
@@ -8,6 +9,7 @@ import androidx.compose.foundation.lazy.LazyListState
 import androidx.compose.foundation.lazy.itemsIndexed
 import androidx.compose.foundation.lazy.rememberLazyListState
 import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Surface
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.rememberCoroutineScope
@@ -17,6 +19,7 @@ import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import kotlinx.coroutines.launch
 import me.zobrist.tichucounter.data.Round
+import me.zobrist.tichucounter.ui.AppTheme

@Composable
 fun RoundListView(rounds: List<Round>, modifier: Modifier) {
@@ -62,15 +65,21 @@ private fun RoundListItem(round: Round, index: Int, lazyListState: LazyListState
    }
 }

+@Preview(name = "Light Mode")
+@Preview(name = "Dark Mode", uiMode = Configuration.UI_MODE_NIGHT_YES, showBackground = true)
@Composable
-@Preview
 fun RoundListViewPreview() {
-    val rounds = listOf<Round>(
+    val rounds = listOf(
        Round(1, 10, 90),
        Round(1, 5, 95),
        Round(1, 100, 0),
        Round(1, 125, -25),
        Round(1, 50, 50)
    )
+
+    AppTheme {
+        Surface {
            RoundListView(rounds, Modifier)
+        }
+    }
 }
--- a/app/src/main/java/me/zobrist/tichucounter/ui/counter/TeamNamesView.kt
+++ b/app/src/main/java/me/zobrist/tichucounter/ui/counter/TeamNamesView.kt
@@ -1,11 +1,14 @@
 package me.zobrist.tichucounter.ui.counter

+import android.content.res.Configuration
 import androidx.compose.foundation.layout.*

 import androidx.compose.material3.*
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.tooling.preview.Preview
+import me.zobrist.tichucounter.ui.AppTheme

@OptIn(ExperimentalMaterial3Api::class)
@Composable
@@ -18,6 +21,7 @@ fun TeamNamesView(
    Row() {
        TextField(
            value = nameA,
+            textStyle = LocalTextStyle.current.copy(textAlign = TextAlign.Center),
            onValueChange = { updateA(it) },
            singleLine = true,
            modifier = Modifier.weight(1f)
@@ -25,6 +29,7 @@ fun TeamNamesView(

        TextField(
            value = nameB,
+            textStyle = LocalTextStyle.current.copy(textAlign = TextAlign.Center),
            onValueChange = { updateB(it) },
            singleLine = true,
            modifier = Modifier.weight(1f)
@@ -32,8 +37,11 @@ fun TeamNamesView(
    }
 }

-@Preview
+@Preview(name = "Light Mode")
+@Preview(name = "Dark Mode", uiMode = Configuration.UI_MODE_NIGHT_YES, showBackground = true)
@Composable
 private fun TeamNamesViewPreview() {
+    AppTheme {
        TeamNamesView("TeamA", "TeamB", {}, {})
+    }
 }
--- a/app/src/main/java/me/zobrist/tichucounter/ui/counter/TeamScoresView.kt
+++ b/app/src/main/java/me/zobrist/tichucounter/ui/counter/TeamScoresView.kt
@@ -1,32 +1,51 @@
 package me.zobrist.tichucounter.ui.counter

+import android.content.res.Configuration
 import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.material3.ElevatedCard
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Surface
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import me.zobrist.tichucounter.ui.AppTheme


@Composable
 fun TeamScoresView(scoreA: Int, scoreB: Int) {
+
+    ElevatedCard() {
        Row() {
            Text(
+                style = MaterialTheme.typography.bodyLarge,
                text = scoreA.toString(),
-            modifier = Modifier.weight(1f),
+                modifier = Modifier.weight(5f),
                textAlign = TextAlign.Center
            )

+            Spacer(modifier = Modifier.weight(1f))
+
            Text(
+                style = MaterialTheme.typography.bodyLarge,
                text = scoreB.toString(),
-            modifier = Modifier.weight(1f),
+                modifier = Modifier.weight(5f),
                textAlign = TextAlign.Center
            )
        }
+    }
 }

-@Preview
+@Preview(name = "Light Mode")
+@Preview(name = "Dark Mode", uiMode = Configuration.UI_MODE_NIGHT_YES, showBackground = true)
@Composable
-private fun TeamNamesView() {
+private fun TeamScoresViewPreview() {
+    AppTheme {
+        Surface {
            TeamScoresView(10, 90)
+        }
+    }
 }
--- a/app/src/main/res/values/themes.xml
+++ b/app/src/main/res/values/themes.xml
@@ -1,7 +1,6 @@
 <resources>

-    <style name="AppTheme" parent="Theme.MaterialComponents.DayNight.NoActionBar">
-    </style>
+    <style name="AppTheme" parent="Theme.MaterialComponents.DayNight.NoActionBar"></style>

    <style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.MaterialComponents.Dark.ActionBar" />