Bug 1379021 - Update top sites layout to match updated UI mocks. r?mcomella draft
authorSebastian Kaspari <s.kaspari@gmail.com>
Wed, 19 Jul 2017 14:27:38 +0200
changeset 616012 ef03da05be3a078e68efa9d6fbebd14f5d44ad04
parent 615956 29cc065d72eefafbd72e999207d578cf595a2a70
child 639343 f3fd912bbd9fa461cc0063b0784a8869729f573c
push id70549
push users.kaspari@gmail.com
push dateWed, 26 Jul 2017 16:53:56 +0000
reviewersmcomella
bugs1379021
milestone56.0a1
Bug 1379021 - Update top sites layout to match updated UI mocks. r?mcomella MozReview-Commit-ID: JA2xMC2IONJ
mobile/android/app/src/australis/res/values/colors.xml
mobile/android/app/src/australis/res/values/dimens.xml
mobile/android/app/src/main/res/layout/activity_stream_card_history_item.xml
mobile/android/app/src/main/res/layout/activity_stream_topsites_card.xml
mobile/android/app/src/main/res/values/vpi__attrs.xml
mobile/android/app/src/main/res/values/vpi__defaults.xml
mobile/android/app/src/photon/res/values/colors.xml
mobile/android/base/java/org/mozilla/gecko/activitystream/homepanel/topsites/TopSitesCard.java
mobile/android/base/java/org/mozilla/gecko/activitystream/homepanel/topsites/TopSitesPageAdapter.java
--- a/mobile/android/app/src/australis/res/values/colors.xml
+++ b/mobile/android/app/src/australis/res/values/colors.xml
@@ -139,17 +139,16 @@
   <!-- Top sites thumbnail colors -->
   <color name="top_site_default">#FFECF0F3</color>
   <color name="top_site_border">#FFCFD9E1</color>
 
   <color name="private_active_text">#FFFFFF</color>
 
   <color name="action_bar_bg_color">@color/toolbar_grey</color>
 
-  <color name="activity_stream_divider">#FFD2D2D2</color>
   <color name="activity_stream_subtitle">#FF919191</color>
   <color name="activity_stream_timestamp">#FFD3D3D3</color>
   <color name="activity_stream_icon">#FF919191</color>
 
   <color name="tablet_tab_strip_divider_color">#555555</color>
 
   <color name="bookmark_folder_bg_color">#FCFCFC</color>
 </resources>
--- a/mobile/android/app/src/australis/res/values/dimens.xml
+++ b/mobile/android/app/src/australis/res/values/dimens.xml
@@ -220,17 +220,17 @@
     <item name="match_parent" type="dimen">-1</item>
     <item name="wrap_content" type="dimen">-2</item>
 
     <item name="tab_strip_content_start" type="dimen">12dp</item>
     <item name="firstrun_tab_strip_content_start" type="dimen">15dp</item>
 
     <item name="notification_media_cover" type="dimen">128dp</item>
 
-    <item name="activity_stream_base_margin" type="dimen">10dp</item>
+    <item name="activity_stream_base_margin" type="dimen">8dp</item>
     <item name="activity_stream_desired_tile_width" type="dimen">90dp</item>
     <item name="activity_stream_desired_tile_height" type="dimen">70dp</item>
     <item name="activity_stream_top_sites_text_height" type="dimen">30dp</item>
 
     <!-- Default touch target size for buttons/imageviews that might be of small size -->
     <item name="touch_target_size" type="dimen">48dp</item>
 
     <!-- Custom tabs -->
--- a/mobile/android/app/src/main/res/layout/activity_stream_card_history_item.xml
+++ b/mobile/android/app/src/main/res/layout/activity_stream_card_history_item.xml
@@ -24,16 +24,17 @@
             android:layout_width="wrap_content"
             android:layout_height="wrap_content">
 
             <org.mozilla.gecko.widget.FaviconView
                 android:id="@+id/icon"
                 android:layout_width="@dimen/favicon_bg"
                 android:layout_height="@dimen/favicon_bg"
                 android:layout_marginStart="@dimen/activity_stream_base_margin"
