UI adjustments to align with iOS; exercise and lecture list item rede…

…sign (#43) Co-authored-by: Martin Felber <[email protected]> Co-authored-by: Martin Felber <[email protected]>
ls1intum · Oct 23, 2024 · d8a8980 · d8a8980
1 parent 46eb330
commit d8a8980
Show file tree

Hide file tree

Showing 7 changed files with 137 additions and 68 deletions.
diff --git a/app/src/main/java/de/tum/informatics/www1/artemis/native_app/android/ui/MainActivity.kt b/app/src/main/java/de/tum/informatics/www1/artemis/native_app/android/ui/MainActivity.kt
@@ -5,6 +5,7 @@ import android.content.Intent
 import android.net.Uri
 import android.os.Bundle
 import androidx.activity.compose.setContent
+import androidx.activity.enableEdgeToEdge
 import androidx.appcompat.app.AppCompatActivity
 import androidx.browser.customtabs.CustomTabsIntent
 import androidx.compose.material3.windowsizeclass.WindowSizeClass
@@ -132,6 +133,7 @@ class MainActivity : AppCompatActivity(),
         }
 
         setContent {
+            enableEdgeToEdge()
             AppTheme {
                 ProvideLocalVisibleMetisContextManager(
                     visibleMetisContextManager = visibleMetisContextManager

diff --git a/...tlin/de/tum/informatics/www1/artemis/native_app/core/ui/exercise/ExerciseCategoryChips.kt b/...tlin/de/tum/informatics/www1/artemis/native_app/core/ui/exercise/ExerciseCategoryChips.kt
@@ -42,6 +42,8 @@ fun ExerciseCategoryChipRow(modifier: Modifier, exercise: Exercise) {
 
 @Composable
 fun ExerciseCategoryChipRow(modifier: Modifier, chips: List<ExerciseCategoryChipData>) {
+    if (chips.isEmpty()) return
+
     Row(
         modifier = modifier,
         horizontalArrangement = Arrangement.spacedBy(8.dp)
@@ -114,30 +116,6 @@ private fun collectExerciseCategoryChips(
                 )
             ) else emptyList()
 
-    val difficulty = exercise.difficulty
-    val difficultyChips = if (difficulty != null) {
-        val data = when (difficulty) {
-            Exercise.Difficulty.EASY ->
-                ExerciseCategoryChipData(
-                    context.getString(de.tum.informatics.www1.artemis.native_app.core.ui.R.string.exercise_difficulty_easy),
-                    Color(0xff28a745)
-                )
-
-            Exercise.Difficulty.MEDIUM ->
-                ExerciseCategoryChipData(
-                    context.getString(de.tum.informatics.www1.artemis.native_app.core.ui.R.string.exercise_difficulty_medium),
-                    Color(0xffffc107)
-                )
-
-            Exercise.Difficulty.HARD ->
-                ExerciseCategoryChipData(
-                    context.getString(de.tum.informatics.www1.artemis.native_app.core.ui.R.string.exercise_difficulty_hard),
-                    Color(0xffdc3545)
-                )
-        }
-        listOf(data)
-    } else emptyList()
-
     val bonusChips =
         if (exercise.includedInOverallScore == Exercise.IncludedInOverallScore.INCLUDED_AS_BONUS) {
             listOf(
@@ -155,5 +133,5 @@ private fun collectExerciseCategoryChips(
         )
     }
 
-    return liveQuizChips + categoryChips + difficultyChips + bonusChips
+    return liveQuizChips + categoryChips + bonusChips
 }
diff --git a/...in/kotlin/de/tum/informatics/www1/artemis/native_app/core/ui/exercise/ExerciseListItem.kt b/...in/kotlin/de/tum/informatics/www1/artemis/native_app/core/ui/exercise/ExerciseListItem.kt
@@ -1,14 +1,19 @@
 package de.tum.informatics.www1.artemis.native_app.core.ui.exercise
 
+import androidx.compose.foundation.background
 import androidx.compose.foundation.horizontalScroll
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.IntrinsicSize
 import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxHeight
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.material3.Card
 import androidx.compose.material3.Icon
@@ -24,6 +29,9 @@ import de.tum.informatics.www1.artemis.native_app.core.model.exercise.Exercise
 import de.tum.informatics.www1.artemis.native_app.core.ui.R
 import de.tum.informatics.www1.artemis.native_app.core.ui.date.getRelativeTime
 import de.tum.informatics.www1.artemis.native_app.core.ui.getWindowSizeClass
+import de.tum.informatics.www1.artemis.native_app.core.ui.material.easyColor
+import de.tum.informatics.www1.artemis.native_app.core.ui.material.hardColor
+import de.tum.informatics.www1.artemis.native_app.core.ui.material.mediumColor
 
 /**
  * Display a single exercise.
@@ -41,54 +49,84 @@ fun ExerciseListItem(
         modifier = modifier,
         onClick = onClickExercise
     ) {
-        Column(
+        Row(
             modifier = Modifier
                 .fillMaxWidth()
-                .padding(8.dp),
-            verticalArrangement = Arrangement.spacedBy(8.dp)
+                .height(IntrinsicSize.Min)
         ) {
-            Row(modifier = Modifier.fillMaxWidth()) {
-                ExerciseTypeIcon(modifier = Modifier.size(80.dp), exercise = exercise)
+            exercise.difficulty?.let { DifficultyRectangle(modifier = Modifier, difficulty = it)}
+
+            Column(
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .padding(16.dp),
+                verticalArrangement = Arrangement.spacedBy(8.dp)
+            ) {
+                Row(
+                    modifier = Modifier.fillMaxWidth(),
+                    verticalAlignment = Alignment.CenterVertically
+                ) {
+                    //Displays the icon of the exercise
+                    Icon(
+                        modifier = Modifier
+                            .size(40.dp)
+                            .padding(end = 8.dp)
+                            .fillMaxSize(),
+                        painter = getExerciseTypeIconPainter(exercise),
+                        contentDescription = null
+                    )
+
+                    //Displays the title of the exercise
+                    Text(
+                        text = exercise.title.orEmpty(),
+                        style = MaterialTheme.typography.titleMedium
+                    )
+                }
 
                 ExerciseDataText(
-                    modifier = Modifier
-                        .weight(1f)
-                        .padding(horizontal = 16.dp),
+                    modifier = Modifier,
                     exercise = exercise,
                     displayActionButtons = displayActionButtons,
                     exerciseActions = exerciseActions
                 )
-            }
 
-            //Display a row of chips
-            ExerciseCategoryChipRow(
-                modifier = Modifier
-                    .fillMaxWidth()
-                    .horizontalScroll(rememberScrollState()),
-                exercise = exercise
-            )
+                //Display a row of chips
+                ExerciseCategoryChipRow(
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .horizontalScroll(rememberScrollState()),
+                    exercise = exercise
+                )
+            }
         }
     }
 }
 
 /**
- * Displays the icon of the exercise within an outlined circle
+ * Displays a rectangle next to the text to show the difficulty of the exercise.
  */
 @Composable
-private fun ExerciseTypeIcon(modifier: Modifier, exercise: Exercise) {
-    Box(modifier = modifier) {
-        Icon(
-            modifier = Modifier
-                .fillMaxSize()
-                .padding(8.dp),
-            painter = getExerciseTypeIconPainter(exercise),
-            contentDescription = null
+private fun DifficultyRectangle(modifier: Modifier, difficulty: Exercise.Difficulty) {
+    Box(modifier = modifier
+        .fillMaxHeight()
+        .width(10.dp)
+        .background(
+            color = when (difficulty) {
+                Exercise.Difficulty.EASY ->
+                    easyColor
+
+                Exercise.Difficulty.MEDIUM ->
+                    mediumColor
+
+                Exercise.Difficulty.HARD ->
+                    hardColor
+            }
         )
-    }
+    )
 }
 
 /**
- * Displays the exercise title, the due data and the participation info. The participation info is automatically updated.
+ * Displays the exercise due data and the participation info. The participation info is automatically updated.
  */
 @Composable
 private fun ExerciseDataText(
@@ -107,11 +145,6 @@ private fun ExerciseDataText(
     } else stringResource(id = R.string.exercise_item_due_date_not_set)
 
     Column(modifier = modifier) {
-        Text(
-            text = exercise.title.orEmpty(),
-            style = MaterialTheme.typography.titleMedium
-        )
-
         Text(
             text = formattedDueDate,
             style = MaterialTheme.typography.bodyMedium

diff --git a/...n/kotlin/de/tum/informatics/www1/artemis/native_app/core/ui/material/difficulty_colors.kt b/...n/kotlin/de/tum/informatics/www1/artemis/native_app/core/ui/material/difficulty_colors.kt
@@ -0,0 +1,11 @@
+package de.tum.informatics.www1.artemis.native_app.core.ui.material
+
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.graphics.Color
+
+val hardColor: Color
+    @Composable get() = Color(0xffdc3545)
+val mediumColor: Color
+    @Composable get() = Color(0xffffc107)
+val easyColor: Color
+    @Composable get() = Color(0xff28a745)
diff --git a/core/ui/src/main/res/values/exercise_strings.xml b/core/ui/src/main/res/values/exercise_strings.xml
@@ -3,7 +3,7 @@
 <resources>
 
     <string name="exercise_item_due_date_set">Due date: %1$s</string>
-    <string name="exercise_item_due_date_not_set">No date associated</string>
+    <string name="exercise_item_due_date_not_set">No due date</string>
 
     <!--  Difficulty  -->
     <string name="exercise_difficulty_easy">Easy</string>

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
@@ -1,17 +1,21 @@
 package de.tum.informatics.www1.artemis.native_app.feature.courseview.ui
 
-import androidx.compose.foundation.clickable
-import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
-import androidx.compose.material3.ListItem
+import androidx.compose.foundation.layout.size
+import androidx.compose.material3.Card
+import androidx.compose.material3.Icon
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.testTag
+import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.unit.dp
@@ -40,12 +44,13 @@ internal fun LectureListUi(
     } else {
         WeeklyItemsLazyColumn(
             modifier = modifier.testTag(TEST_TAG_LECTURE_LIST),
-            verticalArrangement = Arrangement.Top,
             weeklyItemGroups = lectures,
             getItemId = { id ?: 0L }
         ) { lecture ->
             LectureListItem(
-                modifier = Modifier.fillMaxWidth(),
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .padding(horizontal = 8.dp),
                 lecture = lecture,
                 onClick = { onClickLecture(lecture) }
             )
@@ -63,9 +68,39 @@ private fun LectureListItem(modifier: Modifier, lecture: Lecture, onClick: () ->
         )
     } else stringResource(id = R.string.course_ui_lecture_item_start_date_not_set)
 
-    ListItem(
-        modifier = modifier.clickable(onClick = onClick),
-        headlineContent = { Text(text = lecture.title) },
-        supportingContent = { Text(text = startTimeText) }
-    )
+    Card(
+        modifier = modifier,
+        onClick = onClick
+    ) {
+        Column(
+            modifier = Modifier
+                .fillMaxWidth()
+                .padding(16.dp)
+        ) {
+            Row(
+                modifier = Modifier.fillMaxWidth(),
+                verticalAlignment = Alignment.CenterVertically
+            ) {
+                Icon(
+                    modifier = Modifier
+                        .size(40.dp)
+                        .padding(end = 8.dp)
+                        .fillMaxSize(),
+                    painter = painterResource(id = R.drawable.chalkboard_teacher),
+                    contentDescription = null
+                )
+
+                Text(
+                    text = lecture.title,
+                    style = MaterialTheme.typography.titleMedium
+                )
+            }
+
+            Text(
+                modifier = Modifier,
+                text = startTimeText,
+                style = MaterialTheme.typography.bodyMedium
+            )
+        }
+    }
 }
diff --git a/feature/course-view/src/main/res/drawable/chalkboard_teacher.xml b/feature/course-view/src/main/res/drawable/chalkboard_teacher.xml
@@ -0,0 +1,10 @@
+<!--! Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc. -->
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+android:width="640dp"
+android:height="512dp"
+android:viewportWidth="640"
+android:viewportHeight="512">
+<path
+    android:fillColor="#FF000000"
+    android:pathData="M208 352c-2.4 0-4.8 .4-7.1 1.1C188 357.3 174.4 360 160 360c-14.4 0-28-2.7-41-6.9-2.3-.7-4.7-1.1-7.1-1.1C49.9 352-.3 402.5 0 464.6 .1 490.9 21.7 512 48 512h224c26.3 0 47.9-21.1 48-47.4 .3-62.1-49.9-112.6-112-112.6zm-48-32c53 0 96-43 96-96s-43-96-96-96-96 43-96 96 43 96 96 96zM592 0H208c-26.5 0-48 22.3-48 49.6V96c23.4 0 45.1 6.8 64 17.8V64h352v288h-64v-64H384v64h-76.2c19.1 16.7 33.1 38.7 39.7 64H592c26.5 0 48-22.3 48-49.6V49.6C640 22.3 618.5 0 592 0z"/>
+</vector>