Commit a091061d authored by Cathy Li's avatar Cathy Li Committed by Commit Bot

[Explore sites]: Make error and loading views pretty.

Remove the header in error and loading views and change the error view to look
more like a typical error page.

Bug: 907638
Change-Id: I6aca95c1bd6e1334b86416879283b0a26471719e
Reviewed-on: https://chromium-review.googlesource.com/c/1347215Reviewed-by: default avatarTheresa <twellington@chromium.org>
Commit-Queue: Cathy Li <chili@chromium.org>
Cr-Commit-Position: refs/heads/master@{#612074}
parent 8c2c8864
...@@ -3,16 +3,44 @@ ...@@ -3,16 +3,44 @@
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. -->
<FrameLayout <LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android" 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_width="match_parent"
android:layout_height="match_parent" android:layout_height="match_parent"
android:gravity="center" android:orientation="vertical"
android:orientation="vertical" > android:padding="@dimen/explore_sites_page_padding" >
<ImageView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:src="@drawable/sad_tab"
android:layout_marginTop="@dimen/explore_sites_error_image_margin_top"
android:layout_marginBottom="@dimen/explore_sites_error_image_margin_bottom"
android:layout_marginHorizontal="@dimen/explore_sites_page_padding"
android:contentDescription="@string/explore_sites_loading_error" />
<TextView <TextView
android:layout_width="wrap_content" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:layout_height="wrap_content"
android:gravity="center" android:gravity="start"
android:text="@string/explore_sites_loading_error" android:text="@string/explore_sites_loading_error"
android:drawableTop="@drawable/sad_tab" /> android:layout_marginHorizontal="@dimen/explore_sites_page_padding"
</FrameLayout> android:layout_marginBottom="@dimen/explore_sites_page_padding"
android:textAppearance="@style/BlackHeadline" />
<org.chromium.ui.widget.TextViewWithLeading
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="start"
android:layout_marginHorizontal="@dimen/explore_sites_page_padding"
android:text="@string/explore_sites_loading_error_next_steps_tag"
android:textAppearance="@style/BlackCaptionDefault"
app:leading="@dimen/text_size_small_leading" />
<org.chromium.ui.widget.TextViewWithLeading
android:id="@+id/error_view_next_steps"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="start"
android:layout_marginHorizontal="@dimen/explore_sites_page_padding"
android:paddingStart="@dimen/explore_sites_page_padding"
android:textAppearance="@style/BlackCaptionDefault"
app:leading="@dimen/text_size_small_leading" />
</LinearLayout>
...@@ -14,8 +14,9 @@ ...@@ -14,8 +14,9 @@
android:id="@+id/loading" android:id="@+id/loading"
android:layout_width="wrap_content" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:layout_height="wrap_content"
android:minHeight="@dimen/tile_view_width" android:minHeight="@dimen/explore_sites_loading_spinny_size"
android:minWidth="@dimen/tile_view_width" /> android:minWidth="@dimen/explore_sites_loading_spinny_size"
android:paddingBottom="@dimen/explore_sites_loading_spinny_padding"/>
<TextView <TextView
android:layout_width="wrap_content" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:layout_height="wrap_content"
......
...@@ -11,4 +11,4 @@ ...@@ -11,4 +11,4 @@
android:scrollbars="vertical" android:scrollbars="vertical"
android:layout_width="match_parent" android:layout_width="match_parent"
android:layout_height="wrap_content" android:layout_height="wrap_content"
android:padding="@dimen/explore_sites_page_padding" /> android:paddingHorizontal="@dimen/explore_sites_page_padding" />
...@@ -370,6 +370,10 @@ ...@@ -370,6 +370,10 @@
<dimen name="explore_sites_category_title_height">24dp</dimen> <dimen name="explore_sites_category_title_height">24dp</dimen>
<dimen name="explore_sites_page_padding">12dp</dimen> <dimen name="explore_sites_page_padding">12dp</dimen>
<dimen name="explore_sites_category_title_spacing">16dp</dimen> <dimen name="explore_sites_category_title_spacing">16dp</dimen>
<dimen name="explore_sites_error_image_margin_bottom">40dp</dimen>
<dimen name="explore_sites_error_image_margin_top">84dp</dimen>
<dimen name="explore_sites_loading_spinny_size">36dp</dimen>
<dimen name="explore_sites_loading_spinny_padding">24dp</dimen>
<!-- Recent tabs page --> <!-- Recent tabs page -->
<dimen name="recent_tabs_visible_separator_padding">8dp</dimen> <dimen name="recent_tabs_visible_separator_padding">8dp</dimen>
......
...@@ -4,9 +4,12 @@ ...@@ -4,9 +4,12 @@
package org.chromium.chrome.browser.explore_sites; package org.chromium.chrome.browser.explore_sites;
import android.content.Context;
import android.support.annotation.IntDef; import android.support.annotation.IntDef;
import android.support.annotation.Nullable; import android.support.annotation.Nullable;
import android.support.v7.widget.RecyclerView; import android.support.v7.widget.RecyclerView;
import android.text.SpannableString;
import android.text.SpannableStringBuilder;
import org.chromium.chrome.R; import org.chromium.chrome.R;
import org.chromium.chrome.browser.modelutil.ListObservable; import org.chromium.chrome.browser.modelutil.ListObservable;
...@@ -21,6 +24,8 @@ import org.chromium.chrome.browser.native_page.NativePageNavigationDelegate; ...@@ -21,6 +24,8 @@ import org.chromium.chrome.browser.native_page.NativePageNavigationDelegate;
import org.chromium.chrome.browser.profiles.Profile; import org.chromium.chrome.browser.profiles.Profile;
import org.chromium.chrome.browser.widget.LoadingView; import org.chromium.chrome.browser.widget.LoadingView;
import org.chromium.chrome.browser.widget.RoundedIconGenerator; import org.chromium.chrome.browser.widget.RoundedIconGenerator;
import org.chromium.ui.widget.ChromeBulletSpan;
import org.chromium.ui.widget.TextViewWithLeading;
import java.lang.annotation.Retention; import java.lang.annotation.Retention;
import java.lang.annotation.RetentionPolicy; import java.lang.annotation.RetentionPolicy;
...@@ -65,10 +70,10 @@ class CategoryCardAdapter extends ListObservableImpl<Void> ...@@ -65,10 +70,10 @@ class CategoryCardAdapter extends ListObservableImpl<Void>
@Override @Override
public int getItemCount() { public int getItemCount() {
// If not loaded, return 2 for title and error/loading section // If not loaded, return 1 error/loading section
if (mCategoryModel.get(ExploreSitesPage.STATUS_KEY) if (mCategoryModel.get(ExploreSitesPage.STATUS_KEY)
!= ExploreSitesPage.CatalogLoadingState.SUCCESS) { != ExploreSitesPage.CatalogLoadingState.SUCCESS) {
return 2; return 1;
} }
// Add 1 for title. // Add 1 for title.
return mCategoryModel.get(ExploreSitesPage.CATEGORY_LIST_KEY).size() + 1; return mCategoryModel.get(ExploreSitesPage.CATEGORY_LIST_KEY).size() + 1;
...@@ -77,7 +82,6 @@ class CategoryCardAdapter extends ListObservableImpl<Void> ...@@ -77,7 +82,6 @@ class CategoryCardAdapter extends ListObservableImpl<Void>
@Override @Override
@ViewType @ViewType
public int getItemViewType(int position) { public int getItemViewType(int position) {
if (position == 0) return ViewType.HEADER;
switch (mCategoryModel.get(ExploreSitesPage.STATUS_KEY)) { switch (mCategoryModel.get(ExploreSitesPage.STATUS_KEY)) {
case ExploreSitesPage.CatalogLoadingState.ERROR: case ExploreSitesPage.CatalogLoadingState.ERROR:
return ViewType.ERROR; return ViewType.ERROR;
...@@ -85,6 +89,7 @@ class CategoryCardAdapter extends ListObservableImpl<Void> ...@@ -85,6 +89,7 @@ class CategoryCardAdapter extends ListObservableImpl<Void>
case ExploreSitesPage.CatalogLoadingState.LOADING_NET: case ExploreSitesPage.CatalogLoadingState.LOADING_NET:
return ViewType.LOADING; return ViewType.LOADING;
case ExploreSitesPage.CatalogLoadingState.SUCCESS: case ExploreSitesPage.CatalogLoadingState.SUCCESS:
if (position == 0) return ViewType.HEADER;
return ViewType.CATEGORY; return ViewType.CATEGORY;
default: default:
assert(false); assert(false);
...@@ -105,6 +110,18 @@ class CategoryCardAdapter extends ListObservableImpl<Void> ...@@ -105,6 +110,18 @@ class CategoryCardAdapter extends ListObservableImpl<Void>
// Start spinner. // Start spinner.
LoadingView spinner = holder.itemView.findViewById(R.id.loading); LoadingView spinner = holder.itemView.findViewById(R.id.loading);
spinner.showLoadingUI(); spinner.showLoadingUI();
} else if (holder.getItemViewType() == ViewType.ERROR) {
TextViewWithLeading textView = holder.itemView.findViewById(R.id.error_view_next_steps);
Context context = textView.getContext();
SpannableStringBuilder spannableString = new SpannableStringBuilder();
SpannableString tip1 = new SpannableString(
context.getString(R.string.explore_sites_loading_error_next_steps_reload));
SpannableString tip2 = new SpannableString(context.getString(
R.string.explore_sites_loading_error_next_steps_check_connection));
tip1.setSpan(new ChromeBulletSpan(context), 0, tip1.length(), 0);
tip2.setSpan(new ChromeBulletSpan(context), 0, tip2.length(), 0);
spannableString.append(tip1).append("\n").append(tip2);
textView.setText(spannableString);
} }
} }
...@@ -114,11 +131,11 @@ class CategoryCardAdapter extends ListObservableImpl<Void> ...@@ -114,11 +131,11 @@ class CategoryCardAdapter extends ListObservableImpl<Void>
if (key == ExploreSitesPage.STATUS_KEY) { if (key == ExploreSitesPage.STATUS_KEY) {
int status = mCategoryModel.get(ExploreSitesPage.STATUS_KEY); int status = mCategoryModel.get(ExploreSitesPage.STATUS_KEY);
if (status != ExploreSitesPage.CatalogLoadingState.SUCCESS) { if (status != ExploreSitesPage.CatalogLoadingState.SUCCESS) {
notifyItemChanged(1); notifyItemChanged(0);
} else { } else {
// If it's success, we must "remove" the loading view. // If it's success, we must "remove" the loading view.
// Loading the categories is taken care of by the list observer. // Loading the categories is taken care of by the list observer.
notifyItemRangeRemoved(/* index= */ 1, /* count= */ 1); notifyItemRangeRemoved(/* index= */ 0, /* count= */ 1);
} }
} }
if (key == ExploreSitesPage.SCROLL_TO_CATEGORY_KEY) { if (key == ExploreSitesPage.SCROLL_TO_CATEGORY_KEY) {
......
...@@ -42,7 +42,7 @@ class CategoryCardViewHolderFactory implements RecyclerViewAdapter.ViewHolderFac ...@@ -42,7 +42,7 @@ class CategoryCardViewHolderFactory implements RecyclerViewAdapter.ViewHolderFac
.inflate(R.layout.explore_sites_loading_from_net_view, parent, .inflate(R.layout.explore_sites_loading_from_net_view, parent,
/* attachToRoot = */ false); /* attachToRoot = */ false);
break; break;
case CategoryCardAdapter.ViewType.ERROR: // inflate error case CategoryCardAdapter.ViewType.ERROR:
view = LayoutInflater.from(parent.getContext()) view = LayoutInflater.from(parent.getContext())
.inflate(R.layout.explore_sites_loading_error_view, parent, .inflate(R.layout.explore_sites_loading_error_view, parent,
/* attachToRoot = */ false); /* attachToRoot = */ false);
......
...@@ -2922,10 +2922,19 @@ To change this setting, <ph name="BEGIN_LINK">&lt;resetlink&gt;</ph>reset sync<p ...@@ -2922,10 +2922,19 @@ To change this setting, <ph name="BEGIN_LINK">&lt;resetlink&gt;</ph>reset sync<p
Shopping Shopping
</message> </message>
<message name="IDS_EXPLORE_SITES_LOADING_FROM_NET" desc="Caption for an indeterminate loading spinner indicating that we are loading the data from the internet"> <message name="IDS_EXPLORE_SITES_LOADING_FROM_NET" desc="Caption for an indeterminate loading spinner indicating that we are loading the data from the internet">
Finding the best from the web. Finding the best from the web
</message> </message>
<message name="IDS_EXPLORE_SITES_LOADING_ERROR" desc="Caption text indicating that a set of site icons and links failed to load."> <message name="IDS_EXPLORE_SITES_LOADING_ERROR" desc="Caption text indicating that a set of site icons and links failed to load.">
Oops! Something went wrong. Please check your connection. Can't load this page
</message>
<message name="IDS_EXPLORE_SITES_LOADING_ERROR_NEXT_STEPS_TAG" desc="Text on an error screen indicating posible steps to resolve the error.">
Try:
</message>
<message name="IDS_EXPLORE_SITES_LOADING_ERROR_NEXT_STEPS_RELOAD" desc="Text on an error screen indicating that reloading the page can fix this error.">
Reload this page
</message>
<message name="IDS_EXPLORE_SITES_LOADING_ERROR_NEXT_STEPS_CHECK_CONNECTION" desc="Text on an error screen indicating that checking network connection can fix this error.">
Check your internet connection
</message> </message>
<!-- Contextual suggestions strings --> <!-- Contextual suggestions strings -->
......
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