+                android:layout_marginLeft="@dimen/activity_stream_base_margin"
                 android:layout_marginTop="@dimen/activity_stream_base_margin"
                 android:layout_marginBottom="@dimen/activity_stream_base_margin"
                 android:layout_gravity="center"
                 gecko:enableRoundCorners="false"
                 tools:background="@drawable/favicon_globe" />
 
         </FrameLayout>
 
--- a/mobile/android/app/src/main/res/layout/activity_stream_topsites_card.xml
+++ b/mobile/android/app/src/main/res/layout/activity_stream_topsites_card.xml
@@ -1,62 +1,33 @@
 <?xml version="1.0" encoding="utf-8"?>
-<org.mozilla.gecko.widget.FilledCardView xmlns:android="http://schemas.android.com/apk/res/android"
+<FrameLayout
+    xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:gecko="http://schemas.android.com/apk/res-auto"
     xmlns:tools="http://schemas.android.com/tools"
-    android:layout_width="wrap_content"
-    android:layout_height="wrap_content">
-
-    <RelativeLayout
-        android:id="@+id/content"
-        android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
-        android:background="?android:attr/selectableItemBackground">
+    android:layout_width="match_parent"
+    android:layout_height="match_parent">
 
-        <org.mozilla.gecko.widget.FaviconView
-            android:id="@+id/favicon"
-            android:layout_width="match_parent"
-            android:layout_height="wrap_content"
-            android:layout_above="@+id/title"
-            android:layout_alignParentTop="true"
-            android:layout_centerHorizontal="true"
-            android:layout_gravity="center"
-            gecko:enableRoundCorners="false"
-            tools:background="@drawable/favicon_globe" />
-
-        <View
-            android:layout_width="match_parent"
-            android:layout_height="0.5dp"
-            android:layout_below="@id/favicon"
-            android:background="@color/activity_stream_divider" />
+    <org.mozilla.gecko.widget.FaviconView
+        android:id="@+id/favicon"
+        android:layout_width="match_parent"
+        android:layout_height="match_parent"
+        gecko:enableRoundCorners="false"
+        tools:background="@drawable/favicon_globe"
+        android:layout_marginTop="0dp" />
 
-        <TextView
-            android:id="@+id/title"
-            android:drawablePadding="2dp"
-            android:layout_width="wrap_content"
-            android:layout_height="wrap_content"
-            android:layout_alignParentBottom="true"
-            android:layout_alignParentEnd="true"
-            android:layout_alignParentLeft="true"
-            android:layout_alignParentRight="true"
-            android:layout_alignParentStart="true"
-            android:ellipsize="end"
-            android:gravity="center"
-            android:lines="1"
-            android:padding="4dp"
-            android:textSize="12sp"
-            android:textColor="@android:color/black"
-            tools:text="Lorem Ipsum here is a title" />
+    <TextView
+        android:id="@+id/title"
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        android:background="#66000000"
+        android:padding="5dp"
+        android:drawablePadding="2dp"
+        android:maxLines="1"
+        android:singleLine="true"
+        android:ellipsize="end"
+        android:gravity="center"
+        android:textColor="@android:color/white"
+        android:textSize="12sp"
+        android:layout_gravity="bottom"
+        tools:text="Lorem Ipsum here is a title" />
 
