Small UI Improvements (#54)

ls1intum · Oct 25, 2024 · 40c2f09 · 40c2f09
1 parent 7a2f61d
commit 40c2f09
Show file tree

Hide file tree

Showing 7 changed files with 112 additions and 16 deletions.
diff --git a/...common/src/main/kotlin/de/tum/informatics/www1/artemis/native_app/core/common/flowutil.kt b/...common/src/main/kotlin/de/tum/informatics/www1/artemis/native_app/core/common/flowutil.kt
@@ -92,6 +92,50 @@ fun <A, B, C, D, E, F> flatMapLatest(
         .flatMapLatest { (a, b, c, d, e) -> transform(a, b, c, d, e) }
 }
 
+fun <A, B, C, D, E, F, G> flatMapLatest(
+    flow1: Flow<A>,
+    flow2: Flow<B>,
+    flow3: Flow<C>,
+    flow4: Flow<D>,
+    flow5: Flow<E>,
+    flow6: Flow<F>,
+    transform: suspend (A, B, C, D, E, F) -> Flow<G>
+): Flow<G> {
+    return combine(flow1, flow2, flow3, flow4, flow5, flow6, ::Tuple6)
+        .flatMapLatest { (a, b, c, d, e, f) -> transform(a, b, c, d, e, f) }
+}
+
+/**
+ * Implementation of [combine] that supports six flows.
+ * The default implementation of [combine] does not support more than five flows.
+ *
+ * This implementation is taken from [here](https://stackoverflow.com/a/73130632/13366254).
+ *
+ */
+inline fun <T1, T2, T3, T4, T5, T6, R> combine(
+    flow: Flow<T1>,
+    flow2: Flow<T2>,
+    flow3: Flow<T3>,
+    flow4: Flow<T4>,
+    flow5: Flow<T5>,
+    flow6: Flow<T6>,
+    crossinline transform: suspend (T1, T2, T3, T4, T5, T6) -> R
+): Flow<R> {
+    return combine(flow, flow2, flow3, flow4, flow5, flow6) { args: Array<*> ->
+        @Suppress("UNCHECKED_CAST")
+        transform(
+            args[0] as T1,
+            args[1] as T2,
+            args[2] as T3,
+            args[3] as T4,
+            args[4] as T5,
+            args[5] as T6,
+        )
+    }
+}
+
 private data class Quadruple<A, B, C, D>(val a: A, val b: B, val c: C, val d: D)
 
 private data class Quintuple<A, B, C, D, E>(val a: A, val b: B, val c: C, val d: D, val e: E)
+
+private data class Tuple6<A, B, C, D, E, F>(val a: A, val b: B, val c: C, val d: D, val e: E, val f: F)
diff --git a/...in/kotlin/de/tum/informatics/www1/artemis/native_app/feature/dashboard/CoursesOverview.kt b/...in/kotlin/de/tum/informatics/www1/artemis/native_app/feature/dashboard/CoursesOverview.kt
@@ -2,11 +2,11 @@ package de.tum.informatics.www1.artemis.native_app.feature.dashboard
 
 import androidx.compose.foundation.Canvas
 import androidx.compose.foundation.border
+import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.BoxWithConstraints
 import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.FlowRow
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.aspectRatio
 import androidx.compose.foundation.layout.fillMaxSize
@@ -35,7 +35,6 @@ import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.collectAsState
 import androidx.compose.runtime.getValue
-import androidx.compose.runtime.mutableStateListOf
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.rememberCoroutineScope
@@ -49,6 +48,7 @@ import androidx.compose.ui.input.nestedscroll.nestedScroll
 import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.platform.testTag
 import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.semantics.Role
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.unit.dp
@@ -61,7 +61,6 @@ import androidx.navigation.compose.composable
 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.model.Dashboard
-import de.tum.informatics.www1.artemis.native_app.core.ui.alert.TextAlertDialog
 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
@@ -250,7 +249,12 @@ private fun BetaHintDialog(
                 Text(text = stringResource(id = R.string.dashboard_dialog_beta_message))
 
                 Row(
-                    modifier = Modifier.fillMaxWidth(),
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .clickable(
+                            role = Role.Checkbox,
+                            onClick = { isDismissPersistentlyChecked = !isDismissPersistentlyChecked }
+                        ),
                     horizontalArrangement = Arrangement.spacedBy(8.dp),
                     verticalAlignment = Alignment.CenterVertically
                 ) {

diff --git a/...manageconversations/ui/conversation/create_personal_conversation/PotentialRecipientsUi.kt b/...manageconversations/ui/conversation/create_personal_conversation/PotentialRecipientsUi.kt
@@ -1,33 +1,38 @@
 package de.tum.informatics.www1.artemis.native_app.feature.metis.manageconversations.ui.conversation.create_personal_conversation
 
 import androidx.compose.foundation.layout.Arrangement
-import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.FlowRow
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.items
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.Add
+import androidx.compose.material.icons.filled.KeyboardAlt
+import androidx.compose.material.icons.filled.PersonOff
 import androidx.compose.material3.FilterChip
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
 import androidx.compose.material3.ListItem
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.testTag
 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.data.DataState
 import de.tum.informatics.www1.artemis.native_app.core.model.account.User
 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.feature.metis.manageconversations.R
+import de.tum.informatics.www1.artemis.native_app.feature.metis.manageconversations.ui.conversation.member_selection.MemberSelectionBaseViewModel
 import de.tum.informatics.www1.artemis.native_app.feature.metis.shared.ui.humanReadableName
 
 internal fun testTagForPotentialRecipient(username: String) = "potentialRecipient$username"
@@ -36,6 +41,7 @@ internal fun testTagForPotentialRecipient(username: String) = "potentialRecipien
 internal fun PotentialRecipientsUi(
     modifier: Modifier,
     potentialRecipientsDataState: DataState<List<User>>,
+    isQueryTooShort: Boolean,
     inclusionList: InclusionList,
     addRecipient: (User) -> Unit,
     updateInclusionList: (InclusionList) -> Unit,
@@ -63,7 +69,8 @@ internal fun PotentialRecipientsUi(
             PotentialRecipientsList(
                 modifier = Modifier.fillMaxSize(),
                 recipients = potentialRecipients,
-                addRecipient = addRecipient
+                addRecipient = addRecipient,
+                isQueryTooShort = isQueryTooShort
             )
         }
     }
@@ -106,7 +113,8 @@ private fun InclusionListUi(
 private fun PotentialRecipientsList(
     modifier: Modifier,
     recipients: List<User>,
-    addRecipient: (User) -> Unit
+    addRecipient: (User) -> Unit,
+    isQueryTooShort: Boolean,
 ) {
     if (recipients.isNotEmpty()) {
         LazyColumn(modifier = modifier) {
@@ -135,10 +143,32 @@ private fun PotentialRecipientsList(
             }
         }
     } else {
-        Box(modifier = modifier) {
+        val icon = if (isQueryTooShort) Icons.Default.KeyboardAlt else Icons.Default.PersonOff
+        val text = if (isQueryTooShort) {
+            stringResource(
+                id = R.string.conversation_member_selection_query_too_short,
+                MemberSelectionBaseViewModel.MINIMUM_QUERY_LENGTH
+            )
+        } else {
+            stringResource(id = R.string.conversation_member_selection_recipients_empty)
+        }
+
+        Column(
+            modifier = modifier,
+            horizontalAlignment = Alignment.CenterHorizontally,
+            verticalArrangement = Arrangement.spacedBy(8.dp, alignment = Alignment.CenterVertically),
+        ) {
+            Icon(
+                modifier = Modifier.size(64.dp),
+                imageVector = icon,
+                tint = MaterialTheme.colorScheme.onSurfaceVariant,
+                contentDescription = null
+            )
+
             Text(
-                modifier = Modifier.align(Alignment.TopCenter),
-                text = stringResource(id = R.string.conversation_member_selection_recipients_empty)
+                textAlign = TextAlign.Center,
+                color = MaterialTheme.colorScheme.onSurfaceVariant,
+                text = text,
             )
         }
     }

diff --git a/...app/feature/metis/manageconversations/ui/conversation/member_selection/MemberSelection.kt b/...app/feature/metis/manageconversations/ui/conversation/member_selection/MemberSelection.kt
@@ -47,6 +47,7 @@ internal fun MemberSelection(
 ) {
     val recipients by viewModel.recipients.collectAsState()
     val query by viewModel.query.collectAsState()
+    val isQueryTooShort by viewModel.isQueryTooShort.collectAsState()
     val potentialRecipientsDataState by viewModel.potentialRecipients.collectAsState()
     val inclusionList by viewModel.inclusionList.collectAsState()
 
@@ -71,6 +72,7 @@ internal fun MemberSelection(
                 .fillMaxWidth()
                 .weight(1f),
             potentialRecipientsDataState = potentialRecipientsDataState,
+            isQueryTooShort = isQueryTooShort,
             inclusionList = inclusionList,
             addRecipient = viewModel::addRecipient,
             updateInclusionList = viewModel::updateInclusionList,

diff --git a/...etis/manageconversations/ui/conversation/member_selection/MemberSelectionBaseViewModel.kt b/...etis/manageconversations/ui/conversation/member_selection/MemberSelectionBaseViewModel.kt
@@ -47,13 +47,19 @@ internal abstract class MemberSelectionBaseViewModel(
         private const val KEY_RECIPIENTS = "recipients"
 
         val QUERY_DEBOUNCE_TIME = 200.milliseconds
+
+        /** The minimum length of the query to trigger a search */
+        const val MINIMUM_QUERY_LENGTH = 3
     }
 
     private val onRequestReloadPotentialRecipients =
         MutableSharedFlow<Unit>(extraBufferCapacity = 1)
 
     val query: StateFlow<String> = savedStateHandle.getStateFlow(KEY_QUERY, "")
 
+    val isQueryTooShort: StateFlow<Boolean> = query.map { it.length < MINIMUM_QUERY_LENGTH }
+        .stateIn(viewModelScope + coroutineContext, SharingStarted.Eagerly, true)
+
     val inclusionList: StateFlow<InclusionList> =
         savedStateHandle.getStateFlow(KEY_INCLUSION_LIST, InclusionList())
 
@@ -66,12 +72,15 @@ internal abstract class MemberSelectionBaseViewModel(
 
     private val recipientsFromServer: Flow<DataState<List<User>>> = flatMapLatest(
         query.debounce(QUERY_DEBOUNCE_TIME),
+        isQueryTooShort,
         inclusionList,
         accountService.authToken,
         serverConfigurationService.serverUrl,
         onRequestReloadPotentialRecipients.onStart { emit(Unit) }
-    ) { query, inclusionList, authToken, serverUrl, _ ->
-        if (query.length >= 3) {
+    ) { query, isQueryToShort, inclusionList, authToken, serverUrl, _ ->
+        if (isQueryToShort) {
+            flowOf(DataState.Success(emptyList()))
+        } else {
             retryOnInternet(networkStatusProvider.currentNetworkStatus) {
                 conversationService.searchForPotentialCommunicationParticipants(
                     courseId = courseId,
@@ -83,7 +92,7 @@ internal abstract class MemberSelectionBaseViewModel(
                     authToken = authToken
                 )
             }
-        } else flowOf(DataState.Success(emptyList()))
+        }
     }
         .stateIn(viewModelScope + coroutineContext, SharingStarted.Eagerly)
 

diff --git a/...pp/feature/metis/manageconversations/ui/conversation/overview/ConversationOverviewBody.kt b/...pp/feature/metis/manageconversations/ui/conversation/overview/ConversationOverviewBody.kt
@@ -6,6 +6,7 @@ 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.Spacer
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
@@ -17,6 +18,7 @@ import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.AddComment
 import androidx.compose.material.icons.filled.ChatBubble
 import androidx.compose.material.icons.filled.Close
+import androidx.compose.material.icons.filled.Info
 import androidx.compose.material.icons.filled.Tag
 import androidx.compose.material.icons.filled.WifiOff
 import androidx.compose.material3.Divider
@@ -27,8 +29,8 @@ import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.ModalBottomSheet
-import androidx.compose.material3.OutlinedButton
 import androidx.compose.material3.Text
+import androidx.compose.material3.TextButton
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.collectAsState
@@ -153,12 +155,16 @@ fun ConversationOverviewBody(
                             Box(
                                 modifier = Modifier
                                     .fillMaxWidth()
-                                    .padding(top = 8.dp)
+                                    .padding(top = 16.dp)
                             ) {
-                                OutlinedButton(
+                                TextButton(
                                     modifier = Modifier.align(Alignment.Center),
                                     onClick = { showCodeOfConduct = true }
                                 ) {
+                                    Icon(imageVector = Icons.Default.Info, contentDescription = null)
+
+                                    Spacer(modifier = Modifier.size(8.dp))
+
                                     Text(text = stringResource(id = R.string.conversation_overview_button_show_code_of_conduct))
                                 }
                             }

diff --git a/.../metis/manage-conversations/src/main/res/values/conversation_member_selection_strings.xml b/.../metis/manage-conversations/src/main/res/values/conversation_member_selection_strings.xml
@@ -13,6 +13,7 @@
     <string name="conversation_member_selection_load_recipients_try_again">Try again</string>
 
     <string name="conversation_member_selection_recipients_empty">No users matching your input has been found.</string>
+    <string name="conversation_member_selection_query_too_short">Please enter at least %1$d characters to search for potential recipients.</string>
 
     <string name="conversation_member_selection_content_description_add_recipient">Add recipient or member</string>
 </resources>