improve UI

CHANGES.rst

@@ -8,7 +8,8 @@ Features:
  -
 
 Improvements:
- -
+ - Show userId below display name in member detail screen (#2756)
+ - Clicking on a user and a room avatar opens a new screen with animation to view the avatar in full screen, with zoom capabilities (#2455)
 
 Other changes:
  -

vector/src/main/AndroidManifest.xml

@@ -207,6 +207,7 @@
                 android:name="android.support.PARENT_ACTIVITY"
                 android:value="im.vector.activity.VectorRoomActivity" />
         </activity>
+        <activity android:name=".activity.VectorAvatarViewerActivity" />
         <activity
             android:name=".activity.LockScreenActivity"
             android:clearTaskOnLaunch="true"

vector/src/main/java/im/vector/activity/VectorAppCompatActivity.kt

@@ -60,7 +60,6 @@ abstract class VectorAppCompatActivity : AppCompatActivity() {
      * UI
      * ========================================================================================== */
 
-    // TODO Maintenance: Toolbar is bound here now. Use this member in children Activities
     @Nullable
     @BindView(R.id.toolbar)
     protected lateinit var toolbar: Toolbar

vector/src/main/java/im/vector/activity/VectorAvatarViewerActivity.kt

@@ -0,0 +1,61 @@
+/*
+ * Copyright 2018 New Vector Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package im.vector.activity
+
+import android.content.Context
+import android.content.Intent
+import android.media.ExifInterface
+import butterknife.BindView
+import com.github.chrisbanes.photoview.PhotoView
+import im.vector.R
+
+class VectorAvatarViewerActivity : MXCActionBarActivity() {
+
+    @BindView(R.id.avatar_viewer_image)
+    lateinit var photoView: PhotoView
+
+    override fun getLayoutRes() = R.layout.activity_avatar_viewer
+
+    override fun initUiAndData() {
+        super.initUiAndData()
+
+        val session = getSession(intent)
+
+        if (session != null) {
+            session.mediaCache.loadBitmap(session.homeServerConfig,
+                    photoView, intent.getStringExtra(EXTRA_AVATAR_URL), 0, ExifInterface.ORIENTATION_UNDEFINED, null, null)
+        } else {
+            finish()
+        }
+    }
+
+    companion object {
+        private const val EXTRA_AVATAR_URL = "EXTRA_AVATAR_URL"
+
+        fun getIntent(context: Context, matrixId: String, avatarUrl: String): Intent {
+            return Intent(context, VectorAvatarViewerActivity::class.java).apply {
+                putExtra(EXTRA_MATRIX_ID, matrixId)
+                putExtra(EXTRA_AVATAR_URL, avatarUrl)
+            }
+        }
+    }
+
+    // For transition
+    override fun onBackPressed() {
+        supportFinishAfterTransition()
+    }
+}

vector/src/main/java/im/vector/activity/VectorMemberDetailsActivity.java

@@ -17,10 +17,10 @@
  */
 package im.vector.activity;
 
+import android.app.ActivityOptions;
 import android.content.DialogInterface;
 import android.content.Intent;
-import android.media.ExifInterface;
-import android.os.Bundle;
+import android.os.Build;
 import android.support.annotation.NonNull;
 import android.support.annotation.Nullable;
 import android.support.v7.app.AlertDialog;
@@ -61,6 +61,7 @@
 import java.util.Map;
 
 import butterknife.BindView;
+import butterknife.OnClick;
 import im.vector.Matrix;
 import im.vector.R;
 import im.vector.adapters.VectorMemberDetailsAdapter;
@@ -89,8 +90,6 @@ public class VectorMemberDetailsActivity extends MXCActionBarActivity implements
 
     public static final String RESULT_MENTION_ID = "RESULT_MENTION_ID";
 
-    private static final String AVATAR_FULLSCREEN_MODE = "AVATAR_FULLSCREEN_MODE";
-
     // list view items associated actions
     private static final int ITEM_ACTION_INVITE = 0;
     private static final int ITEM_ACTION_LEAVE = 1;
@@ -125,21 +124,17 @@ public class VectorMemberDetailsActivity extends MXCActionBarActivity implements
     private VectorMemberDetailsDevicesAdapter mDevicesListViewAdapter;
 
     // UI widgets
-    @BindView(R.id.avatar_img)
+    @BindView(R.id.member_detail_avatar)
     ImageView mMemberAvatarImageView;
     @BindView(R.id.member_avatar_badge)
     ImageView mMemberAvatarBadgeImageView;
-    @BindView(R.id.member_details_name)
-    TextView mMemberNameTextView;
+    @BindView(R.id.member_details_display_name)
+    TextView mMemberDisplayNameTextView;
+    @BindView(R.id.member_details_user_id)
+    TextView mMemberUserIdTextView;
     @BindView(R.id.member_details_presence)
     TextView mPresenceTextView;
 
-    // full screen avatar
-    @BindView(R.id.member_details_fullscreen_avatar_layout)
-    View mFullMemberAvatarLayout;
-    @BindView(R.id.member_details_fullscreen_avatar_image_view)
-    ImageView mFullMemberAvatarImageView;
-
     // listview
     @BindView(R.id.member_details_actions_list_view)
     ExpandableListView mExpandableListView;
@@ -1222,54 +1217,13 @@ public boolean onGroupClick(ExpandableListView parent, View v, int groupPosition
                 }
             });
 
-
-            // when clicking on the username
-            // switch member name <-> member id
-            mMemberNameTextView.setOnClickListener(new View.OnClickListener() {
-                @Override
-                public void onClick(View v) {
-                    User user = mSession.getDataHandler().getUser(mMemberId);
-
-                    if (TextUtils.equals(mMemberNameTextView.getText(), mMemberId)) {
-                        if ((null != user) && !TextUtils.isEmpty(user.displayname)) {
-                            mMemberNameTextView.setText(user.displayname);
-                        }
-                    } else {
-                        mMemberNameTextView.setText(mMemberId);
-                    }
-                }
-            });
-
-            // long tap : copy to the clipboard
-            mMemberNameTextView.setOnLongClickListener(new View.OnLongClickListener() {
-                @Override
-                public boolean onLongClick(View v) {
-                    SystemUtilsKt.copyToClipboard(VectorMemberDetailsActivity.this, mMemberNameTextView.getText());
-                    return true;
-                }
-            });
-
             mMemberAvatarImageView.setOnClickListener(new View.OnClickListener() {
                 @Override
                 public void onClick(View v) {
                     displayFullScreenAvatar();
                 }
             });
 
-            mFullMemberAvatarImageView.setOnClickListener(new View.OnClickListener() {
-                @Override
-                public void onClick(View v) {
-                    hideFullScreenAvatar();
-                }
-            });
-
-            mFullMemberAvatarLayout.setOnClickListener(new View.OnClickListener() {
-                @Override
-                public void onClick(View v) {
-                    hideFullScreenAvatar();
-                }
-            });
-
             // update the UI
             updateUi();
 
@@ -1279,10 +1233,6 @@ public void onClick(View v) {
                 public void onSuccess(Boolean info) {
                     // update the UI
                     updateUi();
-
-                    if (!isFirstCreation() && getSavedInstanceState().getBoolean(AVATAR_FULLSCREEN_MODE, false)) {
-                        displayFullScreenAvatar();
-                    }
                 }
             });
 
