improve autocomplete mentions UI

add status message and emoji
match parent
improve design
use rv_item_mention_conversation_info_participant instead of rv_item_mention.xml

Signed-off-by: Marcel Hibbe <dev@mhibbe.de>

app/src/main/java/com/nextcloud/talk/adapters/items/MentionAutocompleteItem.java

@@ -55,6 +55,7 @@ public class MentionAutocompleteItem extends AbstractFlexibleItem<UserItem.UserI
     private String source;
     private String status;
     private String statusIcon;
+    private String statusMessage;
     private UserEntity currentUser;
     private Context context;
 
@@ -67,6 +68,7 @@ public class MentionAutocompleteItem extends AbstractFlexibleItem<UserItem.UserI
         this.source = mention.getSource();
         this.status = mention.getStatus();
         this.statusIcon = mention.getStatusIcon();
+        this.statusMessage = mention.getStatusMessage();
         this.currentUser = currentUser;
         this.context = activityContext;
     }
@@ -99,7 +101,7 @@ public class MentionAutocompleteItem extends AbstractFlexibleItem<UserItem.UserI
 
     @Override
     public int getLayoutRes() {
-        return R.layout.rv_item_mention;
+        return R.layout.rv_item_conversation_info_participant;
     }
 
     @Override
@@ -124,13 +126,13 @@ public class MentionAutocompleteItem extends AbstractFlexibleItem<UserItem.UserI
                                         displayName,
                                         String.valueOf(adapter.getFilter(String.class)),
                                         NextcloudTalkApplication.Companion.getSharedApplication()
-                                                .getResources().getColor(R.color.colorPrimary));
+                                            .getResources().getColor(R.color.colorPrimary));
             if (holder.contactMentionId != null) {
                 FlexibleUtils.highlightText(holder.contactMentionId,
                                             "@" + objectId,
                                             String.valueOf(adapter.getFilter(String.class)),
                                             NextcloudTalkApplication.Companion.getSharedApplication()
-                                                    .getResources().getColor(R.color.colorPrimary));
+                                                .getResources().getColor(R.color.colorPrimary));
             }
         } else {
             holder.contactDisplayName.setText(displayName);
@@ -149,37 +151,53 @@ public class MentionAutocompleteItem extends AbstractFlexibleItem<UserItem.UserI
             if (SOURCE_GUESTS.equals(source)) {
                 avatarId = displayName;
                 avatarUrl = ApiUtils.getUrlForAvatarWithNameForGuests(
-                        currentUser.getBaseUrl(),
-                        avatarId,
-                        R.dimen.avatar_size_big);
+                    currentUser.getBaseUrl(),
+                    avatarId,
+                    R.dimen.avatar_size_big);
             }
 
             holder.participantAvatar.setController(null);
             DraweeController draweeController = Fresco.newDraweeControllerBuilder()
-                    .setOldController(holder.participantAvatar.getController())
-                    .setAutoPlayAnimations(true)
-                    .setImageRequest(DisplayUtils.getImageRequestForUrl(avatarUrl, null))
-                    .build();
+                .setOldController(holder.participantAvatar.getController())
+                .setAutoPlayAnimations(true)
+                .setImageRequest(DisplayUtils.getImageRequestForUrl(avatarUrl, null))
+                .build();
             holder.participantAvatar.setController(draweeController);
         }
-        if (status != null && status.equals(StatusType.DND.getString())) {
-            setOnlineStateIcon(holder, R.drawable.ic_user_status_dnd_with_border);
-        } else if (statusIcon != null && statusIcon.isEmpty()) {
-            holder.participantOnlineStateImage.setVisibility(View.GONE);
+
+        if (statusMessage != null) {
+            holder.statusMessage.setText(statusMessage);
+        } else {
+            holder.statusMessage.setText("");
+        }
+
+        if (statusIcon != null && !statusIcon.isEmpty()) {
             holder.participantEmoji.setVisibility(View.VISIBLE);
             holder.participantEmoji.setText(statusIcon);
+        } else {
+            holder.participantEmoji.setVisibility(View.GONE);
+            holder.participantEmoji.setText("");
+        }
+
+        if (status != null && status.equals(StatusType.DND.getString())) {
+            setOnlineStateIcon(holder, R.drawable.ic_user_status_dnd_with_border);
+            if (statusMessage == null || statusMessage.isEmpty()) {
+                holder.statusMessage.setText(R.string.dnd);
+            }
         } else if (status != null && status.equals(StatusType.AWAY.getString())) {
             setOnlineStateIcon(holder, R.drawable.ic_user_status_away_with_border);
+            if (statusMessage == null || statusMessage.isEmpty()) {
+                holder.statusMessage.setText(R.string.away);
+            }
         } else if (status != null && status.equals(StatusType.ONLINE.getString())) {
             setOnlineStateIcon(holder, R.drawable.online_status_with_border);
         } else {
-            holder.participantEmoji.setVisibility(View.GONE);
             holder.participantOnlineStateImage.setVisibility(View.GONE);
         }
     }
 
