Change rich text editor border radius depending on the number of lines.

Replace standby voice recorder icon.
element-hq · Oct 13, 2022 · 73e9d03 · 73e9d03
1 parent 7be3bd4
commit 73e9d03
Show file tree

Hide file tree

Showing 11 changed files with 50 additions and 9 deletions.
diff --git a/library/ui-styles/src/main/res/values/dimens.xml b/library/ui-styles/src/main/res/values/dimens.xml
@@ -47,7 +47,8 @@
     <dimen name="composer_min_height">56dp</dimen>
     <dimen name="composer_attachment_size">52dp</dimen>
     <dimen name="composer_attachment_margin">1dp</dimen>
-
+    <dimen name="rich_text_composer_corner_radius_single_line">28dp</dimen>
+    <dimen name="rich_text_composer_corner_radius_expanded">14dp</dimen>
 
     <dimen name="chat_bubble_margin_start">28dp</dimen>
     <dimen name="chat_bubble_margin_end">6dp</dimen>

diff --git a/library/ui-styles/src/main/res/values/styles_edit_text.xml b/library/ui-styles/src/main/res/values/styles_edit_text.xml
@@ -11,7 +11,7 @@
         <item name="android:textColor">?vctr_message_text_color</item>
     </style>
 
-    <style name="Widget.Vector.EditText.Composer.RichTextComposer" parent="Widget.AppCompat.EditText">
+    <style name="Widget.Vector.EditText.RichTextComposer" parent="Widget.AppCompat.EditText">
         <item name="android:background">@android:color/transparent</item>
         <item name="android:inputType">textCapSentences|textMultiLine</item>
         <item name="android:maxLines">12</item>

