Merge pull request #4823 from vector-im/feature/ons/attachment_picker

Attachment Picker UI Improvements

changelog.d/3444.bugfix

@@ -0,0 +1 @@
+Attachment picker UI improvements

library/ui-styles/src/main/res/values/dimens.xml

@@ -42,4 +42,9 @@
 
     <!--  Preview Url  -->
     <dimen name="preview_url_view_corner_radius">8dp</dimen>
+
+    <!-- Composer -->
+    <dimen name="composer_min_height">56dp</dimen>
+    <dimen name="composer_attachment_size">52dp</dimen>
+    <dimen name="composer_attachment_margin">1dp</dimen>
 </resources>

vector/src/main/java/im/vector/app/features/attachments/AttachmentTypeSelectorView.kt

@@ -26,24 +26,18 @@ import android.view.LayoutInflater
 import android.view.View
 import android.view.ViewAnimationUtils
 import android.view.animation.Animation
-import android.view.animation.AnimationSet
-import android.view.animation.OvershootInterpolator
-import android.view.animation.ScaleAnimation
 import android.view.animation.TranslateAnimation
 import android.widget.ImageButton
 import android.widget.LinearLayout
 import android.widget.PopupWindow
 import androidx.core.view.doOnNextLayout
 import androidx.core.view.isVisible
-import com.amulyakhare.textdrawable.TextDrawable
-import com.amulyakhare.textdrawable.util.ColorGenerator
 import im.vector.app.R
-import im.vector.app.core.extensions.getMeasurements
+import im.vector.app.core.epoxy.onClick
 import im.vector.app.core.utils.PERMISSIONS_EMPTY
 import im.vector.app.core.utils.PERMISSIONS_FOR_PICKING_CONTACT
 import im.vector.app.core.utils.PERMISSIONS_FOR_TAKING_PHOTO
 import im.vector.app.databinding.ViewAttachmentTypeSelectorBinding
-import im.vector.app.features.attachments.AttachmentTypeSelectorView.Callback
 import kotlin.math.max
 
 private const val ANIMATION_DURATION = 250
@@ -52,17 +46,16 @@ private const val ANIMATION_DURATION = 250
  * This class is the view presenting choices for picking attachments.
  * It will return result through [Callback].
  */