+
     private void setOnlineStateIcon(UserItem.UserItemViewHolder holder, int icon) {
-        holder.participantEmoji.setVisibility(View.GONE);
         holder.participantOnlineStateImage.setVisibility(View.VISIBLE);
         holder.participantOnlineStateImage.setImageDrawable(ContextCompat.getDrawable(context, icon));
     }

app/src/main/java/com/nextcloud/talk/adapters/items/UserItem.java

@@ -133,6 +133,8 @@ public class UserItem extends AbstractFlexibleItem<UserItem.UserItemViewHolder>
 
         if (participant.statusMessage != null) {
             holder.statusMessage.setText(participant.statusMessage);
+        } else {
+            holder.statusMessage.setText("");
         }
 
         if (participant.statusIcon != null && !participant.statusIcon.isEmpty()) {

app/src/main/java/com/nextcloud/talk/presenters/MentionAutocompletePresenter.java

@@ -26,6 +26,7 @@ import android.annotation.SuppressLint;
 import android.content.Context;
 import android.util.Log;
 import android.view.View;
+import android.view.ViewGroup;
 
 import com.nextcloud.talk.adapters.items.MentionAutocompleteItem;
 import com.nextcloud.talk.api.NcApi;
@@ -93,6 +94,14 @@ public class MentionAutocompletePresenter extends RecyclerViewPresenter<Mention>
         return adapter;
     }
 
