[RTE] Change layout based on plain text / rich text mode (#7621)

changelog.d/7620.bugfix

@@ -0,0 +1 @@
+Make the plain text mode layout of the RTE more compact.

vector/src/main/java/im/vector/app/features/home/room/detail/composer/RichTextComposerLayout.kt

@@ -34,6 +34,7 @@ import android.widget.ImageButton
 import android.widget.LinearLayout
 import androidx.annotation.DrawableRes
 import androidx.annotation.StringRes
+import androidx.constraintlayout.widget.ConstraintSet
 import androidx.core.text.toSpannable
 import androidx.core.view.isGone
 import androidx.core.view.isInvisible
@@ -44,6 +45,7 @@ import im.vector.app.R
 import im.vector.app.core.extensions.hideKeyboard
 import im.vector.app.core.extensions.setTextIfDifferent
 import im.vector.app.core.extensions.showKeyboard
+import im.vector.app.core.utils.DimensionConverter
 import im.vector.app.databinding.ComposerRichTextLayoutBinding
 import im.vector.app.databinding.ViewRichTextMenuButtonBinding
 import io.element.android.wysiwyg.EditorEditText
@@ -72,6 +74,11 @@ class RichTextComposerLayout @JvmOverloads constructor(
             field = value
             updateTextFieldBorder(isFullScreen)
             updateEditTextVisibility()
+            updateFullScreenButtonVisibility()
+            // If formatting is no longer enabled and it's in full screen, minimise the editor
+            if (!value && isFullScreen) {
+                callback?.onFullScreenModeChanged()
+            }
         }
 
     override val text: Editable?
@@ -105,6 +112,8 @@ class RichTextComposerLayout @JvmOverloads constructor(
         }
     }
 
+    private val dimensionConverter = DimensionConverter(resources)
+
     fun setFullScreen(isFullScreen: Boolean) {
         editText.updateLayoutParams<ViewGroup.LayoutParams> {
             height = if (isFullScreen) 0 else ViewGroup.LayoutParams.WRAP_CONTENT
@@ -191,8 +200,7 @@ class RichTextComposerLayout @JvmOverloads constructor(
         }
 
         views.composerFullScreenButton.apply {
-            // There's no point in having full screen in landscape since there's almost no vertical space
+            updateFullScreenButtonVisibility()
-            isInvisible = resources.configuration.orientation == Configuration.ORIENTATION_LANDSCAPE
             setOnClickListener {
                 callback?.onFullScreenModeChanged()
             }
@@ -251,6 +259,35 @@ class RichTextComposerLayout @JvmOverloads constructor(
         views.richTextComposerEditText.isVisible = isTextFormattingEnabled
         views.richTextMenu.isVisible = isTextFormattingEnabled
         views.plainTextComposerEditText.isVisible = !isTextFormattingEnabled
+
+        // The layouts for formatted text mode and plain text mode are different, so we need to update the constraints
+        val dpToPx = { dp: Int -> dimensionConverter.dpToPx(dp) }
+        ConstraintSet().apply {
+            clone(views.composerLayoutContent)
+            clear(R.id.composerEditTextOuterBorder, ConstraintSet.TOP)
+            clear(R.id.composerEditTextOuterBorder, ConstraintSet.BOTTOM)
+            clear(R.id.composerEditTextOuterBorder, ConstraintSet.START)
+            clear(R.id.composerEditTextOuterBorder, ConstraintSet.END)
+            if (isTextFormattingEnabled) {
+                connect(R.id.composerEditTextOuterBorder, ConstraintSet.TOP, R.id.composerLayoutContent, ConstraintSet.TOP, dpToPx(8))
+                connect(R.id.composerEditTextOuterBorder, ConstraintSet.BOTTOM, R.id.sendButton, ConstraintSet.TOP, 0)
+                connect(R.id.composerEditTextOuterBorder, ConstraintSet.START, R.id.composerLayoutContent, ConstraintSet.START, dpToPx(12))
+                connect(R.id.composerEditTextOuterBorder, ConstraintSet.END, R.id.composerLayoutContent, ConstraintSet.END, dpToPx(12))
+            } else {
+                connect(R.id.composerEditTextOuterBorder, ConstraintSet.TOP, R.id.composerLayoutContent, ConstraintSet.TOP, dpToPx(10))
+                connect(R.id.composerEditTextOuterBorder, ConstraintSet.BOTTOM, R.id.composerLayoutContent, ConstraintSet.BOTTOM, dpToPx(10))
+                connect(R.id.composerEditTextOuterBorder, ConstraintSet.START, R.id.attachmentButton, ConstraintSet.END, 0)
+                connect(R.id.composerEditTextOuterBorder, ConstraintSet.END, R.id.sendButton, ConstraintSet.START, 0)
+            }
+            applyTo(views.composerLayoutContent)
+        }
+    }
+
+    private fun updateFullScreenButtonVisibility() {
+        val isLargeScreenDevice = resources.configuration.isLayoutSizeAtLeast(Configuration.SCREENLAYOUT_SIZE_LARGE)
+        val isLandscape = resources.configuration.orientation == Configuration.ORIENTATION_LANDSCAPE
+        // There's no point in having full screen in landscape since there's almost no vertical space
+        views.composerFullScreenButton.isInvisible = !isTextFormattingEnabled || (isLandscape && !isLargeScreenDevice)
     }
 
     /**

vector/src/main/res/layout/composer_rich_text_layout.xml

@@ -26,6 +26,7 @@
     </FrameLayout>
 
     <androidx.constraintlayout.widget.ConstraintLayout
+        android:id="@+id/composerLayoutContent"
         android:layout_width="match_parent"
         android:layout_height="match_parent">