ADS: Update Bottom Sheets styles in Browser (#2653)

Task/Issue URL: https://app.asana.com/0/0/1203464345362360/f ### Description Migrate bottom sheets in Browser to new styling ### Steps to test this PR **_Downloads_** - Install from this branch - Download a file - [x] Check bottom sheet looks as expected **_Fire Dialog_** - Install from this branch - Tap Fire Button - [x] Check bottom sheet looks as expected **_Email Tooltip_** - Install from this branch - Sign in on Duck Email Protection - Go to any sign in website - Tap on the duck icon in the login input element - [x] Check bottom sheet looks as expected **_Navigation History_** - Install from this branch - Navigate to few sites - Long tap on back button (nav bar) - [x] Check bottom sheet looks as expected ### UI changes | Before | After | | ------ | ----- | ![downloads-bottom-sheet](https://user-images.githubusercontent.com/20798495/208082681-a25cb7bf-e61c-413a-a0c7-d5e0b1fdbfa0.jpg)|![Screenshot_20221215_165818_DuckDuckGo](https://user-images.githubusercontent.com/20798495/208082801-4f45cab9-6958-40a3-8681-d018d0ccd418.jpg)| ![fire-bottom-sheet](https://user-images.githubusercontent.com/20798495/208082702-2365ad4c-447c-4fd0-8bd2-32c3d01a38b6.jpg)|![Screenshot_20221215_162950_DuckDuckGo](https://user-images.githubusercontent.com/20798495/208082945-402c2760-5e70-40ee-9b39-a295eac74789.jpg)| ![email-bottom-sheet](https://user-images.githubusercontent.com/20798495/208082724-7f508b28-06f6-45ff-8e7c-9efac06862f1.jpg)|![Screenshot_20221215_162704_DuckDuckGo](https://user-images.githubusercontent.com/20798495/208082998-73a33ff2-3109-429d-87d1-58d84a1e14f3.jpg)| ![navigation-history-bottom-sheet](https://user-images.githubusercontent.com/20798495/208082746-0ffca4dd-8863-4001-bc45-624a11f530d2.jpg)|![Screenshot_20221215_145128_DuckDuckGo](https://user-images.githubusercontent.com/20798495/208082862-3406af9b-233b-4fc6-9c5c-d091d34153bb.jpg)| Co-authored-by: David <malmstein@gmail.com>
duckduckgo · Jan 12, 2023 · fc6e1f6 · fc6e1f6
1 parent 9cca00e
commit fc6e1f6
Show file tree

Hide file tree

Showing 18 changed files with 98 additions and 358 deletions.
diff --git a/app/src/main/java/com/duckduckgo/app/browser/BrowserTabFragment.kt b/app/src/main/java/com/duckduckgo/app/browser/BrowserTabFragment.kt
@@ -171,8 +171,6 @@ import com.duckduckgo.appbuildconfig.api.AppBuildConfig
 import com.duckduckgo.autoconsent.api.Autoconsent
 import com.duckduckgo.autoconsent.api.AutoconsentCallback
 import com.duckduckgo.autofill.*
-import com.duckduckgo.autofill.BrowserAutofill
-import com.duckduckgo.autofill.Callback
 import com.duckduckgo.autofill.domain.app.LoginCredentials
 import com.duckduckgo.autofill.domain.app.LoginTriggerType
 import com.duckduckgo.autofill.store.AutofillStore.ContainsCredentialsResult.*
@@ -187,9 +185,6 @@ import com.duckduckgo.downloads.api.FileDownloader
 import com.duckduckgo.downloads.api.FileDownloader.PendingFileDownload
 import com.duckduckgo.mobile.android.ui.store.BrowserAppTheme
 import com.duckduckgo.mobile.android.ui.view.*
-import com.duckduckgo.mobile.android.ui.view.DaxDialog
-import com.duckduckgo.mobile.android.ui.view.DaxDialogListener
-import com.duckduckgo.mobile.android.ui.view.KeyboardAwareEditText
 import com.duckduckgo.mobile.android.ui.view.dialog.CustomAlertDialogBuilder
 import com.duckduckgo.mobile.android.ui.view.dialog.DaxAlertDialog
 import com.duckduckgo.mobile.android.ui.view.dialog.StackedAlertDialogBuilder
@@ -202,7 +197,6 @@ import com.duckduckgo.voice.api.VoiceSearchLauncher.Source.BROWSER
 import com.google.android.material.snackbar.BaseTransientBottomBar
 import com.google.android.material.snackbar.Snackbar
 import java.io.File
-import java.util.EventListener
 import javax.inject.Inject
 import javax.inject.Provider
 import kotlin.coroutines.CoroutineContext
@@ -2517,11 +2511,12 @@ class BrowserTabFragment :
         context?.let {
             val isShowing: Boolean? = emailAutofillTooltipDialog?.isShowing
             if (isShowing != true) {
-                emailAutofillTooltipDialog = EmailAutofillTooltipFragment(it, address)
-                emailAutofillTooltipDialog?.show()
-                emailAutofillTooltipDialog?.setOnCancelListener { viewModel.cancelAutofillTooltip() }
-                emailAutofillTooltipDialog?.useAddress = { viewModel.useAddress() }
-                emailAutofillTooltipDialog?.usePrivateAlias = { viewModel.consumeAlias() }
+                emailAutofillTooltipDialog = EmailAutofillTooltipFragment(it, address).apply {
+                    show()
+                    setOnCancelListener { viewModel.cancelAutofillTooltip() }
+                    useAddress = { viewModel.useAddress() }
+                    usePrivateAlias = { viewModel.consumeAlias() }
+                }
             }
         }
     }

