* For https://github.com/mozilla-mobile/fenix/issues/2205: Modifies styling of collections and tabs

* Change bounding box
pull/600/head
Sawyer Blatz 5 years ago committed by GitHub
parent 70422d63e5
commit 7b6c9b94b1

@ -21,7 +21,6 @@ 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.home.sessioncontrol.CollectionAction import org.mozilla.fenix.home.sessioncontrol.CollectionAction
import org.mozilla.fenix.home.sessioncontrol.SessionControlAction import org.mozilla.fenix.home.sessioncontrol.SessionControlAction
import org.mozilla.fenix.home.sessioncontrol.TabCollection import org.mozilla.fenix.home.sessioncontrol.TabCollection
@ -55,7 +54,6 @@ class CollectionViewHolder(
} }
collection_overflow_button.run { collection_overflow_button.run {
increaseTapArea(buttonIncreaseDps)
setOnClickListener { setOnClickListener {
collectionMenu.menuBuilder collectionMenu.menuBuilder
.build(view.context) .build(view.context)
@ -64,7 +62,6 @@ class CollectionViewHolder(
} }
collection_share_button.run { collection_share_button.run {
increaseTapArea(buttonIncreaseDps)
setOnClickListener { setOnClickListener {
actionEmitter.onNext(CollectionAction.ShareTabs(collection)) actionEmitter.onNext(CollectionAction.ShareTabs(collection))
} }
@ -166,7 +163,6 @@ class CollectionViewHolder(
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
const val maxTitleLength = 20 const val maxTitleLength = 20
const val buttonIncreaseDps = 24
} }
enum class CollectionState { enum class CollectionState {

@ -13,7 +13,6 @@ import mozilla.components.browser.menu.BrowserMenu
import mozilla.components.browser.menu.BrowserMenuBuilder import mozilla.components.browser.menu.BrowserMenuBuilder
import mozilla.components.browser.menu.item.SimpleBrowserMenuItem import mozilla.components.browser.menu.item.SimpleBrowserMenuItem
import org.mozilla.fenix.R import org.mozilla.fenix.R
import org.mozilla.fenix.ext.increaseTapArea
import org.mozilla.fenix.home.sessioncontrol.SessionControlAction import org.mozilla.fenix.home.sessioncontrol.SessionControlAction
import org.mozilla.fenix.home.sessioncontrol.TabAction import org.mozilla.fenix.home.sessioncontrol.TabAction
import org.mozilla.fenix.home.sessioncontrol.onNext import org.mozilla.fenix.home.sessioncontrol.onNext
@ -42,13 +41,13 @@ class TabHeaderViewHolder(
if (isPrivate) R.string.tabs_header_private_title else R.string.tab_header_label if (isPrivate) R.string.tabs_header_private_title else R.string.tab_header_label
header_text.text = context.getString(headerTextResourceId) header_text.text = context.getString(headerTextResourceId)
add_tab_button.increaseTapArea(addTabButtonIncreaseDps) add_tab_button.run {
add_tab_button.setOnClickListener { setOnClickListener {
actionEmitter.onNext(TabAction.Add) actionEmitter.onNext(TabAction.Add)
}
} }
tabs_overflow_button.run { tabs_overflow_button.run {
increaseTapArea(overflowButtonIncreaseDps)
setOnClickListener { setOnClickListener {
tabsMenu.menuBuilder tabsMenu.menuBuilder
.build(view.context) .build(view.context)
@ -93,8 +92,5 @@ class TabHeaderViewHolder(
companion object { companion object {
const val LAYOUT_ID = R.layout.tab_header const val LAYOUT_ID = R.layout.tab_header
const val addTabButtonIncreaseDps = 8
const val overflowButtonIncreaseDps = 8
} }
} }

@ -22,6 +22,7 @@ import org.jetbrains.anko.backgroundColor
import org.mozilla.fenix.R import org.mozilla.fenix.R
import org.mozilla.fenix.ext.components import org.mozilla.fenix.ext.components
import org.mozilla.fenix.ext.getColorFromAttr import org.mozilla.fenix.ext.getColorFromAttr
import org.mozilla.fenix.ext.increaseTapArea
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
import org.mozilla.fenix.home.sessioncontrol.Tab import org.mozilla.fenix.home.sessioncontrol.Tab
@ -46,6 +47,7 @@ class TabInCollectionViewHolder(
var isLastTab = false var isLastTab = false
init { init {
collection_tab_icon.clipToOutline = true collection_tab_icon.clipToOutline = true
collection_tab_icon.outlineProvider = object : ViewOutlineProvider() { collection_tab_icon.outlineProvider = object : ViewOutlineProvider() {
override fun getOutline(view: View?, outline: Outline?) { override fun getOutline(view: View?, outline: Outline?) {
@ -59,6 +61,7 @@ class TabInCollectionViewHolder(
} }
} }
collection_tab_close_button.increaseTapArea(buttonIncreaseDps)
collection_tab_close_button.setOnClickListener { collection_tab_close_button.setOnClickListener {
actionEmitter.onNext(CollectionAction.RemoveTab(collection, tab)) actionEmitter.onNext(CollectionAction.RemoveTab(collection, tab))
} }
@ -93,6 +96,7 @@ class TabInCollectionViewHolder(
} }
companion object { companion object {
const val buttonIncreaseDps = 12
const val LAYOUT_ID = R.layout.tab_in_collection const val LAYOUT_ID = R.layout.tab_in_collection
} }
} }

@ -50,6 +50,8 @@ class TabViewHolder(
actionEmitter.onNext(TabAction.Share(tab?.sessionId!!)) actionEmitter.onNext(TabAction.Share(tab?.sessionId!!))
} }
} }
close_tab_button.increaseTapArea(buttonIncreaseDps)
item_tab.setOnClickListener { item_tab.setOnClickListener {
actionEmitter.onNext(TabAction.Select(tab?.sessionId!!)) actionEmitter.onNext(TabAction.Select(tab?.sessionId!!))
} }
@ -78,15 +80,6 @@ class TabViewHolder(
) )
} }
} }
tab_overflow_button.run {
increaseTapArea(buttonIncreaseDps)
setOnClickListener {
tabMenu.menuBuilder
.build(view.context)
.show(anchor = it)
}
}
} }
fun bindSession(tab: Tab) { fun bindSession(tab: Tab) {

@ -7,6 +7,7 @@
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_marginTop="5dp"
android:layout_marginBottom="15.5dp"
android:layout_width="match_parent" android:layout_width="match_parent"
android:layout_height="wrap_content"> android:layout_height="wrap_content">
@ -27,6 +28,7 @@
android:text="@string/collections_header" android:text="@string/collections_header"
android:textAppearance="@style/HeaderTextStyle" android:textAppearance="@style/HeaderTextStyle"
android:layout_marginTop="15dp" android:layout_marginTop="15dp"
android:layout_marginStart="4.5dp"
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" />

@ -25,7 +25,7 @@
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_marginTop="16dp"
android:layout_marginStart="18dp" android:layout_marginStart="16dp"
android:tint="@null" android:tint="@null"
android:src="@drawable/ic_archive" android:src="@drawable/ic_archive"
app:layout_constraintStart_toStartOf="parent" app:layout_constraintStart_toStartOf="parent"
@ -36,7 +36,7 @@
android:layout_width="0dp" android:layout_width="0dp"
android:layout_height="wrap_content" android:layout_height="wrap_content"
android:layout_marginTop="17dp" android:layout_marginTop="17dp"
android:layout_marginStart="14dp" android:layout_marginStart="12dp"
android:ellipsize="end" android:ellipsize="end"
android:maxLines="1" android:maxLines="1"
android:minLines="1" android:minLines="1"
@ -72,23 +72,23 @@
<ImageButton <ImageButton
android:id="@+id/collection_share_button" android:id="@+id/collection_share_button"
android:layout_width="wrap_content" android:layout_width="20dp"
android:layout_height="wrap_content" android:layout_height="20dp"
android:background="?android:attr/selectableItemBackgroundBorderless" android:background="?android:attr/selectableItemBackgroundBorderless"
android:contentDescription="@string/tab_menu" android:contentDescription="@string/tab_menu"
android:src="@drawable/ic_hollow_share" android:src="@drawable/ic_hollow_share"
android:layout_marginEnd="29dp" android:layout_marginEnd="30dp"
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="wrap_content" android:layout_width="24dp"
android:layout_height="wrap_content" android:layout_height="24dp"
android:background="?android:attr/selectableItemBackgroundBorderless" android:background="?android:attr/selectableItemBackgroundBorderless"
android:contentDescription="@string/tab_menu" android:contentDescription="@string/tab_menu"
android:src="@drawable/ic_menu" android:src="@drawable/ic_menu"
android:layout_marginEnd="8dp" android:layout_marginEnd="4.5dp"
app:layout_constraintEnd_toEndOf="parent" app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="@id/collection_icon"/> app:layout_constraintTop_toTopOf="@id/collection_icon"/>
</androidx.constraintlayout.widget.ConstraintLayout> </androidx.constraintlayout.widget.ConstraintLayout>

@ -6,7 +6,7 @@
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/tabs_header" android:id="@+id/tabs_header"
android:layout_marginBottom="12dp" android:layout_marginBottom="15.5dp"
android:layout_width="match_parent" android:layout_width="match_parent"
android:layout_height="wrap_content"> android:layout_height="wrap_content">
@ -14,6 +14,7 @@
android:id="@+id/header_text" android:id="@+id/header_text"
android:layout_width="match_parent" android:layout_width="match_parent"
android:layout_height="wrap_content" android:layout_height="wrap_content"
android:layout_marginStart="4.5dp"
android:text="@string/tab_header_label" android:text="@string/tab_header_label"
android:textAppearance="@style/HeaderTextStyle" android:textAppearance="@style/HeaderTextStyle"
app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintBottom_toBottomOf="parent"
@ -22,8 +23,9 @@
<ImageButton <ImageButton
android:id="@+id/add_tab_button" android:id="@+id/add_tab_button"
android:layout_width="@dimen/glyph_button_width" android:layout_width="20dp"
android:layout_height="@dimen/glyph_button_height" android:layout_height="20dp"
android:layout_marginEnd="30dp"
android:background="?android:attr/selectableItemBackgroundBorderless" android:background="?android:attr/selectableItemBackgroundBorderless"
android:contentDescription="@string/add_tab" android:contentDescription="@string/add_tab"
android:src="@drawable/ic_new" android:src="@drawable/ic_new"
@ -33,8 +35,9 @@
<ImageButton <ImageButton
android:id="@+id/tabs_overflow_button" android:id="@+id/tabs_overflow_button"
android:layout_width="@dimen/glyph_button_width" android:layout_width="24dp"
android:layout_height="@dimen/glyph_button_height" android:layout_height="24dp"
android:layout_marginEnd="4.5dp"
android:background="?android:attr/selectableItemBackgroundBorderless" android:background="?android:attr/selectableItemBackgroundBorderless"
android:contentDescription="@string/open_tabs_menu" android:contentDescription="@string/open_tabs_menu"
android:src="@drawable/ic_menu" android:src="@drawable/ic_menu"

@ -23,8 +23,9 @@
android:id="@+id/collection_tab_icon" android:id="@+id/collection_tab_icon"
android:layout_width="24dp" android:layout_width="24dp"
android:layout_height="24dp" android:layout_height="24dp"
android:layout_marginTop="25dp" android:layout_marginTop="23dp"
android:layout_marginStart="18dp" android:layout_marginBottom="24dp"
android:layout_marginStart="16dp"
android:tint="@null" android:tint="@null"
android:src="@drawable/ic_archive" android:src="@drawable/ic_archive"
app:layout_constraintStart_toStartOf="parent" app:layout_constraintStart_toStartOf="parent"
@ -61,13 +62,13 @@
<ImageButton <ImageButton
android:id="@+id/collection_tab_close_button" android:id="@+id/collection_tab_close_button"
android:layout_width="wrap_content" android:layout_width="8dp"
android:layout_height="wrap_content" android:layout_height="8dp"
android:background="?android:attr/selectableItemBackgroundBorderless" android:background="?android:attr/selectableItemBackgroundBorderless"
android:contentDescription="@string/close_tab" android:contentDescription="@string/close_tab"
android:src="@drawable/ic_close" android:src="@drawable/ic_close"
android:layout_marginTop="8dp" android:layout_marginTop="13dp"
android:layout_marginEnd="8dp" android:layout_marginEnd="13dp"
android:alpha="0.8" android:alpha="0.8"
app:layout_constraintEnd_toEndOf="parent" app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"/> app:layout_constraintTop_toTopOf="parent"/>

@ -49,7 +49,6 @@
android:id="@+id/tab_title" android:id="@+id/tab_title"
android:layout_width="0dp" android:layout_width="0dp"
android:layout_height="wrap_content" android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:layout_marginStart="8dp" android:layout_marginStart="8dp"
android:layout_marginBottom="8dp" android:layout_marginBottom="8dp"
android:ellipsize="end" android:ellipsize="end"
@ -62,29 +61,18 @@
app:layout_constraintTop_toBottomOf="@id/hostname" app:layout_constraintTop_toBottomOf="@id/hostname"
app:layout_constraintBottom_toBottomOf="parent"/> app:layout_constraintBottom_toBottomOf="parent"/>
<ImageView <ImageButton
android:id="@+id/close_tab_button" android:id="@+id/close_tab_button"
android:layout_width="wrap_content" android:layout_width="8dp"
android:layout_height="wrap_content" android:layout_height="8dp"
android:layout_margin="8dp" android:layout_margin="13dp"
android:alpha="0.8"
android:contentDescription="@string/close_tab" android:contentDescription="@string/close_tab"
android:src="@drawable/ic_close" android:src="@drawable/ic_close"
android:background="?android:attr/selectableItemBackgroundBorderless" android:background="?android:attr/selectableItemBackgroundBorderless"
app:layout_constraintEnd_toEndOf="parent" app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" /> app:layout_constraintTop_toTopOf="parent" />
<ImageButton
android:id="@+id/tab_overflow_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="?android:attr/selectableItemBackgroundBorderless"
android:contentDescription="@string/tab_menu"
android:src="@drawable/ic_menu"
android:layout_margin="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="@id/close_tab_button"
app:layout_constraintBottom_toBottomOf="parent"/>
<View <View
android:id="@+id/selected_border" android:id="@+id/selected_border"
android:layout_width="0dp" android:layout_width="0dp"

Loading…
Cancel
Save