From a5b128c31e5912eb22a951d4afe1ee2ce2cbae32 Mon Sep 17 00:00:00 2001
From: Mauro Romito <mauro.romito@element.io>
Date: Fri, 21 Oct 2022 15:51:51 +0200
Subject: [PATCH] reimplemented but the animation and the spacing needs some
 fixing

---
 .../Modules/Room/Composer/View/Composer.swift | 60 +++++++++++--------
 1 file changed, 35 insertions(+), 25 deletions(-)

diff --git a/RiotSwiftUI/Modules/Room/Composer/View/Composer.swift b/RiotSwiftUI/Modules/Room/Composer/View/Composer.swift
index be7577e12..abe6f003f 100644
--- a/RiotSwiftUI/Modules/Room/Composer/View/Composer.swift
+++ b/RiotSwiftUI/Modules/Room/Composer/View/Composer.swift
@@ -51,6 +51,14 @@ struct Composer: View {
         viewModel.viewState.sendMode == .edit ? "editButton" : "sendButton"
     }
     
+    private var toggleButtonAcccessibilityIdentifier: String {
+        wysiwygViewModel.maximised ? "minimiseToggle" : "maximisedToggle"
+    }
+    
+    private var toggleButtonImageName: String {
+        wysiwygViewModel.maximised ? Asset.Images.minimiseComposer.name : Asset.Images.maximiseComposer.name
+    }
+    
     private var borderColor: Color {
         focused ? theme.colors.quarterlyContent : theme.colors.quinaryContent
     }
@@ -103,31 +111,34 @@ struct Composer: View {
                     .padding(.top, 8)
                     .padding(.horizontal, horizontalPadding)
                 }
-                WysiwygComposerView(
-                    focused: $focused,
-                    content: wysiwygViewModel.content,
-                    replaceText: wysiwygViewModel.replaceText,
-                    select: wysiwygViewModel.select,
-                    didUpdateText: wysiwygViewModel.didUpdateText
-                )
-                .tintColor(theme.colors.accent)
-                .placeholder(viewModel.viewState.placeholder, color: theme.colors.tertiaryContent)
-                .frame(height: wysiwygViewModel.idealHeight)
-                .padding(.horizontal, horizontalPadding)
-                .onAppear {
-                    wysiwygViewModel.setup()
+                HStack(alignment: .top, spacing: 0) {
+                    WysiwygComposerView(
+                        focused: $focused,
+                        content: wysiwygViewModel.content,
+                        replaceText: wysiwygViewModel.replaceText,
+                        select: wysiwygViewModel.select,
+                        didUpdateText: wysiwygViewModel.didUpdateText
+                    )
+                    .tintColor(theme.colors.accent)
+                    .placeholder(viewModel.viewState.placeholder, color: theme.colors.tertiaryContent)
+                    .frame(height: wysiwygViewModel.idealHeight)
+                    .onAppear {
+                        wysiwygViewModel.setup()
+                    }
+                    Button {
+                        withAnimation(.easeInOut(duration: 0.15)) {
+                            wysiwygViewModel.maximised.toggle()
+                        }
+                    } label: {
+                        Image(toggleButtonImageName)
+                            .resizable()
+                            .foregroundColor(theme.colors.tertiaryContent)
+                            .frame(width: 16, height: 16)
+                    }
+                    .accessibilityIdentifier(toggleButtonAcccessibilityIdentifier)
+                    .padding(.leading, 12)
                 }
-                //                Button {
-                //                    withAnimation(.easeInOut(duration: 0.25)) {
-                //                        viewModel.maximised.toggle()
-                //                    }
-                //                } label: {
-                //                    Image(viewModel.maximised ? Asset.Images.minimiseComposer.name : Asset.Images.maximiseComposer.name)
-                //                        .foregroundColor(theme.colors.tertiaryContent)
-                //                }
-                //                .padding(.top, 4)
-                //                .padding(.trailing, 12)
-                //            }
+                .padding(.horizontal, horizontalPadding)
                 .padding(.top, topPadding)
                 .padding(.bottom, verticalPadding)
             }
@@ -148,7 +159,6 @@ struct Composer: View {
                         .resizable()
                         .foregroundColor(theme.colors.tertiaryContent)
                         .frame(width: 14, height: 14)
-                    
                 }
                 .frame(width: 36, height: 36)
                 .background(Circle().fill(theme.colors.system))