diff --git a/app/src/main/java/com/duckduckgo/app/browser/history/NavigationHistoryAdapter.kt b/app/src/main/java/com/duckduckgo/app/browser/history/NavigationHistoryAdapter.kt
@@ -19,12 +19,12 @@ package com.duckduckgo.app.browser.history
 import android.annotation.SuppressLint
 import android.view.LayoutInflater
 import android.view.ViewGroup
-import android.widget.ImageView
 import androidx.lifecycle.LifecycleOwner
 import androidx.lifecycle.lifecycleScope
 import androidx.recyclerview.widget.RecyclerView
-import com.duckduckgo.app.browser.databinding.ItemNavigationHistoryPopupRowBinding
 import com.duckduckgo.app.browser.favicon.FaviconManager
+import com.duckduckgo.mobile.android.databinding.RowOneLineListItemBinding
+import com.duckduckgo.mobile.android.ui.view.listitem.OneLineListItem
 import kotlinx.coroutines.launch
 
 class NavigationHistoryAdapter(
@@ -45,7 +45,7 @@ class NavigationHistoryAdapter(
         viewType: Int,
     ): NavigationViewHolder {
         val inflater = LayoutInflater.from(parent.context)
-        val binding = ItemNavigationHistoryPopupRowBinding.inflate(inflater, parent, false)
+        val binding = RowOneLineListItemBinding.inflate(inflater, parent, false)
         return NavigationViewHolder(binding)
     }
 
@@ -54,10 +54,11 @@ class NavigationHistoryAdapter(
         position: Int,
     ) {
         val entry = navigationHistory[position]
+        val listItem = holder.binding.root
 
-        with(holder.binding.title) { text = entry.title }
-        loadFavicon(entry, holder.binding.favicon)
-        holder.binding.root.setOnClickListener { listener.historicalPageSelected(position) }
+        loadFavicon(entry, holder.binding.root)
+        listItem.setPrimaryText(entry.title.orEmpty())
+        listItem.setOnClickListener { listener.historicalPageSelected(position) }
     }
 
     override fun getItemCount(): Int {
@@ -72,15 +73,15 @@ class NavigationHistoryAdapter(
 
     private fun loadFavicon(
         historyEntry: NavigationHistoryEntry,
-        view: ImageView,
+        oneListItem: OneLineListItem,
     ) {
         lifecycleOwner.lifecycleScope.launch {
-            faviconManager.loadToViewFromLocalOrFallback(url = historyEntry.url, tabId = tabId, view = view)
+            faviconManager.loadToViewFromLocalOrFallback(url = historyEntry.url, tabId = tabId, view = oneListItem.leadingIcon())
         }
     }
 }
 
-data class NavigationViewHolder(val binding: ItemNavigationHistoryPopupRowBinding) :
+data class NavigationViewHolder(val binding: RowOneLineListItemBinding) :
     RecyclerView.ViewHolder(binding.root)
 
 data class NavigationHistoryEntry(

diff --git a/app/src/main/java/com/duckduckgo/app/browser/history/NavigationHistorySheet.kt b/app/src/main/java/com/duckduckgo/app/browser/history/NavigationHistorySheet.kt
@@ -19,13 +19,12 @@ package com.duckduckgo.app.browser.history
 import android.annotation.SuppressLint
 import android.content.Context
 import android.os.Bundle
+import android.view.LayoutInflater
 import androidx.lifecycle.LifecycleOwner
-import androidx.recyclerview.widget.RecyclerView
 import com.duckduckgo.app.browser.BrowserTabViewModel.Command.ShowBackNavigationHistory
+import com.duckduckgo.app.browser.databinding.NavigationHistoryPopupViewBinding
 import com.duckduckgo.app.browser.favicon.FaviconManager
 import com.duckduckgo.app.browser.history.NavigationHistoryAdapter.NavigationHistoryListener
-import com.duckduckgo.mobile.android.R
-import com.google.android.material.bottomsheet.BottomSheetBehavior
 import com.google.android.material.bottomsheet.BottomSheetDialog
 
 @SuppressLint("NoBottomSheetDialog")
@@ -36,7 +35,9 @@ class NavigationHistorySheet(
     private val tabId: String,
     private val history: ShowBackNavigationHistory,
     private val listener: NavigationHistorySheetListener,
-) : BottomSheetDialog(context, R.style.NavigationHistoryDialog) {
+) : BottomSheetDialog(context) {
+
+    private val binding = NavigationHistoryPopupViewBinding.inflate(LayoutInflater.from(context))
 
     interface NavigationHistorySheetListener {
         fun historicalPageSelected(stackIndex: Int)
@@ -45,12 +46,9 @@ class NavigationHistorySheet(
     override fun onCreate(savedInstanceState: Bundle?) {
         super.onCreate(savedInstanceState)
 
-        behavior.state = BottomSheetBehavior.STATE_EXPANDED
-        behavior.skipCollapsed = true
-
-        setContentView(com.duckduckgo.app.browser.R.layout.navigation_history_popup_view)
+        setContentView(binding.root)
 
-        findViewById<RecyclerView>(com.duckduckgo.app.browser.R.id.historyRecycler)?.also { recycler ->
+        binding.historyRecycler.also { recycler ->
             NavigationHistoryAdapter(
                 viewLifecycleOwner,
                 faviconManager,

diff --git a/app/src/main/java/com/duckduckgo/app/email/EmailAutofillTooltipFragment.kt b/app/src/main/java/com/duckduckgo/app/email/EmailAutofillTooltipFragment.kt
@@ -19,23 +19,25 @@ package com.duckduckgo.app.email
 import android.annotation.SuppressLint
 import android.content.Context
 import android.os.Bundle
+import android.view.LayoutInflater
 import com.duckduckgo.app.browser.R
+import com.duckduckgo.app.browser.databinding.ContentAutofillTooltipBinding
 import com.duckduckgo.app.global.extensions.html
-import com.google.android.material.bottomsheet.BottomSheetBehavior
 import com.google.android.material.bottomsheet.BottomSheetDialog
-import kotlinx.android.synthetic.main.content_autofill_tooltip.*
 
 @SuppressLint("NoBottomSheetDialog")
 class EmailAutofillTooltipFragment(
     context: Context,
     val address: String,
-) : BottomSheetDialog(context, R.style.EmailTooltip) {
+) : BottomSheetDialog(context) {
+
+    private val binding = ContentAutofillTooltipBinding.inflate(LayoutInflater.from(context))
 
     var useAddress: (() -> Unit) = {}
     var usePrivateAlias: (() -> Unit) = {}
 
     init {
-        setContentView(R.layout.content_autofill_tooltip)
+        setContentView(binding.root)
     }
 
     override fun onCreate(savedInstanceState: Bundle?) {
@@ -44,16 +46,15 @@ class EmailAutofillTooltipFragment(
     }
 
     private fun setDialog() {
-        behavior.state = BottomSheetBehavior.STATE_EXPANDED
         val addressFormatted = context.getString(R.string.autofillTooltipUseYourAlias, address)
-        tooltipPrimaryCtaTitle.text = addressFormatted.html(context)
+        binding.primaryCta.setPrimaryText(addressFormatted.html(context).toString())
 
-        secondaryCta.setOnClickListener {
+        binding.secondaryCta.setOnClickListener {
             usePrivateAlias()
             dismiss()
         }
 
-        primaryCta.setOnClickListener {
+        binding.primaryCta.setOnClickListener {
             useAddress()
             dismiss()
         }

diff --git a/app/src/main/res/drawable/ic_cancel_brownish.xml b/app/src/main/res/drawable/ic_cancel_brownish.xml
diff --git a/app/src/main/res/drawable/ic_download_brownish.xml b/app/src/main/res/drawable/ic_download_brownish.xml
diff --git a/.../res/drawable/ic_cancel_brownish_24dp.xml → ...src/main/res/drawable/ic_downloads_24.xml b/.../res/drawable/ic_cancel_brownish_24dp.xml → ...src/main/res/drawable/ic_downloads_24.xml
@@ -1,5 +1,5 @@
 <!--
-  ~ Copyright (c) 2018 DuckDuckGo
+  ~ Copyright (c) 2022 DuckDuckGo
   ~
   ~ Licensed under the Apache License, Version 2.0 (the "License");
   ~ you may not use this file except in compliance with the License.
@@ -17,9 +17,12 @@
 <vector xmlns:android="http://schemas.android.com/apk/res/android"
     android:width="24dp"
     android:height="24dp"
-    android:viewportWidth="24.0"
-    android:viewportHeight="24.0">
-    <path
-        android:fillColor="?normalTextColor"
-        android:pathData="M19,6.41L17.59,5 12,10.59 6.41,5 5,6.41 10.59,12 5,17.59 6.41,19 12,13.41 17.59,19 19,17.59 13.41,12z" />
+    android:viewportWidth="24"
+    android:viewportHeight="24">
+  <path
+      android:pathData="M12,2c0.552,0 1,0.448 1,1v10.586l3.293,-3.293c0.39,-0.39 1.024,-0.39 1.414,0 0.39,0.39 0.39,1.024 0,1.414l-5,5c-0.39,0.39 -1.024,0.39 -1.414,0l-5,-5c-0.39,-0.39 -0.39,-1.024 0,-1.414 0.39,-0.39 1.024,-0.39 1.414,0L11,13.586V3c0,-0.552 0.448,-1 1,-1z"
+      android:fillColor="?attr/daxColorPrimaryIcon"/>
+  <path
+      android:pathData="M5,19.048c-0.552,0 -1,0.447 -1,1 0,0.552 0.448,1 1,1h14c0.552,0 1,-0.448 1,-1 0,-0.553 -0.448,-1 -1,-1H5z"
+      android:fillColor="?attr/daxColorPrimaryIcon"/>
 </vector>
diff --git a/app/src/main/res/drawable/ic_fire_red.xml b/app/src/main/res/drawable/ic_fire_red.xml
@@ -20,6 +20,6 @@
     android:viewportWidth="24"
     android:viewportHeight="24">
     <path
-        android:fillColor="@color/marketing_red"
+        android:fillColor="?attr/daxColorDestructive"
         android:pathData="M10.208,22.307c-2.552,-0.843 -4.667,-2.904 -5.762,-6.043C2.818,11.79 6.172,8.23 6.172,8.23s-0.097,0.913 0.316,1.92c0.413,1.007 1.216,1.734 1.216,1.734S6.926,9.775 8.822,6.26c2.14,-3.959 6.855,-4.803 6.855,-4.803S14.486,3.356 15.02,5.3c0.414,1.453 1.094,2.156 1.848,4.123 0.754,2.015 0.632,3.116 0.632,3.116s0.22,-1.24 0.754,-2.084C19.42,8.603 21,8.159 21,8.159s-0.826,1.686 -0.631,3.958c0.145,1.664 0.388,3.585 -0.511,5.74 -0.706,1.71 -2.747,4.052 -5.615,4.685 1.653,-0.703 2.746,-2.343 2.625,-4.123 -0.073,-1.03 -0.705,-2.015 -1.385,-2.694 -0.413,2.6 -1.896,2.905 -1.896,2.905s0.85,-1.71 0.972,-3.608a5.997,5.997 0,0 0,-0.219 -2.342c-0.777,-2.694 -2.114,-3.42 -2.114,-3.42s0.438,1.568 -1.167,4.099c-1.119,1.757 -3.015,3.045 -2.942,5.669 0.05,1.405 0.9,2.6 2.091,3.28z" />
 </vector>
diff --git a/app/src/main/res/layout/content_autofill_tooltip.xml b/app/src/main/res/layout/content_autofill_tooltip.xml
@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="utf-8"?><!--
-  ~ Copyright (c) 2020 DuckDuckGo
+  ~ Copyright (c) 2022 DuckDuckGo
   ~
   ~ Licensed under the Apache License, Version 2.0 (the "License");
   ~ you may not use this file except in compliance with the License.
@@ -16,83 +16,24 @@
 
 <LinearLayout 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_gravity="bottom"
-    android:background="?attr/daxDialogBackgroundColor"
     android:orientation="vertical"
-    android:paddingTop="16dp"
-    android:paddingBottom="16dp"
-    android:theme="@style/Theme.AppCompat.Light">
+    android:paddingTop="@dimen/actionBottomSheetVerticalPadding"
+    android:paddingBottom="@dimen/actionBottomSheetVerticalPadding">
 
-    <LinearLayout
+    <com.duckduckgo.mobile.android.ui.view.listitem.TwoLineListItem
         android:id="@+id/primaryCta"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
-        android:foreground="?selectableItemBackgroundBorderless"
-        android:orientation="vertical"
-        android:padding="16dp"
-        tools:ignore="UnusedAttribute">
+        app:primaryText="@string/autofillTooltipUseYourAlias"
+        app:secondaryText="@string/autofillTooltipUseYourAliasDescription" />
 
-        <TextView
-            android:id="@+id/tooltipPrimaryCtaTitle"
-            android:layout_width="wrap_content"
-            android:layout_height="wrap_content"
-            android:layout_marginStart="21dp"
-            android:layout_marginEnd="21dp"
-            android:text="@string/autofillTooltipUseYourAlias"
-            android:textColor="?attr/normalTextColor"
-            android:textSize="15sp"
-            android:textStyle="bold"
-            app:layout_constraintEnd_toEndOf="parent"
-            app:layout_constraintStart_toStartOf="parent"
-            app:layout_constraintTop_toTopOf="parent" />
-
-        <TextView
-            android:id="@+id/tooltipPrimaryCtaDescription"
-            android:layout_width="wrap_content"
-            android:layout_height="wrap_content"
-            android:layout_marginStart="21dp"
-            android:layout_marginEnd="21dp"
-            android:text="@string/autofillTooltipUseYourAliasDescription"
-            android:textColor="?attr/normalTextColor"
-            android:textSize="12sp" />
-
-    </LinearLayout>
-
-    <LinearLayout
+    <com.duckduckgo.mobile.android.ui.view.listitem.TwoLineListItem
         android:id="@+id/secondaryCta"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
-        android:foreground="?selectableItemBackgroundBorderless"
-        android:orientation="vertical"
-        android:padding="16dp"
-        tools:ignore="UnusedAttribute">
-
-        <TextView
-            android:id="@+id/tooltipSecondaryCtaTitle"
-            android:layout_width="wrap_content"
-            android:layout_height="wrap_content"
-            android:layout_marginStart="21dp"
-            android:layout_marginEnd="21dp"
-            android:text="@string/autofillTooltipGenerateAddress"
-            android:textColor="?attr/normalTextColor"
-            android:textSize="15sp"
-            android:textStyle="bold"
-            app:layout_constraintEnd_toEndOf="parent"
-            app:layout_constraintStart_toStartOf="parent"
-            app:layout_constraintTop_toTopOf="parent" />
-
-        <TextView
-            android:id="@+id/tooltipSecondaryCtaDescription"
-            android:layout_width="wrap_content"
-            android:layout_height="wrap_content"
-            android:layout_marginStart="21dp"
-            android:layout_marginEnd="21dp"
-            android:text="@string/autofillTooltipGenerateAddressDescription"
-            android:textColor="?attr/normalTextColor"
-            android:textSize="12sp" />
+        app:primaryText="@string/autofillTooltipGenerateAddress"
+        app:secondaryText="@string/autofillTooltipGenerateAddressDescription" />
 
-    </LinearLayout>
 </LinearLayout>