From 009f1cef6e2178d9ca0b1a606a598e56e0562b9e Mon Sep 17 00:00:00 2001
From: malinajirka <malinajirka@gmail.com>
Date: Fri, 7 Feb 2020 13:53:08 +0100
Subject: [PATCH 1/3] Update UI of page list items to match post list items

---
 .../android/ui/pages/PageItemViewHolder.kt    |   7 +-
 .../src/main/res/layout/page_list_item.xml    | 151 ++++++++++--------
 WordPress/src/main/res/values/dimens.xml      |   4 +
 3 files changed, 94 insertions(+), 68 deletions(-)

diff --git a/WordPress/src/main/java/org/wordpress/android/ui/pages/PageItemViewHolder.kt b/WordPress/src/main/java/org/wordpress/android/ui/pages/PageItemViewHolder.kt
index 245845bb10ac..fb35a71fc5a5 100644
--- a/WordPress/src/main/java/org/wordpress/android/ui/pages/PageItemViewHolder.kt
+++ b/WordPress/src/main/java/org/wordpress/android/ui/pages/PageItemViewHolder.kt
@@ -82,10 +82,9 @@ sealed class PageItemViewHolder(internal val parent: ViewGroup, @LayoutRes layou
                 time.text = DateTimeUtils.javaDateToTimeSpan(date, parent.context)
                         .capitalizeWithLocaleWithoutLint(parent.context.currentLocale)
 
-                if (page.labels.isNotEmpty()) {
-                    labels.text = page.labels.map { parent.context.getString(it) }.sorted()
-                            .joinToString(prefix = " · ", separator = " · ")
-                }
+                labels.text = page.labels.map { parent.context.getString(it) }.sorted()
+                        .joinToString(separator = " · ")
+                uiHelper.updateVisibility(labels, page.labels.isNotEmpty())
 
                 itemView.setOnClickListener { onItemTapped(page) }
 
diff --git a/WordPress/src/main/res/layout/page_list_item.xml b/WordPress/src/main/res/layout/page_list_item.xml
index 522e39a5c96c..8d5a6c4395d8 100644
--- a/WordPress/src/main/res/layout/page_list_item.xml
+++ b/WordPress/src/main/res/layout/page_list_item.xml
@@ -6,83 +6,87 @@
     android:id="@+id/page_item"
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
-    android:background="@android:color/white">
+    android:layout_marginEnd="@dimen/page_list_content_margin"
+    android:layout_marginStart="@dimen/page_list_content_margin"
+    android:background="@color/white">
 
     <androidx.constraintlayout.widget.ConstraintLayout
         android:id="@+id/page_layout"
         android:layout_width="match_parent"
-        android:layout_height="@dimen/two_line_list_item_height"
-        android:background="?attr/selectableItemBackground">
+        android:layout_height="match_parent"
+        android:background="?selectableItemBackground">
 
-        <ImageButton
-            android:id="@+id/page_more"
-            android:layout_width="56dp"
-            android:layout_height="0dp"
-            android:background="?attr/selectableItemBackgroundBorderless"
-            android:contentDescription="@string/show_more_desc"
-            android:paddingEnd="@dimen/page_item_horizontal_padding"
-            android:paddingStart="@dimen/page_item_horizontal_padding"
-            android:src="@drawable/ic_ellipsis_vertical_white_24dp"
-            android:tint="@color/neutral_50"
-            android:visibility="visible"
-            app:layout_constraintBottom_toBottomOf="parent"
-            app:layout_constraintEnd_toEndOf="parent"
-            app:layout_constraintTop_toTopOf="parent" />
-
-        <ImageView
-            android:id="@+id/featured_image"
-            android:layout_width="40dp"
-            android:layout_height="40dp"
-            android:contentDescription="@string/featured_image_desc"
-            app:layout_constraintBottom_toBottomOf="@id/text_layout"
-            app:layout_constraintEnd_toStartOf="@id/page_more"
-            app:layout_constraintStart_toEndOf="@id/text_layout"
-            app:layout_constraintTop_toTopOf="@id/text_layout"
-            tools:srcCompat="@tools:sample/avatars"/>
-
-        <androidx.constraintlayout.widget.ConstraintLayout
-            android:id="@+id/text_layout"
+        <org.wordpress.android.widgets.WPTextView
+            android:id="@+id/page_title"
             android:layout_width="0dp"
             android:layout_height="wrap_content"
-            android:layout_marginEnd="8dp"
+            android:layout_alignParentStart="true"
+            android:layout_marginEnd="@dimen/margin_medium"
             android:layout_marginStart="@dimen/page_item_horizontal_padding"
-            android:orientation="vertical"
-            app:layout_constraintBottom_toBottomOf="parent"
+            android:layout_marginTop="@dimen/margin_large"
+            android:ellipsize="end"
+            android:fontFamily="serif"
+            android:maxLines="1"
+            android:textAlignment="textStart"
+            android:textColor="@color/neutral_80"
+            android:textSize="@dimen/text_sz_large"
+            android:textStyle="bold"
+            app:layout_constraintBottom_toTopOf="@+id/time_posted"
             app:layout_constraintEnd_toStartOf="@+id/featured_image"
+            app:layout_constraintHorizontal_bias="0"
             app:layout_constraintStart_toStartOf="parent"
-            app:layout_constraintTop_toTopOf="parent">
+            app:layout_constraintTop_toBottomOf="@+id/disabled_overlay"
+            app:layout_constraintTop_toTopOf="parent"
+            app:layout_constraintVertical_chainStyle="packed"
+            tools:text="Porro totam quia architecto ducimus laudantium minus autem"/>
 
-            <org.wordpress.android.widgets.WPTextView
-                android:id="@+id/page_title"
-                style="@style/PageListItemTextStyle"
-                android:layout_width="match_parent"
-                android:layout_height="wrap_content"
-                app:layout_constraintTop_toTopOf="parent"
-                tools:text="First pag ds ds sddsdsds ds ds dsdse adsd"/>
+        <org.wordpress.android.widgets.WPTextView
+            android:id="@+id/time_posted"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:layout_marginStart="@dimen/page_item_horizontal_padding"
+            android:layout_marginTop="@dimen/margin_extra_small"
+            android:ellipsize="end"
+            android:maxLines="1"
+            android:textColor="?attr/wpColorTextSubtle"
+            android:textSize="@dimen/text_sz_medium"
+            app:layout_goneMarginBottom="@dimen/margin_large"
+            app:layout_constraintBottom_toTopOf="@+id/labels"
+            app:layout_constraintEnd_toStartOf="@+id/featured_image"
+            app:layout_constraintHorizontal_bias="0.0"
+            app:layout_constraintStart_toStartOf="parent"
+            app:layout_constraintTop_toBottomOf="@+id/page_title"
+            tools:text="99 days ago • Eulah Kuvalis"/>
 
-            <org.wordpress.android.widgets.WPTextView
-                android:id="@+id/time_posted"
-                android:layout_width="wrap_content"
-                android:layout_height="wrap_content"
-                android:layout_marginTop="3dp"
-                android:textColor="?attr/wpColorTextSubtle"
-                android:textSize="14sp"
-                app:layout_constraintStart_toStartOf="@id/page_title"
-                app:layout_constraintTop_toBottomOf="@+id/page_title"
-                tools:text="2 days ago"/>
+        <ImageView
+            android:id="@+id/featured_image"
+            android:layout_width="@dimen/page_list_featured_image_size"
+            android:layout_height="@dimen/page_list_featured_image_size"
+            android:layout_marginEnd="@dimen/page_item_horizontal_padding"
+            android:background="@color/transparent"
+            android:contentDescription="@string/featured_image_desc"
+            app:layout_constraintBottom_toBottomOf="@+id/time_posted"
+            app:layout_constraintEnd_toStartOf="@+id/page_more"
+            app:layout_constraintHorizontal_bias="1.0"
+            app:layout_constraintStart_toStartOf="parent"
+            app:layout_constraintTop_toTopOf="@+id/page_title"
+            tools:srcCompat="@tools:sample/avatars"/>
 
-            <org.wordpress.android.widgets.WPTextView
-                android:id="@+id/labels"
-                android:layout_width="wrap_content"
-                android:layout_height="wrap_content"
-                android:layout_marginTop="3dp"
-                android:textColor="?attr/wpColorTextSubtle"
-                android:textSize="14sp"
-                app:layout_constraintStart_toEndOf="@+id/time_posted"
-                app:layout_constraintTop_toBottomOf="@+id/page_title"
-                tools:text="Local Draft"/>
+        <ImageButton
+            android:id="@+id/page_more"
+            android:layout_width="@dimen/page_list_menu_button_size"
+            android:layout_height="@dimen/page_list_menu_button_size"
+            android:layout_marginEnd="@dimen/page_item_horizontal_padding"
+            android:background="?attr/selectableItemBackgroundBorderless"
+            android:contentDescription="@string/more"
+            android:src="@drawable/ic_ellipsis_vertical_white_24dp"
+            android:tint="@color/neutral_60"
+            app:layout_constraintBottom_toBottomOf="@+id/featured_image"
+            app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintHorizontal_bias="1.0"
+            app:layout_constraintStart_toStartOf="parent"
+            app:layout_constraintTop_toTopOf="@+id/featured_image"/>
 
-        </androidx.constraintlayout.widget.ConstraintLayout>
         <FrameLayout
             android:id="@+id/disabled_overlay"
             android:layout_width="0dp"
@@ -90,11 +94,28 @@
             android:background="@color/white_translucent_65"
             android:clickable="true"
             android:focusable="true"
+            android:visibility="gone"
             app:layout_constraintBottom_toBottomOf="parent"
             app:layout_constraintEnd_toEndOf="parent"
             app:layout_constraintStart_toStartOf="parent"
             app:layout_constraintTop_toTopOf="parent"/>
 
+        <org.wordpress.android.widgets.WPTextView
+            android:id="@+id/labels"
+            android:layout_width="0dp"
+            android:layout_height="wrap_content"
+            android:textAlignment="textStart"
+            android:maxLines="3"
+            android:ellipsize="end"
+            android:layout_marginTop="@dimen/margin_extra_small"
+            android:layout_marginBottom="@dimen/margin_large"
+            app:layout_constraintStart_toStartOf="@+id/page_title"
+            app:layout_constraintEnd_toEndOf="@+id/page_title"
+            app:layout_constraintHorizontal_bias="0"
+            app:layout_constraintTop_toBottomOf="@+id/time_posted"
+            app:layout_constraintBottom_toTopOf="@+id/upload_progress"
+            tools:text="Facere molestiae est maxime. Laborum nihil voluptatem qui est aut ut. Nisi eveniet id sit voluptatem. Id doloribus itaque sequi eum molestias id repellendus."/>
+
         <ProgressBar
             android:id="@+id/upload_progress"
             style="?android:attr/progressBarStyleHorizontal"
@@ -104,7 +125,9 @@
             app:layout_constraintBottom_toBottomOf="parent"
             app:layout_constraintEnd_toEndOf="parent"
             app:layout_constraintStart_toStartOf="parent"
-            app:layout_constraintTop_toBottomOf="@+id/text_layout"/>
+            app:layout_constraintTop_toTopOf="parent"
+            app:layout_constraintVertical_bias="1.0"/>
+
     </androidx.constraintlayout.widget.ConstraintLayout>
 
 </FrameLayout>
diff --git a/WordPress/src/main/res/values/dimens.xml b/WordPress/src/main/res/values/dimens.xml
index 6112889f43ad..06a5f90c1ecd 100644
--- a/WordPress/src/main/res/values/dimens.xml
+++ b/WordPress/src/main/res/values/dimens.xml
@@ -369,6 +369,10 @@
     <dimen name="one_line_list_item_height">48dp</dimen>
     <dimen name="two_line_list_item_height">72dp</dimen>
     <dimen name="page_list_divider_height">40dp</dimen>
+    <dimen name="page_list_min_row_height">80dp</dimen>
+    <dimen name="page_list_featured_image_size">40dp</dimen>
+    <dimen name="page_list_menu_button_size">24dp</dimen>
+
 
     <dimen name="quota_bar_text_minimum_height">36dp</dimen>
 

From 6c2ce3832bb657cf9d02eb3c4add8f81170c602d Mon Sep 17 00:00:00 2001
From: malinajirka <malinajirka@gmail.com>
Date: Fri, 7 Feb 2020 13:56:34 +0100
Subject: [PATCH 2/3] Add minHeight to page list items

---
 WordPress/src/main/res/layout/page_list_item.xml | 1 +
 WordPress/src/main/res/values/dimens.xml         | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/WordPress/src/main/res/layout/page_list_item.xml b/WordPress/src/main/res/layout/page_list_item.xml
index 8d5a6c4395d8..b64d7815d165 100644
--- a/WordPress/src/main/res/layout/page_list_item.xml
+++ b/WordPress/src/main/res/layout/page_list_item.xml
@@ -14,6 +14,7 @@
         android:id="@+id/page_layout"
         android:layout_width="match_parent"
         android:layout_height="match_parent"
+        android:minHeight="@dimen/page_list_row_min_height"
         android:background="?selectableItemBackground">
 
         <org.wordpress.android.widgets.WPTextView
diff --git a/WordPress/src/main/res/values/dimens.xml b/WordPress/src/main/res/values/dimens.xml
index 06a5f90c1ecd..a132c5a2ee9b 100644
--- a/WordPress/src/main/res/values/dimens.xml
+++ b/WordPress/src/main/res/values/dimens.xml
@@ -369,7 +369,7 @@
     <dimen name="one_line_list_item_height">48dp</dimen>
     <dimen name="two_line_list_item_height">72dp</dimen>
     <dimen name="page_list_divider_height">40dp</dimen>
-    <dimen name="page_list_min_row_height">80dp</dimen>
+    <dimen name="page_list_row_min_height">80dp</dimen>
     <dimen name="page_list_featured_image_size">40dp</dimen>
     <dimen name="page_list_menu_button_size">24dp</dimen>
 

From c19b814d1ab6d33d2825e040a42e5932aa83c0bb Mon Sep 17 00:00:00 2001
From: malinajirka <malinajirka@gmail.com>
Date: Fri, 7 Feb 2020 13:57:08 +0100
Subject: [PATCH 3/3] Update content margin on page list items

---
 WordPress/src/main/res/values/dimens.xml | 1 +
 1 file changed, 1 insertion(+)

diff --git a/WordPress/src/main/res/values/dimens.xml b/WordPress/src/main/res/values/dimens.xml
index a132c5a2ee9b..e94682365c6a 100644
--- a/WordPress/src/main/res/values/dimens.xml
+++ b/WordPress/src/main/res/values/dimens.xml
@@ -68,6 +68,7 @@
     <dimen name="site_creation_content_margin">@dimen/content_margin_none</dimen>
     <dimen name="post_list_content_margin_standard">@dimen/content_margin_none</dimen>
     <dimen name="post_list_content_margin_compact">@dimen/content_margin_none</dimen>
+    <dimen name="page_list_content_margin">@dimen/content_margin_none</dimen>
 
     <!--
         native reader dimens