Update bottom spacebar design

Change-Id: I758783a9286489c3d9ef8faeb6418180a6d71f02
SchildiChat · Jan 15, 2024 · 2d70c96 · 2d70c96
1 parent cc8f904
commit 2d70c96
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 14 deletions.
diff --git a/features/roomlist/impl/src/main/kotlin/chat/schildi/features/roomlist/SpacesPager.kt b/features/roomlist/impl/src/main/kotlin/chat/schildi/features/roomlist/SpacesPager.kt
@@ -1,9 +1,12 @@
 package chat.schildi.features.roomlist
 
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.Home
+import androidx.compose.material.icons.outlined.ChevronRight
 import androidx.compose.material3.Icon
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.ScrollableTabRow
@@ -15,6 +18,7 @@ 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.res.stringResource
 import androidx.compose.ui.unit.dp
@@ -111,7 +115,7 @@ private fun SpacesPager(
             containerColor = MaterialTheme.colorScheme.secondaryContainer,
         ) {
             if (defaultSpace != null) {
-                SpaceTab(defaultSpace, selectedTab == 0, expandSpaceChildren) {
+                SpaceTab(defaultSpace, selectedTab == 0, expandSpaceChildren, false) {
                     expandSpaceChildren = false
                     selectSpace(defaultSpace, parentSelection)
                 }
@@ -122,7 +126,8 @@ private fun SpacesPager(
                 }
             }
             spacesList.forEachIndexed { index, space ->
-                SpaceTab(space, selectedSpaceIndex == index, expandSpaceChildren) {
+                val selected = selectedSpaceIndex == index
+                SpaceTab(space, selected, expandSpaceChildren, space.spaces.isNotEmpty() && (!selected || !expandSpaceChildren)) {
                     if (selectedSpaceIndex == index) {
                         if (expandSpaceChildren) {
                             expandSpaceChildren = false
@@ -140,14 +145,32 @@ private fun SpacesPager(
 }
 
 @Composable
-private fun AbstractSpaceTab(text: String, selected: Boolean, collapsed: Boolean, onClick: () -> Unit, icon: @Composable () -> Unit) {
+private fun AbstractSpaceTab(
+    text: String,
+    selected: Boolean,
+    collapsed: Boolean,
+    expandable: Boolean,
+    onClick: () -> Unit,
+    icon: @Composable () -> Unit
+) {
     Tab(
         text = {
-            Text(
-                text = text,
-                style = MaterialTheme.typography.titleSmall,
-                color = if (selected) MaterialTheme.colorScheme.primary else MaterialTheme.colorScheme.secondary,
-            )
+            val color = if (selected) MaterialTheme.colorScheme.primary else MaterialTheme.colorScheme.secondary
+            Row {
+                Text(
+                    text = text,
+                    style = MaterialTheme.typography.titleSmall,
+                    color = color,
+                )
+                if (expandable && selected) {
+                    Icon(
+                        imageVector = Icons.Outlined.ChevronRight,
+                        contentDescription = null,
+                        modifier = Modifier.size(12.dp).align(Alignment.CenterVertically),
+                        tint = color,
+                    )
+                }
+            }
         },
         icon = icon.takeIf { !collapsed },
         selected = selected,
@@ -156,15 +179,21 @@ private fun AbstractSpaceTab(text: String, selected: Boolean, collapsed: Boolean
 }
 
 @Composable
-private fun SpaceTab(space: SpaceListDataSource.SpaceHierarchyItem, selected: Boolean, collapsed: Boolean, onClick: () -> Unit) {
-    AbstractSpaceTab(text = space.info.name, selected = selected, collapsed = collapsed, onClick = onClick) {
-        Avatar(space.info.avatarData.copy(size = SpaceAvatarSize))
+private fun SpaceTab(
+    space: SpaceListDataSource.SpaceHierarchyItem,
+    selected: Boolean,
+    collapsed: Boolean,
+    expandable: Boolean,
+    onClick: () -> Unit
+) {
+    AbstractSpaceTab(text = space.info.name, selected = selected, collapsed = collapsed, expandable = expandable, onClick = onClick) {
+        Avatar(space.info.avatarData.copy(size = SpaceAvatarSize), shape = RoundedCornerShape(4.dp))
     }
 }
 
 @Composable
 private fun ShowAllTab(selected: Boolean, collapsed: Boolean, onClick: () -> Unit) {
-    AbstractSpaceTab(text = stringResource(id = R.string.screen_roomlist_main_space_title), selected = selected, collapsed = collapsed, onClick = onClick) {
+    AbstractSpaceTab(text = stringResource(id = R.string.screen_roomlist_main_space_title), selected = selected, collapsed = collapsed, expandable = false, onClick = onClick) {
         Icon(
             imageVector = Icons.Filled.Home,
             contentDescription = null,

diff --git a/...rc/main/kotlin/io/element/android/features/roomlist/impl/datasource/RoomListDataSource.kt b/...rc/main/kotlin/io/element/android/features/roomlist/impl/datasource/RoomListDataSource.kt
@@ -109,7 +109,6 @@ class RoomListDataSource @Inject constructor(
             var space: SpaceListDataSource.SpaceHierarchyItem? = null
             var spaceList = allSpacesValue
             spaceSelectionValue.forEach { spaceId ->
-                Timber.i("SC_DBG SPACE LIST ${spaceList.map { it.info.roomId.value }}")
                 space = spaceList.find { it.info.roomId.value == spaceId }
                 if (space == null) {
                     return@combine Pair(null, false)

diff --git a/...tem/src/main/kotlin/io/element/android/libraries/designsystem/components/avatar/Avatar.kt b/...tem/src/main/kotlin/io/element/android/libraries/designsystem/components/avatar/Avatar.kt
@@ -26,6 +26,7 @@ import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.Shape
 import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.semantics.clearAndSetSemantics
 import androidx.compose.ui.tooling.preview.Preview
@@ -48,10 +49,11 @@ fun Avatar(
     avatarData: AvatarData,
     modifier: Modifier = Modifier,
     contentDescription: String? = null,
+    shape: Shape = CircleShape,
 ) {
     val commonModifier = modifier
         .size(avatarData.size.dp)
-        .clip(CircleShape)
+        .clip(shape)
     if (avatarData.url.isNullOrBlank()) {
         InitialsAvatar(
             avatarData = avatarData,