Skip to content

GitLab

T
tangled
Commit 6c00ca69 authored by Theresa's avatar Theresa Committed by Commit Bot
Browse files
Options

[EoC] Update card layout again & increase sheet half height 

 * Move publisher line to the top
 * Increase leading
 * Increase sheet half height from 65% to 75% of screen height

BUG=896950

Change-Id: I2530151064545ac89ad38b859fffdee7285f8ae3
Reviewed-on: https://chromium-review.googlesource.com/c/1302332
Commit-Queue: Theresa <twellington@chromium.org>
Reviewed-by: default avatarBecky Zhou <huayinz@chromium.org>
Cr-Commit-Position: refs/heads/master@{#603648}
parent 31a19024
Hide whitespace changes
Inline Side-by-side
Showing with 103 additions and 91 deletions
chrome/android/java/res/layout/contextual_suggestions_card_modern.xml
View file @ 6c00ca69
...@@ -12,93 +12,92 @@ ...@@ -12,93 +12,92 @@
android:layout_height="wrap_content" android:layout_height="wrap_content"
android:padding="@dimen/snippets_padding"> android:padding="@dimen/snippets_padding">
<LinearLayout <LinearLayout
android:id="@+id/text_layout" tools:ignore="UseCompoundDrawables"
android:layout_alignParentStart="true" android:id="@+id/publisher_bar"
android:layout_alignParentTop="true" android:layout_alignParentTop="true"
android:layout_toStartOf="@+id/article_thumbnail" android:layout_width="wrap_content"
android:layout_alignWithParentIfMissing="true" android:layout_height="wrap_content"
android:layout_height="wrap_content" android:layout_marginBottom="@dimen/contextual_suggestions_publisher_margin"
android:layout_width="wrap_content" android:orientation="horizontal">
android:orientation="vertical">
<org.chromium.ui.widget.TextViewWithLeading <!-- The following attributes:
style="@style/SuggestionCardTitleModern" - publisher_bar's android:layout_width="wrap_content"
android:id="@+id/article_headline" - article_publisher's android:layout_width="0dp"
android:layout_width="match_parent" - article_publisher's android:layout_weight="1"
android:layout_height="wrap_content" - article_publisher's android:ellipsize="end"
tools:text="Article headline" /> - article_age's android:layout_width="wrap_content"
All ensure that when the publisher string is long, it starts to ellipsize
before pushing the article age string and the offline icon off the screen.
See: https://crbug.com/625775 and https://crbug.com/678568 -->
<TextView
android:id="@+id/article_publisher"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:drawablePadding="8dp"
android:maxLines="1"
android:singleLine="true"
android:ellipsize="end"
android:textAppearance="@style/BlackCaption"
android:textDirection="locale"
tools:text="chromium.org"/>
<org.chromium.ui.widget.TextViewWithLeading <TextView
style="@style/SuggestionCardBodyModern" android:id="@+id/article_age"
android:id="@+id/article_snippet" android:layout_width="wrap_content"
android:layout_width="match_parent" android:layout_height="wrap_content"
android:layout_height="wrap_content" android:maxLines="1"
tools:text="Article snippet" /> android:textAppearance="@style/BlackCaption"
</LinearLayout> android:textDirection="locale"
tools:text=" - 3 hours ago" />
<!-- We can't add this ImageView as a CompoundDrawable to the TextView because we want to
have different paddings between the favicon (which is a compound drawable on the
TextView) and the offline icon. -->
<ImageView <ImageView
android:id="@+id/article_thumbnail" android:id="@+id/offline_icon"
android:layout_marginStart="@dimen/snippets_padding" android:layout_width="@dimen/snippets_offline_icon_size"
android:layout_width="@dimen/snippets_thumbnail_size_small" android:layout_height="@dimen/snippets_offline_icon_size"
android:layout_height="@dimen/snippets_thumbnail_size_small" android:layout_marginStart="6dp"
android:layout_alignParentTop="true" android:contentDescription="@string/accessibility_ntp_offline_badge"
android:layout_alignParentEnd="true" android:visibility="gone"
android:scaleType="centerCrop" android:src="@drawable/offline_pin_round" />
tools:ignore="ContentDescription" </LinearLayout>
android:src="@null" />
<LinearLayout <LinearLayout
tools:ignore="UseCompoundDrawables" android:id="@+id/text_layout"
android:id="@+id/publisher_bar" android:layout_alignParentStart="true"
android:layout_alignParentBottom="true" android:layout_below="@+id/publisher_bar"
android:layout_below="@+id/text_layout" android:layout_toStartOf="@+id/article_thumbnail"
android:layout_width="wrap_content" android:layout_alignWithParentIfMissing="true"
android:layout_height="wrap_content" android:layout_height="wrap_content"
android:layout_marginTop="@dimen/contextual_suggestions_publisher_margin_top" android:layout_width="wrap_content"
android:orientation="horizontal"> android:orientation="vertical">
<!-- The following attributes: <org.chromium.ui.widget.TextViewWithLeading
- publisher_bar's android:layout_width="wrap_content" style="@style/ContextualSuggestionCardTitleModern"
- article_publisher's android:layout_width="0dp" android:id="@+id/article_headline"
- article_publisher's android:layout_weight="1" android:layout_width="match_parent"
- article_publisher's android:ellipsize="end" android:layout_height="wrap_content"
- article_age's android:layout_width="wrap_content" tools:text="Article headline" />
All ensure that when the publisher string is long, it starts to ellipsize
before pushing the article age string and the offline icon off the screen.
See: https://crbug.com/625775 and https://crbug.com/678568 -->
<TextView
android:id="@+id/article_publisher"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:drawablePadding="8dp"
android:maxLines="1"
android:singleLine="true"
android:ellipsize="end"
android:textAppearance="@style/BlackCaption"
android:textDirection="locale"
tools:text="chromium.org"/>
<TextView <org.chromium.ui.widget.TextViewWithLeading
android:id="@+id/article_age" style="@style/ContextualSuggestionCardBodyModern"
android:layout_width="wrap_content" android:id="@+id/article_snippet"
android:layout_height="wrap_content" android:layout_width="match_parent"
android:maxLines="1" android:layout_height="wrap_content"
android:textAppearance="@style/BlackCaption" tools:text="Article snippet" />
android:textDirection="locale" </LinearLayout>
tools:text=" - 3 hours ago" />
<!-- We can't add this ImageView as a CompoundDrawable to the TextView because we want to <ImageView
have different paddings between the favicon (which is a compound drawable on the android:id="@+id/article_thumbnail"
TextView) and the offline icon. --> android:layout_marginStart="@dimen/snippets_padding"
<ImageView android:layout_width="@dimen/snippets_thumbnail_size_small"
android:id="@+id/offline_icon" android:layout_height="@dimen/snippets_thumbnail_size_small"
android:layout_width="@dimen/snippets_offline_icon_size" android:layout_below="@+id/publisher_bar"
android:layout_height="@dimen/snippets_offline_icon_size" android:layout_alignParentEnd="true"
android:layout_marginStart="6dp" android:scaleType="centerCrop"
android:contentDescription="@string/accessibility_ntp_offline_badge" tools:ignore="ContentDescription"
android:visibility="gone" android:src="@null" />
android:src="@drawable/offline_pin_round" />
</LinearLayout>
</RelativeLayout> </RelativeLayout>
chrome/android/java/res/layout/contextual_suggestions_card_modern_alternate.xml
View file @ 6c00ca69
...@@ -80,7 +80,7 @@ ...@@ -80,7 +80,7 @@
android:orientation="vertical"> android:orientation="vertical">
<org.chromium.ui.widget.TextViewWithLeading <org.chromium.ui.widget.TextViewWithLeading
style="@style/SuggestionCardTitleModern" style="@style/ContextualSuggestionCardTitleModern"
app:leading="27dp" app:leading="27dp"
android:id="@+id/article_headline" android:id="@+id/article_headline"
android:layout_width="match_parent" android:layout_width="match_parent"
...@@ -88,7 +88,7 @@ ...@@ -88,7 +88,7 @@
tools:text="Article headline" /> tools:text="Article headline" />
<org.chromium.ui.widget.TextViewWithLeading <org.chromium.ui.widget.TextViewWithLeading
style="@style/SuggestionCardBodyModern" style="@style/ContextualSuggestionCardBodyModern"
app:leading="23dp" app:leading="23dp"
android:id="@+id/article_snippet" android:id="@+id/article_snippet"
android:layout_width="match_parent" android:layout_width="match_parent"
......
chrome/android/java/res/values-v17/styles.xml
View file @ 6c00ca69
...@@ -715,15 +715,23 @@ ...@@ -715,15 +715,23 @@
<item name="android:background">@drawable/content_card_modern_background</item> <item name="android:background">@drawable/content_card_modern_background</item>
<item name="android:foreground">@drawable/button_borderless_compat</item> <item name="android:foreground">@drawable/button_borderless_compat</item>
</style> </style>
<!-- TODO(twellington): Use standard line height for SuggestionsCard*. Updating the leading
for these requires updating the NTP article suggestions thumbnail size as well. -->
<style name="SuggestionCardTitleModern" parent="BlackTitle1"> <style name="SuggestionCardTitleModern" parent="BlackTitle1">
<item name="android:ellipsize">end</item> <item name="android:ellipsize">end</item>
<item name="leading">20sp</item> <item name="leading">20sp</item>
</style> </style>
<style name="ContextualSuggestionCardTitleModern" parent="SuggestionCardTitleModern">
<item name="leading">@dimen/text_size_large_leading</item>
</style>
<style name="SuggestionCardBodyModern" parent="BlackBody"> <style name="SuggestionCardBodyModern" parent="BlackBody">
<item name="android:layout_marginTop">8dp</item> <item name="android:layout_marginTop">8dp</item>
<item name="android:ellipsize">end</item> <item name="android:ellipsize">end</item>
<item name="leading">16sp</item> <item name="leading">16sp</item>
</style> </style>
<style name="ContextualSuggestionCardBodyModern" parent="SuggestionCardBodyModern">
<item name="leading">@dimen/text_size_medium_leading</item>
</style>
<style name="SuggestionCardAction" parent="@style/TextButton"> <style name="SuggestionCardAction" parent="@style/TextButton">
<item name="android:minHeight">48dp</item> <item name="android:minHeight">48dp</item>
</style> </style>
......
chrome/android/java/res/values/dimens.xml
View file @ 6c00ca69
...@@ -493,8 +493,9 @@ ...@@ -493,8 +493,9 @@
<dimen name="selectable_list_search_icon_end_padding">4dp</dimen> <dimen name="selectable_list_search_icon_end_padding">4dp</dimen>
<dimen name="selectable_list_toolbar_shadow_height">4dp</dimen> <dimen name="selectable_list_toolbar_shadow_height">4dp</dimen>
<!-- Chrome Home dimensions --> <!-- Bottom Sheet dimensions -->
<dimen name="chrome_home_min_full_half_distance">160dp</dimen> <dimen name="bottom_sheet_min_full_half_distance">140dp</dimen>
<dimen name="bottom_sheet_peek_height">56dp</dimen>
<!-- TextBubble dimensions --> <!-- TextBubble dimensions -->
<dimen name="text_bubble_margin">4dp</dimen> <dimen name="text_bubble_margin">4dp</dimen>
...@@ -509,7 +510,6 @@ ...@@ -509,7 +510,6 @@
<dimen name="clear_text_button_end_padding">10dp</dimen> <dimen name="clear_text_button_end_padding">10dp</dimen>
<dimen name="sync_promo_view_padding">16dp</dimen> <dimen name="sync_promo_view_padding">16dp</dimen>
<dimen name="open_new_tab_animation_y_translation">-20dp</dimen> <dimen name="open_new_tab_animation_y_translation">-20dp</dimen>
<dimen name="bottom_sheet_peek_height">56dp</dimen>
<!-- Context Menu Dimensions --> <!-- Context Menu Dimensions -->
<dimen name="context_menu_header_image_width_padding">15dp</dimen> <dimen name="context_menu_header_image_width_padding">15dp</dimen>
...@@ -525,7 +525,7 @@ ...@@ -525,7 +525,7 @@
<dimen name="reader_mode_infobar_text_padding">8dp</dimen> <dimen name="reader_mode_infobar_text_padding">8dp</dimen>
<!-- Contextual Suggestions Dimensions --> <!-- Contextual Suggestions Dimensions -->
<dimen name="contextual_suggestions_publisher_margin_top">12dp</dimen> <dimen name="contextual_suggestions_publisher_margin">12dp</dimen>
<dimen name="contextual_suggestions_toolbar_icon_size">48dp</dimen> <dimen name="contextual_suggestions_toolbar_icon_size">48dp</dimen>
<!-- Defaults for TabbedModeFirstRunActivity values. --> <!-- Defaults for TabbedModeFirstRunActivity values. -->
......
chrome/android/java/src/org/chromium/chrome/browser/suggestions/SuggestionsBinder.java
View file @ 6c00ca69
...@@ -146,7 +146,7 @@ public class SuggestionsBinder { ...@@ -146,7 +146,7 @@ public class SuggestionsBinder {
ViewGroup.MarginLayoutParams publisherBarParams = ViewGroup.MarginLayoutParams publisherBarParams =
(ViewGroup.MarginLayoutParams) mPublisherBar.getLayoutParams(); (ViewGroup.MarginLayoutParams) mPublisherBar.getLayoutParams();
if (showHeadline && !mUseContextualAlternateCardLayout) { if (showHeadline && !mIsContextual) {
// When we show a headline and not a description, we reduce the top margin of the // When we show a headline and not a description, we reduce the top margin of the
// publisher bar. // publisher bar.
publisherBarParams.topMargin = mPublisherBar.getResources().getDimensionPixelSize( publisherBarParams.topMargin = mPublisherBar.getResources().getDimensionPixelSize(
......
chrome/android/java/src/org/chromium/chrome/browser/widget/bottomsheet/BottomSheet.java
View file @ 6c00ca69
...@@ -129,7 +129,7 @@ public class BottomSheet extends FrameLayout ...@@ -129,7 +129,7 @@ public class BottomSheet extends FrameLayout
private static final float THRESHOLD_TO_NEXT_STATE_2 = 0.3f; private static final float THRESHOLD_TO_NEXT_STATE_2 = 0.3f;
/** The height ratio for the sheet in the SheetState.HALF state. */ /** The height ratio for the sheet in the SheetState.HALF state. */
private static final float HALF_HEIGHT_RATIO = 0.65f; private static final float HALF_HEIGHT_RATIO = 0.75f;
/** The fraction of the width of the screen that, when swiped, will cause the sheet to move. */ /** The fraction of the width of the screen that, when swiped, will cause the sheet to move. */
private static final float SWIPE_ALLOWED_FRACTION = 0.2f; private static final float SWIPE_ALLOWED_FRACTION = 0.2f;
...@@ -422,7 +422,7 @@ public class BottomSheet extends FrameLayout ...@@ -422,7 +422,7 @@ public class BottomSheet extends FrameLayout
super(context, atts); super(context, atts);
mMinHalfFullDistance = mMinHalfFullDistance =
getResources().getDimensionPixelSize(R.dimen.chrome_home_min_full_half_distance); getResources().getDimensionPixelSize(R.dimen.bottom_sheet_min_full_half_distance);
mToolbarShadowHeight = mToolbarShadowHeight =
getResources().getDimensionPixelOffset(R.dimen.toolbar_shadow_height); getResources().getDimensionPixelOffset(R.dimen.toolbar_shadow_height);
......
ui/android/java/res/values/dimens.xml
View file @ 6c00ca69
...@@ -4,13 +4,18 @@ ...@@ -4,13 +4,18 @@
Use of this source code is governed by a BSD-style license that can be Use of this source code is governed by a BSD-style license that can be
found in the LICENSE file. found in the LICENSE file.
--> -->
<resources> <resources xmlns:tools="http://schemas.android.com/tools">
<!-- Common text sizes --> <!-- Common text sizes -->
<dimen name="headline_size">22sp</dimen> <dimen name="headline_size">22sp</dimen>
<dimen name="text_size_large">16sp</dimen> <dimen name="text_size_large">16sp</dimen>
<dimen name="text_size_medium">14sp</dimen> <dimen name="text_size_medium">14sp</dimen>
<dimen name="text_size_small">12sp</dimen> <dimen name="text_size_small">12sp</dimen>
<dimen name="headline_size_leading" tools:ignore="UnusedResources">28sp</dimen>
<dimen name="text_size_large_leading" tools:ignore="UnusedResources">24sp</dimen>
<dimen name="text_size_medium_leading" tools:ignore="UnusedResources">20sp</dimen>
<dimen name="text_size_small_leading" tools:ignore="UnusedResources">16sp</dimen>
<!-- Common alpha values --> <!-- Common alpha values -->
<item name="default_disabled_alpha" format="float" type="dimen">0.38</item> <item name="default_disabled_alpha" format="float" type="dimen">0.38</item>
<item name="default_pressed_alpha" format="float" type="dimen">0.10</item> <item name="default_pressed_alpha" format="float" type="dimen">0.10</item>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment