From f411d9954e23c736ca8e97f4048c5f1cd64ebf44 Mon Sep 17 00:00:00 2001
From: Benoit Marty <benoit@matrix.org>
Date: Tue, 15 Jun 2021 12:14:30 +0200
Subject: [PATCH] Rework drawer header, following Figma: more compact to let
 more space for spaces

---
 .../main/res/layout/fragment_home_drawer.xml  | 88 ++++++++-----------
 vector/src/main/res/values/colors.xml         |  5 --
 vector/src/main/res/values/theme_black.xml    |  1 -
 vector/src/main/res/values/theme_dark.xml     |  1 -
 vector/src/main/res/values/theme_light.xml    |  1 -
 5 files changed, 39 insertions(+), 57 deletions(-)

diff --git a/vector/src/main/res/layout/fragment_home_drawer.xml b/vector/src/main/res/layout/fragment_home_drawer.xml
index 4fd967e135..4a1421c61e 100644
--- a/vector/src/main/res/layout/fragment_home_drawer.xml
+++ b/vector/src/main/res/layout/fragment_home_drawer.xml
@@ -12,30 +12,16 @@
         android:id="@+id/homeDrawerHeader"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
-        android:background="?vctr_home_drawer_header_background"
         app:layout_constraintEnd_toEndOf="parent"
         app:layout_constraintStart_toStartOf="parent"
         app:layout_constraintTop_toTopOf="parent">
 
-        <ImageView
-            android:id="@+id/homeDrawerHeaderDebugView"
-            style="@style/VectorDebug"
-            android:layout_width="@dimen/layout_touch_size"
-            android:layout_height="@dimen/layout_touch_size"
-            android:importantForAccessibility="no"
-            android:scaleType="center"
-            android:src="@drawable/ic_settings_x"
-            app:layout_constraintEnd_toEndOf="parent"
-            app:layout_constraintTop_toTopOf="parent"
-            app:tint="?colorPrimary"
-            tools:ignore="MissingPrefix" />
-
         <ImageView
             android:id="@+id/homeDrawerHeaderAvatarView"
-            android:layout_width="50dp"
-            android:layout_height="50dp"
+            android:layout_width="40dp"
+            android:layout_height="40dp"
             android:layout_marginStart="@dimen/layout_horizontal_margin"
-            android:layout_marginTop="24dp"
+            android:layout_marginTop="@dimen/layout_vertical_margin"
             android:contentDescription="@string/avatar"
             android:transitionName="profile"
             app:layout_constraintStart_toStartOf="parent"
@@ -44,66 +30,58 @@
 
         <TextView
             android:id="@+id/homeDrawerUsernameView"
-            style="@style/VectorTextView.Subtitle"
+            style="@style/VectorTextView.Body"
             android:layout_width="0dp"
             android:layout_height="wrap_content"
-            android:layout_marginTop="16dp"
+            android:layout_marginStart="8dp"
             android:layout_marginEnd="8dp"
             android:maxLines="1"
             android:singleLine="true"
             android:textColor="?vctr_content_primary"
+            app:layout_constraintBottom_toTopOf="@+id/homeDrawerUserIdView"
             app:layout_constraintEnd_toStartOf="@+id/homeDrawerQRCodeButton"
-            app:layout_constraintStart_toStartOf="@+id/homeDrawerHeaderAvatarView"
-            app:layout_constraintTop_toBottomOf="@+id/homeDrawerHeaderAvatarView"
+            app:layout_constraintStart_toEndOf="@+id/homeDrawerHeaderAvatarView"
+            app:layout_constraintTop_toTopOf="@+id/homeDrawerHeaderAvatarView"
+            app:layout_constraintVertical_chainStyle="packed"
             tools:text="@sample/users.json/data/displayName" />
 
         <TextView
             android:id="@+id/homeDrawerUserIdView"
-            style="@style/VectorTextView.Body"
+            style="@style/VectorTextView.Caption"
             android:layout_width="0dp"
             android:layout_height="wrap_content"