-        <ImageView
-            android:id="@+id/menu"
-            android:layout_width="wrap_content"
-            android:layout_height="28dp"
-            android:layout_alignParentEnd="true"
-            android:layout_alignParentRight="true"
-            android:layout_alignParentTop="true"
-            android:layout_gravity="right|end|top"
-            android:padding="6dp"
-            android:contentDescription="@string/menu"
-            android:src="@drawable/menu" />
-
-    </RelativeLayout>
-</org.mozilla.gecko.widget.FilledCardView>
\ No newline at end of file
+</FrameLayout>
deleted file mode 100644
--- a/mobile/android/app/src/main/res/values/vpi__attrs.xml
+++ /dev/null
@@ -1,59 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Copyright (C) 2012 Jake Wharton
-     Copyright (C) 2011 Patrik Ã…kerfeldt
-
-     Licensed under the Apache License, Version 2.0 (the "License");
-     you may not use this file except in compliance with the License.
-     You may obtain a copy of the License at
-
-          http://www.apache.org/licenses/LICENSE-2.0
-
-     Unless required by applicable law or agreed to in writing, software
-     distributed under the License is distributed on an "AS IS" BASIS,
-     WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-     See the License for the specific language governing permissions and
-     limitations under the License.
--->
-
-<resources>
-    <declare-styleable name="ViewPagerIndicator">
-        <!-- Style of the circle indicator. -->
-        <attr name="vpiCirclePageIndicatorStyle" format="reference"/>
-        <!-- Style of the icon indicator's views. -->
-        <attr name="vpiIconPageIndicatorStyle" format="reference"/>
-        <!-- Style of the line indicator. -->
-        <attr name="vpiLinePageIndicatorStyle" format="reference"/>
-        <!-- Style of the title indicator. -->
-        <attr name="vpiTitlePageIndicatorStyle" format="reference"/>
-        <!-- Style of the tab indicator's tabs. -->
-        <attr name="vpiTabPageIndicatorStyle" format="reference"/>
-        <!-- Style of the underline indicator. -->
-        <attr name="vpiUnderlinePageIndicatorStyle" format="reference"/>
-    </declare-styleable>
-
-    <attr name="centered" format="boolean" />
-    <attr name="selectedColor" format="color" />
-    <attr name="strokeWidth" format="dimension" />
-    <attr name="unselectedColor" format="color" />
-
-    <declare-styleable name="CirclePageIndicator">
-        <!-- Whether or not the indicators should be centered. -->
-        <attr name="centered" />
-        <!-- Color of the filled circle that represents the current page. -->
-        <attr name="fillColor" format="color" />
-        <!-- Color of the filled circles that represents pages. -->
-        <attr name="pageColor" format="color" />
-        <!-- Orientation of the indicator. -->
-        <attr name="android:orientation"/>
-        <!-- Radius of the circles. This is also the spacing between circles. -->
-        <attr name="radius" format="dimension" />
-        <!-- Whether or not the selected indicator snaps to the circles. -->
-        <attr name="snap" format="boolean" />
-        <!-- Color of the open circles. -->
-        <attr name="strokeColor" format="color" />
-        <!-- Width of the stroke used to draw the circles. -->
-        <attr name="strokeWidth" />
-        <!-- View background -->
-        <attr name="android:background"/>
-    </declare-styleable>
-</resources>
deleted file mode 100644
--- a/mobile/android/app/src/main/res/values/vpi__defaults.xml
+++ /dev/null
@@ -1,26 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Copyright (C) 2012 Jake Wharton
-
-     Licensed under the Apache License, Version 2.0 (the "License");
-     you may not use this file except in compliance with the License.
-     You may obtain a copy of the License at
-
-          http://www.apache.org/licenses/LICENSE-2.0
-
-     Unless required by applicable law or agreed to in writing, software
-     distributed under the License is distributed on an "AS IS" BASIS,
-     WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-     See the License for the specific language governing permissions and
-     limitations under the License.
--->
-
-<resources>
-    <bool name="default_circle_indicator_centered">true</bool>
-    <color name="default_circle_indicator_fill_color">#FFFFFFFF</color>
-    <color name="default_circle_indicator_page_color">#00000000</color>
-    <integer name="default_circle_indicator_orientation">0</integer>
-    <dimen name="default_circle_indicator_radius">3dp</dimen>
-    <bool name="default_circle_indicator_snap">false</bool>
-    <color name="default_circle_indicator_stroke_color">#FFDDDDDD</color>
-    <dimen name="default_circle_indicator_stroke_width">1dp</dimen>
-</resources>
\ No newline at end of file
--- a/mobile/android/app/src/photon/res/values/colors.xml
+++ b/mobile/android/app/src/photon/res/values/colors.xml
@@ -230,17 +230,16 @@
     <!-- Top sites thumbnail colors -->
     <color name="top_site_default">#FFECF0F3</color>
     <color name="top_site_border">#FFCFD9E1</color>
 
     <color name="private_active_text">#FFFFFF</color>
 
     <color name="action_bar_bg_color">@color/toolbar_grey</color>
 
-    <color name="activity_stream_divider">#FFD2D2D2</color>
     <color name="activity_stream_subtitle">#FF919191</color>
     <color name="activity_stream_timestamp">#FFD3D3D3</color>
     <color name="activity_stream_icon">#FF919191</color>
 
     <color name="tablet_tab_strip_divider_color">#555555</color>
 
     <color name="bookmark_folder_bg_color">#FCFCFC</color>
 </resources>
