blallo
/
fenix
1
0
Fork 0
Code Releases Activity

For #8764: Update collection design, including list elements

master
mcarare 2020-03-11 20:21:48 +02:00 committed by Emily Kager
parent 38a97cd1e0
commit 62bbbd9e37
4 changed files with 62 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
app/src/main/java/org/mozilla/fenix/home/sessioncontrol/viewholders/CollectionViewHolder.kt
View File

@ -17,7 +17,6 @@ import mozilla.components.browser.menu.BrowserMenuBuilder
import mozilla.components.browser.menu.item.SimpleBrowserMenuItem
import mozilla.components.feature.tab.collections.TabCollection
import org.mozilla.fenix.R
import org.mozilla.fenix.components.description
import org.mozilla.fenix.ext.getIconColor
import org.mozilla.fenix.ext.increaseTapArea
import org.mozilla.fenix.home.sessioncontrol.CollectionInteractor
@ -77,17 +76,18 @@ class CollectionViewHolder(
private fun updateCollectionUI() {
view.collection_title.text = collection.title
view.collection_description.text = collection.description(view.context)
val layoutParams = view.layoutParams as ViewGroup.MarginLayoutParams
view.isActivated = expanded
if (expanded) {
layoutParams.bottomMargin = 0
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 {
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(

22
app/src/main/java/org/mozilla/fenix/home/sessioncontrol/viewholders/TabInCollectionViewHolder.kt
View File

@ -10,7 +10,11 @@ import android.view.ViewOutlineProvider
import androidx.appcompat.content.res.AppCompatResources
import androidx.recyclerview.widget.RecyclerView
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.support.ktx.android.content.getColorFromAttr
import mozilla.components.support.ktx.android.util.dpToFloat
@ -35,8 +39,8 @@ class TabInCollectionViewHolder(
var isLastTab = false
init {
collection_tab_icon.clipToOutline = true
collection_tab_icon.outlineProvider = object : ViewOutlineProvider() {
list_item_icon.clipToOutline = true
list_item_icon.outlineProvider = object : ViewOutlineProvider() {
override fun getOutline(view: View, outline: Outline?) {
outline?.setRoundRect(
0,
@ -52,8 +56,8 @@ class TabInCollectionViewHolder(
interactor.onCollectionOpenTabClicked(tab)
}
collection_tab_close_button.increaseTapArea(buttonIncreaseDps)
collection_tab_close_button.setOnClickListener {
list_item_close_button.increaseTapArea(buttonIncreaseDps)
list_item_close_button.setOnClickListener {
interactor.onCollectionRemoveTab(collection, tab)
}
}
@ -66,10 +70,10 @@ class TabInCollectionViewHolder(
}
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
collection_tab_icon.context.components.core.icons.loadIntoView(collection_tab_icon, tab.url)
list_element_title.text = tab.title
list_item_icon.context.components.core.icons.loadIntoView(list_item_icon, tab.url)
// If I'm the last one...
if (isLastTab) {
@ -83,6 +87,6 @@ class TabInCollectionViewHolder(
companion object {
const val buttonIncreaseDps = 12
const val LAYOUT_ID = R.layout.tab_in_collection
const val LAYOUT_ID = R.layout.list_element
}
}

47
app/src/main/res/layout/collection_home_list_row.xml
View File

@ -1,14 +1,12 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- This Source Code Form is subject to the terms of the Mozilla Public
<?xml version="1.0" encoding="utf-8"?><!-- 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
- file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
<androidx.constraintlayout.widget.ConstraintLayout 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:id="@+id/item_collection"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_height="48dp"
android:layout_marginTop="12dp"
android:background="@drawable/collection_home_list_row_background"
android:clickable="true"
@ -22,25 +20,26 @@
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:layout_marginTop="12dp"
android:importantForAccessibility="no"
app:srcCompat="@drawable/ic_tab_collection"
android:tint="@null"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="@drawable/ic_tab_collection" />
<TextView
android:id="@+id/collection_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="12dp"
android:layout_marginStart="24dp"
android:layout_marginTop="16dp"
android:layout_marginBottom="16dp"
android:layout_marginEnd="8dp"
android:ellipsize="end"
android:gravity="start"
android:maxLines="1"
android:minLines="1"
android:textAppearance="@style/Header16TextStyle"
android:textAppearance="@style/Header14TextStyle"
app:layout_constrainedWidth="true"
app:layout_constraintEnd_toStartOf="@id/chevron"
app:layout_constraintHorizontal_bias="0.0"
@ -61,32 +60,18 @@
app:layout_constraintStart_toEndOf="@+id/collection_title"
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
android:id="@+id/collection_share_button"
android:layout_width="48dp"
android:layout_height="48dp"
android:background="?android:attr/selectableItemBackgroundBorderless"
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_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
android:id="@+id/collection_overflow_button"
@ -94,10 +79,12 @@
android:layout_height="48dp"
android:background="?android:attr/selectableItemBackgroundBorderless"
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_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
android:id="@+id/selected_border"

52
app/src/main/res/layout/tab_in_collection.xml → app/src/main/res/layout/list_element.xml
View File

@ -5,9 +5,9 @@
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
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_height="wrap_content"
android:layout_height="56dp"
android:background="?above"
android:clickable="true"
android:clipToPadding="false"
@ -16,49 +16,52 @@
android:foreground="?android:attr/selectableItemBackground">
<ImageView
android:id="@+id/collection_tab_icon"
android:layout_width="24dp"
android:layout_height="24dp"
android:id="@+id/list_item_icon"
android:layout_width="40dp"
android:layout_height="40dp"
android:background="@drawable/rounded_grey_corners_transparent_center"
android:padding="8dp"
android:layout_marginStart="16dp"
android:layout_marginTop="23dp"
android:layout_marginBottom="24dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:importantForAccessibility="no"
app:srcCompat="@drawable/ic_tab_collection"
android:tint="@null"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintTop_toBottomOf="parent"/>
<TextView
android:id="@+id/collection_tab_hostname"
android:id="@+id/list_element_title"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="14dp"
android:layout_marginTop="8dp"
android:layout_marginStart="16dp"
android:layout_marginTop="9dp"
android:layout_marginEnd="74dp"
android:ellipsize="end"
android:maxLines="1"
android:minLines="1"
android:textAppearance="@style/Header12TextStyle"
app:layout_constraintEnd_toStartOf="@id/collection_tab_close_button"
app:layout_constraintStart_toEndOf="@id/collection_tab_icon"
android:singleLine="true"
android:textAppearance="@style/Body14TextStyle"
app:layout_constraintEnd_toStartOf="@id/list_item_close_button"
app:layout_constraintStart_toEndOf="@id/list_item_icon"
app:layout_constraintBottom_toTopOf="@id/list_item_url"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="@+id/collection_tab_title"
android:id="@+id/list_item_url"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginBottom="12dp"
android:textColor="?secondaryText"
android:textSize="10sp"
android:ellipsize="end"
android:maxLines="2"
android:minLines="2"
android:textAppearance="@style/Body14TextStyle"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="@id/collection_tab_hostname"
app:layout_constraintStart_toStartOf="@id/collection_tab_hostname"
app:layout_constraintTop_toBottomOf="@id/collection_tab_hostname" />
app:layout_constraintEnd_toEndOf="@id/list_element_title"
app:layout_constraintStart_toStartOf="@id/list_element_title"
app:layout_constraintTop_toBottomOf="@id/list_element_title" />
<ImageButton
android:id="@+id/collection_tab_close_button"
android:id="@+id/list_item_close_button"
android:layout_width="48dp"
android:layout_height="48dp"
android:alpha="0.8"
@ -66,7 +69,8 @@
android:contentDescription="@string/close_tab"
app:srcCompat="@drawable/ic_close"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"/>
<View
android:id="@+id/divider_line"