Improvement: Add elevation to top bar (#383)

Co-authored-by: Martin Felber <[email protected]>
ls1intum · Feb 13, 2025 · 36c87d9 · 36c87d9
1 parent 9103a87
commit 36c87d9
Show file tree

Hide file tree

Showing 22 changed files with 146 additions and 93 deletions.
diff --git a/core/ui/src/main/kotlin/de/tum/informatics/www1/artemis/native_app/core/ui/Spacings.kt b/core/ui/src/main/kotlin/de/tum/informatics/www1/artemis/native_app/core/ui/Spacings.kt
@@ -12,7 +12,9 @@ import androidx.compose.ui.unit.dp
 
 object Spacings {
     val ScreenHorizontalSpacing = 16.dp
+    val ScreenTopBarSpacing = ScreenHorizontalSpacing
     val EndOfScrollablePageSpacing = ScreenHorizontalSpacing
+    val AppBarElevation = 8.dp
 
     /**
      * The spacing between the FAB and the end of the screen, according to the M3 guidelines:
@@ -48,6 +50,16 @@ object Spacings {
         bottom = WindowInsets.navigationBars.asPaddingValues().calculateBottomPadding() + EndOfScrollablePageSpacing
     )
 
+    /**
+     * Calculates the bottom padding according to calculateEndOfPagePaddingValues.
+     * Adds the default ScreenTopBarSpacing to the top padding to add space between the top of the screen and the content.
+     */
+    @Composable
+    fun calculateContentPaddingValues() = PaddingValues(
+        top = ScreenTopBarSpacing,
+        bottom = calculateEndOfPagePaddingValues().calculateBottomPadding()
+    )
+
     val BottomSheetContentPadding = PaddingValues(
         bottom = 40.dp,
         start = ScreenHorizontalSpacing,

diff --git a/...main/kotlin/de/tum/informatics/www1/artemis/native_app/core/ui/common/ArtemisTopAppBar.kt b/...main/kotlin/de/tum/informatics/www1/artemis/native_app/core/ui/common/ArtemisTopAppBar.kt
@@ -0,0 +1,40 @@
+package de.tum.informatics.www1.artemis.native_app.core.ui.common
+
+import androidx.compose.foundation.layout.RowScope
+import androidx.compose.foundation.layout.WindowInsets
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Surface
+import androidx.compose.material3.TopAppBar
+import androidx.compose.material3.TopAppBarColors
+import androidx.compose.material3.TopAppBarDefaults
+import androidx.compose.material3.TopAppBarScrollBehavior
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import de.tum.informatics.www1.artemis.native_app.core.ui.Spacings
+
+@Composable
+fun ArtemisTopAppBar(
+    modifier: Modifier = Modifier,
+    title: @Composable () -> Unit,
+    navigationIcon: @Composable () -> Unit = {},
+    actions: @Composable RowScope.() -> Unit = {},
+    windowInsets: WindowInsets = TopAppBarDefaults.windowInsets,
+    scrollBehavior: TopAppBarScrollBehavior? = null,
+    colors: TopAppBarColors = TopAppBarDefaults.topAppBarColors(
+        containerColor = MaterialTheme.colorScheme.surfaceContainer,
+    )
+) {
+    Surface(
+        shadowElevation = Spacings.AppBarElevation,
+    ) {
+        TopAppBar(
+            title = title,
+            modifier = modifier,
+            navigationIcon = navigationIcon,
+            actions = actions,
+            windowInsets = windowInsets,
+            colors = colors,
+            scrollBehavior = scrollBehavior
+        )
+    }
+}
diff --git a/...kotlin/de/tum/informatics/www1/artemis/native_app/core/ui/common/BasicArtemisTextField.kt b/...kotlin/de/tum/informatics/www1/artemis/native_app/core/ui/common/BasicArtemisTextField.kt
@@ -95,6 +95,7 @@ fun BasicSearchTextField(
     focusRequester: FocusRequester? = null,
     hint: String,
     query: String,
+    backgroundColor: Color = MaterialTheme.colorScheme.surfaceContainer,
     textStyle: TextStyle = LocalTextStyle.current,
     testTag: String? = null,
     updateQuery: (String) -> Unit
@@ -112,7 +113,7 @@ fun BasicSearchTextField(
     Box(
         modifier = modifier
             .clip(MaterialTheme.shapes.medium)
-            .background(MaterialTheme.colorScheme.surfaceContainer)
+            .background(backgroundColor)
             .padding(horizontal = 16.dp, vertical = 8.dp)
     ) {
         Row(
@@ -131,7 +132,7 @@ fun BasicSearchTextField(
                 modifier = Modifier
                     .weight(1f)
                     .then(testTag?.let { Modifier.testTag(it) } ?: Modifier),
-                backgroundColor = MaterialTheme.colorScheme.surfaceContainer,
+                backgroundColor = backgroundColor,
                 hint = hint,
                 value = textFieldValue,
                 focusRequester = focusRequester,

diff --git a/.../kotlin/de/tum/informatics/www1/artemis/native_app/feature/courseview/ui/WeeklyItemsUi.kt b/.../kotlin/de/tum/informatics/www1/artemis/native_app/feature/courseview/ui/WeeklyItemsUi.kt
@@ -75,7 +75,7 @@ internal fun <T> WeeklyItemsLazyColumn(
     LazyColumn(
         modifier = modifier,
         verticalArrangement = verticalArrangement,
-        contentPadding = Spacings.calculateEndOfPagePaddingValues()
+        contentPadding = Spacings.calculateContentPaddingValues()
     ) {
         weeklyItemGroups.forEachIndexed { index, weeklyItems ->
             item {

diff --git a/...formatics/www1/artemis/native_app/feature/courseview/ui/course_overview/CourseScaffold.kt b/...formatics/www1/artemis/native_app/feature/courseview/ui/course_overview/CourseScaffold.kt
@@ -13,8 +13,8 @@ import androidx.compose.material3.Icon
 import androidx.compose.material3.NavigationBar
 import androidx.compose.material3.NavigationBarItem
 import androidx.compose.material3.Scaffold
+import androidx.compose.material3.Surface
 import androidx.compose.material3.Text
-import androidx.compose.material3.TopAppBar
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.vector.ImageVector
@@ -23,6 +23,8 @@ import androidx.compose.ui.text.style.TextOverflow
 import de.tum.informatics.www1.artemis.native_app.core.data.DataState
 import de.tum.informatics.www1.artemis.native_app.core.data.isSuccess
 import de.tum.informatics.www1.artemis.native_app.core.model.Course
+import de.tum.informatics.www1.artemis.native_app.core.ui.Spacings
+import de.tum.informatics.www1.artemis.native_app.core.ui.common.ArtemisTopAppBar
 import de.tum.informatics.www1.artemis.native_app.core.ui.common.BasicDataStateUi
 import de.tum.informatics.www1.artemis.native_app.core.ui.compose.NavigationBackButton
 import de.tum.informatics.www1.artemis.native_app.feature.courseview.R
@@ -79,7 +81,7 @@ private fun CourseTopAppBar(
 ) {
     val courseTitle = courseDataState.bind<String?> { it.title }.orElse(null)
 
-    TopAppBar(
+    ArtemisTopAppBar(
         title = {
             Text(
                 modifier = Modifier.placeholder(visible = !courseDataState.isSuccess),
@@ -98,25 +100,29 @@ private fun BottomNavigationBar(
     isSelected: (CourseTab) -> Boolean,
     onUpdateSelectedTab: (CourseTab) -> Unit
 ) {
-    NavigationBar {
-        BottomNavigationItem.topLevelRoutes.forEach { navigationItem ->
+    Surface(
+        shadowElevation = Spacings.AppBarElevation
+    ){
+        NavigationBar {
+            BottomNavigationItem.topLevelRoutes.forEach { navigationItem ->
 
-            val labelText = stringResource(id = navigationItem.labelStringId)
-            NavigationBarItem(
-                selected = isSelected(navigationItem.route),
-                label = {
-                    Text(labelText)
-                },
-                icon = {
-                    Icon(
-                        navigationItem.icon,
-                        contentDescription = labelText
-                    )
-                },
-                onClick = {
-                    onUpdateSelectedTab(navigationItem.route)
-                }
-            )
+                val labelText = stringResource(id = navigationItem.labelStringId)
+                NavigationBarItem(
+                    selected = isSelected(navigationItem.route),
+                    label = {
+                        Text(labelText)
+                    },
+                    icon = {
+                        Icon(
+                            navigationItem.icon,
+                            contentDescription = labelText
+                        )
+                    },
+                    onClick = {
+                        onUpdateSelectedTab(navigationItem.route)
+                    }
+                )
+            }
         }
     }
 }

diff --git a/.../informatics/www1/artemis/native_app/feature/exerciseview/home/ExerciseScreenTopAppBar.kt b/.../informatics/www1/artemis/native_app/feature/exerciseview/home/ExerciseScreenTopAppBar.kt
@@ -8,7 +8,6 @@ import androidx.compose.material3.Icon
 import androidx.compose.material3.LocalTextStyle
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
-import androidx.compose.material3.TopAppBar
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Modifier
@@ -25,6 +24,7 @@ import com.google.accompanist.placeholder.material.placeholder
 import de.tum.informatics.www1.artemis.native_app.core.data.DataState
 import de.tum.informatics.www1.artemis.native_app.core.data.orNull
 import de.tum.informatics.www1.artemis.native_app.core.model.exercise.Exercise
+import de.tum.informatics.www1.artemis.native_app.core.ui.common.ArtemisTopAppBar
 import de.tum.informatics.www1.artemis.native_app.core.ui.compose.NavigationBackButton
 import de.tum.informatics.www1.artemis.native_app.core.ui.exercise.getExerciseTypeIconPainter
 
@@ -36,7 +36,7 @@ internal fun ExerciseScreenTopAppBar(
     onNavigateBack: () -> Unit
 ) {
     Column(modifier = modifier) {
-        TopAppBar(
+        ArtemisTopAppBar(
             modifier = Modifier.fillMaxWidth(),
             title = { TitleText(modifier = modifier, maxLines = 1, exerciseDataState = exerciseDataState) },
             navigationIcon = {

diff --git a/...rmatics/www1/artemis/native_app/feature/exerciseview/home/overview/ExerciseOverviewTab.kt b/...rmatics/www1/artemis/native_app/feature/exerciseview/home/overview/ExerciseOverviewTab.kt
@@ -48,7 +48,8 @@ internal fun ExerciseOverviewTab(
         ParticipationStatusUi(
             modifier = Modifier
                 .fillMaxWidth()
-                .padding(horizontal = 16.dp),
+                .padding(top = Spacings.ScreenTopBarSpacing)
+                .padding(horizontal = Spacings.ScreenHorizontalSpacing),
             exercise = exercise,
             actions = actions
         )

diff --git a/...tive_app/feature/exerciseview/participate/textexercise/TextExerciseParticipationScreen.kt b/...tive_app/feature/exerciseview/participate/textexercise/TextExerciseParticipationScreen.kt
@@ -10,19 +10,16 @@ import androidx.compose.foundation.layout.fillMaxHeight
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.padding
 import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.filled.ArrowBack
 import androidx.compose.material.icons.filled.EditNote
 import androidx.compose.material.icons.filled.ListAlt
 import androidx.compose.material3.AlertDialog
 import androidx.compose.material3.CircularProgressIndicator
 import androidx.compose.material3.Icon
-import androidx.compose.material3.IconButton
 import androidx.compose.material3.Scaffold
 import androidx.compose.material3.Tab
 import androidx.compose.material3.TabRow
 import androidx.compose.material3.Text
 import androidx.compose.material3.TextButton
-import androidx.compose.material3.TopAppBar
 import androidx.compose.material3.windowsizeclass.WindowWidthSizeClass
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.collectAsState
@@ -41,7 +38,9 @@ import de.tum.informatics.www1.artemis.native_app.core.model.exercise.Exercise
 import de.tum.informatics.www1.artemis.native_app.core.model.exercise.participation.Participation
 import de.tum.informatics.www1.artemis.native_app.core.model.exercise.participation.isInitializationAfterDueDate
 import de.tum.informatics.www1.artemis.native_app.core.model.exercise.submission.Result
+import de.tum.informatics.www1.artemis.native_app.core.ui.common.ArtemisTopAppBar
 import de.tum.informatics.www1.artemis.native_app.core.ui.compose.ArtemisWebView
+import de.tum.informatics.www1.artemis.native_app.core.ui.compose.NavigationBackButton
 import de.tum.informatics.www1.artemis.native_app.core.ui.date.isInFuture
 import de.tum.informatics.www1.artemis.native_app.core.ui.getWindowSizeClass
 import de.tum.informatics.www1.artemis.native_app.feature.exerciseview.R
@@ -84,11 +83,9 @@ internal fun TextExerciseParticipationScreen(
     Scaffold(
         modifier = modifier,
         topBar = {
-            TopAppBar(
+            ArtemisTopAppBar(
                 navigationIcon = {
-                    IconButton(onClick = onNavigateUp) {
-                        Icon(Icons.Default.ArrowBack, contentDescription = null)
-                    }
+                    NavigationBackButton(onNavigateUp)
                 },
                 title = {
                     Text(

diff --git a/...m/informatics/www1/artemis/native_app/feature/exerciseview/viewresult/ViewResultScreen.kt b/...m/informatics/www1/artemis/native_app/feature/exerciseview/viewresult/ViewResultScreen.kt
@@ -8,13 +8,8 @@ import androidx.compose.foundation.layout.consumeWindowInsets
 import androidx.compose.foundation.layout.only
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.systemBars
-import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.automirrored.filled.ArrowBack
-import androidx.compose.material3.Icon
-import androidx.compose.material3.IconButton
 import androidx.compose.material3.Scaffold
 import androidx.compose.material3.Text
-import androidx.compose.material3.TopAppBar
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.collectAsState
 import androidx.compose.runtime.getValue
@@ -25,8 +20,10 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.stringResource
 import de.tum.informatics.www1.artemis.native_app.core.data.join
+import de.tum.informatics.www1.artemis.native_app.core.ui.common.ArtemisTopAppBar
 import de.tum.informatics.www1.artemis.native_app.core.ui.common.EmptyDataStateUi
 import de.tum.informatics.www1.artemis.native_app.core.ui.compose.ArtemisWebView
+import de.tum.informatics.www1.artemis.native_app.core.ui.compose.NavigationBackButton
 import de.tum.informatics.www1.artemis.native_app.core.ui.exercise.LocalTemplateStatusProvider
 import de.tum.informatics.www1.artemis.native_app.core.ui.exercise.ProvideDefaultExerciseTemplateStatus
 import de.tum.informatics.www1.artemis.native_app.feature.exerciseview.ExerciseViewModel
@@ -42,12 +39,10 @@ internal fun ViewResultScreen(
     Scaffold(
         modifier = modifier,
         topBar = {
-            TopAppBar(
+            ArtemisTopAppBar(
                 title = { Text(text = stringResource(id = R.string.result_view_title)) },
                 navigationIcon = {
-                    IconButton(onClick = onCloseResult) {
-                        Icon(imageVector = Icons.AutoMirrored.Filled.ArrowBack, contentDescription = null)
-                    }
+                    NavigationBackButton(onCloseResult)
                 }
             )
         }

diff --git a/.../kotlin/de/tum/informatics/www1/artemis/native_app/feature/lectureview/LectureScreenUi.kt b/.../kotlin/de/tum/informatics/www1/artemis/native_app/feature/lectureview/LectureScreenUi.kt
@@ -17,7 +17,6 @@ import androidx.compose.foundation.layout.systemBars
 import androidx.compose.foundation.lazy.rememberLazyListState
 import androidx.compose.material3.Scaffold
 import androidx.compose.material3.Text
-import androidx.compose.material3.TopAppBar
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.collectAsState
 import androidx.compose.runtime.derivedStateOf
@@ -36,6 +35,7 @@ import androidx.navigation.toRoute
 import de.tum.informatics.www1.artemis.native_app.core.model.lecture.Attachment
 import de.tum.informatics.www1.artemis.native_app.core.ui.LocalLinkOpener
 import de.tum.informatics.www1.artemis.native_app.core.ui.alert.TextAlertDialog
+import de.tum.informatics.www1.artemis.native_app.core.ui.common.ArtemisTopAppBar
 import de.tum.informatics.www1.artemis.native_app.core.ui.compose.NavigationBackButton
 import de.tum.informatics.www1.artemis.native_app.core.ui.deeplinks.LectureDeeplinks
 import de.tum.informatics.www1.artemis.native_app.core.ui.navigation.animatedComposable
@@ -170,7 +170,7 @@ internal fun LectureScreen(
         Scaffold(
             modifier = Modifier.fillMaxSize(),
             topBar = {
-                TopAppBar(
+                ArtemisTopAppBar(
                     title = {
                         Text(
                             text = lectureTitle.orEmpty(),

diff --git a/...atics/www1/artemis/native_app/feature/metis/conversation/ui/ConversationChatListScreen.kt b/...atics/www1/artemis/native_app/feature/metis/conversation/ui/ConversationChatListScreen.kt
@@ -30,7 +30,6 @@ import androidx.compose.material3.IconButton
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Scaffold
 import androidx.compose.material3.Text
-import androidx.compose.material3.TopAppBar
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.CompositionLocalProvider
 import androidx.compose.runtime.LaunchedEffect
@@ -55,6 +54,7 @@ import de.tum.informatics.www1.artemis.native_app.core.data.isSuccess
 import de.tum.informatics.www1.artemis.native_app.core.data.orNull
 import de.tum.informatics.www1.artemis.native_app.core.ui.BuildConfig
 import de.tum.informatics.www1.artemis.native_app.core.ui.LocalLinkOpener
+import de.tum.informatics.www1.artemis.native_app.core.ui.common.ArtemisTopAppBar
 import de.tum.informatics.www1.artemis.native_app.core.ui.common.BasicSearchTextField
 import de.tum.informatics.www1.artemis.native_app.core.ui.common.EmptyDataStateUi
 import de.tum.informatics.www1.artemis.native_app.core.ui.compose.NavigationBackButton
@@ -183,7 +183,7 @@ fun ConversationChatListScreen(
     Scaffold(
         modifier = modifier,
         topBar = {
-            TopAppBar(
+            ArtemisTopAppBar(
                 title = {
                     if (isSearchBarOpen) {
                         LaunchedEffect(Unit) {
@@ -197,9 +197,11 @@ fun ConversationChatListScreen(
                             query = query,
                             updateQuery = onUpdateQuery,
                             hint = stringResource(id = R.string.metis_post_search_hint),
-                            textStyle = MaterialTheme.typography.bodyMedium,
-                            focusRequester = searchBarFocusRequester
-                        )
+                            backgroundColor = MaterialTheme.colorScheme.background,
+                                textStyle = MaterialTheme.typography.bodyMedium,
+                                focusRequester = searchBarFocusRequester
+                            )
+
                     } else {
                         EmptyDataStateUi(
                             dataState = conversationDataState,