--- a/mobile/android/base/java/org/mozilla/gecko/activitystream/homepanel/topsites/TopSitesCard.java
+++ b/mobile/android/base/java/org/mozilla/gecko/activitystream/homepanel/topsites/TopSitesCard.java
@@ -5,87 +5,84 @@
 package org.mozilla.gecko.activitystream.homepanel.topsites;
 
 import android.graphics.Color;
 import android.graphics.drawable.Drawable;
 import android.support.v4.widget.TextViewCompat;
 import android.support.v7.widget.RecyclerView;
 import android.view.View;
 import android.widget.FrameLayout;
-import android.widget.ImageView;
 import android.widget.TextView;
 
 import org.mozilla.gecko.R;
 import org.mozilla.gecko.Telemetry;
 import org.mozilla.gecko.TelemetryContract;
 import org.mozilla.gecko.activitystream.ActivityStream;
 import org.mozilla.gecko.activitystream.ActivityStreamTelemetry;
-import org.mozilla.gecko.home.HomePager;
 import org.mozilla.gecko.activitystream.homepanel.menu.ActivityStreamContextMenu;
 import org.mozilla.gecko.activitystream.homepanel.model.TopSite;
+import org.mozilla.gecko.home.HomePager;
 import org.mozilla.gecko.icons.IconCallback;
 import org.mozilla.gecko.icons.IconResponse;
 import org.mozilla.gecko.icons.Icons;
 import org.mozilla.gecko.util.DrawableUtil;
 import org.mozilla.gecko.util.ViewUtil;
