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")
override fun updateView() = Consumer<CollectionCreationState> {
step = it.saveCollectionStep
selectedTabs = it.selectedTabs
when (it.saveCollectionStep) {
is SaveCollectionStep.SelectTabs -> {
back_button.setOnClickListener {
@ -133,7 +135,6 @@ class CollectionCreationUIView(
val constraint = selectTabsConstraints
constraint.applyTo(view.collection_constraint_layout)
this.selectedTabs = it.selectedTabs
collectionCreationTabListAdapter.updateData(it.tabs, it.selectedTabs)
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()
context?.let { context ->
val sessionBundle = viewModel.selectedTabs.toList().toSessionBundle(context)
val sessionBundle = it.tabs.toList().toSessionBundle(context)
launch(Dispatchers.IO) {
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 org.mozilla.fenix.DefaultThemeManager
import org.mozilla.fenix.R
import org.mozilla.fenix.ext.increaseTapArea
import org.mozilla.fenix.ext.urlToTrimmedHost
import org.mozilla.fenix.home.sessioncontrol.CollectionAction
import org.mozilla.fenix.home.sessioncontrol.SessionControlAction
@ -54,6 +55,7 @@ class CollectionViewHolder(
}
collection_overflow_button.run {
increaseTapArea(buttonIncreaseDps)
setOnClickListener {
collectionMenu.menuBuilder
.build(view.context)
@ -62,6 +64,7 @@ class CollectionViewHolder(
}
collection_share_button.run {
increaseTapArea(buttonIncreaseDps)
setOnClickListener {
actionEmitter.onNext(CollectionAction.ShareTabs(collection))
}
@ -107,21 +110,13 @@ class CollectionViewHolder(
view.background = ContextCompat.getDrawable(view.context, R.drawable.rounded_top_corners)
view.collection_description.visibility = View.GONE
view.collection_title.setCompoundDrawablesWithIntrinsicBounds(
null,
null,
ContextCompat.getDrawable(view.context, R.drawable.ic_chevron_up),
null)
view.chevron.setBackgroundResource(R.drawable.ic_chevron_up)
} else {
(view.layoutParams as ViewGroup.MarginLayoutParams).bottomMargin = COLLAPSED_MARGIN
view.background = ContextCompat.getDrawable(view.context, R.drawable.rounded_all_corners)
view.collection_description.visibility = View.VISIBLE
view.collection_title.setCompoundDrawablesWithIntrinsicBounds(
null,
null,
ContextCompat.getDrawable(view.context, R.drawable.ic_chevron_down),
null)
view.chevron.setBackgroundResource(R.drawable.ic_chevron_down)
}
view.collection_icon.setColorFilter(
@ -155,6 +150,7 @@ class CollectionViewHolder(
}
companion object {
const val buttonIncreaseDps = 16
const val EXPANDED_PADDING = 60
const val COLLAPSED_MARGIN = 12
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
- 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"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/collections_header"
android:layout_marginTop="5dp"
android:layout_marginBottom="15.5dp"
android:layout_width="match_parent"
android:layout_height="wrap_content">
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/collections_header"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:layout_marginBottom="15.5dp">
<View
android:id="@+id/divider_line"
android:layout_width="fill_parent"
android:layout_height="1dp"
android:background="?neutralFaded"
android:layout_marginStart="23dp"
android:layout_marginEnd="23dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
android:id="@+id/divider_line"
android:layout_width="fill_parent"
android:layout_height="1dp"
android:layout_marginStart="23dp"
android:layout_marginEnd="23dp"
android:background="?neutralFaded"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="@+id/collections_header_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/collections_header"
android:textAppearance="@style/HeaderTextStyle"
android:layout_marginTop="15dp"
android:layout_marginStart="4.5dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@id/divider_line" />
android:id="@+id/collections_header_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="4.5dp"
android:layout_marginTop="15dp"
android:text="@string/collections_header"
android:textAppearance="@style/HeaderTextStyle"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@id/divider_line" />
</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
- file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
<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:id="@+id/item_collection"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="12dp"
android:clickable="true"
android:clipToPadding="false"
android:focusable="true"
android:foreground="?android:attr/selectableItemBackground"
android:background="@drawable/rounded_all_corners"
android:elevation="5dp">
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/item_collection"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="12dp"
android:background="@drawable/rounded_all_corners"
android:clickable="true"
android:clipToPadding="false"
android:elevation="5dp"
android:focusable="true"
android:foreground="?android:attr/selectableItemBackground">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="16dp">
<ImageView
android:id="@+id/collection_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:layout_marginStart="16dp"
android:tint="@null"
android:src="@drawable/ic_tab_collection"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
android:id="@+id/collection_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:importantForAccessibility="no"
android:src="@drawable/ic_tab_collection"
android:tint="@null"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="@+id/collection_title"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="17dp"
android:layout_marginStart="12dp"
android:layout_marginEnd="8dp"
android:ellipsize="end"
android:gravity="start"
android:maxLines="1"
android:minLines="1"
android:text="The quick brown fox jumped over the lazy dog"
android:textAppearance="@style/Header16TextStyle"
android:drawableEnd="@drawable/ic_chevron_down"
android:drawablePadding="8dp"
app:layout_constraintEnd_toStartOf="@id/chevron"
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"
app:layout_constraintStart_toEndOf="@id/collection_icon"
app:layout_constraintTop_toTopOf="parent" android:text="The quick brown fox jumps over the lazy dog"/>
android:background="@drawable/ic_chevron_down"
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
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_constraintStart_toStartOf="@id/collection_title"
app:layout_constraintTop_toBottomOf="@id/collection_share_button"
app:layout_constraintEnd_toStartOf="@id/collection_share_button"
app:layout_constraintBottom_toBottomOf="parent"/>
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_share_button" />
<ImageButton
android:id="@+id/collection_share_button"
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_marginStart="16dp"
android:background="?android:attr/selectableItemBackgroundBorderless"
android:contentDescription="@string/tab_menu"
android:src="@drawable/ic_hollow_share"
android:layout_marginEnd="30dp"
app:layout_constraintEnd_toStartOf="@id/collection_overflow_button"
app:layout_constraintTop_toTopOf="@id/collection_icon"/>
android:id="@+id/collection_share_button"
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_marginStart="16dp"
android:layout_marginEnd="30dp"
android:background="?android:attr/selectableItemBackgroundBorderless"
android:contentDescription="@string/tab_menu"
android:src="@drawable/ic_hollow_share"
app:layout_constraintEnd_toStartOf="@id/collection_overflow_button"
app:layout_constraintTop_toTopOf="@id/collection_icon" />
<ImageButton
android:id="@+id/collection_overflow_button"
android:layout_width="24dp"
android:layout_height="24dp"
android:background="?android:attr/selectableItemBackgroundBorderless"
android:contentDescription="@string/tab_menu"
android:src="@drawable/ic_menu"
android:layout_marginEnd="4.5dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="@id/collection_icon"/>
android:id="@+id/collection_overflow_button"
android:layout_width="24dp"
android:layout_height="24dp"
android:layout_marginEnd="4.5dp"
android:background="?android:attr/selectableItemBackgroundBorderless"
android:contentDescription="@string/tab_menu"
android:src="@drawable/ic_menu"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</LinearLayout>