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>
This commit is contained in:
Marcel Hibbe 2022-02-23 11:41:21 +01:00
parent 02bd95ffad
commit 452baf4550
No known key found for this signature in database
GPG Key ID: C793F8B59F43CE7B
5 changed files with 61 additions and 117 deletions

View File

@ -55,6 +55,7 @@ public class MentionAutocompleteItem extends AbstractFlexibleItem<UserItem.UserI
private String source; private String source;
private String status; private String status;
private String statusIcon; private String statusIcon;
private String statusMessage;
private UserEntity currentUser; private UserEntity currentUser;
private Context context; private Context context;
@ -67,6 +68,7 @@ public class MentionAutocompleteItem extends AbstractFlexibleItem<UserItem.UserI
this.source = mention.getSource(); this.source = mention.getSource();
this.status = mention.getStatus(); this.status = mention.getStatus();
this.statusIcon = mention.getStatusIcon(); this.statusIcon = mention.getStatusIcon();
this.statusMessage = mention.getStatusMessage();
this.currentUser = currentUser; this.currentUser = currentUser;
this.context = activityContext; this.context = activityContext;
} }
@ -99,7 +101,7 @@ public class MentionAutocompleteItem extends AbstractFlexibleItem<UserItem.UserI
@Override @Override
public int getLayoutRes() { public int getLayoutRes() {
return R.layout.rv_item_mention; return R.layout.rv_item_conversation_info_participant;
} }
@Override @Override
@ -162,24 +164,40 @@ public class MentionAutocompleteItem extends AbstractFlexibleItem<UserItem.UserI
.build(); .build();
holder.participantAvatar.setController(draweeController); holder.participantAvatar.setController(draweeController);
} }
if (status != null && status.equals(StatusType.DND.getString())) {
setOnlineStateIcon(holder, R.drawable.ic_user_status_dnd_with_border); if (statusMessage != null) {
} else if (statusIcon != null && statusIcon.isEmpty()) { holder.statusMessage.setText(statusMessage);
holder.participantOnlineStateImage.setVisibility(View.GONE); } else {
holder.statusMessage.setText("");
}
if (statusIcon != null && !statusIcon.isEmpty()) {
holder.participantEmoji.setVisibility(View.VISIBLE); holder.participantEmoji.setVisibility(View.VISIBLE);
holder.participantEmoji.setText(statusIcon); 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())) { } else if (status != null && status.equals(StatusType.AWAY.getString())) {
setOnlineStateIcon(holder, R.drawable.ic_user_status_away_with_border); 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())) { } else if (status != null && status.equals(StatusType.ONLINE.getString())) {
setOnlineStateIcon(holder, R.drawable.online_status_with_border); setOnlineStateIcon(holder, R.drawable.online_status_with_border);
} else { } else {
holder.participantEmoji.setVisibility(View.GONE);
holder.participantOnlineStateImage.setVisibility(View.GONE); holder.participantOnlineStateImage.setVisibility(View.GONE);
} }
} }
private void setOnlineStateIcon(UserItem.UserItemViewHolder holder, int icon) { private void setOnlineStateIcon(UserItem.UserItemViewHolder holder, int icon) {
holder.participantEmoji.setVisibility(View.GONE);
holder.participantOnlineStateImage.setVisibility(View.VISIBLE); holder.participantOnlineStateImage.setVisibility(View.VISIBLE);
holder.participantOnlineStateImage.setImageDrawable(ContextCompat.getDrawable(context, icon)); holder.participantOnlineStateImage.setImageDrawable(ContextCompat.getDrawable(context, icon));
} }

View File

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

View File

@ -26,6 +26,7 @@ import android.annotation.SuppressLint;
import android.content.Context; import android.content.Context;
import android.util.Log; import android.util.Log;
import android.view.View; import android.view.View;
import android.view.ViewGroup;
import com.nextcloud.talk.adapters.items.MentionAutocompleteItem; import com.nextcloud.talk.adapters.items.MentionAutocompleteItem;
import com.nextcloud.talk.api.NcApi; import com.nextcloud.talk.api.NcApi;
@ -93,6 +94,14 @@ public class MentionAutocompletePresenter extends RecyclerViewPresenter<Mention>
return adapter; 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 @Override
protected void onQuery(@Nullable CharSequence query) { protected void onQuery(@Nullable CharSequence query) {

View File

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

View File

@ -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>