Skip to content

Feature/bma/fix typing #6072

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
bmarty merged 4 commits into from
May 17, 2022
Merged

Feature/bma/fix typing #6072

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
ea1607c
Improve preview of the layout in the IDE
bmarty May 17, 2022
2e189a1
Fix typing rendering #6063
bmarty May 17, 2022
3257388
Renames ids for clarity
bmarty May 17, 2022
5df0488
Apply ouchadam's suggestion. It's only accessed by the main thread.
bmarty May 17, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions library/ui-styles/src/main/res/values/dimens.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@
<dimen name="layout_vertical_margin_big">32dp</dimen>

<dimen name="profile_avatar_size">50dp</dimen>
<dimen name="typing_avatar_size">20dp</dimen>
<dimen name="item_event_message_state_size">16dp</dimen>

<dimen name="item_event_message_media_button_size">32dp</dimen>
Expand Down
13 changes: 8 additions & 5 deletions vector/src/main/java/im/vector/app/core/ui/views/TypingMessageAvatar.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ import android.view.View
import android.view.ViewGroup
import android.widget.ImageView
import android.widget.LinearLayout
import im.vector.app.core.utils.DimensionConverter
import im.vector.app.R
import im.vector.app.features.home.AvatarRenderer
import org.matrix.android.sdk.api.session.room.sender.SenderInfo
import org.matrix.android.sdk.api.util.toMatrixItem
Expand All @@ -34,19 +34,22 @@ class TypingMessageAvatar @JvmOverloads constructor(
) : LinearLayout(context, attrs, defStyleAttr) {

companion object {
const val AVATAR_SIZE_DP = 20
const val OVERLAP_FACT0R = -3 // =~ 30% to left
}

private val typingAvatarSize by lazy {

@ouchadam ouchadam May 17, 2022 •
edited
Loading

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

if render is always called from the main thread we could use the unsafe lazy initializer to avoid a synchronised call

context.resources.getDimension(R.dimen.typing_avatar_size).toInt()
}

fun render(typingUsers: List<SenderInfo>, avatarRenderer: AvatarRenderer) {
removeAllViews()
for ((index, value) in typingUsers.withIndex()) {
val avatar = ImageView(context)
avatar.id = View.generateViewId()
val layoutParams = MarginLayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT)
if (index != 0) layoutParams.marginStart = DimensionConverter(resources).dpToPx(AVATAR_SIZE_DP / OVERLAP_FACT0R)
layoutParams.width = DimensionConverter(resources).dpToPx(AVATAR_SIZE_DP)
layoutParams.height = DimensionConverter(resources).dpToPx(AVATAR_SIZE_DP)
if (index != 0) layoutParams.marginStart = typingAvatarSize / OVERLAP_FACT0R
layoutParams.width = typingAvatarSize
layoutParams.height = typingAvatarSize
avatar.layoutParams = layoutParams
avatarRenderer.render(value.toMatrixItem(), avatar)
addView(avatar)
Expand Down
7 changes: 4 additions & 3 deletions vector/src/main/java/im/vector/app/core/ui/views/TypingMessageView.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,8 @@ import javax.inject.Inject
class TypingMessageView @JvmOverloads constructor(
context: Context,
attrs: AttributeSet? = null,
defStyleAttr: Int = 0) : ConstraintLayout(context, attrs, defStyleAttr) {
defStyleAttr: Int = 0
) : ConstraintLayout(context, attrs, defStyleAttr) {

val views: TypingMessageLayoutBinding

Expand All @@ -44,8 +45,8 @@ class TypingMessageView @JvmOverloads constructor(
}

fun render(typingUsers: List<SenderInfo>, avatarRenderer: AvatarRenderer) {
views.usersName.text = typingHelper.getNotificationTypingMessage(typingUsers)
views.avatars.render(typingUsers, avatarRenderer)
views.typingUserText.text = typingHelper.getNotificationTypingMessage(typingUsers)
views.typingUserAvatars.render(typingUsers, avatarRenderer)
}

override fun onDetachedFromWindow() {
Expand Down
31 changes: 12 additions & 19 deletions vector/src/main/res/layout/fragment_timeline.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,13 +37,6 @@

</com.google.android.material.appbar.AppBarLayout>

<androidx.constraintlayout.widget.Barrier
android:id="@+id/timelineRecyclerViewBarrier"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:barrierDirection="top"
app:constraint_referenced_ids="composerLayout,notificationAreaView,failedMessagesWarningStub" />

@bmarty bmarty May 17, 2022

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this was duplicated code with badgeBarrier which has been renamed to bottomBarrier


<im.vector.app.features.sync.widget.SyncStateView
android:id="@+id/syncStateView"
android:layout_width="0dp"
Expand All @@ -68,17 +61,16 @@
android:layout_height="wrap_content"
android:background="?android:colorBackground"
android:minHeight="54dp"
android:visibility="visible"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@id/locationLiveStatusIndicator" />

<androidx.recyclerview.widget.RecyclerView
android:id="@+id/timelineRecyclerView"
android:layout_width="0dp"
android:layout_height="0dp"
android:overScrollMode="always"
app:layout_constraintBottom_toTopOf="@id/timelineRecyclerViewBarrier"
app:layout_constraintBottom_toTopOf="@id/typingMessageView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@id/removeJitsiWidgetView"
Expand All @@ -103,14 +95,13 @@
<im.vector.app.core.ui.views.TypingMessageView
android:id="@+id/typingMessageView"
android:layout_width="0dp"
android:layout_height="20dp"
android:layout_height="wrap_content"
android:paddingStart="20dp"
android:paddingEnd="20dp"
app:layout_constraintBottom_toTopOf="@id/composerLayout"
app:layout_constraintBottom_toTopOf="@id/bottomBarrier"

@bmarty bmarty May 17, 2022

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This view is now on top of the barrier, and the timeline is now on top of this view.

app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@id/timelineRecyclerView"
tools:visibility="visible" />
app:layout_constraintTop_toBottomOf="@id/timelineRecyclerView" />

<im.vector.app.core.ui.views.NotificationAreaView
android:id="@+id/notificationAreaView"
Expand All @@ -130,7 +121,8 @@
android:layout="@layout/view_stub_failed_message_warning_layout"
app:layout_constraintBottom_toTopOf="@id/composerLayout"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
app:layout_constraintStart_toStartOf="parent"
tools:layout_height="300dp" />

<im.vector.app.features.home.room.detail.composer.MessageComposerView
android:id="@+id/composerLayout"
Expand All @@ -142,7 +134,8 @@
android:visibility="gone"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
app:layout_constraintStart_toStartOf="parent"
tools:visibility="visible" />

<im.vector.app.features.home.room.detail.composer.voice.VoiceMessageRecorderView
android:id="@+id/voiceMessageRecorderView"
Expand All @@ -166,11 +159,11 @@
app:layout_constraintTop_toBottomOf="@id/appBarLayout" />

<androidx.constraintlayout.widget.Barrier
android:id="@+id/badgeBarrier"
android:id="@+id/bottomBarrier"
android:layout_width="0dp"
android:layout_height="0dp"
app:barrierDirection="top"
app:constraint_referenced_ids="composerLayout,notificationAreaView, failedMessagesWarningStub" />
app:constraint_referenced_ids="composerLayout,notificationAreaView,failedMessagesWarningStub" />

<im.vector.app.core.platform.BadgeFloatingActionButton
android:id="@+id/jumpToBottomView"
Expand All @@ -184,7 +177,7 @@
app:badgeTextColor="?colorOnPrimary"
app:badgeTextPadding="2dp"
app:badgeTextSize="10sp"
app:layout_constraintBottom_toTopOf="@id/badgeBarrier"
app:layout_constraintBottom_toTopOf="@id/bottomBarrier"
app:layout_constraintEnd_toEndOf="parent"
app:tint="@android:color/black" />

Expand Down
34 changes: 19 additions & 15 deletions vector/src/main/res/layout/typing_message_layout.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,38 +1,42 @@
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content">
android:layout_height="wrap_content"
android:paddingTop="2dp">

<!-- This is a LinearLayout which will contain avatars of the typing users -->

@ouchadam ouchadam May 17, 2022

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this comment feels like it could be replaced by renaming the id to typingUsersAvatars

@bmarty bmarty May 17, 2022

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good point, done

@bmarty bmarty May 17, 2022

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

(I keep the comment since I added it for clarity when looking at the layout. Since there is no avatar preview)

<im.vector.app.core.ui.views.TypingMessageAvatar
android:id="@+id/avatars"
android:id="@+id/typingUserAvatars"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_height="@dimen/typing_avatar_size"
app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />

<androidx.appcompat.widget.AppCompatTextView
android:id="@+id/users_name"
android:id="@+id/typingUserText"
style="@style/Widget.Vector.TextView.Body"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:gravity="center"
android:textColor="?vctr_content_secondary"
app:layout_constraintBottom_toBottomOf="@id/avatars"
app:layout_constraintStart_toEndOf="@id/avatars"
app:layout_constraintTop_toTopOf="@id/avatars" />
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toEndOf="@id/typingUserAvatars"
app:layout_constraintTop_toTopOf="parent"
tools:text="@sample/users.json/data/displayName" />

<im.vector.app.core.ui.views.TypingMessageDotsView
android:id="@+id/viewDots"
android:id="@+id/typingUserDots"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:gravity="center"
android:visibility="visible"
app:layout_constraintBottom_toBottomOf="@id/users_name"
app:layout_constraintStart_toEndOf="@id/users_name"
app:layout_constraintTop_toTopOf="@id/users_name" />
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toEndOf="@id/typingUserText"
app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>