+            android:layout_marginTop="4dp"
             android:layout_marginEnd="8dp"
             android:maxLines="1"
             android:singleLine="true"
             android:textColor="?vctr_content_secondary"
-            app:layout_constraintBottom_toTopOf="@+id/homeDrawerInviteFriendButton"
+            app:layout_constraintBottom_toBottomOf="@+id/homeDrawerHeaderAvatarView"
             app:layout_constraintEnd_toStartOf="@+id/homeDrawerQRCodeButton"
-            app:layout_constraintStart_toStartOf="@+id/homeDrawerHeaderAvatarView"
+            app:layout_constraintStart_toStartOf="@+id/homeDrawerUsernameView"
             app:layout_constraintTop_toBottomOf="@+id/homeDrawerUsernameView"
             tools:text="@sample/users.json/data/id" />
 
-        <Button
+        <ImageView
             android:id="@+id/homeDrawerQRCodeButton"
-            style="@style/Widget.MaterialComponents.Button.Icon"
-            android:layout_width="34dp"
-            android:layout_height="34dp"
-            android:layout_marginTop="2dp"
+            android:layout_width="@dimen/layout_touch_size"
+            android:layout_height="@dimen/layout_touch_size"
             android:layout_marginEnd="@dimen/layout_horizontal_margin"
-            android:backgroundTint="?colorSurface"
-            android:elevation="0dp"
-            android:insetLeft="0dp"
-            android:insetTop="0dp"
-            android:insetRight="0dp"
-            android:insetBottom="0dp"
-            android:padding="0dp"
+            android:contentDescription="@string/qr_code"
             android:rotationY="@integer/rtl_mirror_flip"
-            app:cornerRadius="17dp"
-            app:icon="@drawable/ic_qr_code_add"
-            app:iconGravity="textStart"
-            app:iconPadding="0dp"
-            app:iconSize="20dp"
-            app:iconTint="?colorPrimary"
+            android:scaleType="center"
+            android:src="@drawable/ic_qr_code_add"
+            app:layout_constraintBottom_toBottomOf="@id/homeDrawerHeaderAvatarView"
             app:layout_constraintEnd_toEndOf="parent"
-            app:layout_constraintTop_toTopOf="@id/homeDrawerUsernameView" />
+            app:layout_constraintTop_toTopOf="@id/homeDrawerHeaderAvatarView"
+            app:tint="?vctr_content_tertiary"
+            tools:ignore="MissingPrefix" />
 
         <Button
             android:id="@+id/homeDrawerInviteFriendButton"
             style="@style/VectorButtonStyleText"
             android:layout_width="wrap_content"
             android:layout_height="36dp"
-            android:layout_marginStart="@dimen/layout_horizontal_margin"
             android:layout_marginTop="8dp"
-            android:layout_marginEnd="@dimen/layout_horizontal_margin"
             android:layout_marginBottom="8dp"
             android:gravity="center"
             android:insetTop="0dp"
@@ -114,10 +92,22 @@
             app:iconGravity="textStart"
             app:iconSize="20dp"
             app:layout_constraintBottom_toBottomOf="parent"
+            app:layout_constraintStart_toStartOf="@+id/homeDrawerHeaderAvatarView"
+            app:layout_constraintTop_toBottomOf="@+id/homeDrawerHeaderAvatarView"
+            tools:ignore="MissingPrefix" />
+
+        <ImageView
+            android:id="@+id/homeDrawerHeaderDebugView"
+            style="@style/VectorDebug"
+            android:layout_width="@dimen/layout_touch_size"
+            android:layout_height="@dimen/layout_touch_size"
+            android:importantForAccessibility="no"
+            android:scaleType="center"
+            android:src="@drawable/ic_settings_x"
+            app:layout_constraintBottom_toBottomOf="parent"
             app:layout_constraintEnd_toEndOf="parent"
