Mudar background de telas e barra de navegação agora é componente único

TIC-13 · Jun 27, 2024 · ec076ab · ec076ab
1 parent ddebfcd
commit ec076ab
Show file tree

Hide file tree

Showing 5 changed files with 119 additions and 98 deletions.
diff --git a/android/MLCChat/app/src/main/java/ai/mlc/mlcchat/BenchmarkingView.kt b/android/MLCChat/app/src/main/java/ai/mlc/mlcchat/BenchmarkingView.kt
@@ -1,5 +1,6 @@
 package ai.mlc.mlcchat
 
+import ai.mlc.mlcchat.components.AppTopBar
 import ai.mlc.mlcchat.interfaces.BenchmarkingResult
 import ai.mlc.mlcchat.interfaces.Measurement
 import ai.mlc.mlcchat.utils.benchmark.Sampler
@@ -150,49 +151,45 @@ fun BenchmarkingView(
     }
 
     Scaffold(topBar = {
-        TopAppBar(
-            title = {
-                Text(
-                    text = chatState.modelName.value.split("-")[0],
-                    color = MaterialTheme.colorScheme.onPrimary
-                )
-            },
-            colors = TopAppBarDefaults.topAppBarColors(containerColor = MaterialTheme.colorScheme.primary),
+        AppTopBar(
+            title = chatState.modelName.value.split("-")[0]
         )
     }, modifier = Modifier.pointerInput(Unit) {
         detectTapGestures(onTap = {
             localFocusManager.clearFocus()
         })
     }) {
         paddingValues ->
-        Column(
-            modifier = Modifier
-                .fillMaxSize()
-                .padding(paddingValues)
-                .padding(horizontal = 10.dp),
-            horizontalAlignment = Alignment.CenterHorizontally,
-            verticalArrangement = Arrangement.Center
-        ) {
-            val lazyColumnListState = rememberLazyListState()
-            val coroutineScope = rememberCoroutineScope()
-
-            if(chatState.messages.isEmpty()){
-                CircularProgressIndicator()
-            }else{
-                BenchmarkView(modifier =
+        HomeScreenBackground {
+            Column(
+                modifier = Modifier
+                    .fillMaxSize()
+                    .padding(paddingValues)
+                    .padding(horizontal = 10.dp),
+                horizontalAlignment = Alignment.CenterHorizontally,
+                verticalArrangement = Arrangement.Center
+            ) {
+                val lazyColumnListState = rememberLazyListState()
+                val coroutineScope = rememberCoroutineScope()
+
+                if(chatState.messages.isEmpty()){
+                    CircularProgressIndicator()
+                }else{
+                    BenchmarkView(modifier =
                     Modifier
                         .padding(10.dp)
                         .background(
                             color = MaterialTheme.colorScheme.secondaryContainer,
                             shape = RoundedCornerShape(5.dp)
                         )
-                )
-                MessagesView(
-                    modifier = Modifier.fillMaxSize(),
-                    lazyColumnListState = lazyColumnListState,
-                    coroutineScope = coroutineScope,
-                    chatState = chatState
-                )
+                    )
+                    MessagesView(
+                        modifier = Modifier.fillMaxSize(),
+                        lazyColumnListState = lazyColumnListState,
+                        coroutineScope = coroutineScope,
+                        chatState = chatState
+                    )
+                }
             }
         }
     }

diff --git a/android/MLCChat/app/src/main/java/ai/mlc/mlcchat/ChatView.kt b/android/MLCChat/app/src/main/java/ai/mlc/mlcchat/ChatView.kt
@@ -1,5 +1,6 @@
 package ai.mlc.mlcchat
 
+import ai.mlc.mlcchat.components.AppTopBar
 import ai.mlc.mlcchat.interfaces.BenchmarkingResult
 import ai.mlc.mlcchat.interfaces.Measurement
 import ai.mlc.mlcchat.utils.benchmark.Sampler
@@ -105,27 +106,12 @@ fun ChatView(
         navController.navigate("result")
     }
 
-    Scaffold(topBar = {
-        TopAppBar(
-            title = {
-                Text(
-                    text = "MLCChat: " + chatState.modelName.value.split("-")[0],
-                    color = MaterialTheme.colorScheme.onPrimary
-                )
-            },
-            colors = TopAppBarDefaults.topAppBarColors(containerColor = MaterialTheme.colorScheme.primary),
-            navigationIcon = {
-                IconButton(
-                    onClick = { navController.popBackStack() },
-                    enabled = chatState.interruptable()
-                ) {
-                    Icon(
-                        imageVector = Icons.Filled.ArrowBack,
-                        contentDescription = "back home page",
-                        tint = MaterialTheme.colorScheme.onPrimary
-                    )
-                }
-            },
+    Scaffold(topBar =
+    {
+        AppTopBar(
+            title = chatState.modelName.value.split("-")[0],
+            onBack = { navController.popBackStack() },
+            backEnabled = chatState.interruptable(),
             actions = {
                 IconButton(
                     onClick = { chatState.requestResetChat() },
@@ -146,8 +132,9 @@ fun ChatView(
                         contentDescription = "continue to results",
                         tint = MaterialTheme.colorScheme.onPrimary
                     )
-                }
-            })
+            }
+        }
+    )
     }, modifier = Modifier.pointerInput(Unit) {
         detectTapGestures(onTap = {
             localFocusManager.clearFocus()

diff --git a/android/MLCChat/app/src/main/java/ai/mlc/mlcchat/ResultView.kt b/android/MLCChat/app/src/main/java/ai/mlc/mlcchat/ResultView.kt
@@ -1,5 +1,6 @@
 package ai.mlc.mlcchat
 
+import ai.mlc.mlcchat.components.AppTopBar
 import ai.mlc.mlcchat.interfaces.BenchmarkingResult
 import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
@@ -46,55 +47,40 @@ fun ResultView(
 
     Scaffold(topBar =
         {
-            TopAppBar(
-                title = {
-                    Text(
-                        text = "Resultado",
-                        color = MaterialTheme.colorScheme.onPrimary
-                    )},
-                colors = TopAppBarDefaults.topAppBarColors(containerColor = MaterialTheme.colorScheme.primary),
-                navigationIcon = {
-                    IconButton(
-                        onClick = { goToHome() },
-                        enabled = true
-                    ) {
-                        Icon(
-                            imageVector = Icons.Filled.ArrowBack,
-                            contentDescription = "back home page",
-                            tint = MaterialTheme.colorScheme.onPrimary
-                        )
-                    }
-                },
+            AppTopBar(
+                title = "Resultado",
+                onBack = { goToHome() }
             )
         }
     ) {
         paddingValues ->
-            Column (
-                modifier = Modifier
-                    .padding(paddingValues)
-                    .fillMaxSize(),
-            ){
-
-                Column(
+            HomeScreenBackground {
+                Column (
                     modifier = Modifier
-                        .fillMaxWidth()
-                        .fillMaxHeight(0.9f)
-                        .verticalScroll(rememberScrollState())
-                        .padding(0.dp, 15.dp),
-                    horizontalAlignment = Alignment.CenterHorizontally,
-                    verticalArrangement = Arrangement.spacedBy(15.dp)
-                ) {
-                    resultViewModel.results.map {
-                        ResultCard(result = it)
+                        .padding(paddingValues)
+                        .fillMaxSize(),
+                ){
+                    Column(
+                        modifier = Modifier
+                            .fillMaxWidth()
+                            .fillMaxHeight(0.9f)
+                            .verticalScroll(rememberScrollState())
+                            .padding(0.dp, 15.dp),
+                        horizontalAlignment = Alignment.CenterHorizontally,
+                        verticalArrangement = Arrangement.spacedBy(15.dp)
+                    ) {
+                        resultViewModel.results.map {
+                            ResultCard(result = it)
+                        }
                     }
-                }
 
-                ContinueButton(
-                    modifier = Modifier
-                        .clickable {
-                            goToHome()
-                        }
-                )
+                    ContinueButton(
+                        modifier = Modifier
+                            .clickable {
+                                goToHome()
+                            }
+                    )
+                }
             }
     }
 }

diff --git a/android/MLCChat/app/src/main/java/ai/mlc/mlcchat/StartView.kt b/android/MLCChat/app/src/main/java/ai/mlc/mlcchat/StartView.kt
@@ -1,5 +1,6 @@
 package ai.mlc.mlcchat
 
+import ai.mlc.mlcchat.components.AppTopBar
 import androidx.compose.foundation.gestures.detectTapGestures
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
@@ -42,6 +43,8 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.input.pointer.pointerInput
 import androidx.compose.ui.platform.LocalFocusManager
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.unit.dp
 import androidx.navigation.NavController
@@ -56,9 +59,9 @@ fun StartView(
     val localFocusManager = LocalFocusManager.current
     Scaffold(
         topBar = {
-            TopAppBar(
-                title = { Text(text = "MLCChat", color = MaterialTheme.colorScheme.onPrimary) },
-                colors = TopAppBarDefaults.topAppBarColors(containerColor = MaterialTheme.colorScheme.primary)
+            AppTopBar(
+                title = stringResource(id = R.string.app_name),
+                onBack = { navController.popBackStack() }
             )
         },
         modifier = Modifier.pointerInput(Unit) {

diff --git a/android/MLCChat/app/src/main/java/ai/mlc/mlcchat/components/AppTopBar.kt b/android/MLCChat/app/src/main/java/ai/mlc/mlcchat/components/AppTopBar.kt
@@ -0,0 +1,48 @@
+package ai.mlc.mlcchat.components
+
+import androidx.compose.foundation.layout.RowScope
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.ArrowBack
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Text
+import androidx.compose.material3.TopAppBar
+import androidx.compose.material3.TopAppBarDefaults
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.text.font.FontWeight
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun AppTopBar(
+    title: String,
+    onBack: (() -> Unit)? = null,
+    backEnabled: Boolean = true,
+    actions: @Composable() (RowScope.() -> Unit) = {}
+) {
+    TopAppBar(
+        title = {
+            Text(
+                text = title,
+                color = MaterialTheme.colorScheme.onPrimary,
+                fontWeight = FontWeight.Bold
+            )
+        },
+        colors = TopAppBarDefaults.topAppBarColors(containerColor = MaterialTheme.colorScheme.primary),
+        navigationIcon = {
+            if(onBack !== null) {
+                IconButton(
+                    onClick = { onBack() },
+                    enabled = backEnabled
+                ) {
+                    Icon(
+                        imageVector = Icons.Filled.ArrowBack,
+                        contentDescription = "back home page",
+                        tint = MaterialTheme.colorScheme.onPrimary
+                    )
+                }
+            }
+        },
+        actions = { actions() })
+}