mirror of
https://github.com/fork-maintainers/iceraven-browser
synced 2024-11-03 23:15:31 +00:00
[fenix] For https://github.com/mozilla-mobile/fenix/issues/15756 - Add a play/pause button in the tabs tray grid layout
Moved the previous layout in a new, bigger FrameLayout that would serve as a buffer space for the play/pause button to be translated to the exterior. Otherwise the button would be clipped.
This commit is contained in:
parent
949d66da5f
commit
f90db55a2f
@ -2,114 +2,135 @@
|
||||
<!-- This Source Code Form is subject to the terms of the Mozilla Public
|
||||
- License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
- file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
|
||||
<com.google.android.material.card.MaterialCardView xmlns:android="http://schemas.android.com/apk/res/android"
|
||||
|
||||
<!--
|
||||
A FrameLayout here is an efficient way of having a views stack while allowing:
|
||||
- a sufficient enough canvas for the play button to be outside translated
|
||||
without it getting clipped by the GridLayoutManager.
|
||||
- enough padding for the primary view that needs to be displayed with a border around it.
|
||||
-->
|
||||
<FrameLayout
|
||||
xmlns:android="http://schemas.android.com/apk/res/android"
|
||||
xmlns:app="http://schemas.android.com/apk/res-auto"
|
||||
xmlns:tools="http://schemas.android.com/tools"
|
||||
android:layout_width="match_parent"
|
||||
android:layout_height="wrap_content"
|
||||
android:layout_marginStart="8dp"
|
||||
android:layout_marginTop="16dp"
|
||||
android:layout_marginEnd="8dp"
|
||||
app:cardBackgroundColor="@color/photonWhite"
|
||||
app:cardCornerRadius="@dimen/tab_tray_grid_item_border_radius"
|
||||
app:cardElevation="0dp"
|
||||
app:strokeColor="@color/photonLightGrey30"
|
||||
app:strokeWidth="1dp">
|
||||
android:layout_height="202dp"
|
||||
android:clipChildren="false"
|
||||
android:clipToPadding="false"
|
||||
android:importantForAccessibility="no"
|
||||
android:padding="8dp">
|
||||
|
||||
<androidx.constraintlayout.widget.ConstraintLayout
|
||||
android:id="@+id/tab_item"
|
||||
<com.google.android.material.card.MaterialCardView
|
||||
android:layout_width="match_parent"
|
||||
android:layout_height="match_parent">
|
||||
android:layout_height="wrap_content"
|
||||
android:layout_gravity="center"
|
||||
android:importantForAccessibility="yes"
|
||||
app:cardBackgroundColor="@color/photonWhite"
|
||||
app:cardCornerRadius="@dimen/tab_tray_grid_item_border_radius"
|
||||
app:cardElevation="0dp"
|
||||
app:strokeColor="@color/photonLightGrey30"
|
||||
app:strokeWidth="1dp">
|
||||
|
||||
<ImageButton
|
||||
android:id="@+id/play_pause_button"
|
||||
android:layout_width="24dp"
|
||||
android:layout_height="24dp"
|
||||
android:layout_marginTop="23dp"
|
||||
android:background="?attr/selectableItemBackgroundBorderless"
|
||||
android:contentDescription="@string/mozac_feature_media_notification_action_pause"
|
||||
android:elevation="10dp"
|
||||
android:visibility="gone"
|
||||
app:layout_constraintEnd_toEndOf="parent"
|
||||
app:layout_constraintTop_toTopOf="parent"
|
||||
app:srcCompat="@drawable/media_state_play" />
|
||||
|
||||
<ImageView
|
||||
android:id="@+id/mozac_browser_tabstray_favicon_icon"
|
||||
android:layout_width="16dp"
|
||||
android:layout_height="16dp"
|
||||
android:layout_marginStart="8dp"
|
||||
android:importantForAccessibility="no"
|
||||
app:layout_constraintBottom_toTopOf="@id/horizonatal_divider"
|
||||
app:layout_constraintStart_toStartOf="parent"
|
||||
app:layout_constraintTop_toTopOf="parent" />
|
||||
|
||||
<TextView
|
||||
android:id="@+id/mozac_browser_tabstray_title"
|
||||
android:layout_width="0dp"
|
||||
android:layout_height="30dp"
|
||||
android:layout_alignParentTop="true"
|
||||
android:ellipsize="none"
|
||||
android:fadingEdgeLength="25dp"
|
||||
android:paddingHorizontal="7dp"
|
||||
android:paddingVertical="5dp"
|
||||
android:requiresFadingEdge="horizontal"
|
||||
android:singleLine="true"
|
||||
android:textColor="@color/photonInk80"
|
||||
android:textSize="14sp"
|
||||
android:visibility="visible"
|
||||
app:layout_constraintEnd_toStartOf="@id/mozac_browser_tabstray_close"
|
||||
app:layout_constraintStart_toEndOf="@id/mozac_browser_tabstray_favicon_icon"
|
||||
app:layout_constraintTop_toTopOf="parent"
|
||||
tools:text="Example Domain" />
|
||||
|
||||
<androidx.appcompat.widget.AppCompatImageButton
|
||||
android:id="@+id/mozac_browser_tabstray_close"
|
||||
android:layout_width="wrap_content"
|
||||
android:layout_height="wrap_content"
|
||||
android:background="?android:attr/selectableItemBackgroundBorderless"
|
||||
android:contentDescription="@string/close_tab"
|
||||
app:layout_constraintBottom_toTopOf="@+id/horizonatal_divider"
|
||||
app:layout_constraintEnd_toEndOf="parent"
|
||||
app:layout_constraintTop_toTopOf="parent"
|
||||
app:srcCompat="@drawable/mozac_ic_close"
|
||||
app:tint="@color/photonInk80" />
|
||||
|
||||
<View
|
||||
android:id="@+id/horizonatal_divider"
|
||||
<androidx.constraintlayout.widget.ConstraintLayout
|
||||
android:id="@+id/tab_item"
|
||||
android:layout_width="match_parent"
|
||||
android:layout_height="1dp"
|
||||
android:background="@color/photonLightGrey30"
|
||||
app:layout_constraintTop_toBottomOf="@+id/mozac_browser_tabstray_title" />
|
||||
|
||||
<androidx.cardview.widget.CardView
|
||||
android:id="@+id/mozac_browser_tabstray_card"
|
||||
android:layout_width="match_parent"
|
||||
android:layout_height="@dimen/tab_tray_grid_item_thumbnail_height"
|
||||
android:backgroundTint="?tabTrayThumbnailItemBackground"
|
||||
app:cardBackgroundColor="@color/photonWhite"
|
||||
app:layout_constraintStart_toStartOf="parent"
|
||||
app:layout_constraintTop_toBottomOf="@+id/horizonatal_divider">
|
||||
android:layout_height="match_parent"
|
||||
android:clipChildren="false"
|
||||
android:clipToPadding="false">
|
||||
|
||||
<ImageView
|
||||
android:id="@+id/default_tab_thumbnail"
|
||||
android:layout_width="match_parent"
|
||||
android:layout_height="match_parent"
|
||||
android:id="@+id/mozac_browser_tabstray_favicon_icon"
|
||||
android:layout_width="16dp"
|
||||
android:layout_height="16dp"
|
||||
android:layout_marginStart="8dp"
|
||||
android:importantForAccessibility="no"
|
||||
android:padding="22dp"
|
||||
app:srcCompat="@drawable/mozac_ic_globe"
|
||||
app:tint="?tabTrayThumbnailIcon" />
|
||||
app:layout_constraintBottom_toTopOf="@id/horizonatal_divider"
|
||||
app:layout_constraintStart_toStartOf="parent"
|
||||
app:layout_constraintTop_toTopOf="parent" />
|
||||
|
||||
<mozilla.components.browser.tabstray.thumbnail.TabThumbnailView
|
||||
android:id="@+id/mozac_browser_tabstray_thumbnail"
|
||||
<TextView
|
||||
android:id="@+id/mozac_browser_tabstray_title"
|
||||
android:layout_width="0dp"
|
||||
android:layout_height="30dp"
|
||||
android:layout_alignParentTop="true"
|
||||
android:ellipsize="none"
|
||||
android:fadingEdgeLength="25dp"
|
||||
android:paddingHorizontal="7dp"
|
||||
android:paddingVertical="5dp"
|
||||
android:requiresFadingEdge="horizontal"
|
||||
android:singleLine="true"
|
||||
android:textColor="@color/photonInk80"
|
||||
android:textSize="14sp"
|
||||
android:visibility="visible"
|
||||
app:layout_constraintEnd_toStartOf="@id/mozac_browser_tabstray_close"
|
||||
app:layout_constraintStart_toEndOf="@id/mozac_browser_tabstray_favicon_icon"
|
||||
app:layout_constraintTop_toTopOf="parent"
|
||||
tools:text="Example Domain" />
|
||||
|
||||
<androidx.appcompat.widget.AppCompatImageButton
|
||||
android:id="@+id/mozac_browser_tabstray_close"
|
||||
android:layout_width="wrap_content"
|
||||
android:layout_height="wrap_content"
|
||||
android:background="?android:attr/selectableItemBackgroundBorderless"
|
||||
android:contentDescription="@string/close_tab"
|
||||
app:layout_constraintBottom_toTopOf="@+id/horizonatal_divider"
|
||||
app:layout_constraintEnd_toEndOf="parent"
|
||||
app:layout_constraintTop_toTopOf="parent"
|
||||
app:srcCompat="@drawable/mozac_ic_close"
|
||||
app:tint="@color/photonInk80" />
|
||||
|
||||
<View
|
||||
android:id="@+id/horizonatal_divider"
|
||||
android:layout_width="match_parent"
|
||||
android:layout_height="match_parent"
|
||||
android:contentDescription="@string/mozac_browser_tabstray_open_tab" />
|
||||
android:layout_height="1dp"
|
||||
android:background="@color/photonLightGrey30"
|
||||
app:layout_constraintTop_toBottomOf="@+id/mozac_browser_tabstray_title" />
|
||||
|
||||
<include layout="@layout/checkbox_item" />
|
||||
<androidx.cardview.widget.CardView
|
||||
android:id="@+id/mozac_browser_tabstray_card"
|
||||
android:layout_width="match_parent"
|
||||
android:layout_height="@dimen/tab_tray_grid_item_thumbnail_height"
|
||||
android:backgroundTint="?tabTrayThumbnailItemBackground"
|
||||
app:cardBackgroundColor="@color/photonWhite"
|
||||
app:layout_constraintStart_toStartOf="parent"
|
||||
app:layout_constraintTop_toBottomOf="@+id/horizonatal_divider">
|
||||
|
||||
</androidx.cardview.widget.CardView>
|
||||
<ImageView
|
||||
android:id="@+id/default_tab_thumbnail"
|
||||
android:layout_width="match_parent"
|
||||
android:layout_height="match_parent"
|
||||
android:importantForAccessibility="no"
|
||||
android:padding="22dp"
|
||||
app:srcCompat="@drawable/mozac_ic_globe"
|
||||
app:tint="?tabTrayThumbnailIcon" />
|
||||
|
||||
</androidx.constraintlayout.widget.ConstraintLayout>
|
||||
<mozilla.components.browser.tabstray.thumbnail.TabThumbnailView
|
||||
android:id="@+id/mozac_browser_tabstray_thumbnail"
|
||||
android:layout_width="match_parent"
|
||||
android:layout_height="match_parent"
|
||||
android:contentDescription="@string/mozac_browser_tabstray_open_tab" />
|
||||
|
||||
</com.google.android.material.card.MaterialCardView>
|
||||
<include layout="@layout/checkbox_item" />
|
||||
|
||||
</androidx.cardview.widget.CardView>
|
||||
|
||||
</androidx.constraintlayout.widget.ConstraintLayout>
|
||||
|
||||
</com.google.android.material.card.MaterialCardView>
|
||||
|
||||
<ImageButton
|
||||
android:id="@+id/play_pause_button"
|
||||
android:layout_width="24dp"
|
||||
android:layout_height="24dp"
|
||||
android:layout_gravity="top|start"
|
||||
android:background="?attr/selectableItemBackgroundBorderless"
|
||||
android:contentDescription="@string/mozac_feature_media_notification_action_pause"
|
||||
android:elevation="10dp"
|
||||
android:importantForAccessibility="yes"
|
||||
android:translationX="-8dp"
|
||||
android:translationY="-8dp"
|
||||
android:visibility="gone"
|
||||
app:layout_constraintStart_toStartOf="parent"
|
||||
app:layout_constraintTop_toTopOf="parent"
|
||||
app:srcCompat="@drawable/media_state_play" />
|
||||
</FrameLayout>
|
||||
|
Loading…
Reference in New Issue
Block a user