From af0af7f88a4f29d08eadeca915a86e989b3f292b Mon Sep 17 00:00:00 2001 From: Gabriel Luong Date: Tue, 6 Oct 2020 13:07:30 -0400 Subject: [PATCH] For #15115 - Part 7: Draw a border around the selected tab --- .../fenix/tabtray/TabTrayGridItemDecorator.kt | 62 +++++++++++++++++++ .../org/mozilla/fenix/tabtray/TabTrayView.kt | 3 + 2 files changed, 65 insertions(+) create mode 100644 app/src/main/java/org/mozilla/fenix/tabtray/TabTrayGridItemDecorator.kt diff --git a/app/src/main/java/org/mozilla/fenix/tabtray/TabTrayGridItemDecorator.kt b/app/src/main/java/org/mozilla/fenix/tabtray/TabTrayGridItemDecorator.kt new file mode 100644 index 000000000..c0db0fa25 --- /dev/null +++ b/app/src/main/java/org/mozilla/fenix/tabtray/TabTrayGridItemDecorator.kt @@ -0,0 +1,62 @@ +/* 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/. */ + +package org.mozilla.fenix.tabtray + +import android.content.Context +import android.graphics.Canvas +import android.graphics.Paint +import android.graphics.RectF +import android.view.View +import androidx.core.content.ContextCompat +import androidx.recyclerview.widget.RecyclerView +import org.mozilla.fenix.R +import org.mozilla.fenix.ext.components + +/** + * An item decorator for the tab tray grid tabs. Draws a border for the selected tab. + */ +class TabTrayGridItemDecorator(context: Context) : + RecyclerView.ItemDecoration() { + + override fun onDrawOver(canvas: Canvas, recyclerView: RecyclerView, state: RecyclerView.State) { + for (i in 0 until recyclerView.childCount) { + val child = recyclerView.getChildAt(i) + val viewHolder = recyclerView.getChildViewHolder(child) + if (viewHolder !is TabTrayViewHolder) { + continue + } + + if (viewHolder.tab?.id == recyclerView.context.components.core.store.state.selectedTabId) { + drawSelectedTabBorder(child, canvas) + } + } + + super.onDrawOver(canvas, recyclerView, state) + } + + private fun drawSelectedTabBorder(child: View, canvas: Canvas) { + val borderRadius = + child.resources.getDimensionPixelSize(R.dimen.tab_tray_grid_item_border_radius) + .toFloat() + canvas.drawRoundRect(child.getBounds(), borderRadius, borderRadius, borderStroke) + } + + private val borderStroke: Paint = Paint().apply { + color = ContextCompat.getColor(context, R.color.photonViolet50) + isAntiAlias = true + strokeWidth = + context.resources.getDimensionPixelSize(R.dimen.tab_tray_grid_item_selected_border_width) + .toFloat() + style = Paint.Style.STROKE + } + + private fun View.getBounds(): RectF { + val leftPosition = left + translationX - paddingLeft + val rightPosition = right + translationX + paddingRight + val topPosition = top + translationY - paddingTop + val bottomPosition = bottom + translationY + paddingBottom + return RectF(leftPosition, topPosition, rightPosition, bottomPosition) + } +} diff --git a/app/src/main/java/org/mozilla/fenix/tabtray/TabTrayView.kt b/app/src/main/java/org/mozilla/fenix/tabtray/TabTrayView.kt index 88d372d99..6d7f135e5 100644 --- a/app/src/main/java/org/mozilla/fenix/tabtray/TabTrayView.kt +++ b/app/src/main/java/org/mozilla/fenix/tabtray/TabTrayView.kt @@ -335,6 +335,8 @@ class TabTrayView( updateUINormalMode(view.context.components.core.store.state) scrollToTab(view.context.components.core.store.state.selectedTabId) + view.tabsTray.invalidateItemDecorations() + if (isPrivateModeSelected) { components.analytics.metrics.track(Event.TabsTrayPrivateModeTapped) } else { @@ -373,6 +375,7 @@ class TabTrayView( } layoutManager = gridLayoutManager + addItemDecoration(TabTrayGridItemDecorator(container.context)) } }