From acbeaad71c6e865c1e89cb5c6c9872fe24e77ed4 Mon Sep 17 00:00:00 2001
From: SessionHero01 <180888785+SessionHero01@users.noreply.github.com>
Date: Thu, 31 Oct 2024 15:21:30 +1100
Subject: [PATCH] Animation for group name edit

---
 .../groups/compose/EditGroupScreen.kt         | 133 ++++++++++--------
 1 file changed, 75 insertions(+), 58 deletions(-)

diff --git a/app/src/main/java/org/thoughtcrime/securesms/groups/compose/EditGroupScreen.kt b/app/src/main/java/org/thoughtcrime/securesms/groups/compose/EditGroupScreen.kt
index 29f8b60829..26ff4aa2cf 100644
--- a/app/src/main/java/org/thoughtcrime/securesms/groups/compose/EditGroupScreen.kt
+++ b/app/src/main/java/org/thoughtcrime/securesms/groups/compose/EditGroupScreen.kt
@@ -1,11 +1,14 @@
 package org.thoughtcrime.securesms.groups.compose
 
 import android.widget.Toast
+import androidx.compose.animation.Crossfade
 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.PaddingValues
 import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.RowScope
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.heightIn
 import androidx.compose.foundation.layout.padding
@@ -150,74 +153,73 @@ fun EditGroup(
             GroupMinimumVersionBanner()
 
             // Group name title
-            Row(
-                modifier = Modifier
-                    .fillMaxWidth()
-                    .heightIn(min = 72.dp),
-                horizontalArrangement = Arrangement.spacedBy(
-                    LocalDimensions.current.xxxsSpacing,
-                    Alignment.CenterHorizontally
-                ),
-                verticalAlignment = CenterVertically,
-            ) {
-                if (editingName != null) {
-                    IconButton(
-                        modifier = Modifier.size(LocalDimensions.current.spacing),
-                        onClick = onEditNameCancelClicked) {
-                        Icon(
-                            painter = painterResource(R.drawable.ic_x),
-                            contentDescription = stringResource(R.string.AccessibilityId_cancel),
-                            tint = LocalColors.current.text,
-                        )
-                    }
-
-                    SessionOutlinedTextField(
-                        modifier = Modifier.widthIn(
-                            min = LocalDimensions.current.mediumSpacing,
-                            max = 240.dp
-                        ),
-                        text = editingName,
-                        onChange = onEditingNameValueChanged,
-                        textStyle = LocalType.current.h8,
-                        singleLine = true,
-                        innerPadding = PaddingValues(
-                            horizontal = LocalDimensions.current.spacing,
-                            vertical = LocalDimensions.current.smallSpacing
-                        )
-                    )
-
-                    IconButton(
-                        modifier = Modifier.size(LocalDimensions.current.spacing),
-                        onClick = onEditNameConfirmed) {
-                        Icon(
-                            painter = painterResource(R.drawable.check),
-                            contentDescription = stringResource(R.string.AccessibilityId_confirm),
-                            tint = LocalColors.current.text,
-                        )
-                    }
-
-                } else {
-                    Text(
-                        text = groupName,
-                        style = LocalType.current.h4,
-                        textAlign = TextAlign.Center,
-                    )
-
-                    if (canEditName) {
-                        IconButton(onClick = onEditNameClicked) {
+            Crossfade(editingName != null, label = "Editable group name") { showNameEditing ->
+                if (showNameEditing) {
+                    GroupNameContainer {
+                        IconButton(
+                            modifier = Modifier.size(LocalDimensions.current.spacing),
+                            onClick = onEditNameCancelClicked) {
                             Icon(
-                                painterResource(R.drawable.ic_baseline_edit_24),
-                                contentDescription = stringResource(R.string.groupName),
+                                painter = painterResource(R.drawable.ic_x),
+                                contentDescription = stringResource(R.string.AccessibilityId_cancel),
                                 tint = LocalColors.current.text,
                             )
                         }
+
+                        SessionOutlinedTextField(
+                            modifier = Modifier.widthIn(
+                                min = LocalDimensions.current.mediumSpacing,
+                                max = 240.dp
+                            ),
+                            text = editingName.orEmpty(),
+                            onChange = onEditingNameValueChanged,
+                            textStyle = LocalType.current.h8,
+                            singleLine = true,
+                            innerPadding = PaddingValues(
+                                horizontal = LocalDimensions.current.spacing,
+                                vertical = LocalDimensions.current.smallSpacing
+                            )
+                        )
+
+                        IconButton(
+                            modifier = Modifier.size(LocalDimensions.current.spacing),
+                            onClick = onEditNameConfirmed) {
+                            Icon(
+                                painter = painterResource(R.drawable.check),
+                                contentDescription = stringResource(R.string.AccessibilityId_confirm),
+                                tint = LocalColors.current.text,
+                            )
+                        }
+                    }
+
+
+                } else {
+                    GroupNameContainer {
+                        Text(
+                            text = groupName,
+                            style = LocalType.current.h4,
+                            textAlign = TextAlign.Center,
+                        )
+
+                        if (canEditName) {
+                            IconButton(onClick = onEditNameClicked) {
+                                Icon(
+                                    painterResource(R.drawable.ic_baseline_edit_24),
+                                    contentDescription = stringResource(R.string.groupName),
+                                    tint = LocalColors.current.text,
+                                )
+                            }
+                        }
                     }
                 }
             }
 
             // Header & Add member button
             Row(
-                modifier = Modifier.padding(horizontal = 16.dp, vertical = 8.dp),
+                modifier = Modifier.padding(
+                    horizontal = LocalDimensions.current.smallSpacing,
+                    vertical = LocalDimensions.current.xxsSpacing
+                ),
                 verticalAlignment = CenterVertically
             ) {
                 Text(
@@ -295,6 +297,21 @@ fun EditGroup(
     }
 }
 
+@Composable
+private fun GroupNameContainer(content: @Composable RowScope.() -> Unit) {
+    Row(
+        modifier = Modifier
+            .fillMaxWidth()
+            .heightIn(min = 72.dp),
+        horizontalArrangement = Arrangement.spacedBy(
+            LocalDimensions.current.xxxsSpacing,
+            Alignment.CenterHorizontally
+        ),
+        verticalAlignment = CenterVertically,
+        content = content
+    )
+}
+
 @Composable
 private fun ConfirmRemovingMemberDialog(
     onConfirmed: (accountId: AccountId, removeMessages: Boolean) -> Unit,