diff --git a/.../src/main/java/im/vector/app/features/home/room/detail/composer/RichTextComposerLayout.kt b/.../src/main/java/im/vector/app/features/home/room/detail/composer/RichTextComposerLayout.kt
@@ -95,10 +95,18 @@ class RichTextComposerLayout @JvmOverloads constructor(
         collapse(false)
 
         views.composerEditText.addTextChangedListener(object : TextWatcher {
+            private var previousTextWasExpanded = false
+
             override fun beforeTextChanged(s: CharSequence?, start: Int, count: Int, after: Int) {}
             override fun onTextChanged(s: CharSequence?, start: Int, before: Int, count: Int) {}
             override fun afterTextChanged(s: Editable) {
                 callback?.onTextChanged(s)
+
+                val isExpanded = s.lines().count() > 1
+                if (previousTextWasExpanded != isExpanded) {
+                    updateTextFieldBorder(isExpanded)
+                }
+                previousTextWasExpanded = isExpanded
             }
         })
 
@@ -147,7 +155,6 @@ class RichTextComposerLayout @JvmOverloads constructor(
         val inflater = LayoutInflater.from(context)
         val button = ViewRichTextMenuButtonBinding.inflate(inflater, views.richTextMenu, true)
         button.root.tag = action
-//        menuIcons[action] = button.root
         with(button.root) {
             contentDescription = resources.getString(description)
             setImageResource(iconId)
@@ -163,6 +170,15 @@ class RichTextComposerLayout @JvmOverloads constructor(
         button.isSelected = menuState.reversedActions.contains(action)
     }
 
+    private fun updateTextFieldBorder(isExpanded: Boolean) {
+        val borderResource = if (isExpanded) {
+            R.drawable.bg_composer_rich_edit_text_expanded
+        } else {
+            R.drawable.bg_composer_rich_edit_text_single_line
+        }
+        views.composerEditTextOuterBorder.setBackgroundResource(borderResource)
+    }
+
     override fun replaceFormattedContent(text: CharSequence) {
         views.composerEditText.setHtml(text.toString())
     }

diff --git a/...src/main/java/im/vector/app/features/home/room/detail/composer/voice/VoiceMessageViews.kt b/...src/main/java/im/vector/app/features/home/room/detail/composer/voice/VoiceMessageViews.kt
@@ -260,7 +260,7 @@ class VoiceMessageViews(
 
     fun resetMicButtonUi() {
         views.voiceMessageMicButton.isVisible = true
-        views.voiceMessageMicButton.setImageResource(R.drawable.ic_voice_mic)
+        views.voiceMessageMicButton.setImageResource(R.drawable.ic_microphone)
         views.voiceMessageMicButton.setAttributeBackground(android.R.attr.selectableItemBackgroundBorderless)
         views.voiceMessageMicButton.updateLayoutParams<ViewGroup.MarginLayoutParams> {
             if (rtlXMultiplier == -1) {

diff --git a/...s/drawable/bg_composer_rich_edit_text.xml → ...e/bg_composer_rich_edit_text_expanded.xml b/...s/drawable/bg_composer_rich_edit_text.xml → ...e/bg_composer_rich_edit_text_expanded.xml
@@ -8,6 +8,6 @@
         android:width="1dp"
         android:color="?vctr_content_quaternary" />
 
-    <corners android:radius="28dp" />
+    <corners android:radius="@dimen/rich_text_composer_corner_radius_expanded" />
 
 </shape>
diff --git a/vector/src/main/res/drawable/bg_composer_rich_edit_text_single_line.xml b/vector/src/main/res/drawable/bg_composer_rich_edit_text_single_line.xml
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+<shape xmlns:android="http://schemas.android.com/apk/res/android"
+    android:shape="rectangle">
+
+    <solid android:color="@android:color/transparent" />
+
+    <stroke
+        android:width="1dp"
+        android:color="?vctr_content_quaternary" />
+
+    <corners android:radius="@dimen/rich_text_composer_corner_radius_single_line" />
+
+</shape>
diff --git a/vector/src/main/res/drawable/ic_microphone.xml b/vector/src/main/res/drawable/ic_microphone.xml
@@ -0,0 +1,9 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24">
+  <path
+      android:pathData="M12,15C13.66,15 14.99,13.66 14.99,12L15,6C15,4.34 13.66,3 12,3C10.34,3 9,4.34 9,6V12C9,13.66 10.34,15 12,15ZM18.08,12C17.66,12 17.31,12.3 17.25,12.71C16.88,15.32 14.53,17.1 12,17.1C9.47,17.1 7.12,15.33 6.75,12.71C6.69,12.3 6.33,12 5.92,12C5.4,12 5,12.46 5.07,12.97C5.53,15.94 8.03,18.27 11,18.72V21C11,21.55 11.45,22 12,22C12.55,22 13,21.55 13,21V18.72C15.96,18.29 18.47,15.94 18.93,12.97C19,12.46 18.6,12 18.08,12Z"
+      android:fillColor="#8D97A5"/>
+</vector>
diff --git a/vector/src/main/res/layout/composer_rich_text_layout.xml b/vector/src/main/res/layout/composer_rich_text_layout.xml
@@ -101,7 +101,7 @@
         android:id="@+id/composerEditTextOuterBorder"
         android:layout_width="0dp"
         android:layout_height="0dp"
-        android:background="@drawable/bg_composer_rich_edit_text" />
+        android:background="@drawable/bg_composer_rich_edit_text_single_line" />
 
     <io.element.android.wysiwyg.EditorEditText
         android:id="@+id/composerEditText"

diff --git a/vector/src/main/res/layout/composer_rich_text_layout_constraint_set_compact.xml b/vector/src/main/res/layout/composer_rich_text_layout_constraint_set_compact.xml
@@ -127,7 +127,7 @@
         android:minHeight="40dp"
         android:layout_marginTop="8dp"
         android:layout_marginHorizontal="12dp"
-        android:background="@drawable/bg_composer_rich_edit_text"
+        android:background="@drawable/bg_composer_rich_edit_text_single_line"
         app:layout_constraintVertical_bias="0"
         app:layout_constraintTop_toTopOf="parent"
         app:layout_constraintBottom_toTopOf="@id/sendButton"

diff --git a/vector/src/main/res/layout/composer_rich_text_layout_constraint_set_expanded.xml b/vector/src/main/res/layout/composer_rich_text_layout_constraint_set_expanded.xml
@@ -141,7 +141,7 @@
         android:layout_marginTop="8dp"
         android:layout_marginBottom="0dp"
         android:layout_marginHorizontal="12dp"
-        android:background="@drawable/bg_composer_rich_edit_text"
+        android:background="@drawable/bg_composer_rich_edit_text_single_line"
         app:layout_constraintVertical_bias="0"
         app:layout_constraintTop_toBottomOf="@id/composer_preview_barrier"
         app:layout_constraintBottom_toTopOf="@id/sendButton"

diff --git a/vector/src/main/res/layout/view_voice_message_recorder.xml b/vector/src/main/res/layout/view_voice_message_recorder.xml
@@ -23,11 +23,13 @@
         android:id="@+id/voiceMessageMicButton"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
+        android:minWidth="32dp"
+        android:minHeight="32dp"
         android:layout_marginEnd="12dp"
         android:layout_marginBottom="12dp"
         android:background="?android:attr/selectableItemBackground"
         android:contentDescription="@string/a11y_start_voice_message"
-        android:src="@drawable/ic_voice_mic"
+        android:src="@drawable/ic_microphone"
         app:layout_constraintBottom_toBottomOf="parent"
         app:layout_constraintEnd_toEndOf="parent" />