Chore: Fix paddings (#272)

ls1intum · Jan 10, 2025 · 8bd132b · 8bd132b
1 parent e448d9d
commit 8bd132b
Show file tree

Hide file tree

Showing 33 changed files with 260 additions and 278 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
@@ -1,13 +1,36 @@
 package de.tum.informatics.www1.artemis.native_app.core.ui
 
+import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.layout.WindowInsets
+import androidx.compose.foundation.layout.asPaddingValues
+import androidx.compose.foundation.layout.navigationBars
+import androidx.compose.foundation.layout.navigationBarsPadding
+import androidx.compose.foundation.layout.padding
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
 import androidx.compose.ui.unit.dp
 
 object Spacings {
     val ScreenHorizontalSpacing = 16.dp
     val ScreenHorizontalInnerSpacing = 8.dp
-    val FabContentBottomPadding = 80.dp
+
+    val EndOfScrollablePageSpacing = ScreenHorizontalSpacing
 
     object Post {
         val innerSpacing = 8.dp
     }
-}
+
+
+    /**
+     * Calculate the padding for the bottom of the screen, considering the navigation bar height.
+     * Remember to call `consumeWindowInsets(WindowInsets.navigationBars)` in the composable modifier.
+     */
+    @Composable
+    fun calculateEndOfPagePaddingValues() = PaddingValues(
+        bottom = WindowInsets.navigationBars.asPaddingValues().calculateBottomPadding() + EndOfScrollablePageSpacing
+    )
+}
+
+fun Modifier.endOfPagePadding() = padding(bottom = Spacings.EndOfScrollablePageSpacing).navigationBarsPadding()
+
+fun Modifier.pagePadding() = padding(horizontal = Spacings.ScreenHorizontalSpacing).endOfPagePadding()
diff --git a/...n/kotlin/de/tum/informatics/www1/artemis/native_app/core/ui/common/course/CourseListUi.kt b/...n/kotlin/de/tum/informatics/www1/artemis/native_app/core/ui/common/course/CourseListUi.kt
@@ -7,17 +7,16 @@ import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.BoxScope
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.ColumnScope
-import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.WindowInsets
-import androidx.compose.foundation.layout.asPaddingValues
 import androidx.compose.foundation.layout.aspectRatio
+import androidx.compose.foundation.layout.consumeWindowInsets
 import androidx.compose.foundation.layout.fillMaxHeight
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.navigationBars
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
-import androidx.compose.foundation.layout.systemBars
 import androidx.compose.foundation.lazy.grid.GridCells
 import androidx.compose.foundation.lazy.grid.LazyGridItemScope
 import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
@@ -50,6 +49,7 @@ import androidx.core.graphics.toColorInt
 import de.tum.informatics.www1.artemis.native_app.core.model.Course
 import de.tum.informatics.www1.artemis.native_app.core.model.CourseWithScore
 import de.tum.informatics.www1.artemis.native_app.core.ui.R
+import de.tum.informatics.www1.artemis.native_app.core.ui.Spacings
 import de.tum.informatics.www1.artemis.native_app.core.ui.common.AutoResizeText
 import de.tum.informatics.www1.artemis.native_app.core.ui.common.FontSizeRange
 import de.tum.informatics.www1.artemis.native_app.core.ui.getWindowSizeClass
