Skip to content
This repository has been archived by the owner on Feb 20, 2023. It is now read-only.

Commit

Permalink
For #8764: Update collection design, including list elements
Browse files Browse the repository at this point in the history
  • Loading branch information
@ekager
mcarare authored and ekager committed Mar 28, 2020
1 parent 38a97cd commit 62bbbd9
Show file tree
Hide file tree
Showing 4 changed files with 62 additions and 67 deletions.
8 changes: 4 additions & 4 deletions app/src/main/java/org/mozilla/fenix/home/sessioncontrol/viewholders/CollectionViewHolder.kt
View file
Expand Up @@ -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
Expand Down Expand Up @@ -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(
Expand Down
22 changes: 13 additions & 9 deletions .../main/java/org/mozilla/fenix/home/sessioncontrol/viewholders/TabInCollectionViewHolder.kt
View file
Expand Up @@ -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
Expand All @@ -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,
Expand All @@ -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)
}
}
Expand All @@ -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) {
Expand All @@ -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 changes: 17 additions & 30 deletions 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"
Expand All @@ -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"
Expand All @@ -61,43 +60,31 @@
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"
android:layout_width="48dp"
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"
Expand Down
52 changes: 28 additions & 24 deletions ...src/main/res/layout/tab_in_collection.xml → app/src/main/res/layout/list_element.xml
View file
Expand Up @@ -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"
Expand All @@ -16,57 +16,61 @@
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"
android:background="?android:attr/selectableItemBackgroundBorderless"
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"
Expand Down

0 comments on commit 62bbbd9

Please sign in to comment.