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

Commit d907ab49 authored by Cassy Chun-Crogan's avatar Cassy Chun-Crogan
Browse files

[DocsUI M3] Uplift preview icons for grid items 

Update the style and positioning of preview icons so that a
20dp preview icons appears on the top right side of the thumbnail,
a couple of pixels indented. The touch target for the button is
34x34.

See bug for demo.

Bug: 409667693
Test: m DocumentsUIGoogle && manual inspection
Flag: com.android.documentsui.flags.use_material3
Change-Id: I91c6ea9a764fa4f753433c68209365cc7b1e3cd1
parent 4a211f48

res/flag(com.android.documentsui.flags.use_material3)/drawable/circle_button_background.xml

+2 −3
Original line number Diff line number Diff line
@@ -16,6 +16,5 @@ 


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

    android:shape="oval">

    <solid

        android:color="#66000000"/>

    <solid android:color="@color/peek_circle_black" />

</shape>
 
 No newline at end of file

res/flag(com.android.documentsui.flags.use_material3)/layout/item_doc_grid.xml

+26 −19
Original line number Diff line number Diff line
@@ -84,29 +84,36 @@ 
            android:duplicateParentState="true"

            android:scaleType="center"

            android:src="@drawable/ic_check_circle" />

    </FrameLayout>



        <FrameLayout

            android:id="@+id/preview_icon"

        android:layout_width="@dimen/button_touch_size"

        android:layout_height="@dimen/button_touch_size"

        android:layout_alignParentEnd="true"

        android:layout_alignParentTop="true"

            android:layout_width="@dimen/button_container_size"

            android:layout_height="@dimen/button_container_size"

            android:layout_gravity="top|end"

            android:layout_marginEnd="@dimen/preview_icon_margin"

            android:layout_marginTop="@dimen/preview_icon_margin"

            android:clickable="true"

            android:focusable="true"

            android:pointerIcon="hand">



                <!-- Black circle background -->

                <ImageView

                    android:layout_width="@dimen/preview_icon_circle_size"

                    android:layout_height="@dimen/preview_icon_circle_size"

                    android:layout_gravity="center"

                    android:background="@drawable/circle_button_background" />



                <!-- White eye icon -->

                <ImageView

            android:layout_width="@dimen/zoom_icon_size"

            android:layout_height="@dimen/zoom_icon_size"

                    android:layout_width="@dimen/preview_icon_eye_size"

                    android:layout_height="@dimen/preview_icon_eye_size"

                    android:layout_gravity="center"

            android:background="@drawable/circle_button_background"

            android:padding="2dp"

            android:scaleType="fitCenter"

                    android:src="@drawable/ic_zoom_out" />



        </FrameLayout>



    </FrameLayout>



    <!-- Item nameplate. Has some text fields (title, size, mod-time, etc). -->



    <LinearLayout

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

+3 −0
Original line number Diff line number Diff line
@@ -112,4 +112,7 @@ 
  <!-- Scrim for the Top bar. Static color, 32% opacity in black. The same scrim is used in some

  parts of Android SysUI, it can't be used directly here. -->

  <color name="peek_topbar_scrim">#52000000</color>



  <!-- 60% black -->

  <color name="peek_circle_black">#99000000</color>

</resources>

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

+4 −0
Original line number Diff line number Diff line
@@ -34,10 +34,14 @@ 
    <dimen name="root_action_icon_size">24dp</dimen>

    <!-- TODO(b/379776735): remove this after use_material3 flag is launched. -->

    <dimen name="root_icon_disabled_alpha">?android:attr/disabledAlpha</dimen>

    <dimen name="preview_icon_margin">4dp</dimen>

    <dimen name="preview_icon_circle_size">20dp</dimen>

    <dimen name="preview_icon_eye_size">14dp</dimen>

    <dimen name="button_container_size">34dp</dimen>

    <dimen name="icon_check_stroke_size">8dp</dimen>

    <dimen name="icon_check_circle_size">24dp</dimen>

    <dimen name="check_icon_size">20dp</dimen>

    <!-- TODO(b/379776735): remove this after use_material3 flag is launched. -->

    <dimen name="zoom_icon_size">24dp</dimen>

    <dimen name="selection_circle_margin">1dp</dimen>

    <dimen name="selection_outer_circle_padding">5dp</dimen>