@@ -70,13 +70,11 @@ fun CourseItemGrid(
     val courseItemModifier = Modifier.computeCourseItemModifier(isCompact)
 
     LazyVerticalGrid(
-        modifier = modifier,
+        modifier = modifier.consumeWindowInsets(WindowInsets.navigationBars),
         columns = GridCells.Fixed(columnCount),
         verticalArrangement = Arrangement.spacedBy(8.dp),
         horizontalArrangement = Arrangement.spacedBy(8.dp),
-        contentPadding = PaddingValues(
-            bottom = WindowInsets.systemBars.asPaddingValues().calculateBottomPadding()
-        )
+        contentPadding = Spacings.calculateEndOfPagePaddingValues()
     ) {
         items(courses, key = { it.course.id ?: 0L }) { course ->
             courseItem(course, courseItemModifier, isCompact)

diff --git a/.../main/kotlin/de/tum/informatics/www1/artemis/native_app/core/ui/compose/ArtemisPdfView.kt b/.../main/kotlin/de/tum/informatics/www1/artemis/native_app/core/ui/compose/ArtemisPdfView.kt
@@ -21,15 +21,18 @@ import androidx.compose.material3.Icon
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.unit.dp
 import de.tum.informatics.www1.artemis.native_app.core.ui.R
+import de.tum.informatics.www1.artemis.native_app.core.ui.endOfPagePadding
 import de.tum.informatics.www1.artemis.native_app.core.ui.pdf.PdfFile
 import de.tum.informatics.www1.artemis.native_app.core.ui.pdf.render.HorizontalPdfView
 import de.tum.informatics.www1.artemis.native_app.core.ui.pdf.render.VerticalPdfView
@@ -60,7 +63,7 @@ fun ArtemisPdfView(
 
     var pdfState = if (isVertical.value) verticalPdfState else horizontalPdfState
 
-    val showMenu = remember { mutableStateOf(false) }
+    var showMenu by remember { mutableStateOf(false) }
 
     if (pdfState.mError != null) {
         val errorMessage = when (pdfState.mError) {
@@ -115,33 +118,33 @@ fun ArtemisPdfView(
         Column(
             modifier = Modifier
                 .align(Alignment.BottomEnd)
-                .padding(16.dp)
+                .endOfPagePadding()
         ) {
-            if (showMenu.value) {
+            if (showMenu) {
                 Spacer(modifier = Modifier.height(16.dp))
             }
 
             FloatingActionButton(
-                onClick = { showMenu.value = !showMenu.value },
+                onClick = { showMenu = !showMenu },
                 modifier = Modifier
             ) {
                 Icon(imageVector = Icons.Default.MoreHoriz, contentDescription = null)
             }
 
             PdfActionDropDownMenu(
                 modifier = Modifier,
-                isExpanded = showMenu.value,
-                onDismissRequest = { showMenu.value = false },
+                isExpanded = showMenu,
+                onDismissRequest = { showMenu = false },
                 downloadPdf = {
-                    showMenu.value = false
+                    showMenu = false
                     pdfState.file?.let { pdfFile.downloadPdf(context) }
                 },
                 sharePdf = {
-                    showMenu.value = false
+                    showMenu = false
                     pdfState.file?.let { pdfFile.sharePdf(context, it) }
                 },
                 toggleViewMode = {
-                    showMenu.value = false
+                    showMenu = false
                     pdfState = if (isVertical.value) horizontalPdfState else verticalPdfState
                     isVertical.value = !isVertical.value
                 }
@@ -212,7 +215,7 @@ private fun PdfActionDropDownMenu(
     toggleViewMode: () -> Unit,
 ) {
     DropdownMenu(
-        modifier = Modifier,
+        modifier = modifier,
         expanded = isExpanded,
         onDismissRequest = onDismissRequest
     ) {

diff --git a/...main/kotlin/de/tum/informatics/www1/artemis/native_app/core/ui/compose/LinkBottomSheet.kt b/...main/kotlin/de/tum/informatics/www1/artemis/native_app/core/ui/compose/LinkBottomSheet.kt
@@ -4,11 +4,11 @@ import android.annotation.SuppressLint
 import android.webkit.WebView
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.WindowInsets
-import androidx.compose.foundation.layout.asPaddingValues
 import androidx.compose.foundation.layout.fillMaxHeight
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.systemBars
+import androidx.compose.foundation.layout.statusBars
+import androidx.compose.foundation.layout.statusBarsPadding
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.rememberLazyListState
 import androidx.compose.material3.ModalBottomSheet
@@ -44,9 +44,8 @@ fun LinkBottomSheet(
     val webViewState = getWebViewState(link)
 
     ModalBottomSheet(
-        modifier = modifier.padding(
-            top = WindowInsets.systemBars.asPaddingValues().calculateTopPadding(),
-        ),
+        modifier = modifier.statusBarsPadding(),
+        contentWindowInsets = { WindowInsets.statusBars },
         onDismissRequest = onDismissRequest
     ) {
         Box(

diff --git a/...tum/informatics/www1/artemis/native_app/feature/courseregistration/RegisterForCourseUi.kt b/...tum/informatics/www1/artemis/native_app/feature/courseregistration/RegisterForCourseUi.kt
@@ -7,10 +7,11 @@ import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.ColumnScope
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.WindowInsets
-import androidx.compose.foundation.layout.asPaddingValues
+import androidx.compose.foundation.layout.WindowInsetsSides
 import androidx.compose.foundation.layout.consumeWindowInsets
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.only
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.systemBars
 import androidx.compose.foundation.lazy.grid.GridCells
@@ -54,6 +55,7 @@ import androidx.navigation.NavOptionsBuilder
 import de.tum.informatics.www1.artemis.native_app.core.data.DataState
 import de.tum.informatics.www1.artemis.native_app.core.model.Course
 import de.tum.informatics.www1.artemis.native_app.core.ui.AwaitDeferredCompletion
+import de.tum.informatics.www1.artemis.native_app.core.ui.Spacings
 import de.tum.informatics.www1.artemis.native_app.core.ui.common.BasicDataStateUi
 import de.tum.informatics.www1.artemis.native_app.core.ui.common.course.CompactCourseHeaderViewMode
 import de.tum.informatics.www1.artemis.native_app.core.ui.common.course.CompactCourseItemHeader
@@ -141,8 +143,8 @@ internal fun RegisterForCourseScreen(
             modifier = Modifier
                 .fillMaxSize()
                 .padding(top = padding.calculateTopPadding())
-                .consumeWindowInsets(WindowInsets.systemBars)
-                .padding(horizontal = 8.dp),
+                .consumeWindowInsets(WindowInsets.systemBars.only(WindowInsetsSides.Top))
+                .padding(horizontal = Spacings.ScreenHorizontalSpacing),
             courses = courses,
             reloadCourses = viewModel::reloadRegistrableCourses,
             onClickSignup = { course ->
@@ -232,7 +234,7 @@ private fun RegisterForCourseContent(
                 .fillMaxSize()
                 .testTag(TEST_TAG_REGISTRABLE_COURSE_LIST),
             columns = GridCells.Fixed(columnCount),
-            contentPadding = WindowInsets.systemBars.asPaddingValues(),
+            contentPadding = Spacings.calculateEndOfPagePaddingValues(),
             verticalArrangement = Arrangement.spacedBy(8.dp),
             horizontalArrangement = Arrangement.spacedBy(8.dp),
         ) {

diff --git a/...lin/de/tum/informatics/www1/artemis/native_app/feature/courseview/MessagingScreenshots.kt b/...lin/de/tum/informatics/www1/artemis/native_app/feature/courseview/MessagingScreenshots.kt
@@ -1,14 +1,11 @@
 package de.tum.informatics.www1.artemis.native_app.feature.courseview
 
-import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.lazy.rememberLazyListState
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.CompositionLocalProvider
-import androidx.compose.runtime.remember
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.text.input.TextFieldValue
 import de.tum.informatics.www1.artemis.native_app.core.data.AccountDataServiceStub
 import de.tum.informatics.www1.artemis.native_app.core.data.DataState
@@ -20,7 +17,6 @@ import de.tum.informatics.www1.artemis.native_app.core.ui.ScreenshotFrame
 import de.tum.informatics.www1.artemis.native_app.core.websocket.WebsocketProviderStub
 import de.tum.informatics.www1.artemis.native_app.feature.courseview.ui.course_overview.CourseUiScreen
 import de.tum.informatics.www1.artemis.native_app.feature.courseview.ui.course_overview.TAB_COMMUNICATION
-import de.tum.informatics.www1.artemis.native_app.feature.metis.conversation.service.impl.EmojiServiceImpl
 import de.tum.informatics.www1.artemis.native_app.feature.metis.conversation.ui.ConversationChatListScreen
 import de.tum.informatics.www1.artemis.native_app.feature.metis.conversation.ui.DataStatus
 import de.tum.informatics.www1.artemis.native_app.feature.metis.conversation.ui.chatlist.ChatListItem
@@ -158,9 +154,6 @@ fun `Metis - Conversation Overview`() {
 @PlayStoreScreenshots
 @Composable
 fun `Metis - Conversation Channel`() {
-    val context = LocalContext.current
-    val emojiService = remember { EmojiServiceImpl(context) }
-
     val date = LocalDate(2023, 7, 29)
     val firstMessageTime = date.atTime(13, 34).toInstant(TimeZone.UTC)
 
@@ -251,7 +244,6 @@ fun `Metis - Conversation Channel`() {
                                     isAtLeastTutorInCourse = true,
                                     hasModerationRights = true
                                 ),
-                                listContentPadding = PaddingValues(),
                                 serverUrl = "",
                                 courseId = 0,
                                 state = rememberLazyListState(),

diff --git a/.../kotlin/de/tum/informatics/www1/artemis/native_app/feature/courseview/ui/LectureListUi.kt b/.../kotlin/de/tum/informatics/www1/artemis/native_app/feature/courseview/ui/LectureListUi.kt
@@ -20,6 +20,7 @@ import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.unit.dp
 import de.tum.informatics.www1.artemis.native_app.core.model.lecture.Lecture
+import de.tum.informatics.www1.artemis.native_app.core.ui.Spacings
 import de.tum.informatics.www1.artemis.native_app.core.ui.date.getRelativeTime
 import de.tum.informatics.www1.artemis.native_app.feature.courseview.GroupedByWeek
 import de.tum.informatics.www1.artemis.native_app.feature.courseview.R
@@ -50,7 +51,7 @@ internal fun LectureListUi(
             LectureListItem(
                 modifier = Modifier
                     .fillMaxWidth()
-                    .padding(horizontal = 8.dp),
+                    .padding(horizontal = Spacings.ScreenHorizontalSpacing),
                 lecture = lecture,
                 onClick = { onClickLecture(lecture) }
             )

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
@@ -3,19 +3,15 @@ package de.tum.informatics.www1.artemis.native_app.feature.courseview.ui
 import android.os.Parcelable
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Arrangement
-import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.Row
-import androidx.compose.foundation.layout.WindowInsets
-import androidx.compose.foundation.layout.asPaddingValues
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.systemBars
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.items
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.ExpandLess
 import androidx.compose.material.icons.filled.ExpandMore
-import androidx.compose.material3.Divider
+import androidx.compose.material3.HorizontalDivider
 import androidx.compose.material3.Icon
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
@@ -29,6 +25,7 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.unit.dp
+import de.tum.informatics.www1.artemis.native_app.core.ui.Spacings
 import de.tum.informatics.www1.artemis.native_app.feature.courseview.GroupedByWeek
 import de.tum.informatics.www1.artemis.native_app.feature.courseview.R
 import kotlinx.datetime.Clock
@@ -78,9 +75,7 @@ internal fun <T> WeeklyItemsLazyColumn(
     LazyColumn(
         modifier = modifier,
         verticalArrangement = verticalArrangement,
-        contentPadding = PaddingValues(
-            bottom = WindowInsets.systemBars.asPaddingValues().calculateBottomPadding()
-        )
+        contentPadding = Spacings.calculateEndOfPagePaddingValues()
     ) {
         weeklyItemGroups.forEachIndexed { index, weeklyItems ->
             item {
@@ -104,7 +99,7 @@ internal fun <T> WeeklyItemsLazyColumn(
             }
 
             if (index < weeklyItemGroups.size - 1) {
-                item { Divider() }
+                item { HorizontalDivider() }
             }
         }
     }

diff --git a/...formatics/www1/artemis/native_app/feature/courseview/ui/course_overview/CourseUiScreen.kt b/...formatics/www1/artemis/native_app/feature/courseview/ui/course_overview/CourseUiScreen.kt
@@ -4,8 +4,10 @@ import androidx.compose.animation.AnimatedContent
 import androidx.compose.animation.SizeTransform
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.WindowInsets
+import androidx.compose.foundation.layout.WindowInsetsSides
 import androidx.compose.foundation.layout.consumeWindowInsets
 import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.only
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.systemBars
 import androidx.compose.material3.MaterialTheme
@@ -330,7 +332,7 @@ internal fun CourseUiScreen(
             modifier = Modifier
                 .fillMaxSize()
                 .padding(top = padding.calculateTopPadding())
-                .consumeWindowInsets(WindowInsets.systemBars),
+                .consumeWindowInsets(WindowInsets.systemBars.only(WindowInsetsSides.Top)),
             dataState = courseDataState,
             loadingText = stringResource(id = R.string.course_ui_loading_course_loading),
             failureText = stringResource(id = R.string.course_ui_loading_course_failed),

diff --git a/...informatics/www1/artemis/native_app/feature/courseview/ui/exercise_list/ExerciseListUi.kt b/...informatics/www1/artemis/native_app/feature/courseview/ui/exercise_list/ExerciseListUi.kt
@@ -6,8 +6,8 @@ import androidx.compose.runtime.Composable
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.testTag
-import androidx.compose.ui.unit.dp
 import de.tum.informatics.www1.artemis.native_app.core.model.exercise.Exercise
+import de.tum.informatics.www1.artemis.native_app.core.ui.Spacings
 import de.tum.informatics.www1.artemis.native_app.core.ui.exercise.BoundExerciseActions
 import de.tum.informatics.www1.artemis.native_app.core.ui.exercise.ExerciseListItem
 import de.tum.informatics.www1.artemis.native_app.feature.courseview.GroupedByWeek
@@ -34,7 +34,7 @@ internal fun ExerciseListUi(
         ExerciseListItem(
             modifier = Modifier
                 .fillMaxWidth()
-                .padding(horizontal = 8.dp),
+                .padding(horizontal = Spacings.ScreenHorizontalSpacing),
             exercise = exercise,
             exerciseActions = remember(exercise, actions) { actions.getUnbound(exerciseId = exercise.id ?: 0) },
             onClickExercise = { onClickExercise(exercise.id ?: 0) }