+
 class AttachmentTypeSelectorView(context: Context,
                                  inflater: LayoutInflater,
-                                 var callback: Callback?) :
-    PopupWindow(context) {
+                                 var callback: Callback?
+) : PopupWindow(context) {
 
     interface Callback {
         fun onTypeSelected(type: Type)
     }
 
-    private val iconColorGenerator = ColorGenerator.MATERIAL
-
     private val views: ViewAttachmentTypeSelectorBinding
 
     private var anchor: View? = null
@@ -85,35 +78,40 @@ class AttachmentTypeSelectorView(context: Context,
         inputMethodMode = INPUT_METHOD_NOT_NEEDED
         isFocusable = true
         isTouchable = true
+
+        views.attachmentCloseButton.onClick {
+            dismiss()
+        }
     }
 
-    fun show(anchor: View, isKeyboardOpen: Boolean) {
+    private fun animateOpen() {
+        views.attachmentCloseButton.animate()
+                .setDuration(200)
+                .rotation(135f)
+    }
+
+    private fun animateClose() {
+        views.attachmentCloseButton.animate()
+                .setDuration(200)
+                .rotation(0f)
+    }
+
+    fun show(anchor: View) {
+        animateOpen()
+
         this.anchor = anchor
         val anchorCoordinates = IntArray(2)
         anchor.getLocationOnScreen(anchorCoordinates)
-        if (isKeyboardOpen) {
-            showAtLocation(anchor, Gravity.NO_GRAVITY, 0, anchorCoordinates[1] + anchor.height)
-        } else {
-            val contentViewHeight = if (contentView.height == 0) {
-                contentView.getMeasurements().second
-            } else {
-                contentView.height
-            }
-            showAtLocation(anchor, Gravity.NO_GRAVITY, 0, anchorCoordinates[1] - contentViewHeight)
-        }
+        showAtLocation(anchor, Gravity.NO_GRAVITY, 0, anchorCoordinates[1])
+
         contentView.doOnNextLayout {
             animateWindowInCircular(anchor, contentView)
         }
-        animateButtonIn(views.attachmentGalleryButton, ANIMATION_DURATION / 2)
-        animateButtonIn(views.attachmentCameraButton, ANIMATION_DURATION / 4)
-        animateButtonIn(views.attachmentFileButton, ANIMATION_DURATION / 2)
-        animateButtonIn(views.attachmentAudioButton, 0)
-        animateButtonIn(views.attachmentContactButton, ANIMATION_DURATION / 4)
-        animateButtonIn(views.attachmentStickersButton, ANIMATION_DURATION / 2)
-        animateButtonIn(views.attachmentPollButton, ANIMATION_DURATION / 4)
     }
 
     override fun dismiss() {
+        animateClose()
+
         val capturedAnchor = anchor
         if (capturedAnchor != null) {
             animateWindowOutCircular(capturedAnchor, contentView)
@@ -124,28 +122,18 @@ class AttachmentTypeSelectorView(context: Context,
 
     fun setAttachmentVisibility(type: Type, isVisible: Boolean) {
         when (type) {
-            Type.CAMERA  -> views.attachmentCameraButtonContainer
-            Type.GALLERY -> views.attachmentGalleryButtonContainer
-            Type.FILE    -> views.attachmentFileButtonContainer
-            Type.STICKER -> views.attachmentStickersButtonContainer
-            Type.AUDIO   -> views.attachmentAudioButtonContainer
-            Type.CONTACT -> views.attachmentContactButtonContainer
-            Type.POLL    -> views.attachmentPollButtonContainer
+            Type.CAMERA  -> views.attachmentCameraButton
+            Type.GALLERY -> views.attachmentGalleryButton
+            Type.FILE    -> views.attachmentFileButton
+            Type.STICKER -> views.attachmentStickersButton
+            Type.AUDIO   -> views.attachmentAudioButton
+            Type.CONTACT -> views.attachmentContactButton
+            Type.POLL    -> views.attachmentPollButton
         }.let {
             it.isVisible = isVisible
         }
     }
 
-    private fun animateButtonIn(button: View, delay: Int) {
-        val animation = AnimationSet(true)
-        val scale = ScaleAnimation(0.0f, 1.0f, 0.0f, 1.0f, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.0f)
-        animation.addAnimation(scale)
-        animation.interpolator = OvershootInterpolator(1f)
-        animation.duration = ANIMATION_DURATION.toLong()
-        animation.startOffset = delay.toLong()
-        button.startAnimation(animation)
-    }
-
     private fun animateWindowInCircular(anchor: View, contentView: View) {
         val coordinates = getClickCoordinates(anchor, contentView)
         val animator = ViewAnimationUtils.createCircularReveal(contentView,
@@ -157,12 +145,6 @@ class AttachmentTypeSelectorView(context: Context,
         animator.start()
     }
 
-    private fun animateWindowInTranslate(contentView: View) {
-        val animation = TranslateAnimation(0f, 0f, contentView.height.toFloat(), 0f)
-        animation.duration = ANIMATION_DURATION.toLong()
-        getContentView().startAnimation(animation)
-    }
-
     private fun animateWindowOutCircular(anchor: View, contentView: View) {
         val coordinates = getClickCoordinates(anchor, contentView)
         val animator = ViewAnimationUtils.createCircularReveal(getContentView(),
@@ -207,7 +189,6 @@ class AttachmentTypeSelectorView(context: Context,
     }
 
     private fun ImageButton.configure(type: Type): ImageButton {
-        this.background = TextDrawable.builder().buildRound("", iconColorGenerator.getColor(type.ordinal))
         this.setOnClickListener(TypeClickListener(type))
         return this
     }

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

@@ -1367,7 +1367,7 @@ class RoomDetailFragment @Inject constructor(
                     attachmentTypeSelector = AttachmentTypeSelectorView(vectorBaseActivity, vectorBaseActivity.layoutInflater, this@RoomDetailFragment)
                     attachmentTypeSelector.setAttachmentVisibility(AttachmentTypeSelectorView.Type.POLL, vectorPreferences.labsEnablePolls())
                 }
-                attachmentTypeSelector.show(views.composerLayout.views.attachmentButton, keyboardStateUtils.isKeyboardShowing)
+                attachmentTypeSelector.show(views.composerLayout.views.attachmentButton)
             }
 
             override fun onSendMessage(text: CharSequence) {

vector/src/main/res/drawable/ic_attachment_camera.xml

@@ -0,0 +1,13 @@
+<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="M9.928,3.2917C8.6063,3.2917 7.4872,4.2283 7.2322,5.4975C7.194,5.6876 7.1204,5.8713 6.9925,6.0171L6.4405,6.6463C6.2665,6.8447 6.0153,6.9584 5.7514,6.9584H2.8333C1.8208,6.9584 1,7.7792 1,8.7917V18.8751C1,19.8876 1.8208,20.7084 2.8333,20.7084H21.1667C22.1792,20.7084 23,19.8876 23,18.8751V8.7917C23,7.7792 22.1792,6.9584 21.1667,6.9584H18.2486C17.9846,6.9584 17.7335,6.8447 17.5595,6.6463L17.0075,6.0171C16.8796,5.8713 16.806,5.6876 16.7678,5.4975C16.5128,4.2283 15.3937,3.2917 14.072,3.2917H9.928ZM15.6667,13.375C15.6667,15.4 14.025,17.0417 12,17.0417C9.975,17.0417 8.3333,15.4 8.3333,13.375C8.3333,11.35 9.975,9.7083 12,9.7083C14.025,9.7083 15.6667,11.35 15.6667,13.375Z"
+      android:fillColor="#0DBD8B"
+      android:fillType="evenOdd"/>
+  <path
+      android:pathData="M3.2917,5.5833C3.0385,5.5833 2.8333,5.7885 2.8333,6.0417C2.8333,6.2948 3.0385,6.5 3.2917,6.5H5.125C5.3781,6.5 5.5833,6.2948 5.5833,6.0417C5.5833,5.7885 5.3781,5.5833 5.125,5.5833H3.2917Z"
+      android:fillColor="#0DBD8B"/>
+</vector>

vector/src/main/res/drawable/ic_attachment_file.xml

@@ -0,0 +1,13 @@
+<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="M17.8155,15.0336L13.2282,19.4193C11.082,21.45 7.5301,21.6024 5.4562,19.4193C3.4888,17.3484 3.4841,14.0136 5.6303,11.9829L13.8691,4.106C15.2999,2.7522 17.5435,2.535 18.984,4.0515C20.5968,5.7491 20.1298,7.9906 18.699,9.3443L10.6284,16.9682C9.913,17.645 8.7551,17.7233 8.0377,16.9682C7.3484,16.2426 7.4597,15.0625 8.1751,14.3856L12.9045,9.864"
+      android:strokeLineJoin="round"
+      android:strokeWidth="2"
+      android:fillColor="#00000000"
+      android:strokeColor="#0DBD8B"
+      android:strokeLineCap="round"/>
+</vector>

vector/src/main/res/drawable/ic_attachment_gallery.xml

@@ -0,0 +1,12 @@
+<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="M20.5034,20.0373L20.8729,19.5428L20.383,19.1672L8.7444,10.2443C8.2017,9.8282 7.4428,9.8451 6.9192,10.285L3.2647,13.3548L3.0417,13.5421V13.8333V18.6667C3.0417,19.9323 4.0677,20.9583 5.3333,20.9583H18.6667C19.419,20.9583 20.0866,20.5952 20.5034,20.0373ZM2.625,5.3333C2.625,3.8376 3.8376,2.625 5.3333,2.625H18.6667C20.1624,2.625 21.375,3.8376 21.375,5.3333V18.6667C21.375,20.1624 20.1624,21.375 18.6667,21.375H5.3333C3.8376,21.375 2.625,20.1624 2.625,18.6667V5.3333ZM13.875,8.25C13.875,9.7458 15.0876,10.9583 16.5833,10.9583C16.9896,10.9583 17.3765,10.8685 17.724,10.707C18.6485,10.2772 19.2917,9.3393 19.2917,8.25C19.2917,6.7542 18.0791,5.5417 16.5833,5.5417C15.0876,5.5417 13.875,6.7542 13.875,8.25Z"
+      android:strokeWidth="1.25"
+      android:fillColor="#0DBD8B"
+      android:strokeColor="#0DBD8B"
+      android:strokeLineCap="round"/>
+</vector>

vector/src/main/res/drawable/ic_attachment_location.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,2C8.13,2 5,5.2152 5,9.1905C5,13.4741 9.42,19.3806 11.24,21.6302C11.64,22.1233 12.37,22.1233 12.77,21.6302C14.58,19.3806 19,13.4741 19,9.1905C19,5.2152 15.87,2 12,2ZM12,11.7586C10.62,11.7586 9.5,10.6081 9.5,9.1905C9.5,7.773 10.62,6.6225 12,6.6225C13.38,6.6225 14.5,7.773 14.5,9.1905C14.5,10.6081 13.38,11.7586 12,11.7586Z"
+      android:fillColor="#0DBD8B"/>
+</vector>

vector/src/main/res/drawable/ic_attachment_poll_white_24dp.xml → vector/src/main/res/drawable/ic_attachment_poll.xml

@@ -5,6 +5,6 @@
     android:viewportHeight="24">
   <path
       android:pathData="M10.5,2C10.2239,2 10,2.2239 10,2.5V22H14V2.5C14,2.2239 13.7761,2 13.5,2H10.5ZM3,9.5C3,9.2239 3.2239,9 3.5,9H6.5C6.7761,9 7,9.2239 7,9.5V22H3V9.5ZM17,13.5C17,13.2239 17.2239,13 17.5,13H20.5C20.7761,13 21,13.2239 21,13.5V22H17V13.5Z"
-      android:fillColor="#FFFFFF"
+      android:fillColor="#0DBD8B"
       android:fillType="evenOdd"/>
 </vector>

vector/src/main/res/drawable/ic_attachment_sticker.xml

@@ -0,0 +1,13 @@
+<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="M10.1479,21.321C5.7873,20.4596 2.4987,16.6135 2.4987,12C2.4987,6.7526 6.7526,2.4987 12,2.4987C16.6316,2.4987 20.4897,5.8131 21.331,10.1992C18.2322,9.4198 14.864,10.147 12.4944,12.5383C10.1572,14.8967 9.4261,18.2332 10.1479,21.321ZM20.2524,13.0424L12.9933,20.3015C12.6064,18.222 13.1681,16.1257 14.6151,14.6655C16.0754,13.1918 18.176,12.6299 20.2524,13.0424Z"
+      android:strokeLineJoin="round"
+      android:strokeWidth="0.997378"
+      android:fillColor="#0DBD8B"
+      android:strokeColor="#0DBD8B"
+      android:strokeLineCap="round"/>
+</vector>

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

@@ -108,9 +108,9 @@
 
     <ImageButton
         android:id="@+id/attachmentButton"
-        android:layout_width="52dp"
-        android:layout_height="52dp"
-        android:layout_margin="1dp"
+        android:layout_width="@dimen/composer_attachment_size"
+        android:layout_height="@dimen/composer_attachment_size"
+        android:layout_margin="@dimen/composer_attachment_margin"
         android:background="?android:attr/selectableItemBackground"
         android:contentDescription="@string/option_send_files"
         android:src="@drawable/ic_attachment"
@@ -166,7 +166,7 @@
     <ImageButton
         android:id="@+id/sendButton"
         android:layout_width="56dp"
-        android:layout_height="56dp"
+        android:layout_height="@dimen/composer_min_height"
         android:layout_marginEnd="2dp"
         android:background="@drawable/bg_send"
         android:contentDescription="@string/send"

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

@@ -121,9 +121,9 @@
 
     <ImageButton
         android:id="@+id/attachmentButton"
-        android:layout_width="52dp"
-        android:layout_height="52dp"
-        android:layout_margin="1dp"
+        android:layout_width="@dimen/composer_attachment_size"
+        android:layout_height="@dimen/composer_attachment_size"
+        android:layout_margin="@dimen/composer_attachment_margin"
         android:background="?android:attr/selectableItemBackground"
         android:contentDescription="@string/option_send_files"
         android:src="@drawable/ic_attachment"
@@ -178,7 +178,7 @@
     <ImageButton
         android:id="@+id/sendButton"
         android:layout_width="56dp"
-        android:layout_height="56dp"
+        android:layout_height="@dimen/composer_min_height"
         android:layout_marginEnd="2dp"
         android:background="@drawable/bg_send"
         android:contentDescription="@string/send"