-            app:layout_constraintHorizontal_bias="0"
-            app:layout_constraintStart_toStartOf="parent"
-            app:layout_constraintTop_toBottomOf="@+id/homeDrawerUserIdView" />
+            app:tint="?colorPrimary"
+            tools:ignore="MissingPrefix" />
 
     </androidx.constraintlayout.widget.ConstraintLayout>
 
@@ -135,7 +125,7 @@
         android:id="@+id/homeDrawerBottomSeparator"
         android:layout_width="match_parent"
         android:layout_height="1dp"
-        android:background="?vctr_list_separator_on_surface"
+        android:background="?vctr_list_separator"
         app:layout_constraintBottom_toTopOf="@+id/homeDrawerHeaderSettingsView" />
 
     <TextView
diff --git a/vector/src/main/res/values/colors.xml b/vector/src/main/res/values/colors.xml
index 60e63f7661..c63c8c0875 100644
--- a/vector/src/main/res/values/colors.xml
+++ b/vector/src/main/res/values/colors.xml
@@ -32,11 +32,6 @@
     <color name="black_alpha">#55000000</color>
     <color name="black_54">#8A000000</color>
 
-    <attr name="vctr_home_drawer_header_background" format="color" />
-    <color name="vctr_home_drawer_header_background_light">#FFF5F7FA</color>
-    <color name="vctr_home_drawer_header_background_dark">#FF22282F</color>
-    <color name="vctr_home_drawer_header_background_black">#FF000000</color>
-
     <!-- For Android status bar and navigation bar -->
     <color name="android_status_bar_background_light">@color/element_system_light</color>
     <color name="android_navigation_bar_background_light">@color/element_system_light</color>
diff --git a/vector/src/main/res/values/theme_black.xml b/vector/src/main/res/values/theme_black.xml
index e0df15b65b..98ab4213c3 100644
--- a/vector/src/main/res/values/theme_black.xml
+++ b/vector/src/main/res/values/theme_black.xml
@@ -7,7 +7,6 @@
         <!-- Only setting the items we need to override to get the background to be pure black, otherwise inheriting -->
 
         <!-- other colors -->
-        <item name="vctr_home_drawer_header_background">@color/vctr_home_drawer_header_background_black</item>
         <item name="vctr_unread_room_badge">@color/vctr_unread_room_badge_black</item>
         <item name="vctr_fab_label_bg">@color/vctr_fab_label_bg_black</item>
         <item name="vctr_fab_label_stroke">@color/vctr_fab_label_stroke_black</item>
diff --git a/vector/src/main/res/values/theme_dark.xml b/vector/src/main/res/values/theme_dark.xml
index 742d7d4a58..741a76afca 100644
--- a/vector/src/main/res/values/theme_dark.xml
+++ b/vector/src/main/res/values/theme_dark.xml
@@ -16,7 +16,6 @@
         <item name="vctr_system">@color/element_system_dark</item>
 
         <!-- other colors -->
-        <item name="vctr_home_drawer_header_background">@color/vctr_home_drawer_header_background_dark</item>
         <item name="vctr_unread_room_badge">@color/vctr_unread_room_badge_dark</item>
         <item name="vctr_fab_label_bg">@color/vctr_fab_label_bg_dark</item>
         <item name="vctr_fab_label_stroke">@color/vctr_fab_label_stroke_dark</item>
diff --git a/vector/src/main/res/values/theme_light.xml b/vector/src/main/res/values/theme_light.xml
index 6c27be7927..6047278ad2 100644
--- a/vector/src/main/res/values/theme_light.xml
+++ b/vector/src/main/res/values/theme_light.xml
@@ -16,7 +16,6 @@
         <item name="vctr_system">@color/element_system_light</item>
 
         <!-- other colors -->
-        <item name="vctr_home_drawer_header_background">@color/vctr_home_drawer_header_background_light</item>
         <item name="vctr_unread_room_badge">@color/vctr_unread_room_badge_light</item>
         <item name="vctr_fab_label_bg">@color/vctr_fab_label_bg_light</item>
         <item name="vctr_fab_label_stroke">@color/vctr_fab_label_stroke_light</item>