For #8764: Update collection design, including list elements
parent
38a97cd1e0
commit
62bbbd9e37
|
@ -17,7 +17,6 @@ import mozilla.components.browser.menu.BrowserMenuBuilder
|
||||||
import mozilla.components.browser.menu.item.SimpleBrowserMenuItem
|
import mozilla.components.browser.menu.item.SimpleBrowserMenuItem
|
||||||
import mozilla.components.feature.tab.collections.TabCollection
|
import mozilla.components.feature.tab.collections.TabCollection
|
||||||
import org.mozilla.fenix.R
|
import org.mozilla.fenix.R
|
||||||
import org.mozilla.fenix.components.description
|
|
||||||
import org.mozilla.fenix.ext.getIconColor
|
import org.mozilla.fenix.ext.getIconColor
|
||||||
import org.mozilla.fenix.ext.increaseTapArea
|
import org.mozilla.fenix.ext.increaseTapArea
|
||||||
import org.mozilla.fenix.home.sessioncontrol.CollectionInteractor
|
import org.mozilla.fenix.home.sessioncontrol.CollectionInteractor
|
||||||
|
@ -77,17 +76,18 @@ class CollectionViewHolder(
|
||||||
|
|
||||||
private fun updateCollectionUI() {
|
private fun updateCollectionUI() {
|
||||||
view.collection_title.text = collection.title
|
view.collection_title.text = collection.title
|
||||||
view.collection_description.text = collection.description(view.context)
|
|
||||||
val layoutParams = view.layoutParams as ViewGroup.MarginLayoutParams
|
val layoutParams = view.layoutParams as ViewGroup.MarginLayoutParams
|
||||||
|
|
||||||
view.isActivated = expanded
|
view.isActivated = expanded
|
||||||
if (expanded) {
|
if (expanded) {
|
||||||
layoutParams.bottomMargin = 0
|
layoutParams.bottomMargin = 0
|
||||||
collection_title.setPadding(0, 0, 0, EXPANDED_PADDING)
|
collection_title.setPadding(0, 0, 0, EXPANDED_PADDING)
|
||||||
view.collection_description.visibility = View.GONE
|
view.collection_share_button.visibility = View.VISIBLE
|
||||||
|
view.collection_overflow_button.visibility = View.VISIBLE
|
||||||
} else {
|
} else {
|
||||||
layoutParams.bottomMargin = COLLAPSED_MARGIN
|
layoutParams.bottomMargin = COLLAPSED_MARGIN
|
||||||
view.collection_description.visibility = View.VISIBLE
|
view.collection_share_button.visibility = View.GONE
|
||||||
|
view.collection_overflow_button.visibility = View.GONE
|
||||||
}
|
}
|
||||||
|
|
||||||
view.collection_icon.colorFilter = createBlendModeColorFilterCompat(
|
view.collection_icon.colorFilter = createBlendModeColorFilterCompat(
|
||||||
|
|
|
@ -10,7 +10,11 @@ import android.view.ViewOutlineProvider
|
||||||
import androidx.appcompat.content.res.AppCompatResources
|
import androidx.appcompat.content.res.AppCompatResources
|
||||||
import androidx.recyclerview.widget.RecyclerView
|
import androidx.recyclerview.widget.RecyclerView
|
||||||
import kotlinx.android.extensions.LayoutContainer
|
import kotlinx.android.extensions.LayoutContainer
|
||||||
import kotlinx.android.synthetic.main.tab_in_collection.*
|
import kotlinx.android.synthetic.main.list_element.divider_line
|
||||||
|
import kotlinx.android.synthetic.main.list_element.list_element_title
|
||||||
|
import kotlinx.android.synthetic.main.list_element.list_item_close_button
|
||||||
|
import kotlinx.android.synthetic.main.list_element.list_item_icon
|
||||||
|
import kotlinx.android.synthetic.main.list_element.list_item_url
|
||||||
import mozilla.components.feature.tab.collections.TabCollection
|
import mozilla.components.feature.tab.collections.TabCollection
|
||||||
import mozilla.components.support.ktx.android.content.getColorFromAttr
|
import mozilla.components.support.ktx.android.content.getColorFromAttr
|
||||||
import mozilla.components.support.ktx.android.util.dpToFloat
|
import mozilla.components.support.ktx.android.util.dpToFloat
|
||||||
|
@ -35,8 +39,8 @@ class TabInCollectionViewHolder(
|
||||||
var isLastTab = false
|
var isLastTab = false
|
||||||
|
|
||||||
init {
|
init {
|
||||||
collection_tab_icon.clipToOutline = true
|
list_item_icon.clipToOutline = true
|
||||||
collection_tab_icon.outlineProvider = object : ViewOutlineProvider() {
|
list_item_icon.outlineProvider = object : ViewOutlineProvider() {
|
||||||
override fun getOutline(view: View, outline: Outline?) {
|
override fun getOutline(view: View, outline: Outline?) {
|
||||||
outline?.setRoundRect(
|
outline?.setRoundRect(
|
||||||
0,
|
0,
|
||||||
|
@ -52,8 +56,8 @@ class TabInCollectionViewHolder(
|
||||||
interactor.onCollectionOpenTabClicked(tab)
|
interactor.onCollectionOpenTabClicked(tab)
|
||||||
}
|
}
|
||||||
|
|
||||||
collection_tab_close_button.increaseTapArea(buttonIncreaseDps)
|
list_item_close_button.increaseTapArea(buttonIncreaseDps)
|
||||||
collection_tab_close_button.setOnClickListener {
|
list_item_close_button.setOnClickListener {
|
||||||
interactor.onCollectionRemoveTab(collection, tab)
|
interactor.onCollectionRemoveTab(collection, tab)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -66,10 +70,10 @@ class TabInCollectionViewHolder(
|
||||||
}
|
}
|
||||||
|
|
||||||
private fun updateTabUI() {
|
private fun updateTabUI() {
|
||||||
collection_tab_hostname.text = tab.url.toShortUrl(view.context.components.publicSuffixList)
|
list_item_url.text = tab.url.toShortUrl(view.context.components.publicSuffixList)
|
||||||
|
|
||||||
collection_tab_title.text = tab.title
|
list_element_title.text = tab.title
|
||||||
collection_tab_icon.context.components.core.icons.loadIntoView(collection_tab_icon, tab.url)
|
list_item_icon.context.components.core.icons.loadIntoView(list_item_icon, tab.url)
|
||||||
|
|
||||||
// If I'm the last one...
|
// If I'm the last one...
|
||||||
if (isLastTab) {
|
if (isLastTab) {
|
||||||
|
@ -83,6 +87,6 @@ class TabInCollectionViewHolder(
|
||||||
|
|
||||||
companion object {
|
companion object {
|
||||||
const val buttonIncreaseDps = 12
|
const val buttonIncreaseDps = 12
|
||||||
const val LAYOUT_ID = R.layout.tab_in_collection
|
const val LAYOUT_ID = R.layout.list_element
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,14 +1,12 @@
|
||||||
<?xml version="1.0" encoding="utf-8"?>
|
<?xml version="1.0" encoding="utf-8"?><!-- This Source Code Form is subject to the terms of the Mozilla Public
|
||||||
<!-- 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
|
- 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/. -->
|
- file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
|
||||||
<androidx.constraintlayout.widget.ConstraintLayout
|
<androidx.constraintlayout.widget.ConstraintLayout 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"
|
xmlns:app="http://schemas.android.com/apk/res-auto"
|
||||||
xmlns:tools="http://schemas.android.com/tools"
|
xmlns:tools="http://schemas.android.com/tools"
|
||||||
android:id="@+id/item_collection"
|
android:id="@+id/item_collection"
|
||||||
android:layout_width="match_parent"
|
android:layout_width="match_parent"
|
||||||
android:layout_height="wrap_content"
|
android:layout_height="48dp"
|
||||||
android:layout_marginTop="12dp"
|
android:layout_marginTop="12dp"
|
||||||
android:background="@drawable/collection_home_list_row_background"
|
android:background="@drawable/collection_home_list_row_background"
|
||||||
android:clickable="true"
|
android:clickable="true"
|
||||||
|
@ -22,25 +20,26 @@
|
||||||
android:layout_width="wrap_content"
|
android:layout_width="wrap_content"
|
||||||
android:layout_height="wrap_content"
|
android:layout_height="wrap_content"
|
||||||
android:layout_marginStart="16dp"
|
android:layout_marginStart="16dp"
|
||||||
android:layout_marginTop="16dp"
|
android:layout_marginTop="12dp"
|
||||||
android:importantForAccessibility="no"
|
android:importantForAccessibility="no"
|
||||||
app:srcCompat="@drawable/ic_tab_collection"
|
|
||||||
android:tint="@null"
|
android:tint="@null"
|
||||||
app:layout_constraintStart_toStartOf="parent"
|
app:layout_constraintStart_toStartOf="parent"
|
||||||
app:layout_constraintTop_toTopOf="parent" />
|
app:layout_constraintTop_toTopOf="parent"
|
||||||
|
app:srcCompat="@drawable/ic_tab_collection" />
|
||||||
|
|
||||||
<TextView
|
<TextView
|
||||||
android:id="@+id/collection_title"
|
android:id="@+id/collection_title"
|
||||||
android:layout_width="wrap_content"
|
android:layout_width="wrap_content"
|
||||||
android:layout_height="wrap_content"
|
android:layout_height="wrap_content"
|
||||||
android:layout_marginStart="12dp"
|
android:layout_marginStart="24dp"
|
||||||
android:layout_marginTop="16dp"
|
android:layout_marginTop="16dp"
|
||||||
|
android:layout_marginBottom="16dp"
|
||||||
android:layout_marginEnd="8dp"
|
android:layout_marginEnd="8dp"
|
||||||
android:ellipsize="end"
|
android:ellipsize="end"
|
||||||
android:gravity="start"
|
android:gravity="start"
|
||||||
android:maxLines="1"
|
android:maxLines="1"
|
||||||
android:minLines="1"
|
android:minLines="1"
|
||||||
android:textAppearance="@style/Header16TextStyle"
|
android:textAppearance="@style/Header14TextStyle"
|
||||||
app:layout_constrainedWidth="true"
|
app:layout_constrainedWidth="true"
|
||||||
app:layout_constraintEnd_toStartOf="@id/chevron"
|
app:layout_constraintEnd_toStartOf="@id/chevron"
|
||||||
app:layout_constraintHorizontal_bias="0.0"
|
app:layout_constraintHorizontal_bias="0.0"
|
||||||
|
@ -61,32 +60,18 @@
|
||||||
app:layout_constraintStart_toEndOf="@+id/collection_title"
|
app:layout_constraintStart_toEndOf="@+id/collection_title"
|
||||||
app:layout_constraintTop_toTopOf="parent" />
|
app:layout_constraintTop_toTopOf="parent" />
|
||||||
|
|
||||||
<TextView
|
|
||||||
android:id="@+id/collection_description"
|
|
||||||
android:layout_width="0dp"
|
|
||||||
android:layout_height="wrap_content"
|
|
||||||
android:layout_marginTop="8dp"
|
|
||||||
android:layout_marginBottom="16dp"
|
|
||||||
android:ellipsize="end"
|
|
||||||
android:maxLines="2"
|
|
||||||
android:minLines="2"
|
|
||||||
android:textAppearance="@style/SubtitleTextStyle"
|
|
||||||
app:layout_constraintBottom_toBottomOf="parent"
|
|
||||||
app:layout_constraintEnd_toStartOf="@id/collection_share_button"
|
|
||||||
app:layout_constraintStart_toStartOf="@id/collection_title"
|
|
||||||
app:layout_constraintTop_toBottomOf="@id/collection_title"
|
|
||||||
tools:text="@tools:sample/lorem/random" />
|
|
||||||
|
|
||||||
<ImageButton
|
<ImageButton
|
||||||
android:id="@+id/collection_share_button"
|
android:id="@+id/collection_share_button"
|
||||||
android:layout_width="48dp"
|
android:layout_width="48dp"
|
||||||
android:layout_height="48dp"
|
android:layout_height="48dp"
|
||||||
android:background="?android:attr/selectableItemBackgroundBorderless"
|
android:background="?android:attr/selectableItemBackgroundBorderless"
|
||||||
android:contentDescription="@string/share_button_content_description"
|
android:contentDescription="@string/share_button_content_description"
|
||||||
app:srcCompat="@drawable/ic_hollow_share"
|
android:visibility="gone"
|
||||||
app:layout_constraintBottom_toBottomOf="@id/collection_icon"
|
app:layout_constraintBottom_toBottomOf="@id/collection_icon"
|
||||||
app:layout_constraintEnd_toStartOf="@id/collection_overflow_button"
|
app:layout_constraintEnd_toStartOf="@id/collection_overflow_button"
|
||||||
app:layout_constraintTop_toTopOf="@id/collection_icon" />
|
app:layout_constraintTop_toTopOf="@id/collection_icon"
|
||||||
|
app:srcCompat="@drawable/ic_hollow_share"
|
||||||
|
tools:visibility="visible" />
|
||||||
|
|
||||||
<ImageButton
|
<ImageButton
|
||||||
android:id="@+id/collection_overflow_button"
|
android:id="@+id/collection_overflow_button"
|
||||||
|
@ -94,10 +79,12 @@
|
||||||
android:layout_height="48dp"
|
android:layout_height="48dp"
|
||||||
android:background="?android:attr/selectableItemBackgroundBorderless"
|
android:background="?android:attr/selectableItemBackgroundBorderless"
|
||||||
android:contentDescription="@string/collection_menu_button_content_description"
|
android:contentDescription="@string/collection_menu_button_content_description"
|
||||||
app:srcCompat="@drawable/ic_menu"
|
android:visibility="gone"
|
||||||
app:layout_constraintBottom_toBottomOf="@id/collection_icon"
|
app:layout_constraintBottom_toBottomOf="@id/collection_icon"
|
||||||
app:layout_constraintEnd_toEndOf="parent"
|
app:layout_constraintEnd_toEndOf="parent"
|
||||||
app:layout_constraintTop_toTopOf="@id/collection_icon" />
|
app:layout_constraintTop_toTopOf="@id/collection_icon"
|
||||||
|
app:srcCompat="@drawable/ic_menu"
|
||||||
|
tools:visibility="visible" />
|
||||||
|
|
||||||
<View
|
<View
|
||||||
android:id="@+id/selected_border"
|
android:id="@+id/selected_border"
|
||||||
|
|
|
@ -5,9 +5,9 @@
|
||||||
<androidx.constraintlayout.widget.ConstraintLayout
|
<androidx.constraintlayout.widget.ConstraintLayout
|
||||||
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"
|
xmlns:app="http://schemas.android.com/apk/res-auto"
|
||||||
android:id="@+id/tab_in_collection_item"
|
android:id="@+id/list_item"
|
||||||
android:layout_width="match_parent"
|
android:layout_width="match_parent"
|
||||||
android:layout_height="wrap_content"
|
android:layout_height="56dp"
|
||||||
android:background="?above"
|
android:background="?above"
|
||||||
android:clickable="true"
|
android:clickable="true"
|
||||||
android:clipToPadding="false"
|
android:clipToPadding="false"
|
||||||
|
@ -16,49 +16,52 @@
|
||||||
android:foreground="?android:attr/selectableItemBackground">
|
android:foreground="?android:attr/selectableItemBackground">
|
||||||
|
|
||||||
<ImageView
|
<ImageView
|
||||||
android:id="@+id/collection_tab_icon"
|
android:id="@+id/list_item_icon"
|
||||||
android:layout_width="24dp"
|
android:layout_width="40dp"
|
||||||
android:layout_height="24dp"
|
android:layout_height="40dp"
|
||||||
|
android:background="@drawable/rounded_grey_corners_transparent_center"
|
||||||
|
android:padding="8dp"
|
||||||
android:layout_marginStart="16dp"
|
android:layout_marginStart="16dp"
|
||||||
android:layout_marginTop="23dp"
|
android:layout_marginTop="8dp"
|
||||||
android:layout_marginBottom="24dp"
|
android:layout_marginBottom="8dp"
|
||||||
android:importantForAccessibility="no"
|
android:importantForAccessibility="no"
|
||||||
app:srcCompat="@drawable/ic_tab_collection"
|
app:srcCompat="@drawable/ic_tab_collection"
|
||||||
android:tint="@null"
|
android:tint="@null"
|
||||||
app:layout_constraintStart_toStartOf="parent"
|
app:layout_constraintStart_toStartOf="parent"
|
||||||
app:layout_constraintTop_toTopOf="parent" />
|
app:layout_constraintTop_toTopOf="parent"
|
||||||
|
app:layout_constraintTop_toBottomOf="parent"/>
|
||||||
|
|
||||||
<TextView
|
<TextView
|
||||||
android:id="@+id/collection_tab_hostname"
|
android:id="@+id/list_element_title"
|
||||||
android:layout_width="0dp"
|
android:layout_width="0dp"
|
||||||
android:layout_height="wrap_content"
|
android:layout_height="wrap_content"
|
||||||
android:layout_marginStart="14dp"
|
android:layout_marginStart="16dp"
|
||||||
android:layout_marginTop="8dp"
|
android:layout_marginTop="9dp"
|
||||||
android:layout_marginEnd="74dp"
|
android:layout_marginEnd="74dp"
|
||||||
android:ellipsize="end"
|
android:ellipsize="end"
|
||||||
android:maxLines="1"
|
android:singleLine="true"
|
||||||
android:minLines="1"
|
android:textAppearance="@style/Body14TextStyle"
|
||||||
android:textAppearance="@style/Header12TextStyle"
|
app:layout_constraintEnd_toStartOf="@id/list_item_close_button"
|
||||||
app:layout_constraintEnd_toStartOf="@id/collection_tab_close_button"
|
app:layout_constraintStart_toEndOf="@id/list_item_icon"
|
||||||
app:layout_constraintStart_toEndOf="@id/collection_tab_icon"
|
app:layout_constraintBottom_toTopOf="@id/list_item_url"
|
||||||
app:layout_constraintTop_toTopOf="parent" />
|
app:layout_constraintTop_toTopOf="parent" />
|
||||||
|
|
||||||
<TextView
|
<TextView
|
||||||
android:id="@+id/collection_tab_title"
|
android:id="@+id/list_item_url"
|
||||||
android:layout_width="0dp"
|
android:layout_width="0dp"
|
||||||
android:layout_height="wrap_content"
|
android:layout_height="wrap_content"
|
||||||
android:layout_marginBottom="12dp"
|
android:layout_marginBottom="12dp"
|
||||||
|
android:textColor="?secondaryText"
|
||||||
|
android:textSize="10sp"
|
||||||
android:ellipsize="end"
|
android:ellipsize="end"
|
||||||
android:maxLines="2"
|
android:maxLines="2"
|
||||||
android:minLines="2"
|
|
||||||
android:textAppearance="@style/Body14TextStyle"
|
|
||||||
app:layout_constraintBottom_toBottomOf="parent"
|
app:layout_constraintBottom_toBottomOf="parent"
|
||||||
app:layout_constraintEnd_toEndOf="@id/collection_tab_hostname"
|
app:layout_constraintEnd_toEndOf="@id/list_element_title"
|
||||||
app:layout_constraintStart_toStartOf="@id/collection_tab_hostname"
|
app:layout_constraintStart_toStartOf="@id/list_element_title"
|
||||||
app:layout_constraintTop_toBottomOf="@id/collection_tab_hostname" />
|
app:layout_constraintTop_toBottomOf="@id/list_element_title" />
|
||||||
|
|
||||||
<ImageButton
|
<ImageButton
|
||||||
android:id="@+id/collection_tab_close_button"
|
android:id="@+id/list_item_close_button"
|
||||||
android:layout_width="48dp"
|
android:layout_width="48dp"
|
||||||
android:layout_height="48dp"
|
android:layout_height="48dp"
|
||||||
android:alpha="0.8"
|
android:alpha="0.8"
|
||||||
|
@ -66,7 +69,8 @@
|
||||||
android:contentDescription="@string/close_tab"
|
android:contentDescription="@string/close_tab"
|
||||||
app:srcCompat="@drawable/ic_close"
|
app:srcCompat="@drawable/ic_close"
|
||||||
app:layout_constraintEnd_toEndOf="parent"
|
app:layout_constraintEnd_toEndOf="parent"
|
||||||
app:layout_constraintTop_toTopOf="parent" />
|
app:layout_constraintTop_toTopOf="parent"
|
||||||
|
app:layout_constraintBottom_toBottomOf="parent"/>
|
||||||
|
|
||||||
<View
|
<View
|
||||||
android:id="@+id/divider_line"
|
android:id="@+id/divider_line"
|
Loading…
Reference in New Issue