Donate to e Foundation | Murena handsets with /e/OS | Own a part of Murena! Learn more

Commit 74c13d80 authored by Wenbo Jie's avatar Wenbo Jie
Browse files

[DocsUI M3] Fix the alignment for list table header 

* Use start-align for Size/Date columns (previously they were
  end-aligned).
* Update typography for header texts, use Emphasized font style.
* Add a placeholder in the table header for preview icon to fix
  the alignment issue in picker mode.

Check the attached bug for demo video.

Bug: 397517567
Test: m DocumentsUIGoogle && manual inspection
Flag: com.android.documentsui.flags.use_material3
Change-Id: I94fb3e0844cc995e98c2b2fcd33196e4571d3117
parent 872138dc

res/flag(com.android.documentsui.flags.use_material3)/layout-w900dp/column_headers.xml

+18 −7
Original line number Diff line number Diff line
@@ -15,12 +15,19 @@ 
    limitations under the License.

-->



<!-- The 2 placeholder views here are for vertical alignment purpose, in the file row it uses

     ratio-based layout for Name/Type/Size/Date columns but excluding the thumbnail icon and

     the preview icon. In order to make the header and row are vertically aligned, we need to

     use placeholder for thumbnail icon and preview icon and then do the ratio-based layout

     for table headers.

 -->

<LinearLayout

    xmlns:android="http://schemas.android.com/apk/res/android"

    android:id="@+id/table_header"

    android:orientation="horizontal"

    android:layout_width="match_parent"

    android:layout_height="@dimen/doc_header_height"

    android:paddingHorizontal="@dimen/list_container_padding"

    android:visibility="gone">



    <LinearLayout
@@ -32,12 +39,12 @@ 
        android:paddingStart="@dimen/list_item_padding_start"

        android:paddingEnd="@dimen/list_item_padding_end"

        android:orientation="horizontal">

        <!-- Placeholder for icon -->

        <!-- Placeholder for MIME/thumbnail icon -->

        <View

            android:layout_width="@dimen/list_item_thumbnail_size"

            android:layout_height="@dimen/list_item_thumbnail_size"

            android:layout_width="@dimen/list_item_icon_size"

            android:layout_height="@dimen/list_item_icon_size"

            android:layout_gravity="center_vertical"

            android:layout_marginEnd="16dp"

            android:layout_marginEnd="@dimen/list_item_icon_margin_end"

            android:layout_marginStart="0dp"/>



        <!-- Column headers -->
@@ -82,7 +89,6 @@ 
                android:layout_width="0dp"

                android:layout_height="match_parent"

                android:layout_weight="0.2"

                android:layout_marginEnd="12dp"

                android:clickable="true"

                android:focusable="false"

                android:gravity="center_vertical"
@@ -97,7 +103,6 @@ 
                android:layout_width="0dp"

                android:layout_height="match_parent"

                android:layout_weight="0.2"

                android:layout_marginEnd="12dp"

                android:clickable="true"

                android:focusable="false"

                android:gravity="center_vertical"
@@ -112,7 +117,6 @@ 
                android:layout_width="0dp"

                android:layout_height="match_parent"

                android:layout_weight="0.2"

                android:layout_marginEnd="12dp"

                android:clickable="true"

                android:focusable="false"

                android:gravity="center_vertical"
@@ -122,5 +126,12 @@ 
                <include layout="@layout/shared_cell_content" />

            </com.android.documentsui.sorting.HeaderCell>

        </LinearLayout>



        <!-- Placeholder for preview icon in picker mode -->

        <View

            android:id="@+id/preview_icon_placeholder"

            android:layout_width="@dimen/list_item_icon_size"

            android:layout_height="@dimen/list_item_icon_size"

            android:layout_marginEnd="@dimen/list_item_icon_margin_end" />

    </LinearLayout>

</LinearLayout>
 
 No newline at end of file

res/flag(com.android.documentsui.flags.use_material3)/layout-w900dp/item_doc_list.xml

+2 −2
Original line number Diff line number Diff line
@@ -130,7 +130,7 @@ 
                android:layout_width="0dp"

                android:layout_height="wrap_content"

                android:layout_weight="0.2"

                android:textAlignment="viewEnd"

                android:textAlignment="viewStart"

                style="@style/FileItemLabelStyle"/>



            <TextView
@@ -138,7 +138,7 @@ 
                android:layout_width="0dp"

                android:layout_height="wrap_content"

                android:layout_weight="0.2"

                android:textAlignment="viewEnd"

                android:textAlignment="viewStart"

                style="@style/FileItemLabelStyle"/>

        </LinearLayout>

res/flag(com.android.documentsui.flags.use_material3)/layout-w900dp/shared_cell_content.xml

+2 −2
Original line number Diff line number Diff line
@@ -23,8 +23,8 @@ 
        android:ellipsize="end"

        android:singleLine="true"

        android:textAlignment="viewStart"

        android:textAppearance="@style/Subhead"

        android:textColor="?android:attr/textColorSecondary"/>

        android:textAppearance="@style/ListTableHeaderText"

        android:textColor="?attr/colorOnSurface"/>



    <ImageView

        android:id="@+id/sort_arrow"

res/flag(com.android.documentsui.flags.use_material3)/values/styles.xml

+0 −1
Original line number Diff line number Diff line
@@ -159,7 +159,6 @@ 
    </style>



    <style name="FileItemLabelStyle" parent="">

        <item name="android:layout_marginStart">32dp</item>

        <item name="android:ellipsize">end</item>

        <item name="android:minWidth">70dp</item>

        <item name="android:singleLine">true</item>

res/flag(com.android.documentsui.flags.use_material3)/values/styles_text.xml

+4 −0
Original line number Diff line number Diff line
@@ -146,4 +146,8 @@ 
        <item name="fontFamily">@string/config_fontFamily</item>

    </style>



    <style name="ListTableHeaderText" parent="@style/TextAppearance.Material3.TitleSmall.Emphasized">

        <item name="fontFamily">@string/config_fontFamily</item>

    </style>



</resources>