blallo
/
fenix
1
0
Fork 0
Code Releases Activity

For #2843 - Improve Collections UI and UX (#2851)

master
Emily Kager 2019-05-24 17:06:17 -07:00 committed by Jeff Boek
parent 11be571ded
commit 01c9317be0
5 changed files with 110 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
app/src/main/java/org/mozilla/fenix/collections/CollectionCreationUIView.kt
View File

@ -121,6 +121,8 @@ class CollectionCreationUIView(
@Suppress("ComplexMethod") @Suppress("ComplexMethod")
override fun updateView() = Consumer<CollectionCreationState> { override fun updateView() = Consumer<CollectionCreationState> {
step = it.saveCollectionStep step = it.saveCollectionStep
selectedTabs = it.selectedTabs
when (it.saveCollectionStep) { when (it.saveCollectionStep) {
is SaveCollectionStep.SelectTabs -> { is SaveCollectionStep.SelectTabs -> {
back_button.setOnClickListener { back_button.setOnClickListener {
@ -133,7 +135,6 @@ class CollectionCreationUIView(
val constraint = selectTabsConstraints val constraint = selectTabsConstraints
constraint.applyTo(view.collection_constraint_layout) constraint.applyTo(view.collection_constraint_layout)
this.selectedTabs = it.selectedTabs
collectionCreationTabListAdapter.updateData(it.tabs, it.selectedTabs) collectionCreationTabListAdapter.updateData(it.tabs, it.selectedTabs)
back_button.text = view.context.getString(R.string.create_collection_select_tabs) back_button.text = view.context.getString(R.string.create_collection_select_tabs)

2
app/src/main/java/org/mozilla/fenix/collections/CreateCollectionFragment.kt
View File

@ -123,7 +123,7 @@ class CreateCollectionFragment : DialogFragment(), CoroutineScope {
dismiss() dismiss()
context?.let { context -> context?.let { context ->
val sessionBundle = viewModel.selectedTabs.toList().toSessionBundle(context) val sessionBundle = it.tabs.toList().toSessionBundle(context)
launch(Dispatchers.IO) { launch(Dispatchers.IO) {
requireComponents.core.tabCollectionStorage.createCollection(it.name, sessionBundle) requireComponents.core.tabCollectionStorage.createCollection(it.name, sessionBundle)
} }

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

@ -21,6 +21,7 @@ import mozilla.components.browser.menu.BrowserMenuBuilder
import mozilla.components.browser.menu.item.SimpleBrowserMenuItem import mozilla.components.browser.menu.item.SimpleBrowserMenuItem
import org.mozilla.fenix.DefaultThemeManager import org.mozilla.fenix.DefaultThemeManager
import org.mozilla.fenix.R import org.mozilla.fenix.R
import org.mozilla.fenix.ext.increaseTapArea
import org.mozilla.fenix.ext.urlToTrimmedHost import org.mozilla.fenix.ext.urlToTrimmedHost
import org.mozilla.fenix.home.sessioncontrol.CollectionAction import org.mozilla.fenix.home.sessioncontrol.CollectionAction
import org.mozilla.fenix.home.sessioncontrol.SessionControlAction import org.mozilla.fenix.home.sessioncontrol.SessionControlAction
@ -54,6 +55,7 @@ class CollectionViewHolder(
} }
collection_overflow_button.run { collection_overflow_button.run {
increaseTapArea(buttonIncreaseDps)
setOnClickListener { setOnClickListener {
collectionMenu.menuBuilder collectionMenu.menuBuilder
.build(view.context) .build(view.context)
@ -62,6 +64,7 @@ class CollectionViewHolder(
} }
collection_share_button.run { collection_share_button.run {
increaseTapArea(buttonIncreaseDps)
setOnClickListener { setOnClickListener {
actionEmitter.onNext(CollectionAction.ShareTabs(collection)) actionEmitter.onNext(CollectionAction.ShareTabs(collection))
} }
@ -107,21 +110,13 @@ class CollectionViewHolder(
view.background = ContextCompat.getDrawable(view.context, R.drawable.rounded_top_corners) view.background = ContextCompat.getDrawable(view.context, R.drawable.rounded_top_corners)
view.collection_description.visibility = View.GONE view.collection_description.visibility = View.GONE
view.collection_title.setCompoundDrawablesWithIntrinsicBounds( view.chevron.setBackgroundResource(R.drawable.ic_chevron_up)
null,
null,
ContextCompat.getDrawable(view.context, R.drawable.ic_chevron_up),
null)
} else { } else {
(view.layoutParams as ViewGroup.MarginLayoutParams).bottomMargin = COLLAPSED_MARGIN (view.layoutParams as ViewGroup.MarginLayoutParams).bottomMargin = COLLAPSED_MARGIN
view.background = ContextCompat.getDrawable(view.context, R.drawable.rounded_all_corners) view.background = ContextCompat.getDrawable(view.context, R.drawable.rounded_all_corners)
view.collection_description.visibility = View.VISIBLE view.collection_description.visibility = View.VISIBLE
view.collection_title.setCompoundDrawablesWithIntrinsicBounds( view.chevron.setBackgroundResource(R.drawable.ic_chevron_down)
null,
null,
ContextCompat.getDrawable(view.context, R.drawable.ic_chevron_down),
null)
} }
view.collection_icon.setColorFilter( view.collection_icon.setColorFilter(
@ -155,6 +150,7 @@ class CollectionViewHolder(
} }
companion object { companion object {
const val buttonIncreaseDps = 16
const val EXPANDED_PADDING = 60 const val EXPANDED_PADDING = 60
const val COLLAPSED_MARGIN = 12 const val COLLAPSED_MARGIN = 12
const val LAYOUT_ID = R.layout.collection_home_list_row const val LAYOUT_ID = R.layout.collection_home_list_row

50
app/src/main/res/layout/collection_header.xml
View File

@ -3,33 +3,33 @@
- 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"
android:id="@+id/collections_header" android:id="@+id/collections_header"
android:layout_marginTop="5dp" android:layout_width="match_parent"
android:layout_marginBottom="15.5dp" android:layout_height="wrap_content"
android:layout_width="match_parent" android:layout_marginTop="5dp"
android:layout_height="wrap_content"> android:layout_marginBottom="15.5dp">
<View <View
android:id="@+id/divider_line" android:id="@+id/divider_line"
android:layout_width="fill_parent" android:layout_width="fill_parent"
android:layout_height="1dp" android:layout_height="1dp"
android:background="?neutralFaded" android:layout_marginStart="23dp"
android:layout_marginStart="23dp" android:layout_marginEnd="23dp"
android:layout_marginEnd="23dp" android:background="?neutralFaded"
app:layout_constraintStart_toStartOf="parent" app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"/> app:layout_constraintTop_toTopOf="parent" />
<TextView <TextView
android:id="@+id/collections_header_text" android:id="@+id/collections_header_text"
android:layout_width="wrap_content" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:layout_height="wrap_content"
android:text="@string/collections_header" android:layout_marginStart="4.5dp"
android:textAppearance="@style/HeaderTextStyle" android:layout_marginTop="15dp"
android:layout_marginTop="15dp" android:text="@string/collections_header"
android:layout_marginStart="4.5dp" android:textAppearance="@style/HeaderTextStyle"
app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent" app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@id/divider_line" /> app:layout_constraintTop_toBottomOf="@id/divider_line" />
</androidx.constraintlayout.widget.ConstraintLayout> </androidx.constraintlayout.widget.ConstraintLayout>

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

@ -3,86 +3,102 @@
- 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/. -->
<LinearLayout <LinearLayout
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" 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="wrap_content"
android:layout_marginTop="12dp" android:layout_marginTop="12dp"
android:clickable="true" android:background="@drawable/rounded_all_corners"
android:clipToPadding="false" android:clickable="true"
android:focusable="true" android:clipToPadding="false"
android:foreground="?android:attr/selectableItemBackground" android:elevation="5dp"
android:background="@drawable/rounded_all_corners" android:focusable="true"
android:elevation="5dp"> android:foreground="?android:attr/selectableItemBackground">
<androidx.constraintlayout.widget.ConstraintLayout <androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent" android:layout_width="match_parent"
android:layout_height="wrap_content"> android:layout_height="wrap_content"
android:layout_marginTop="16dp">
<ImageView <ImageView
android:id="@+id/collection_icon" android:id="@+id/collection_icon"
android:layout_width="wrap_content" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:layout_height="wrap_content"
android:layout_marginTop="16dp" android:layout_marginStart="16dp"
android:layout_marginStart="16dp" android:importantForAccessibility="no"
android:tint="@null" android:src="@drawable/ic_tab_collection"
android:src="@drawable/ic_tab_collection" android:tint="@null"
app:layout_constraintStart_toStartOf="parent" app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"/> app:layout_constraintTop_toTopOf="parent" />
<TextView <TextView
android:id="@+id/collection_title" android:id="@+id/collection_title"
android:layout_width="0dp" android:layout_width="0dp"
android:layout_height="wrap_content" android:layout_height="wrap_content"
android:layout_marginTop="17dp"
android:layout_marginStart="12dp" android:layout_marginStart="12dp"
android:layout_marginEnd="8dp"
android:ellipsize="end" android:ellipsize="end"
android:gravity="start"
android:maxLines="1" android:maxLines="1"
android:minLines="1" android:minLines="1"
android:text="The quick brown fox jumped over the lazy dog"
android:textAppearance="@style/Header16TextStyle" android:textAppearance="@style/Header16TextStyle"
android:drawableEnd="@drawable/ic_chevron_down" app:layout_constraintEnd_toStartOf="@id/chevron"
android:drawablePadding="8dp" app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintStart_toEndOf="@+id/collection_icon"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintWidth_default="wrap" />
<ImageView
android:id="@+id/chevron"
android:layout_width="10dp"
android:layout_height="6dp"
android:layout_marginEnd="16dp" android:layout_marginEnd="16dp"
app:layout_constraintStart_toEndOf="@id/collection_icon" android:background="@drawable/ic_chevron_down"
app:layout_constraintTop_toTopOf="parent" android:text="The quick brown fox jumps over the lazy dog"/> android:contentDescription="@string/tab_menu"
android:layout_marginTop="8dp"
app:layout_constraintEnd_toStartOf="@+id/collection_share_button"
app:layout_constraintStart_toEndOf="@+id/collection_title"
app:layout_constraintTop_toTopOf="parent" />
<TextView <TextView
android:id="@+id/collection_description" android:id="@+id/collection_description"
android:layout_width="0dp" android:layout_width="0dp"
android:layout_height="wrap_content" android:layout_height="wrap_content"
android:layout_marginTop="8dp" android:layout_marginTop="8dp"
android:layout_marginBottom="16dp" android:layout_marginBottom="16dp"
android:ellipsize="end" android:ellipsize="end"
android:maxLines="2" android:maxLines="2"
android:minLines="2" android:minLines="2"
android:textAppearance="@style/SubtitleTextStyle" android:textAppearance="@style/SubtitleTextStyle"
app:layout_constraintStart_toStartOf="@id/collection_title" app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toBottomOf="@id/collection_share_button" app:layout_constraintEnd_toStartOf="@id/collection_share_button"
app:layout_constraintEnd_toStartOf="@id/collection_share_button" app:layout_constraintStart_toStartOf="@id/collection_title"
app:layout_constraintBottom_toBottomOf="parent"/> app:layout_constraintTop_toBottomOf="@id/collection_share_button" />
<ImageButton <ImageButton
android:id="@+id/collection_share_button" android:id="@+id/collection_share_button"
android:layout_width="20dp" android:layout_width="20dp"
android:layout_height="20dp" android:layout_height="20dp"
android:layout_marginStart="16dp" android:layout_marginStart="16dp"
android:background="?android:attr/selectableItemBackgroundBorderless" android:layout_marginEnd="30dp"
android:contentDescription="@string/tab_menu" android:background="?android:attr/selectableItemBackgroundBorderless"
android:src="@drawable/ic_hollow_share" android:contentDescription="@string/tab_menu"
android:layout_marginEnd="30dp" android:src="@drawable/ic_hollow_share"
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" />
<ImageButton <ImageButton
android:id="@+id/collection_overflow_button" android:id="@+id/collection_overflow_button"
android:layout_width="24dp" android:layout_width="24dp"
android:layout_height="24dp" android:layout_height="24dp"
android:background="?android:attr/selectableItemBackgroundBorderless" android:layout_marginEnd="4.5dp"
android:contentDescription="@string/tab_menu" android:background="?android:attr/selectableItemBackgroundBorderless"
android:src="@drawable/ic_menu" android:contentDescription="@string/tab_menu"
android:layout_marginEnd="4.5dp" android:src="@drawable/ic_menu"
app:layout_constraintEnd_toEndOf="parent" app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="@id/collection_icon"/> app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout> </androidx.constraintlayout.widget.ConstraintLayout>
</LinearLayout> </LinearLayout>