For FNX-22339: UI components for recently added bookmarks (#19953)

* Top level layout with recyclerview for recent bookmarks

* Add layout for recent bookmarked item, including strings and styles.

* Header layout for recently saved bookmarks

* Address review comments

* Include the header for recent bookmarks in the component layout

* Add dark theme colors for button and title styles

* Recent bookmark card title text color for dark mode/light mode
upstream-sync
Elise Richards 3 years ago committed by GitHub
parent efea115694
commit e373f507a1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -0,0 +1,8 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- 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/. -->
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true" android:color="@color/photonDarkGrey05" />
<item android:state_checked="false" android:color="@color/photonLightGrey50" />
</selector>

@ -0,0 +1,8 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- 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/. -->
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true" android:color="@color/photonDarkGrey05" />
<item android:state_checked="false" android:color="@color/photonLightGrey05" />
</selector>

@ -0,0 +1,8 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- 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/. -->
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true" android:color="@color/photonDarkGrey90" />
<item android:state_checked="false" android:color="@color/photonLightGrey30" />
</selector>

@ -0,0 +1,30 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- 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/. -->
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:isScrollContainer="true"
android:gravity="start">
<include layout="@layout/recent_bookmarks_header" />
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/recent_bookmarks_list"
android:layout_width="wrap_content"
android:minWidth="448dp"
android:layout_height="match_parent"
android:layout_gravity="center_horizontal"
android:layout_marginBottom="8dp"
android:clipChildren="false"
android:clipToPadding="false"
android:overScrollMode="never"
android:nestedScrollingEnabled="false"
tools:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
tools:spanCount="4"
tools:listitem="@layout/recent_bookmark_item" />
</LinearLayout>

@ -0,0 +1,57 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- 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/. -->
<androidx.constraintlayout.widget.ConstraintLayout 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:id="@+id/bookmark_item"
android:layout_width="@dimen/recent_bookmark_item_width"
android:layout_height="@dimen/recent_bookmark_item_height"
android:orientation="vertical">
<com.google.android.material.card.MaterialCardView
android:id="@+id/favicon_card"
style="@style/RecentBookmarks.FaviconCard"
android:importantForAccessibility="noHideDescendants"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent" >
<com.google.android.material.imageview.ShapeableImageView
android:id="@+id/favicon_image"
style="@style/recentBookmarkFavicon"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent" />
<TextView
android:id="@+id/bookmark_title"
android:layout_width="match_parent"
android:layout_height="@dimen/recent_bookmark_item_title_height"
android:maxHeight="@dimen/recent_bookmark_item_title_height"
android:layout_marginTop="@dimen/recent_bookmark_item_favicon_height"
android:paddingTop="@dimen/recent_bookmark_item_title_padding_top"
android:paddingStart="@dimen/recent_bookmark_item_padding"
android:paddingEnd="@dimen/recent_bookmark_item_padding"
android:textAppearance="@style/recentBookmarkItemTitleText"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="@id/favicon_image"
tools:text="Recently Saved bookmark item" />
<TextView
android:id="@+id/bookmark_subtitle"
android:layout_width="match_parent"
android:layout_height="@dimen/recent_bookmark_item_subtitle_height"
android:layout_marginTop="@dimen/recent_bookmark_item_subtitle_margin_top"
android:paddingStart="@dimen/recent_bookmark_item_padding"
android:paddingEnd="@dimen/recent_bookmark_item_padding"
android:textAppearance="@style/recentBookmarkItemSubTitleText"
app:layout_constraintBottom_toBottomOf="@id/bookmark_title"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
tools:text="Subtitle text" />
</com.google.android.material.card.MaterialCardView>
</androidx.constraintlayout.widget.ConstraintLayout>

@ -0,0 +1,39 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- 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/. -->
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<androidx.appcompat.widget.AppCompatTextView
style="@style/Header20TextStyle"
android:id="@+id/recentlySavedBookmarksHeader"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="@string/recently_saved_bookmarks_content_description"
android:text="@string/recently_saved_bookmarks"
android:layout_marginTop="@dimen/home_recently_saved_padding_top"
android:paddingStart="@dimen/home_recently_saved_padding_start"
android:paddingBottom="@dimen/home_recently_saved_padding_bottom"
android:maxLines="2"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<com.google.android.material.button.MaterialButton
android:id="@+id/showAllBookmarksButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="@style/Button12TextStyle"
android:contentDescription="@string/recently_saved_show_all_content_description"
android:background="?android:attr/selectableItemBackground"
android:text="@string/recently_saved_show_all"
android:paddingStart="@dimen/home_recently_saved_padding_start"
android:paddingEnd="@dimen/home_recently_saved_padding_end"
android:paddingTop="@dimen/home_show_all_padding_top"
android:paddingBottom="@dimen/home_show_all_padding_bottom"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toBottomOf="@id/recentlySavedBookmarksHeader" />
</androidx.constraintlayout.widget.ConstraintLayout>

@ -96,6 +96,25 @@
<!-- Home Fragment -->
<dimen name="home_fragment_top_toolbar_header_margin">60dp</dimen>
<dimen name="home_collection_elevation">5dp</dimen>
<dimen name="home_recently_saved_padding_top">40dp</dimen>
<dimen name="home_recently_saved_padding_bottom">16dp</dimen>
<dimen name="home_recently_saved_padding_start">16dp</dimen>
<dimen name="home_recently_saved_padding_end">16dp</dimen>
<dimen name="home_show_all_padding_top">16dp</dimen>
<dimen name="home_show_all_padding_bottom">16dp</dimen>
<!-- Home - Recently saved bookmarks -->
<dimen name="recent_bookmark_item_height">128dp</dimen>
<dimen name="recent_bookmark_item_width">152dp</dimen>
<dimen name="recent_bookmark_item_padding">16dp</dimen>
<dimen name="recent_bookmark_item_card_radius">8dp</dimen>
<dimen name="recent_bookmark_item_card_elevation">1dp</dimen>
<dimen name="recent_bookmark_item_favicon_height">72dp</dimen>
<dimen name="recent_bookmark_item_favicon_corner_size">4dp</dimen>
<dimen name="recent_bookmark_item_title_height">30dp</dimen>
<dimen name="recent_bookmark_item_title_padding_top">7dp</dimen>
<dimen name="recent_bookmark_item_subtitle_height">16dp</dimen>
<dimen name="recent_bookmark_item_subtitle_margin_top">105dp</dimen>
<!-- Browser Fragment -->
<!--The size of the gap between the tab preview and content layout.-->

@ -6,6 +6,7 @@
<string name="app_name_private_5">Private %s</string>
<!-- App name for private browsing mode. The first parameter is the name of the app defined in app_name (for example: Fenix)-->
<string name="app_name_private_4">%s (Private)</string>
<!-- Home Fragment -->
<!-- Content description (not visible, for screen readers etc.): "Three dot" menu button. -->
<string name="content_description_menu">More options</string>
@ -46,6 +47,16 @@
<!-- Content description on checkmark while tab is selected in multiselect mode in tab tray -->
<string name="tab_tray_multiselect_selected_content_description">Selected</string>
<!-- Home - Recently saved bookmarks -->
<!-- Title for the home screen section with recently saved bookmarks. -->
<string name="recently_saved_bookmarks">Recently saved</string>
<!-- Content description for the recently saved bookmarks section on the home screen. -->
<string name="recently_saved_bookmarks_content_description">Recently saved bookmarks</string>
<!-- Title for the button which navigates the user to show all of their saved bookmarks. -->
<string name="recently_saved_show_all">Show all</string>
<!-- Content description for the button which navigates the user to show all of their saved bookmarks. -->
<string name="recently_saved_show_all_content_description">Show all saved bookmarks button</string>
<!-- About content. The first parameter is the name of the application. (For example: Fenix) -->
<string name="about_content">%1$s is produced by Mozilla.</string>

@ -403,7 +403,14 @@
<item name="android:textColor">?primaryText</item>
</style>
<style name="Body12TextStyle" parent="TextAppearance.MaterialComponents.Body1">
<item name="android:textColor">@color/primary_state_title_text_color</item>
<item name="android:textSize">12sp</item>
<item name="android:textAllCaps">false</item>
</style>
<style name="Button12TextStyle" parent="TextAppearance.MaterialComponents.Button">
<item name="android:textColor">@color/primary_state_button_text_color</item>
<item name="android:textSize">12sp</item>
<item name="fontFamily">@font/metropolis</item>
<item name="android:textAllCaps">false</item>
@ -647,6 +654,46 @@
<item name="cornerSize">@dimen/top_sites_favicon_corner_size</item>
</style>
<style name="RecentBookmarks.FaviconCard" parent="Mozac.Widgets.Favicon">
<item name="android:layout_width">@dimen/recent_bookmark_item_width</item>
<item name="android:layout_height">@dimen/recent_bookmark_item_height</item>
<item name="android:padding">@dimen/recent_bookmark_item_padding</item>
<item name="cardBackgroundColor">?mozac_widget_favicon_background_color</item>
<item name="cardCornerRadius">@dimen/recent_bookmark_item_card_radius</item>
<item name="cardElevation">@dimen/recent_bookmark_item_card_elevation</item>
</style>
<style name="recentBookmarkFavicon">
<item name="android:layout_width">@dimen/recent_bookmark_item_width</item>
<item name="android:layout_height">@dimen/recent_bookmark_item_favicon_height</item>
<item name="android:scaleType">fitStart</item>
<item name="android:layout_gravity">start|top</item>
<item name="shapeAppearanceOverlay">@style/recentBookmarkFaviconShape</item>
</style>
<style name="recentBookmarkFaviconShape">
<item name="cornerFamily">rounded</item>
<item name="elevation">@dimen/recent_bookmark_item_card_elevation</item>
<item name="cornerSize">@dimen/recent_bookmark_item_favicon_corner_size</item>
</style>
<style name="recentBookmarkItemTitleText" parent="Body16TextStyle">
<item name="android:gravity">start</item>
<item name="android:textAlignment">gravity</item>
<item name="android:singleLine">true</item>
<item name="android:textColor">@color/recent_bookmark_item_text_color</item>
<item name="android:ellipsize">end</item>
<item name="android:maxLines">1</item>
</style>
<style name="recentBookmarkItemSubTitleText" parent="Body12TextStyle">
<item name="android:gravity">start</item>
<item name="android:textAlignment">gravity</item>
<item name="android:singleLine">true</item>
<item name="android:ellipsize">end</item>
<item name="android:maxLines">1</item>
</style>
<style name="TabTrayFab" parent="Widget.MaterialComponents.ExtendedFloatingActionButton">
<item name="elevation">90dp</item>
<item name="android:stateListAnimator">@null</item>

Loading…
Cancel
Save