From 452cfd3327496f021527b2771940070335b76bda Mon Sep 17 00:00:00 2001 From: Jorge Martin Espinosa Date: Wed, 23 Nov 2022 17:56:37 +0100 Subject: [PATCH] [RTE] Change layout based on plain text / rich text mode (#7621) --- changelog.d/7620.bugfix | 1 + .../detail/composer/RichTextComposerLayout.kt | 41 ++++++++++++++++++- .../res/layout/composer_rich_text_layout.xml | 1 + 3 files changed, 41 insertions(+), 2 deletions(-) create mode 100644 changelog.d/7620.bugfix diff --git a/changelog.d/7620.bugfix b/changelog.d/7620.bugfix new file mode 100644 index 0000000000..55c0e423ad --- /dev/null +++ b/changelog.d/7620.bugfix @@ -0,0 +1 @@ +Make the plain text mode layout of the RTE more compact. diff --git a/vector/src/main/java/im/vector/app/features/home/room/detail/composer/RichTextComposerLayout.kt b/vector/src/main/java/im/vector/app/features/home/room/detail/composer/RichTextComposerLayout.kt index 880ee2c031..4664c4213c 100644 --- a/vector/src/main/java/im/vector/app/features/home/room/detail/composer/RichTextComposerLayout.kt +++ b/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 { 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 - isInvisible = resources.configuration.orientation == Configuration.ORIENTATION_LANDSCAPE + updateFullScreenButtonVisibility() 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) } /** diff --git a/vector/src/main/res/layout/composer_rich_text_layout.xml b/vector/src/main/res/layout/composer_rich_text_layout.xml index 5f37de2a3a..88f96c528e 100644 --- a/vector/src/main/res/layout/composer_rich_text_layout.xml +++ b/vector/src/main/res/layout/composer_rich_text_layout.xml @@ -26,6 +26,7 @@