Apply the new room creation design

TCHAP_CHANGES.rst

@@ -5,6 +5,7 @@ Improvements:
  * Increase targetSdk to 29 #609
  * Private rooms: turn on the option to join on room’s link #573
  * Room preview: we have to support the preview on shared room link #612
+ * Apply the new room creation design #604
  * [Room creation] Do not override the power levels anymore #632
 
 Bug Fixes:

vector/src/main/java/fr/gouv/tchap/activity/TchapRoomCreationActivity.java

@@ -35,8 +35,10 @@
 import android.view.Menu;
 import android.view.MenuItem;
 import android.view.View;
+import android.view.ViewGroup;
 import android.view.inputmethod.InputMethodManager;
 import android.webkit.ValueCallback;
+import android.widget.ImageView;
 import android.widget.Switch;
 import android.widget.TextView;
 import android.widget.Toast;
@@ -73,6 +75,7 @@
 import fr.gouv.tchap.util.HexagonMaskView;
 
 import fr.gouv.tchap.util.RoomRetentionPeriodPickerDialogFragment;
+
 import com.bumptech.glide.Glide;
 import com.bumptech.glide.request.RequestOptions;
 
@@ -103,6 +106,9 @@ public class TchapRoomCreationActivity extends MXCActionBarActivity {
     @BindView(R.id.rly_hexagon_avatar)
     View hexagonAvatar;
 
+    @BindView(R.id.avatar_icon_image)
+    ImageView avatarIcon;
+
     @BindView(R.id.tv_add_avatar_image)
     TextView addAvatarText;
 
@@ -112,23 +118,27 @@ public class TchapRoomCreationActivity extends MXCActionBarActivity {
     @BindView(R.id.tv_room_msg_retention)
     TextView roomMessageRetentionText;
 
-    @BindView(R.id.switch_external_access_room)
-    Switch externalAccessRoomSwitch;
-
-    @BindView(R.id.switch_public_private_room)
-    Switch publicPrivateRoomSwitch;
-
     @BindView(R.id.switch_disable_federation)
     Switch disableFederationSwitch;
 
-    @BindView(R.id.tv_public_private_room_description)
-    TextView tvPublicPrivateRoomDescription;
+    @BindView(R.id.private_room_layout)
+    ViewGroup privateRoomLayout;
+
+    @BindView(R.id.extern_room_layout)
+    ViewGroup externRoomLayout;
+
+    @BindView(R.id.forum_room_layout)
+    ViewGroup forumRoomLayout;
+
+    @BindView(R.id.federation_layout)
+    ViewGroup federationLayout;
 
     private MXSession mSession;
     private Uri mThumbnailUri = null;
     private int mRetentionPeriod = RoomRetentionKt.DEFAULT_RETENTION_VALUE_IN_DAYS;
     private CreateRoomParams mRoomParams = new CreateRoomParams();
     private List<String> mParticipantsIds = new ArrayList<>();
+    private boolean mRestricted;
 
     @Override
     public int getLayoutRes() {
@@ -150,7 +160,10 @@ public void initUiAndData() {
             @Override
             public void onClick(View v) {
                 new RoomRetentionPeriodPickerDialogFragment(TchapRoomCreationActivity.this)
-                        .create(mRetentionPeriod, (number) -> {setRoomRetentionPeriod(number); return null;})
+                        .create(mRetentionPeriod, (number) -> {
+                            setRoomRetentionPeriod(number);
+                            return null;
+                        })
                         .show();
 
             }
@@ -160,18 +173,13 @@ public void onClick(View v) {
             roomMessageRetentionText.setVisibility(View.GONE);
         }
 
-        // Initialize default room params as private and restricted
-        externalAccessRoomSwitch.setChecked(false);
         if (DinumUtilsKt.isSecure()) {
             // There is no external users on Tchap secure, so hide this option
-            externalAccessRoomSwitch.setVisibility(View.GONE);
+            externRoomLayout.setVisibility(View.GONE);
         }
-        setRoomAccessRule(RoomAccessRulesKt.RESTRICTED);
-        publicPrivateRoomSwitch.setChecked(false);
-        mRoomParams.visibility = RoomDirectoryVisibility.DIRECTORY_VISIBILITY_PRIVATE;
-        mRoomParams.preset = CreateRoomParams.PRESET_PRIVATE_CHAT;
-        // Hide the encrypted messages sent before the member is invited.
-        mRoomParams.setHistoryVisibility(RoomState.HISTORY_VISIBILITY_INVITED);
+
+        // Select by default the private restricted type
+        enablePrivateRoom();
 
         // Prepare disable federation label by adding the hs display name of the current user.
         String userHSDomain = DinsicUtils.getHomeServerDisplayNameFromMXIdentifier(mSession.getMyUserId());
@@ -226,59 +234,103 @@ void addRoomAvatar() {
         startActivityForResult(intent, REQ_CODE_UPDATE_ROOM_AVATAR);
     }
 
-    @OnCheckedChanged(R.id.switch_external_access_room)
-    void setRoomExternalAccess() {
-        if (externalAccessRoomSwitch.isChecked()) {
-            Log.d(LOG_TAG, "## unrestricted");
-            setRoomAccessRule(RoomAccessRulesKt.UNRESTRICTED);
-            hexagonMaskView.setBorderSettings(ContextCompat.getColor(this, R.color.unrestricted_room_avatar_border_color), 10);
-        } else {
-            Log.d(LOG_TAG, "## restricted");
-            setRoomAccessRule(RoomAccessRulesKt.RESTRICTED);
-            hexagonMaskView.setBorderSettings(ContextCompat.getColor(this, R.color.restricted_room_avatar_border_color), 3);
+    void enableExternalAccess() {
+        Log.d(LOG_TAG, "## unrestricted");
+        mRestricted = false;
+        setRoomAccessRule(RoomAccessRulesKt.UNRESTRICTED);
+        hexagonMaskView.setBorderSettings(ContextCompat.getColor(this, R.color.unrestricted_room_avatar_border_color), 10);
+    }
 
-            if (!mParticipantsIds.isEmpty()) {
-                // Remove the potential selected external users
-                for (int index = 0; index < mParticipantsIds.size(); ) {
-                    String selectedUserId = mParticipantsIds.get(index);
-                    if (DinsicUtils.isExternalTchapUser(selectedUserId)) {
-                        mParticipantsIds.remove(selectedUserId);
-                    } else {
-                        index++;
-                    }
+    void disableExternalAccess() {
+        Log.d(LOG_TAG, "## restricted");
+        mRestricted = true;
+        setRoomAccessRule(RoomAccessRulesKt.RESTRICTED);
+        hexagonMaskView.setBorderSettings(ContextCompat.getColor(this, R.color.restricted_room_avatar_border_color), 3);
+
+        if (!mParticipantsIds.isEmpty()) {
+            // Remove the potential selected external users
+            for (int index = 0; index < mParticipantsIds.size(); ) {
+                String selectedUserId = mParticipantsIds.get(index);
+                if (DinsicUtils.isExternalTchapUser(selectedUserId)) {
+                    mParticipantsIds.remove(selectedUserId);
+                } else {
+                    index++;
                 }
             }
         }
     }
 
-    @OnCheckedChanged(R.id.switch_public_private_room)
-    void setRoomPrivacy() {
-        if (publicPrivateRoomSwitch.isChecked()) {
-            tvPublicPrivateRoomDescription.setTextColor(ContextCompat.getColor(this, R.color.vector_fuchsia_color));
-            mRoomParams.visibility = RoomDirectoryVisibility.DIRECTORY_VISIBILITY_PUBLIC;
-            mRoomParams.preset = CreateRoomParams.PRESET_PUBLIC_CHAT;
-            mRoomParams.setHistoryVisibility(RoomState.HISTORY_VISIBILITY_WORLD_READABLE);
-            Log.d(LOG_TAG, "## public");
-            // Public rooms are not federated by default
-            disableFederationSwitch.setChecked(true);
-            disableFederationSwitch.setVisibility(View.VISIBLE);
-            // Disable room external access option
-            updateRoomExternalAccessOption(false);
+    @OnClick(R.id.private_room_layout)
+    void enablePrivateRoom() {
+        disableExternRoom();
+        disableForumRoom();
+        privateRoomLayout.setSelected(true);
 
-        } else {
-            tvPublicPrivateRoomDescription.setTextColor(ContextCompat.getColor(this, R.color.vector_tchap_text_color_light_grey));
-            mRoomParams.visibility = RoomDirectoryVisibility.DIRECTORY_VISIBILITY_PRIVATE;
-            mRoomParams.preset = CreateRoomParams.PRESET_PRIVATE_CHAT;
-            // Hide the encrypted messages sent before the member is invited.
-            mRoomParams.setHistoryVisibility(RoomState.HISTORY_VISIBILITY_INVITED);
-            Log.d(LOG_TAG, "## private");
-            // Private rooms are all federated
-            disableFederationSwitch.setChecked(false);
-            disableFederationSwitch.setVisibility(View.GONE);
-            mRoomParams.creation_content = null;
-            // Enable the room access option
-            updateRoomExternalAccessOption(true);
-        }
+        mRoomParams.visibility = RoomDirectoryVisibility.DIRECTORY_VISIBILITY_PRIVATE;
+        mRoomParams.preset = CreateRoomParams.PRESET_PRIVATE_CHAT;
+        // Hide the encrypted messages sent before the member is invited.
+        mRoomParams.setHistoryVisibility(RoomState.HISTORY_VISIBILITY_INVITED);
+        Log.d(LOG_TAG, "## private restricted");
+        // Private rooms are all federated
+        disableFederationSwitch.setChecked(false);
+        mRoomParams.creation_content = null;
+        // Prevent the externals from joining the room
+        disableExternalAccess();
+
+        avatarIcon.setImageResource(R.drawable.private_avatar_icon_hr);
+    }
+
+    @OnClick(R.id.extern_room_layout)
+    void enableExternRoom() {
+        disablePrivateRoom();
+        disableForumRoom();
+        externRoomLayout.setSelected(true);
+
+        mRoomParams.visibility = RoomDirectoryVisibility.DIRECTORY_VISIBILITY_PRIVATE;
+        mRoomParams.preset = CreateRoomParams.PRESET_PRIVATE_CHAT;
+        // Hide the encrypted messages sent before the member is invited.
+        mRoomParams.setHistoryVisibility(RoomState.HISTORY_VISIBILITY_INVITED);
+        Log.d(LOG_TAG, "## private unrestricted");
+        // Private rooms are all federated
+        disableFederationSwitch.setChecked(false);
+        mRoomParams.creation_content = null;
+        // Allow the externals to join the room
+        enableExternalAccess();
+
+        avatarIcon.setImageResource(R.drawable.private_avatar_icon_hr);
+    }
+
+    @OnClick(R.id.forum_room_layout)
+    void enableForumRoom() {
+        disablePrivateRoom();
+        disableExternRoom();
+
+        federationLayout.setVisibility(View.VISIBLE);
+        forumRoomLayout.setSelected(true);
+
+        mRoomParams.visibility = RoomDirectoryVisibility.DIRECTORY_VISIBILITY_PUBLIC;
+        mRoomParams.preset = CreateRoomParams.PRESET_PUBLIC_CHAT;
+        mRoomParams.setHistoryVisibility(RoomState.HISTORY_VISIBILITY_WORLD_READABLE);
+        Log.d(LOG_TAG, "## public");
+        // Public rooms are not federated by default
+        disableFederationSwitch.setChecked(true);
+        // Prevent the externals from joining the room
+        disableExternalAccess();
+
+        avatarIcon.setImageResource(R.drawable.forum_avatar_icon_hr);
+    }
+
+    void disablePrivateRoom() {
+        privateRoomLayout.setSelected(false);
+    }
+
+    void disableExternRoom() {
+        externRoomLayout.setSelected(false);
+    }
+
+    void disableForumRoom() {
+        federationLayout.setVisibility(View.GONE);
+        forumRoomLayout.setSelected(false);
     }
 
     @OnCheckedChanged(R.id.switch_disable_federation)
@@ -436,17 +488,6 @@ private void setRoomAccessRule(@Nullable String roomAccessRule) {
         }
     }
 
-    private void updateRoomExternalAccessOption(boolean enable) {
-        externalAccessRoomSwitch.setEnabled(enable);
-        if (enable) {
-            externalAccessRoomSwitch.setTextColor(ContextCompat.getColor(this, R.color.vector_tchap_text_color_dark));
-        } else {
-            externalAccessRoomSwitch.setTextColor(ContextCompat.getColor(this, R.color.vector_tchap_text_color_light_grey));
-            // Remove any pending change
-            externalAccessRoomSwitch.setChecked(false);
-        }
-    }
-
     /**
      * Update the avatar from the data provided the medias picker.
      *
@@ -690,7 +731,7 @@ private void inviteMembers(int requestCode) {
         // Check whether the federation has been disabled to limit the invitation to the non federated users
         if (null == mRoomParams.creation_content) {
             // Check whether the external users are allowed or not
-            if (externalAccessRoomSwitch.isChecked()) {
+            if (!mRestricted) {
                 intent.putExtra(VectorRoomInviteMembersActivity.EXTRA_CONTACTS_FILTER, VectorRoomInviteMembersActivity.ContactsFilter.TCHAP_USERS_ONLY);
             } else {
                 intent.putExtra(VectorRoomInviteMembersActivity.EXTRA_CONTACTS_FILTER, VectorRoomInviteMembersActivity.ContactsFilter.TCHAP_USERS_ONLY_WITHOUT_EXTERNALS);

vector/src/main/res/drawable/button_extern_bg.xml

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<selector xmlns:android="http://schemas.android.com/apk/res/android">
+    <item android:state_pressed="true"
+        android:drawable="@drawable/button_extern_pressed" /> <!-- pressed -->
+    <item android:state_focused="true"
+        android:drawable="@drawable/button_extern_pressed" /> <!-- focused -->
+    <item android:state_selected="true"
+        android:drawable="@drawable/button_extern_pressed" /> <!-- selected -->
+    <item android:drawable="@drawable/button_room_normal" /> <!-- default -->
+</selector>

vector/src/main/res/drawable/button_extern_pressed.xml

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<shape xmlns:android="http://schemas.android.com/apk/res/android">
+    <solid android:color="@color/tchap_pale_grey_color"/>
+
+    <stroke android:width="4dp"
+        android:color="@color/tchap_pumpkin_orange_border_color" />
+
+    <padding android:left="1dp"
+        android:top="1dp"
+        android:right="1dp"
+        android:bottom="1dp" />
+
+    <corners android:radius="12dp" />
+</shape>

vector/src/main/res/drawable/button_forum_bg.xml

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<selector xmlns:android="http://schemas.android.com/apk/res/android">
+    <item android:state_pressed="true"
+        android:drawable="@drawable/button_forum_pressed" /> <!-- pressed -->
+    <item android:state_focused="true"
+        android:drawable="@drawable/button_forum_pressed" /> <!-- focused -->
+    <item android:state_selected="true"
+        android:drawable="@drawable/button_forum_pressed" /> <!-- selected -->
+    <item android:drawable="@drawable/button_room_normal" /> <!-- default -->
+</selector>

vector/src/main/res/drawable/button_forum_pressed.xml

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<shape xmlns:android="http://schemas.android.com/apk/res/android">
+    <solid android:color="@color/tchap_pale_grey_color"/>
+
+    <stroke android:width="4dp"
+        android:color="@color/tchap_jade_green_border_color" />
+
+    <padding android:left="1dp"
+        android:top="1dp"
+        android:right="1dp"
+        android:bottom="1dp" />
+
+    <corners android:radius="12dp" />
+</shape>

vector/src/main/res/drawable/button_private_bg.xml

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<selector xmlns:android="http://schemas.android.com/apk/res/android">
+    <item android:state_pressed="true"
+        android:drawable="@drawable/button_private_pressed" /> <!-- pressed -->
+    <item android:state_focused="true"
+        android:drawable="@drawable/button_private_pressed" /> <!-- focused -->
+    <item android:state_selected="true"
+        android:drawable="@drawable/button_private_pressed" /> <!-- selected -->
+    <item android:drawable="@drawable/button_room_normal" /> <!-- default -->
+</selector>

vector/src/main/res/drawable/button_private_pressed.xml

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<shape xmlns:android="http://schemas.android.com/apk/res/android">
+    <solid android:color="@color/tchap_pale_grey_color"/>
+
+    <stroke android:width="4dp"
+        android:color="@color/tchap_coral_border_color" />
+
+    <padding android:left="1dp"
+        android:top="1dp"
+        android:right="1dp"
+        android:bottom="1dp" />
+
+    <corners android:radius="12dp" />
+</shape>

vector/src/main/res/drawable/button_room_normal.xml

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<shape xmlns:android="http://schemas.android.com/apk/res/android">
+    <solid android:color="@color/tchap_pale_grey_color"/>
+
+    <padding android:left="1dp"
+        android:top="1dp"
+        android:right="1dp"
+        android:bottom="1dp" />
+
+    <corners android:radius="12dp" />
+</shape>