Skip to content

Commit 7573876

Browse files
LukasPaczosLukasPaczos
authored
add tab count to bottom nav bar (#5992)
Task/Issue URL: https://app.asana.com/1/137249556945/project/1208671518894266/task/1210044541037881?focus=true ### Description Adds the tab count to the bottom navigation bar's tabs icon. Also introduces a visual cue when there are any tabs that were opened in the background and not visited yet.
1 parent e021069 commit 7573876

File tree

6 files changed

+94
-29
lines changed

6 files changed

+94
-29
lines changed

‎app/src/main/java/com/duckduckgo/app/browser/navigation/bar/view/BrowserNavigationBarView.kt

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -192,6 +192,8 @@ class BrowserNavigationBarView @JvmOverloads constructor(
192192
binding.bookmarksButton.isVisible = viewState.bookmarksButtonVisible
193193
binding.fireButton.isVisible = viewState.fireButtonVisible
194194
binding.tabsButton.isVisible = viewState.tabsButtonVisible
195+
binding.tabsButton.count = viewState.tabsCount
196+
binding.tabsButton.hasUnread = viewState.hasUnreadTabs
195197

196198
renderFireButtonPulseAnimation(enabled = viewState.fireButtonHighlighted)
197199
}

‎app/src/main/java/com/duckduckgo/app/browser/navigation/bar/view/BrowserNavigationBarViewModel.kt

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,7 @@ class BrowserNavigationBarViewModel @Inject constructor(
6868
state.copy(
6969
isVisible = navigationBarState.isEnabled && !isCustomTab,
7070
tabsCount = tabs.size,
71-
shouldUpdateTabsCount = tabs.size != state.tabsCount && tabs.isNotEmpty(),
71+
hasUnreadTabs = tabs.firstOrNull { !it.viewed } != null,
7272
)
7373
}.flowOn(dispatcherProvider.io()).stateIn(viewModelScope, SharingStarted.WhileSubscribed(5000L), ViewState())
7474

@@ -160,6 +160,6 @@ class BrowserNavigationBarViewModel @Inject constructor(
160160
val fireButtonHighlighted: Boolean = false,
161161
val tabsButtonVisible: Boolean = true,
162162
val tabsCount: Int = 0,
163-
val shouldUpdateTabsCount: Boolean = false,
163+
val hasUnreadTabs: Boolean = false,
164164
)
165165
}

‎app/src/main/java/com/duckduckgo/app/browser/tabswitcher/ExperimentalTabSwitcherButton.kt

Lines changed: 25 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,10 @@ package com.duckduckgo.app.browser.tabswitcher
1919
import android.content.Context
2020
import android.util.AttributeSet
2121
import com.duckduckgo.app.browser.databinding.ViewExperimentalTabSwitcherButtonBinding
22+
import com.duckduckgo.common.ui.view.gone
23+
import com.duckduckgo.common.ui.view.show
2224
import com.duckduckgo.common.ui.viewbinding.viewBinding
25+
import com.duckduckgo.mobile.android.R as CommonR
2326