@@ -1301,10 +1251,7 @@ public void onSuccess(Room info) {
     @Override
     public boolean onKeyDown(int keyCode, KeyEvent event) {
         if ((KeyEvent.KEYCODE_BACK == keyCode)) {
-            if (View.VISIBLE == mFullMemberAvatarLayout.getVisibility()) {
-                hideFullScreenAvatar();
-                return true;
-            } else if ((View.VISIBLE == mDevicesListView.getVisibility())) {
+            if ((View.VISIBLE == mDevicesListView.getVisibility())) {
                 setScreenDevicesListVisibility(View.GONE);
                 return true;
             }
@@ -1314,29 +1261,6 @@ public boolean onKeyDown(int keyCode, KeyEvent event) {
     }
 
 
-    @Override
-    public void onSaveInstanceState(Bundle savedInstanceState) {
-        // Always call the superclass so it can save the view hierarchy state
-        super.onSaveInstanceState(savedInstanceState);
-        savedInstanceState.putBoolean(AVATAR_FULLSCREEN_MODE, View.VISIBLE == mFullMemberAvatarLayout.getVisibility());
-    }
-
-    @Override
-    protected void onRestoreInstanceState(Bundle savedInstanceState) {
-        super.onRestoreInstanceState(savedInstanceState);
-
-        if (savedInstanceState.getBoolean(AVATAR_FULLSCREEN_MODE, false)) {
-            displayFullScreenAvatar();
-        }
-    }
-
-    /**
-     * Hide the fullscreen avatar.
-     */
-    private void hideFullScreenAvatar() {
-        mFullMemberAvatarLayout.setVisibility(View.GONE);
-    }
-
     /**
      * Display the user/member avatar in fullscreen.
      */
@@ -1359,9 +1283,14 @@ private void displayFullScreenAvatar() {
         }
 
         if (!TextUtils.isEmpty(avatarUrl)) {
-            mFullMemberAvatarLayout.setVisibility(View.VISIBLE);
-            mSession.getMediaCache().loadBitmap(mSession.getHomeServerConfig(),
-                    mFullMemberAvatarImageView, avatarUrl, 0, ExifInterface.ORIENTATION_UNDEFINED, null, null);
+            if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
+                ActivityOptions options =
+                        ActivityOptions.makeSceneTransitionAnimation(this, mMemberAvatarImageView, "vector_transition_avatar");
+                startActivity(VectorAvatarViewerActivity.Companion.getIntent(this, mSession.getMyUserId(), avatarUrl), options.toBundle());
+            } else {
+                // No transition
+                startActivity(VectorAvatarViewerActivity.Companion.getIntent(this, mSession.getMyUserId(), avatarUrl));
+            }
         }
     }
 
@@ -1475,18 +1404,18 @@ private void updateUi() {
             return;
         }
 
-        if (null != mMemberNameTextView) {
-            if ((null != mRoomMember) && !TextUtils.isEmpty(mRoomMember.displayname)) {
-                mMemberNameTextView.setText(mRoomMember.displayname);
-            } else {
-                refreshUser();
-                mMemberNameTextView.setText(mUser.displayname);
-            }
-
-            // do not display the activity name in the action bar
-            setTitle("");
+        if ((null != mRoomMember) && !TextUtils.isEmpty(mRoomMember.displayname)) {
+            mMemberDisplayNameTextView.setText(mRoomMember.displayname);
+        } else {
+            refreshUser();
+            mMemberDisplayNameTextView.setText(mUser.displayname);
         }
 
+        mMemberUserIdTextView.setText(mMemberId);
+
+        // do not display the activity name in the action bar
+        setTitle("");
+
         // disable the progress bar
         enableProgressBarView(CommonActivityUtils.UTILS_HIDE_PROGRESS_BAR);
 
@@ -1606,6 +1535,16 @@ public void onDestroy() {
         }
     }
 
+    /* ==========================================================================================
+     * UI Event
+     * ========================================================================================== */
+
+    @OnClick({R.id.member_details_user_id, R.id.member_details_display_name})
+    void onUserInfoClicked(TextView v) {
+        // Copy to the clipboard
+        SystemUtilsKt.copyToClipboard(this, v.getText());
+    }
+
     // ********* IDevicesAdapterListener implementation *********
 
     private final ApiCallback<Void> mDevicesVerificationCallback = new ApiCallback<Void>() {