-import org.mozilla.gecko.util.TouchTargetUtil;
 import org.mozilla.gecko.widget.FaviconView;
 
 import java.util.concurrent.Future;
 
 /* package-local */ class TopSitesCard extends RecyclerView.ViewHolder
         implements IconCallback {
     private final FaviconView faviconView;
 
     private final TextView title;
-    private final ImageView menuButton;
     private Future<IconResponse> ongoingIconLoad;
 
     private TopSite topSite;
     private int absolutePosition;
 
     private final HomePager.OnUrlOpenListener onUrlOpenListener;
     private final HomePager.OnUrlOpenInBackgroundListener onUrlOpenInBackgroundListener;
 
-    /* package-local */ TopSitesCard(FrameLayout card, final HomePager.OnUrlOpenListener onUrlOpenListener, final HomePager.OnUrlOpenInBackgroundListener onUrlOpenInBackgroundListener) {
+    /* package-local */ TopSitesCard(final FrameLayout card, final HomePager.OnUrlOpenListener onUrlOpenListener, final HomePager.OnUrlOpenInBackgroundListener onUrlOpenInBackgroundListener) {
         super(card);
 
         faviconView = (FaviconView) card.findViewById(R.id.favicon);
 
         title = (TextView) card.findViewById(R.id.title);
-        menuButton = (ImageView) card.findViewById(R.id.menu);
 
         this.onUrlOpenListener = onUrlOpenListener;
         this.onUrlOpenInBackgroundListener = onUrlOpenInBackgroundListener;
 
-        TouchTargetUtil.ensureTargetHitArea(menuButton, card);
-        menuButton.setOnClickListener(new View.OnClickListener() {
+        card.setOnLongClickListener(new View.OnLongClickListener() {
             @Override
-            public void onClick(View v) {
+            public boolean onLongClick(View v) {
                 ActivityStreamTelemetry.Extras.Builder extras = ActivityStreamTelemetry.Extras.builder()
                         .forTopSite(topSite)
                         .set(ActivityStreamTelemetry.Contract.ACTION_POSITION, absolutePosition);
 
                 ActivityStreamContextMenu.show(itemView.getContext(),
-                        menuButton,
+                        card,
                         extras,
                         ActivityStreamContextMenu.MenuMode.TOPSITE,
                         topSite,
                         onUrlOpenListener, onUrlOpenInBackgroundListener,
                         faviconView.getWidth(), faviconView.getHeight());
 
                 Telemetry.sendUIEvent(
                         TelemetryContract.Event.SHOW,
                         TelemetryContract.Method.CONTEXT_MENU,
                         extras.build()
                 );
+
+                return true;
             }
         });
 
-        ViewUtil.enableTouchRipple(menuButton);
+        ViewUtil.enableTouchRipple(card);
     }
 
     void bind(final TopSite topSite, final int absolutePosition) {
         this.topSite = topSite;
         this.absolutePosition = absolutePosition;
 
         if (ongoingIconLoad != null) {
             ongoingIconLoad.cancel(true);
@@ -94,17 +91,17 @@ import java.util.concurrent.Future;
         ongoingIconLoad = Icons.with(itemView.getContext())
                 .pageUrl(topSite.getUrl())
                 .skipNetwork()
                 .build()
                 .execute(this);
 
         final Drawable pinDrawable;
         if (topSite.isPinned()) {
-            pinDrawable = DrawableUtil.tintDrawable(itemView.getContext(), R.drawable.as_pin, itemView.getResources().getColor(R.color.placeholder_grey));
+            pinDrawable = DrawableUtil.tintDrawable(itemView.getContext(), R.drawable.as_pin, Color.WHITE);
         } else {
             pinDrawable = null;
         }
         TextViewCompat.setCompoundDrawablesRelativeWithIntrinsicBounds(title, pinDrawable, null, null, null);
 
         // setCenteredText() needs to have all drawable's in place to correctly layout the text,
         // so we need to wait with requesting the title until we've set our pin icon.
         ActivityStream.extractLabel(itemView.getContext(), topSite.getUrl(), true, new ActivityStream.LabelCallback() {
@@ -115,15 +112,10 @@ import java.util.concurrent.Future;
                 ViewUtil.setCenteredText(title, label, title.getPaddingTop());
             }
         });
     }
 
     @Override
     public void onIconResponse(IconResponse response) {
         faviconView.updateImage(response);
-
-        final int tintColor = !response.hasColor() || response.getColor() == Color.WHITE ? Color.LTGRAY : Color.WHITE;
-
-        menuButton.setImageDrawable(
-                DrawableUtil.tintDrawable(menuButton.getContext(), R.drawable.menu, tintColor));
     }
 }
--- a/mobile/android/base/java/org/mozilla/gecko/activitystream/homepanel/topsites/TopSitesPageAdapter.java
+++ b/mobile/android/base/java/org/mozilla/gecko/activitystream/homepanel/topsites/TopSitesPageAdapter.java
@@ -12,18 +12,18 @@ import android.view.LayoutInflater;
 import android.view.View;
 import android.view.ViewGroup;
 import android.widget.FrameLayout;
 
 import org.mozilla.gecko.R;
 import org.mozilla.gecko.Telemetry;
 import org.mozilla.gecko.TelemetryContract;
 import org.mozilla.gecko.activitystream.ActivityStreamTelemetry;
+import org.mozilla.gecko.activitystream.homepanel.model.TopSite;
 import org.mozilla.gecko.home.HomePager;
-import org.mozilla.gecko.activitystream.homepanel.model.TopSite;
 import org.mozilla.gecko.util.StringUtils;
 import org.mozilla.gecko.widget.RecyclerViewClickSupport;
 
 import java.util.ArrayList;
 import java.util.EnumSet;
 import java.util.List;
 
 /* package-local */ class TopSitesPageAdapter extends RecyclerView.Adapter<TopSitesCard> implements RecyclerViewClickSupport.OnItemClickListener {
@@ -96,22 +96,21 @@ import java.util.List;
         holder.bind(topSites.get(position), getTopSiteAbsolutePosition(position));
     }
 
     @Override
     public TopSitesCard onCreateViewHolder(ViewGroup parent, int viewType) {
         final LayoutInflater inflater = LayoutInflater.from(parent.getContext());
 
         final FrameLayout card = (FrameLayout) inflater.inflate(R.layout.activity_stream_topsites_card, parent, false);
-        final View content = card.findViewById(R.id.content);
 
-        ViewGroup.LayoutParams layoutParams = content.getLayoutParams();
+        ViewGroup.LayoutParams layoutParams = card.getLayoutParams();
         layoutParams.width = tilesWidth;
         layoutParams.height = tilesHeight + textHeight;
-        content.setLayoutParams(layoutParams);
+        card.setLayoutParams(layoutParams);
 
         return new TopSitesCard(card, onUrlOpenListener, onUrlOpenInBackgroundListener);
     }
 
     @Override
     public int getItemCount() {
         return topSites.size();
     }