commit 748ce54e75c44e440e9619c85713b4b774c27d2a
parent 7f5dfaee90fce960bcc43fe3f8525770048ed156
Author: Moyin <madeyemi@mozilla.com>
Date: Fri, 12 Dec 2025 17:17:50 +0000
Bug 1997339- Update the size and position of the dot highlight indicator of the menu button shown in the toolbar r=android-reviewers,petru
Differential Revision: https://phabricator.services.mozilla.com/D275749
Diffstat:
2 files changed, 7 insertions(+), 89 deletions(-)
diff --git a/mobile/android/android-components/components/compose/browser-toolbar/src/main/java/mozilla/components/compose/browser/toolbar/ui/ActionButton.kt b/mobile/android/android-components/components/compose/browser-toolbar/src/main/java/mozilla/components/compose/browser/toolbar/ui/ActionButton.kt
@@ -6,8 +6,6 @@ package mozilla.components.compose.browser.toolbar.ui
import android.graphics.drawable.Drawable
import androidx.appcompat.content.res.AppCompatResources
-import androidx.compose.foundation.Image
-import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Row
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
@@ -16,14 +14,11 @@ import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
-import androidx.compose.ui.Alignment
-import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.graphics.ColorFilter
-import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.tooling.preview.PreviewLightDark
import com.google.accompanist.drawablepainter.rememberDrawablePainter
+import mozilla.components.compose.base.badge.BadgedIcon
import mozilla.components.compose.base.button.IconButton
import mozilla.components.compose.base.button.LongPressIconButton
import mozilla.components.compose.base.menu.CustomPlacementPopup
@@ -56,7 +51,6 @@ internal fun ActionButton(
icon: Drawable,
contentDescription: String,
state: State = State.DEFAULT,
- shouldTint: Boolean = true,
highlighted: Boolean = false,
onClick: BrowserToolbarInteraction? = null,
onLongClick: BrowserToolbarInteraction? = null,
@@ -116,14 +110,7 @@ internal fun ActionButton(
enabled = isEnabled,
contentDescription = contentDescription,
) {
- Box {
- ActionButtonIcon(icon, tint, shouldTint)
- if (highlighted) {
- DotHighlight(
- modifier = Modifier.align(Alignment.BottomEnd),
- )
- }
- }
+ ActionButtonIcon(icon, tint, highlighted)
ActionButtonMenu(
currentMenuState = currentMenuState,
@@ -143,14 +130,7 @@ internal fun ActionButton(
enabled = isEnabled,
contentDescription = contentDescription,
) {
- Box {
- ActionButtonIcon(icon, tint, shouldTint)
- if (highlighted) {
- DotHighlight(
- modifier = Modifier.align(Alignment.BottomEnd),
- )
- }
- }
+ ActionButtonIcon(icon, tint, highlighted)
ActionButtonMenu(
currentMenuState = currentMenuState,
@@ -167,16 +147,12 @@ internal fun ActionButton(
private fun ActionButtonIcon(
icon: Drawable,
tint: Color,
- shouldTint: Boolean,
+ isHighlighted: Boolean,
) {
- Image(
+ BadgedIcon(
painter = rememberDrawablePainter(icon),
- contentDescription = null,
- contentScale = ContentScale.Crop,
- colorFilter = when (shouldTint) {
- true -> ColorFilter.tint(tint)
- else -> null
- },
+ isHighlighted = isHighlighted,
+ tint = tint,
)
}
diff --git a/mobile/android/android-components/components/compose/browser-toolbar/src/main/java/mozilla/components/compose/browser/toolbar/ui/DotHighlight.kt b/mobile/android/android-components/components/compose/browser-toolbar/src/main/java/mozilla/components/compose/browser/toolbar/ui/DotHighlight.kt
@@ -1,58 +0,0 @@
-/* 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 mozilla.components.compose.browser.toolbar.ui
-
-import androidx.compose.foundation.Canvas
-import androidx.compose.foundation.background
-import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.size
-import androidx.compose.material3.Icon
-import androidx.compose.material3.MaterialTheme
-import androidx.compose.runtime.Composable
-import androidx.compose.ui.Alignment
-import androidx.compose.ui.Modifier
-import androidx.compose.ui.geometry.Offset
-import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.res.painterResource
-import androidx.compose.ui.tooling.preview.PreviewLightDark
-import androidx.compose.ui.unit.dp
-import mozilla.components.compose.base.theme.AcornTheme
-import mozilla.components.compose.base.theme.information
-import mozilla.components.ui.icons.R as iconsR
-
-@Composable
-internal fun DotHighlight(
- modifier: Modifier = Modifier,
- color: Color = MaterialTheme.colorScheme.information,
-) {
- Canvas(modifier = modifier.size(10.dp)) {
- val canvasWidth = size.width
- val canvasHeight = size.height
-
- drawCircle(
- color = color,
- center = Offset(x = canvasWidth / 2, y = canvasHeight / 2),
- radius = canvasWidth / 2,
- )
- }
-}
-
-@PreviewLightDark
-@Composable
-private fun HighlightedActionButtonPreview() {
- AcornTheme {
- Box(modifier = Modifier.background(MaterialTheme.colorScheme.surface)) {
- Icon(
- painter = painterResource(id = iconsR.drawable.mozac_ic_ellipsis_vertical_24),
- contentDescription = null,
- modifier = Modifier.size(32.dp),
- tint = MaterialTheme.colorScheme.onSurface,
- )
- DotHighlight(
- modifier = Modifier.align(Alignment.TopEnd),
- )
- }
- }
-}
