Merge pull request #5844 from element-hq/feature/fga/room_edit_details

Change : room details edit

libraries/matrixui/src/main/kotlin/io/element/android/libraries/matrix/ui/components/EditableAvatarView.kt

@@ -8,20 +8,25 @@
 
 package io.element.android.libraries.matrix.ui.components
 
-import androidx.compose.foundation.background
+import androidx.compose.foundation.border
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.wrapContentSize
 import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.material3.ripple
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.draw.clip
+import androidx.compose.ui.draw.drawWithContent
+import androidx.compose.ui.geometry.Offset
+import androidx.compose.ui.graphics.BlendMode
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.CompositingStrategy
+import androidx.compose.ui.graphics.graphicsLayer
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.semantics.clearAndSetSemantics
 import androidx.compose.ui.semantics.contentDescription
@@ -52,23 +57,42 @@ fun EditableAvatarView(
     onAvatarClick: () -> Unit,
     modifier: Modifier = Modifier,
 ) {
-    Column(
-        modifier = modifier.fillMaxWidth(),
-        horizontalAlignment = Alignment.CenterHorizontally,
+    val a11yAvatar = stringResource(CommonStrings.a11y_avatar)
+    val editIconRadius = 15.dp
+    val parentHeight = avatarSize.dp
+    val parentWidth = avatarSize.dp + editIconRadius / 2f
+    Box(
+        modifier = modifier
+            .wrapContentSize()
+            .size(height = parentHeight, width = parentWidth)
+            .clickable(
+                interactionSource = remember { MutableInteractionSource() },
+                onClickLabel = stringResource(CommonStrings.a11y_edit_avatar),
+                onClick = onAvatarClick,
+                indication = ripple(bounded = false),
+            )
+            .testTag(TestTags.editAvatar)
+            .clearAndSetSemantics {
+                contentDescription = a11yAvatar
+            },
     ) {
-        val a11yAvatar = stringResource(CommonStrings.a11y_avatar)
         Box(
             modifier = Modifier
-                .clickable(
-                    interactionSource = remember { MutableInteractionSource() },
-                    onClickLabel = stringResource(CommonStrings.a11y_edit_avatar),
-                    onClick = onAvatarClick,
-                    indication = ripple(bounded = false),
-                )
-                .testTag(TestTags.editAvatar)
-                .clearAndSetSemantics {
-                    contentDescription = a11yAvatar
-                },
+                .graphicsLayer {
+                    compositingStrategy = CompositingStrategy.Offscreen
+                }
+                .drawWithContent {
+                    drawContent()
+                    drawCircle(
+                        color = Color.Black,
+                        center = Offset(
+                            x = parentWidth.toPx() - editIconRadius.toPx(),
+                            y = size.height - editIconRadius.toPx(),
+                        ),
+                        radius = (editIconRadius + 4.dp).toPx(),
+                        blendMode = BlendMode.Clear,
+                    )
+                }
         ) {
             when {
                 avatarUrl == null || avatarUrl.startsWith("mxc://") -> {
@@ -90,23 +114,17 @@ fun EditableAvatarView(
                     )
                 }
             }
-
-            Box(
-                modifier = Modifier
-                    .align(Alignment.BottomEnd)
-                    .clip(CircleShape)
-                    .background(ElementTheme.colors.iconPrimary)
-                    .size(24.dp),
-                contentAlignment = Alignment.Center,
-            ) {
-                Icon(
-                    modifier = Modifier.size(16.dp),
-                    imageVector = CompoundIcons.EditSolid(),
-                    contentDescription = null,
-                    tint = ElementTheme.colors.iconOnSolidPrimary,
-                )
-            }
         }
+        Icon(
+            modifier = Modifier
+                .align(Alignment.BottomEnd)
+                .size(editIconRadius * 2)
+                .border(1.dp, ElementTheme.colors.borderInteractiveSecondary, CircleShape)
+                .padding(6.dp),
+            imageVector = CompoundIcons.Edit(),
+            contentDescription = null,
+            tint = ElementTheme.colors.iconPrimary,
+        )
     }
 }
 
@@ -119,9 +137,9 @@ internal fun EditableAvatarViewPreview(
 ) {
     EditableAvatarView(
         matrixId = "id",
-        displayName = "A room",
+        displayName = "Room",
         avatarUrl = uri,
-        avatarSize = AvatarSize.EditRoomDetails,
+        avatarSize = AvatarSize.RoomDetailsHeader,
         avatarType = AvatarType.User,
         onAvatarClick = {},
     )

libraries/matrixui/src/main/kotlin/io/element/android/libraries/matrix/ui/room/MatrixRoomState.kt

@@ -111,21 +111,3 @@ fun BaseRoom.isOwnUserAdmin(): Boolean {
     val role = roomInfo.roleOf(sessionId)
     return role == RoomMember.Role.Admin || role is RoomMember.Role.Owner
 }
-
-@Composable
-fun BaseRoom.rawName(): String? {
-    val roomInfo by roomInfoFlow.collectAsState()
-    return roomInfo.rawName
-}
-
-@Composable
-fun BaseRoom.topic(): String? {
-    val roomInfo by roomInfoFlow.collectAsState()
-    return roomInfo.topic
-}
-
-@Composable
-fun BaseRoom.avatarUrl(): String? {
-    val roomInfo by roomInfoFlow.collectAsState()
-    return roomInfo.avatarUrl
-}

libraries/ui-strings/src/main/res/values/localazy.xml

@@ -251,6 +251,7 @@ Reason: %1$s."</string>
   <string name="common_message_removed">"Message removed"</string>
   <string name="common_modern">"Modern"</string>
   <string name="common_mute">"Mute"</string>
+  <string name="common_name">"Name"</string>
   <string name="common_name_and_id">"%1$s (%2$s)"</string>
   <string name="common_no_results">"No results"</string>
   <string name="common_no_room_name">"No room name"</string>
@@ -325,6 +326,7 @@ Reason: %1$s."</string>
   <string name="common_something_went_wrong">"Something went wrong"</string>
   <string name="common_something_went_wrong_message">"We encountered an issue. Please try again."</string>
   <string name="common_space">"Space"</string>
+  <string name="common_space_topic_placeholder">"What is this space about?"</string>
   <plurals name="common_spaces">
     <item quantity="one">"%1$d Space"</item>
     <item quantity="other">"%1$d Spaces"</item>