2427
class ExperimentalTabSwitcherButton @JvmOverloads constructor(
2528
context: Context,
@@ -29,10 +32,30 @@ class ExperimentalTabSwitcherButton @JvmOverloads constructor(
2932

3033
private val binding: ViewExperimentalTabSwitcherButtonBinding by viewBinding()
3134

35+
override var hasUnread: Boolean = false
36+
set(value) {
37+
if (field != value) {
38+
if (value) {
39+
binding.tabsImageView.setImageResource(CommonR.drawable.ic_tab_24_highlighted)
40+
} else {
41+
binding.tabsImageView.setImageResource(CommonR.drawable.ic_tab_24)
42+
}
43+
}
44+
field = value
45+
}
46+
3247
override var count = 0
3348
set(value) {
49+
if (field != value) {
50+
if (value < 100) {
51+
binding.tabCount.text = "$value"
52+
binding.tabCount.show()
53+
binding.tabCountInfinite.gone()
54+
} else {
55+
binding.tabCount.gone()
56+
binding.tabCountInfinite.show()
57+
}
58+
}
3459
field = value
35-
val text = if (count < 100) "$count" else "~"
36-
binding.tabCount.text = text
3760
}
3861
}

‎app/src/main/res/layout/view_browser_navigation_bar.xml

Lines changed: 2 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -118,21 +118,10 @@
118118
android:layout_height="match_parent"
119119
android:layout_weight="1" />
120120

121-
<FrameLayout
121+
<com.duckduckgo.app.browser.tabswitcher.ExperimentalTabSwitcherButton
122122
android:id="@+id/tabsButton"
123123
android:layout_width="@dimen/bottomNavIconContainer"
124-
android:layout_height="@dimen/bottomNavIconContainer"
125-
android:background="@drawable/selectable_item_experimental_background">
126-
127-
<ImageView
128-
android:id="@+id/tabsImageView"
129-
android:layout_width="@dimen/bottomNavIcon"
130-
android:layout_height="@dimen/bottomNavIcon"
131-
android:layout_gravity="center"
132-
android:contentDescription="@string/tabsMenuItem"
133-
android:scaleType="center"
134-
android:src="@drawable/ic_tab_24" />
135-
</FrameLayout>
124+
android:layout_height="@dimen/bottomNavIconContainer" />
136125

137126
<Space
138127
android:layout_width="0dp"

‎app/src/main/res/layout/view_experimental_tab_switcher_button.xml

Lines changed: 47 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -14,24 +14,59 @@
1414
~ limitations under the License.
1515
-->
1616

17-
<merge xmlns:android="http://schemas.android.com/apk/res/android"
17+
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
1818
xmlns:tools="http://schemas.android.com/tools"
19-
tools:parentTag="android.widget.RelativeLayout">
19+
android:id="@+id/tabsButton"
20+
android:layout_width="match_parent"
21+
android:layout_height="match_parent"
22+
android:background="@drawable/selectable_item_experimental_background"
23+
tools:layout_height="@dimen/bottomNavIconContainer"
24+
tools:layout_width="@dimen/bottomNavIconContainer">
2025

26+
<ImageView
27+
android:id="@+id/tabsImageView"
28+
android:layout_width="@dimen/bottomNavIcon"
29+
android:layout_height="@dimen/bottomNavIcon"
30+
android:layout_gravity="center"
31+
android:contentDescription="@string/tabsMenuItem"
32+
android:scaleType="center"
33+
android:src="@drawable/ic_tab_24" />
34+
35+
<!--
36+
Below TextViews aren't a DaxTextView, special case for the Tabs icon.
37+
They also uses DP instead of SP, because the background icon can't resize to accommodate
38+
different font sizes.
39+
The "∞" character is separated into its own view because the horizontal center-line
40+
of that character is at a different height than numbers' horizontal center-line.
41+
-->
2142

22-
<!-- This TextView doesn't migrate to DaxTextView, special case for the Tabs icon -->
2343
<TextView
24-
tools:ignore="DeprecatedWidgetInXml"
2544
android:id="@+id/tabCount"
26-
android:layout_width="@dimen/bottomNavIcon"
27-
android:layout_height="@dimen/bottomNavIcon"
45+
android:layout_width="24dp"
46+
android:layout_height="24dp"
47+
android:layout_marginStart="11.75dp"
48+
android:layout_marginTop="7.5dp"
49+
android:fontFamily="sans-serif-condensed"
50+
android:gravity="center"
2851
android:textColor="?attr/daxColorPrimaryIcon"
29-
android:textSize="11sp"
52+
android:textSize="9dp"
53+
android:textStyle="bold"
54+
tools:ignore="DeprecatedWidgetInXml,SpUsage"
55+
tools:text="99" />
56+
57+
<TextView
58+
android:id="@+id/tabCountInfinite"
59+
android:layout_width="24dp"
60+
android:layout_height="24dp"
61+
android:layout_marginStart="11.75dp"
62+
android:layout_marginTop="6.5dp"
3063
android:fontFamily="sans-serif-condensed"
3164
android:gravity="center"
32-
android:paddingBottom="3dp"
33-
android:paddingStart="3dp"
34-
android:background="@drawable/ic_tab_24"
35-
tools:text="66" />
65+
android:text="∞"
66+
android:textColor="?attr/daxColorPrimaryIcon"
67+
android:textSize="11dp"
68+
android:textStyle="bold"
69+
android:visibility="gone"
70+
tools:ignore="DeprecatedWidgetInXml,HardcodedText,SpUsage" />
3671

37-
</merge>
72+
</FrameLayout>

‎common/common-ui/src/main/res/drawable/ic_tab_24_highlighted.xml

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<!--TODO this icon needs to be aligned with all the other new icons-->
2+
<vector xmlns:android="http://schemas.android.com/apk/res/android"
3+
android:width="25dp"
4+
android:height="24dp"
5+
android:viewportWidth="25"
6+
android:viewportHeight="24">
7+
<path
8+
android:pathData="M21.492,8.473C21.906,8.473 22.242,8.808 22.242,9.223V13C22.242,15.761 20.004,18 17.242,18H11.242C8.481,18 6.242,15.761 6.242,13V7C6.242,4.239 8.481,2 11.242,2H15.02C15.434,2 15.77,2.336 15.77,2.75C15.77,3.164 15.434,3.5 15.02,3.5H11.242C9.309,3.5 7.742,5.067 7.742,7V13C7.742,14.933 9.309,16.5 11.242,16.5H17.242C19.175,16.5 20.742,14.933 20.742,13V9.223C20.742,8.808 21.078,8.473 21.492,8.473Z"
9+
android:fillColor="?daxColorPrimaryIcon" />
10+
<path
11+
android:pathData="M4.742,7.569C4.742,6.958 4.119,6.555 3.653,6.951C2.79,7.684 2.242,8.778 2.242,10V15C2.242,18.866 5.376,22 9.242,22H14.242C15.464,22 16.557,21.452 17.291,20.589C17.687,20.123 17.284,19.5 16.673,19.5C16.402,19.5 16.153,19.635 15.955,19.821C15.508,20.242 14.905,20.5 14.242,20.5H9.242C6.205,20.5 3.742,18.037 3.742,15V10C3.742,9.337 4,8.734 4.422,8.286C4.608,8.089 4.742,7.84 4.742,7.569Z"
12+
android:fillColor="?daxColorPrimaryIcon" />
13+
<path
14+
android:pathData="M23.242,4C23.242,5.657 21.899,7 20.242,7C18.585,7 17.242,5.657 17.242,4C17.242,2.343 18.585,1 20.242,1C21.899,1 23.242,2.343 23.242,4Z"
15+
android:fillColor="?daxColorAccentBlue" />
16+
</vector>

0 commit comments

Comments
 (0)