From 952ceced05c3f055806f326b51827503bec94314 Mon Sep 17 00:00:00 2001 From: Adam Brown Date: Wed, 1 Dec 2021 17:17:11 +0000 Subject: [PATCH 01/11] updating url preview to match new designs --- .../drawable/ic_close_with_circular_bg.xml | 23 +++ .../src/main/res/layout/view_url_preview.xml | 142 +++++++++--------- 2 files changed, 92 insertions(+), 73 deletions(-) create mode 100644 vector/src/main/res/drawable/ic_close_with_circular_bg.xml diff --git a/vector/src/main/res/drawable/ic_close_with_circular_bg.xml b/vector/src/main/res/drawable/ic_close_with_circular_bg.xml new file mode 100644 index 0000000000..a38416674a --- /dev/null +++ b/vector/src/main/res/drawable/ic_close_with_circular_bg.xml @@ -0,0 +1,23 @@ + + + + + diff --git a/vector/src/main/res/layout/view_url_preview.xml b/vector/src/main/res/layout/view_url_preview.xml index 45c35279c8..772bd7d48b 100644 --- a/vector/src/main/res/layout/view_url_preview.xml +++ b/vector/src/main/res/layout/view_url_preview.xml @@ -7,83 +7,79 @@ android:layout_height="wrap_content" tools:parentTag="androidx.constraintlayout.widget.ConstraintLayout"> - + - + - + - + - + - + + + + + + + \ No newline at end of file From 6a749f106da71bdb7b7fa17355f264701e0af101 Mon Sep 17 00:00:00 2001 From: Adam Brown Date: Wed, 1 Dec 2021 17:27:59 +0000 Subject: [PATCH 02/11] adding changelog entry --- changelog.d/4278.feature | 1 + 1 file changed, 1 insertion(+) create mode 100644 changelog.d/4278.feature diff --git a/changelog.d/4278.feature b/changelog.d/4278.feature new file mode 100644 index 0000000000..fe82755186 --- /dev/null +++ b/changelog.d/4278.feature @@ -0,0 +1 @@ +Updates URL previews to match latest designs \ No newline at end of file From 0150d830d4a28d90d708ef9a35103cbe92e8aada Mon Sep 17 00:00:00 2001 From: Adam Brown Date: Thu, 2 Dec 2021 09:46:36 +0000 Subject: [PATCH 03/11] flattening preview url view layout with custom view to reduce view hierarchy --- .../ui-styles/src/main/res/values/dimens.xml | 3 + .../detail/timeline/url/PreviewUrlView.kt | 8 +- .../src/main/res/layout/view_url_preview.xml | 136 +++++++++--------- 3 files changed, 73 insertions(+), 74 deletions(-) diff --git a/library/ui-styles/src/main/res/values/dimens.xml b/library/ui-styles/src/main/res/values/dimens.xml index 519920786c..864f3d3d7f 100644 --- a/library/ui-styles/src/main/res/values/dimens.xml +++ b/library/ui-styles/src/main/res/values/dimens.xml @@ -39,4 +39,7 @@ 320dp + + + 8dp \ No newline at end of file diff --git a/vector/src/main/java/im/vector/app/features/home/room/detail/timeline/url/PreviewUrlView.kt b/vector/src/main/java/im/vector/app/features/home/room/detail/timeline/url/PreviewUrlView.kt index 3e08ce5589..1a81362618 100755 --- a/vector/src/main/java/im/vector/app/features/home/room/detail/timeline/url/PreviewUrlView.kt +++ b/vector/src/main/java/im/vector/app/features/home/room/detail/timeline/url/PreviewUrlView.kt @@ -19,13 +19,14 @@ package im.vector.app.features.home.room.detail.timeline.url import android.content.Context import android.util.AttributeSet import android.view.View -import androidx.constraintlayout.widget.ConstraintLayout import androidx.core.view.isVisible +import com.google.android.material.card.MaterialCardView import im.vector.app.R import im.vector.app.core.extensions.setTextOrHide import im.vector.app.databinding.ViewUrlPreviewBinding import im.vector.app.features.home.room.detail.timeline.TimelineEventController import im.vector.app.features.media.ImageContentRenderer +import im.vector.app.features.themes.ThemeUtils import org.matrix.android.sdk.api.extensions.orFalse import org.matrix.android.sdk.api.session.media.PreviewUrlData @@ -36,7 +37,7 @@ class PreviewUrlView @JvmOverloads constructor( context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0 -) : ConstraintLayout(context, attrs, defStyleAttr), View.OnClickListener { +) : MaterialCardView(context, attrs, defStyleAttr), View.OnClickListener { private lateinit var views: ViewUrlPreviewBinding @@ -44,6 +45,9 @@ class PreviewUrlView @JvmOverloads constructor( init { setupView() + radius = resources.getDimensionPixelSize(R.dimen.preview_url_view_corner_radius).toFloat() + cardElevation = 0f + setCardBackgroundColor(ThemeUtils.getColor(context, R.attr.vctr_system)) } private var state: PreviewUrlUiState = PreviewUrlUiState.Unknown diff --git a/vector/src/main/res/layout/view_url_preview.xml b/vector/src/main/res/layout/view_url_preview.xml index 772bd7d48b..f40316b77b 100644 --- a/vector/src/main/res/layout/view_url_preview.xml +++ b/vector/src/main/res/layout/view_url_preview.xml @@ -1,85 +1,77 @@ + tools:parentTag="com.google.android.material.card.MaterialCardView"> - - - - - - - - - - - - - + android:layout_height="wrap_content" + android:orientation="vertical"> + android:id="@+id/url_preview_image" + android:layout_width="match_parent" + android:layout_height="wrap_content" + android:adjustViewBounds="true" + android:importantForAccessibility="no" + android:scaleType="fitXY" + tools:src="@tools:sample/backgrounds/scenic" /> - + + + + + + + + + \ No newline at end of file From f3f28f3989c4b946213b1c9f868e2a2a0191bbae Mon Sep 17 00:00:00 2001 From: Adam Brown Date: Thu, 2 Dec 2021 10:09:31 +0000 Subject: [PATCH 04/11] limiting title to avoid overlapping with close icon --- vector/src/main/res/layout/view_url_preview.xml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/vector/src/main/res/layout/view_url_preview.xml b/vector/src/main/res/layout/view_url_preview.xml index f40316b77b..5636068fdb 100644 --- a/vector/src/main/res/layout/view_url_preview.xml +++ b/vector/src/main/res/layout/view_url_preview.xml @@ -41,7 +41,7 @@ android:layout_height="wrap_content" android:layout_marginStart="8dp" android:layout_marginTop="4dp" - android:layout_marginEnd="8dp" + android:layout_marginEnd="@dimen/layout_touch_size" android:ellipsize="end" android:maxLines="2" android:textColor="?vctr_content_primary" From 170f34639bdcc758388e698fdc03add2c8ba2ca0 Mon Sep 17 00:00:00 2001 From: Adam Brown Date: Thu, 2 Dec 2021 10:19:14 +0000 Subject: [PATCH 05/11] using themed colours for the close button --- vector/src/main/res/drawable/ic_close_with_circular_bg.xml | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/vector/src/main/res/drawable/ic_close_with_circular_bg.xml b/vector/src/main/res/drawable/ic_close_with_circular_bg.xml index a38416674a..5e54b638a0 100644 --- a/vector/src/main/res/drawable/ic_close_with_circular_bg.xml +++ b/vector/src/main/res/drawable/ic_close_with_circular_bg.xml @@ -5,19 +5,19 @@ android:viewportHeight="24"> From 9094173b52ddd6728e4d39008330826b6449520f Mon Sep 17 00:00:00 2001 From: Adam Brown Date: Thu, 2 Dec 2021 11:01:03 +0000 Subject: [PATCH 06/11] matching iOS max line rules for the preview description --- .../home/room/detail/timeline/url/PreviewUrlView.kt | 6 ++++++ vector/src/main/res/layout/view_url_preview.xml | 1 - 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/vector/src/main/java/im/vector/app/features/home/room/detail/timeline/url/PreviewUrlView.kt b/vector/src/main/java/im/vector/app/features/home/room/detail/timeline/url/PreviewUrlView.kt index 1a81362618..631f00819c 100755 --- a/vector/src/main/java/im/vector/app/features/home/room/detail/timeline/url/PreviewUrlView.kt +++ b/vector/src/main/java/im/vector/app/features/home/room/detail/timeline/url/PreviewUrlView.kt @@ -125,9 +125,15 @@ class PreviewUrlView @JvmOverloads constructor( private fun renderData(previewUrlData: PreviewUrlData, imageContentRenderer: ImageContentRenderer) { isVisible = true + views.urlPreviewTitle.setTextOrHide(previewUrlData.title) views.urlPreviewImage.isVisible = previewUrlData.mxcUrl?.let { imageContentRenderer.render(it, views.urlPreviewImage) }.orFalse() views.urlPreviewDescription.setTextOrHide(previewUrlData.description) + views.urlPreviewDescription.maxLines = when { + previewUrlData.mxcUrl != null -> 2 + previewUrlData.title != null -> 3 + else -> 5 + } views.urlPreviewSite.setTextOrHide(previewUrlData.siteName.takeIf { it != previewUrlData.title }) } diff --git a/vector/src/main/res/layout/view_url_preview.xml b/vector/src/main/res/layout/view_url_preview.xml index 5636068fdb..530a8da476 100644 --- a/vector/src/main/res/layout/view_url_preview.xml +++ b/vector/src/main/res/layout/view_url_preview.xml @@ -58,7 +58,6 @@ android:layout_marginEnd="8dp" android:layout_marginBottom="8dp" android:ellipsize="end" - android:maxLines="2" android:textColor="?vctr_content_secondary" tools:text="The British perfumer says removing actor John Boyega from his own advert was “utterly despicable”." /> From 5cfebb764c3b93b75c17f6684a31f99280028b59 Mon Sep 17 00:00:00 2001 From: Adam Brown Date: Thu, 2 Dec 2021 11:46:26 +0000 Subject: [PATCH 07/11] capping the preview image url based on the height - stops large screens eg tablets from attempting to fill the screen --- .../res/layout/item_timeline_event_text_message_stub.xml | 2 +- vector/src/main/res/layout/view_url_preview.xml | 7 ++++--- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/vector/src/main/res/layout/item_timeline_event_text_message_stub.xml b/vector/src/main/res/layout/item_timeline_event_text_message_stub.xml index 39df45989c..8d4bfcf14e 100644 --- a/vector/src/main/res/layout/item_timeline_event_text_message_stub.xml +++ b/vector/src/main/res/layout/item_timeline_event_text_message_stub.xml @@ -16,7 +16,7 @@ From 3ff3507fa1a9627e13a39a6ce5edfb4e572470e5 Mon Sep 17 00:00:00 2001 From: Adam Brown Date: Thu, 2 Dec 2021 11:50:28 +0000 Subject: [PATCH 08/11] forcing the send spacing to always be taking into account - ensures all message lengths are consistent --- .../vector/app/core/ui/views/SendStateImageView.kt | 12 ++++++------ .../src/main/res/layout/item_timeline_event_base.xml | 2 +- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/vector/src/main/java/im/vector/app/core/ui/views/SendStateImageView.kt b/vector/src/main/java/im/vector/app/core/ui/views/SendStateImageView.kt index cb1d08d2e5..3d710e2b24 100644 --- a/vector/src/main/java/im/vector/app/core/ui/views/SendStateImageView.kt +++ b/vector/src/main/java/im/vector/app/core/ui/views/SendStateImageView.kt @@ -20,7 +20,7 @@ import android.content.Context import android.content.res.ColorStateList import android.util.AttributeSet import androidx.appcompat.widget.AppCompatImageView -import androidx.core.view.isVisible +import androidx.core.view.isInvisible import im.vector.app.R import im.vector.app.features.home.room.detail.timeline.item.SendStateDecoration import im.vector.app.features.themes.ThemeUtils @@ -38,28 +38,28 @@ class SendStateImageView @JvmOverloads constructor( } fun render(sendState: SendStateDecoration) { - isVisible = when (sendState) { + isInvisible = when (sendState) { SendStateDecoration.SENDING_NON_MEDIA -> { setImageResource(R.drawable.ic_sending_message) imageTintList = ColorStateList.valueOf(ThemeUtils.getColor(context, R.attr.vctr_content_tertiary)) contentDescription = context.getString(R.string.event_status_a11y_sending) - true + false } SendStateDecoration.SENT -> { setImageResource(R.drawable.ic_message_sent) imageTintList = ColorStateList.valueOf(ThemeUtils.getColor(context, R.attr.vctr_content_tertiary)) contentDescription = context.getString(R.string.event_status_a11y_sent) - true + false } SendStateDecoration.FAILED -> { setImageResource(R.drawable.ic_sending_message_failed) imageTintList = null contentDescription = context.getString(R.string.event_status_a11y_failed) - true + false } SendStateDecoration.SENDING_MEDIA, SendStateDecoration.NONE -> { - false + true } } } diff --git a/vector/src/main/res/layout/item_timeline_event_base.xml b/vector/src/main/res/layout/item_timeline_event_base.xml index ed6e501d49..d85dc5cd0d 100644 --- a/vector/src/main/res/layout/item_timeline_event_base.xml +++ b/vector/src/main/res/layout/item_timeline_event_base.xml @@ -152,7 +152,7 @@ android:layout_marginBottom="4dp" android:contentDescription="@string/event_status_a11y_sending" android:src="@drawable/ic_sending_message" - android:visibility="gone" + android:visibility="invisible" tools:tint="?vctr_content_tertiary" tools:visibility="visible" /> From 9ed72fd1eb37b4e5df0489f3de8c038c34e49ede Mon Sep 17 00:00:00 2001 From: Adam Brown Date: Tue, 7 Dec 2021 12:58:46 +0000 Subject: [PATCH 09/11] removing manual end alignment for voice messages as send status gutter is now always present --- .../home/room/detail/timeline/item/BaseEventItem.kt | 10 ---------- .../home/room/detail/timeline/item/MessageVoiceItem.kt | 4 ---- 2 files changed, 14 deletions(-) diff --git a/vector/src/main/java/im/vector/app/features/home/room/detail/timeline/item/BaseEventItem.kt b/vector/src/main/java/im/vector/app/features/home/room/detail/timeline/item/BaseEventItem.kt index 6aeb1519a9..5dfbf5d8f6 100644 --- a/vector/src/main/java/im/vector/app/features/home/room/detail/timeline/item/BaseEventItem.kt +++ b/vector/src/main/java/im/vector/app/features/home/room/detail/timeline/item/BaseEventItem.kt @@ -43,22 +43,12 @@ abstract class BaseEventItem : VectorEpoxyModel @EpoxyAttribute(EpoxyAttribute.Option.DoNotHash) lateinit var dimensionConverter: DimensionConverter - protected var ignoreSendStatusVisibility = false - @CallSuper override fun bind(holder: H) { super.bind(holder) holder.leftGuideline.updateLayoutParams { this.marginStart = leftGuideline } - // Ignore visibility of the send status icon? - holder.contentContainer.updateLayoutParams { - if (ignoreSendStatusVisibility) { - addRule(RelativeLayout.ALIGN_PARENT_END) - } else { - removeRule(RelativeLayout.ALIGN_PARENT_END) - } - } holder.checkableBackground.isChecked = highlighted } diff --git a/vector/src/main/java/im/vector/app/features/home/room/detail/timeline/item/MessageVoiceItem.kt b/vector/src/main/java/im/vector/app/features/home/room/detail/timeline/item/MessageVoiceItem.kt index fb7d0cabd5..f006c2aa35 100644 --- a/vector/src/main/java/im/vector/app/features/home/room/detail/timeline/item/MessageVoiceItem.kt +++ b/vector/src/main/java/im/vector/app/features/home/room/detail/timeline/item/MessageVoiceItem.kt @@ -33,10 +33,6 @@ import im.vector.app.features.home.room.detail.timeline.helper.VoiceMessagePlayb @EpoxyModelClass(layout = R.layout.item_timeline_event_base) abstract class MessageVoiceItem : AbsMessageItem() { - init { - ignoreSendStatusVisibility = true - } - @EpoxyAttribute var mxcUrl: String = "" From 23bc867b95d7f96e3dc551a2a5374bcb7ba1cfb7 Mon Sep 17 00:00:00 2001 From: Adam Brown Date: Tue, 7 Dec 2021 13:47:29 +0000 Subject: [PATCH 10/11] removing manual send status spacing - it's no longer needed as the send status is always present (but invisible) --- vector/src/main/res/layout/item_timeline_event_base.xml | 4 ---- 1 file changed, 4 deletions(-) diff --git a/vector/src/main/res/layout/item_timeline_event_base.xml b/vector/src/main/res/layout/item_timeline_event_base.xml index d85dc5cd0d..6d778e85a4 100644 --- a/vector/src/main/res/layout/item_timeline_event_base.xml +++ b/vector/src/main/res/layout/item_timeline_event_base.xml @@ -115,27 +115,23 @@ android:id="@+id/messageContentRedactedStub" style="@style/TimelineContentStubBaseParams" android:layout_height="wrap_content" - android:layout_marginEnd="56dp" android:layout="@layout/item_timeline_event_redacted_stub" /> From 7e6a5f944feea75d377dcfc497d153315d4edb12 Mon Sep 17 00:00:00 2001 From: Adam Brown Date: Tue, 7 Dec 2021 15:14:39 +0000 Subject: [PATCH 11/11] adding a consistent padding to allow message types to avoid touching the side gutter --- vector/src/main/res/layout/item_timeline_event_base.xml | 1 + 1 file changed, 1 insertion(+) diff --git a/vector/src/main/res/layout/item_timeline_event_base.xml b/vector/src/main/res/layout/item_timeline_event_base.xml index 6d778e85a4..6d3d3e8cd5 100644 --- a/vector/src/main/res/layout/item_timeline_event_base.xml +++ b/vector/src/main/res/layout/item_timeline_event_base.xml @@ -80,6 +80,7 @@ android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_below="@id/messageMemberNameView" + android:layout_marginEnd="8dp" android:layout_toStartOf="@id/messageSendStateImageView" android:layout_toEndOf="@id/messageStartGuideline" android:addStatesFromChildren="true">