+    @Override
+    protected PopupDimensions getPopupDimensions() {
+        PopupDimensions popupDimensions = new PopupDimensions();
+        popupDimensions.width = ViewGroup.LayoutParams.MATCH_PARENT;
+        popupDimensions.height = ViewGroup.LayoutParams.WRAP_CONTENT;
+        return popupDimensions;
+    }
+
     @Override
     protected void onQuery(@Nullable CharSequence query) {
 

app/src/main/res/layout/rv_item_conversation_info_participant.xml

@@ -23,15 +23,16 @@
     xmlns:tools="http://schemas.android.com/tools"
     android:id="@+id/relativeLayout"
     android:layout_width="match_parent"
-    android:layout_height="wrap_content">
+    android:layout_height="wrap_content"
+    android:layout_marginBottom="@dimen/standard_half_margin"
+    android:layout_marginTop="@dimen/standard_margin">
 
 
     <com.facebook.drawee.view.SimpleDraweeView
         android:id="@+id/conversation_info_participant_avatar"
         android:layout_width="@dimen/small_item_height"
         android:layout_height="@dimen/small_item_height"
-        android:layout_marginStart="16dp"
-        android:layout_marginTop="16dp"
+        android:layout_marginStart="@dimen/standard_margin"
         android:contentDescription="@null"
         app:layout_constraintStart_toStartOf="parent"
         app:layout_constraintTop_toTopOf="parent"
@@ -63,9 +64,8 @@
         android:id="@+id/name_text"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
-        android:layout_marginStart="16dp"
+        android:layout_marginStart="@dimen/standard_margin"
         android:layout_marginTop="2dp"
-        android:ellipsize="middle"
         android:singleLine="true"
         android:textAlignment="viewStart"
         android:textAppearance="?android:attr/textAppearanceListItem"
@@ -78,14 +78,17 @@
         android:id="@+id/conversation_info_status_message"
         android:layout_width="0dp"
         android:layout_height="wrap_content"
-        android:maxLines="2"
+        android:layout_marginBottom="4dp"
         android:ellipsize="end"
+        android:maxLines="3"
         android:textAlignment="viewStart"
         android:textAppearance="?android:attr/textAppearanceListItem"
         android:textColor="?android:attr/textColorSecondary"
+        android:layout_marginEnd="@dimen/side_margin"
+        app:layout_constraintBottom_toBottomOf="parent"
+        app:layout_constraintEnd_toEndOf="parent"
         app:layout_constraintStart_toEndOf="@+id/participant_status_emoji"
         app:layout_constraintTop_toBottomOf="@+id/name_text"
-        app:layout_constraintEnd_toEndOf="parent"
         tools:text="this is a very long status message. server allows only 81 chars here. 0123456789" />
 
     <androidx.emoji.widget.EmojiTextView
@@ -93,27 +96,28 @@
         android:layout_width="0dp"
         android:layout_height="wrap_content"
         android:layout_marginStart="8dp"
-        android:ellipsize="middle"
         android:singleLine="true"
         android:textAlignment="viewStart"
         android:textAppearance="?android:attr/textAppearanceListItem"
         android:textColor="?android:attr/textColorSecondary"
+        android:layout_marginEnd="@dimen/side_margin"
+        app:layout_constraintEnd_toEndOf="parent"
         app:layout_constraintStart_toEndOf="@+id/name_text"
         app:layout_constraintTop_toTopOf="@+id/name_text"
-        tools:text="@string/nc_moderator" />
+        tools:text="Moderator (or userid for autocomplete mention)" />
 
 
     <ImageView
         android:id="@+id/videoCallIcon"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
-        android:layout_marginTop="8dp"
-        android:layout_marginEnd="8dp"
+        android:layout_marginTop="@dimen/standard_half_margin"
+        android:layout_marginEnd="@dimen/standard_half_margin"
         android:contentDescription="@null"
         android:src="@drawable/ic_videocam_grey_600_24dp"
         android:visibility="gone"
         app:layout_constraintEnd_toEndOf="parent"
-        app:layout_constraintTop_toTopOf="parent"
+        app:layout_constraintTop_toTopOf="@+id/secondary_text"
         tools:visibility="visible" />
 
 </androidx.constraintlayout.widget.ConstraintLayout>

app/src/main/res/layout/rv_item_mention.xml

@@ -1,89 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?><!--
-  ~ Nextcloud Talk application
-  ~
-  ~ @author Mario Danic
-  ~ @author Andy Scherzinger
-  ~ Copyright (C) 2017-2018 Mario Danic
-  ~ Copyright (C) 2017 Andy Scherzinger
-  ~
-  ~ This program is free software: you can redistribute it and/or modify
-  ~ it under the terms of the GNU General Public License as published by
-  ~ the Free Software Foundation, either version 3 of the License, or
-  ~ at your option) any later version.
-  ~
-  ~ This program is distributed in the hope that it will be useful,
-  ~ but WITHOUT ANY WARRANTY; without even the implied warranty of
-  ~ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-  ~ GNU General Public License for more details.
-  ~
-  ~ You should have received a copy of the GNU General Public License
-  ~ along with this program.  If not, see <http://www.gnu.org/licenses/>.
-  -->
-
-<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:id="@+id/relativeLayout3"
-    android:layout_width="match_parent"
-    android:layout_height="@dimen/item_height">
-
-    <com.facebook.drawee.view.SimpleDraweeView
-        android:id="@+id/conversation_info_participant_avatar"
-        android:layout_width="@dimen/small_item_height"
-        android:layout_height="@dimen/small_item_height"
-        android:layout_marginStart="10dp"
-        android:layout_marginTop="10dp"
-        app:layout_constraintStart_toStartOf="parent"
-        app:layout_constraintTop_toTopOf="parent"
-        app:roundAsCircle="true" />
-
-    <com.vanniktech.emoji.EmojiEditText
-        android:id="@+id/participant_status_emoji"
-        android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
-        android:background="@color/transparent"
-        android:cursorVisible="false"
-        android:gravity="center"
-        android:text="@string/default_emoji"
-        android:textSize="16sp"
-        app:layout_constraintBottom_toBottomOf="@+id/participant_online_state"
-        app:layout_constraintEnd_toEndOf="@+id/participant_online_state" />
-
-    <ImageView
-        android:id="@+id/participant_online_state"
-        android:layout_width="16dp"
-        android:layout_height="16dp"
-        android:layout_marginEnd="-4dp"
-        android:layout_marginBottom="-4dp"
-        android:contentDescription="@null"
-        android:src="@drawable/online_status"
-        app:layout_constraintBottom_toBottomOf="@+id/conversation_info_participant_avatar"
-        app:layout_constraintEnd_toEndOf="@+id/conversation_info_participant_avatar" />
-
-    <androidx.emoji.widget.EmojiTextView
-        android:id="@+id/name_text"
-        android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
-        android:layout_marginStart="16dp"
-        android:layout_marginTop="4dp"
-        android:ellipsize="middle"
-        android:singleLine="true"
-        android:textAlignment="viewStart"
-        android:textAppearance="@style/ListItem"
-        app:layout_constraintStart_toEndOf="@+id/conversation_info_participant_avatar"
-        app:layout_constraintTop_toTopOf="@+id/conversation_info_participant_avatar"
-        tools:text="username" />
-
-    <androidx.emoji.widget.EmojiTextView
-        android:id="@+id/secondary_text"
-        android:layout_width="0dp"
-        android:layout_height="wrap_content"
-        android:ellipsize="middle"
-        android:singleLine="true"
-        android:textAlignment="viewStart"
-        android:textColor="@color/textColorMaxContrast"
-        app:layout_constraintStart_toStartOf="@+id/name_text"
-        app:layout_constraintTop_toBottomOf="@+id/name_text"
-        tools:text="\@userid" />
-
-</androidx.constraintlayout.widget.ConstraintLayout>