Dropdown support for leading icons (#269)

* Update dropdown item with icons and keybindings * Fix minor issues (typos, formatting) * Make the CI pass The API check works locally, but not on the CI. Not sure why. * api dump * Run apiDump on Linux, because. --------- Co-authored-by: Sebastiano Poggi <[email protected]> Co-authored-by: Sebastiano Poggi <[email protected]>
JetBrains · Dec 14, 2023 · effad57 · effad57
1 parent 8d3bd9e
commit effad57
Show file tree

Hide file tree

Showing 11 changed files with 290 additions and 55 deletions.
diff --git a/foundation/src/main/kotlin/org/jetbrains/jewel/foundation/lazy/SelectableLazyColumn.kt b/foundation/src/main/kotlin/org/jetbrains/jewel/foundation/lazy/SelectableLazyColumn.kt
@@ -211,7 +211,7 @@ private fun Modifier.selectable(
                         requester?.requestFocus()
                         actionHandler.handlePointerEventPress(
                             pointerEvent = event,
-                            keyBindings = keybindings,
+                            keybindings = keybindings,
                             selectableLazyListState = selectableState,
                             selectionMode = selectionMode,
                             allKeys = allKeys,

diff --git a/foundation/src/main/kotlin/org/jetbrains/jewel/foundation/lazy/tree/KeyActions.kt b/foundation/src/main/kotlin/org/jetbrains/jewel/foundation/lazy/tree/KeyActions.kt
@@ -35,7 +35,7 @@ public interface PointerEventActions {
 
     public fun handlePointerEventPress(
         pointerEvent: PointerEvent,
-        keyBindings: SelectableColumnKeybindings,
+        keybindings: SelectableColumnKeybindings,
         selectableLazyListState: SelectableLazyListState,
         selectionMode: SelectionMode,
         allKeys: List<SelectableLazyListKey>,
@@ -61,13 +61,13 @@ public open class DefaultSelectableLazyColumnEventAction : PointerEventActions {
 
     override fun handlePointerEventPress(
         pointerEvent: PointerEvent,
-        keyBindings: SelectableColumnKeybindings,
+        keybindings: SelectableColumnKeybindings,
         selectableLazyListState: SelectableLazyListState,
         selectionMode: SelectionMode,
         allKeys: List<SelectableLazyListKey>,
         key: Any,
     ) {
-        with(keyBindings) {
+        with(keybindings) {
             when {
                 pointerEvent.keyboardModifiers.isContiguousSelectionKeyPressed &&
                     pointerEvent.keyboardModifiers.isCtrlPressed -> {
@@ -151,13 +151,13 @@ public class DefaultTreeViewPointerEventAction(
 
     override fun handlePointerEventPress(
         pointerEvent: PointerEvent,
-        keyBindings: SelectableColumnKeybindings,
+        keybindings: SelectableColumnKeybindings,
         selectableLazyListState: SelectableLazyListState,
         selectionMode: SelectionMode,
         allKeys: List<SelectableLazyListKey>,
         key: Any,
     ) {
-        with(keyBindings) {
+        with(keybindings) {
             when {
                 pointerEvent.keyboardModifiers.isContiguousSelectionKeyPressed &&
                     pointerEvent.keyboardModifiers.isCtrlPressed -> {

diff --git a/ide-laf-bridge/src/main/kotlin/org/jetbrains/jewel/bridge/theme/IntUiBridge.kt b/ide-laf-bridge/src/main/kotlin/org/jetbrains/jewel/bridge/theme/IntUiBridge.kt
@@ -533,6 +533,8 @@ private fun readLinkStyle(
 private fun readMenuStyle(): MenuStyle {
     val backgroundSelected = retrieveColorOrUnspecified("MenuItem.selectionBackground")
     val foregroundSelected = retrieveColorOrUnspecified("MenuItem.selectionForeground")
+    val keybindingTint = retrieveColorOrUnspecified("MenuItem.acceleratorForeground")
+    val keybindingTintSelected = Color.Unspecified
 
     val colors = MenuColors(
         background = retrieveColorOrUnspecified("PopupMenu.background"),
@@ -555,6 +557,11 @@ private fun readMenuStyle(): MenuStyle {
             iconTintFocused = Color.Unspecified,
             iconTintPressed = Color.Unspecified,
             iconTintHovered = Color.Unspecified,
+            keybindingTint = keybindingTint,
+            keybindingTintDisabled = keybindingTint,
+            keybindingTintFocused = keybindingTintSelected,
+            keybindingTintPressed = keybindingTintSelected,
+            keybindingTintHovered = keybindingTintSelected,
             separator = retrieveColorOrUnspecified("Menu.separatorColor"),
         ),
     )
@@ -573,6 +580,7 @@ private fun readMenuStyle(): MenuStyle {
                 selectionCornerSize = CornerSize(JBUI.CurrentTheme.PopupMenu.Selection.ARC.dp),
                 outerPadding = PaddingValues(horizontal = 6.dp),
                 contentPadding = PaddingValues(horizontal = 10.dp, vertical = 4.dp),
+                keybindingsPadding = PaddingValues(start = 36.dp),
                 separatorPadding = PaddingValues(
                     horizontal = retrieveIntAsDpOrUnspecified("PopupMenuSeparator.withToEdge")
                         .takeOrElse { 0.dp },
@@ -581,6 +589,7 @@ private fun readMenuStyle(): MenuStyle {
                 ),
                 separatorThickness = retrieveIntAsDpOrUnspecified("PopupMenuSeparator.stripeWidth")
                     .takeOrElse { 0.dp },
+                iconSize = 16.dp,
             ),
             submenuMetrics = SubmenuMetrics(offset = DpOffset(0.dp, (-8).dp)),
         ),

diff --git a/int-ui/int-ui-standalone/api/int-ui-standalone.api b/int-ui/int-ui-standalone/api/int-ui-standalone.api
@@ -203,19 +203,19 @@ public final class org/jetbrains/jewel/intui/standalone/styling/IntUiLinkStyling
 
 public final class org/jetbrains/jewel/intui/standalone/styling/IntUiMenuStylingKt {
 	public static final fun dark (Lorg/jetbrains/jewel/ui/component/styling/MenuStyle$Companion;Lorg/jetbrains/jewel/ui/component/styling/MenuColors;Lorg/jetbrains/jewel/ui/component/styling/MenuMetrics;Lorg/jetbrains/jewel/ui/component/styling/MenuIcons;Landroidx/compose/runtime/Composer;II)Lorg/jetbrains/jewel/ui/component/styling/MenuStyle;
-	public static final fun dark-B6VqUn8 (Lorg/jetbrains/jewel/ui/component/styling/MenuItemColors$Companion;JJJJJJJJJJJJJJJJLandroidx/compose/runtime/Composer;III)Lorg/jetbrains/jewel/ui/component/styling/MenuItemColors;
 	public static final fun dark-Jy8F4Js (Lorg/jetbrains/jewel/ui/component/styling/MenuColors$Companion;JJJLorg/jetbrains/jewel/ui/component/styling/MenuItemColors;Landroidx/compose/runtime/Composer;II)Lorg/jetbrains/jewel/ui/component/styling/MenuColors;
+	public static final fun dark-a3tHFA8 (Lorg/jetbrains/jewel/ui/component/styling/MenuItemColors$Companion;JJJJJJJJJJJJJJJJJJJJJLandroidx/compose/runtime/Composer;IIII)Lorg/jetbrains/jewel/ui/component/styling/MenuItemColors;
 	public static final fun defaults (Lorg/jetbrains/jewel/ui/component/styling/MenuIcons$Companion;Lorg/jetbrains/jewel/ui/painter/PainterProvider;)Lorg/jetbrains/jewel/ui/component/styling/MenuIcons;
 	public static synthetic fun defaults$default (Lorg/jetbrains/jewel/ui/component/styling/MenuIcons$Companion;Lorg/jetbrains/jewel/ui/painter/PainterProvider;ILjava/lang/Object;)Lorg/jetbrains/jewel/ui/component/styling/MenuIcons;
+	public static final fun defaults-AWlRVLg (Lorg/jetbrains/jewel/ui/component/styling/MenuItemMetrics$Companion;Landroidx/compose/foundation/shape/CornerSize;Landroidx/compose/foundation/layout/PaddingValues;Landroidx/compose/foundation/layout/PaddingValues;Landroidx/compose/foundation/layout/PaddingValues;Landroidx/compose/foundation/layout/PaddingValues;FF)Lorg/jetbrains/jewel/ui/component/styling/MenuItemMetrics;
+	public static synthetic fun defaults-AWlRVLg$default (Lorg/jetbrains/jewel/ui/component/styling/MenuItemMetrics$Companion;Landroidx/compose/foundation/shape/CornerSize;Landroidx/compose/foundation/layout/PaddingValues;Landroidx/compose/foundation/layout/PaddingValues;Landroidx/compose/foundation/layout/PaddingValues;Landroidx/compose/foundation/layout/PaddingValues;FFILjava/lang/Object;)Lorg/jetbrains/jewel/ui/component/styling/MenuItemMetrics;
 	public static final fun defaults-BkVx2pU (Lorg/jetbrains/jewel/ui/component/styling/SubmenuMetrics$Companion;J)Lorg/jetbrains/jewel/ui/component/styling/SubmenuMetrics;
 	public static synthetic fun defaults-BkVx2pU$default (Lorg/jetbrains/jewel/ui/component/styling/SubmenuMetrics$Companion;JILjava/lang/Object;)Lorg/jetbrains/jewel/ui/component/styling/SubmenuMetrics;
-	public static final fun defaults-JTrpX9M (Lorg/jetbrains/jewel/ui/component/styling/MenuItemMetrics$Companion;Landroidx/compose/foundation/shape/CornerSize;Landroidx/compose/foundation/layout/PaddingValues;Landroidx/compose/foundation/layout/PaddingValues;Landroidx/compose/foundation/layout/PaddingValues;F)Lorg/jetbrains/jewel/ui/component/styling/MenuItemMetrics;
-	public static synthetic fun defaults-JTrpX9M$default (Lorg/jetbrains/jewel/ui/component/styling/MenuItemMetrics$Companion;Landroidx/compose/foundation/shape/CornerSize;Landroidx/compose/foundation/layout/PaddingValues;Landroidx/compose/foundation/layout/PaddingValues;Landroidx/compose/foundation/layout/PaddingValues;FILjava/lang/Object;)Lorg/jetbrains/jewel/ui/component/styling/MenuItemMetrics;
 	public static final fun defaults-ORMxH6s (Lorg/jetbrains/jewel/ui/component/styling/MenuMetrics$Companion;Landroidx/compose/foundation/shape/CornerSize;Landroidx/compose/foundation/layout/PaddingValues;Landroidx/compose/foundation/layout/PaddingValues;JFFLorg/jetbrains/jewel/ui/component/styling/MenuItemMetrics;Lorg/jetbrains/jewel/ui/component/styling/SubmenuMetrics;)Lorg/jetbrains/jewel/ui/component/styling/MenuMetrics;
 	public static synthetic fun defaults-ORMxH6s$default (Lorg/jetbrains/jewel/ui/component/styling/MenuMetrics$Companion;Landroidx/compose/foundation/shape/CornerSize;Landroidx/compose/foundation/layout/PaddingValues;Landroidx/compose/foundation/layout/PaddingValues;JFFLorg/jetbrains/jewel/ui/component/styling/MenuItemMetrics;Lorg/jetbrains/jewel/ui/component/styling/SubmenuMetrics;ILjava/lang/Object;)Lorg/jetbrains/jewel/ui/component/styling/MenuMetrics;
 	public static final fun light (Lorg/jetbrains/jewel/ui/component/styling/MenuStyle$Companion;Lorg/jetbrains/jewel/ui/component/styling/MenuColors;Lorg/jetbrains/jewel/ui/component/styling/MenuMetrics;Lorg/jetbrains/jewel/ui/component/styling/MenuIcons;Landroidx/compose/runtime/Composer;II)Lorg/jetbrains/jewel/ui/component/styling/MenuStyle;
-	public static final fun light-B6VqUn8 (Lorg/jetbrains/jewel/ui/component/styling/MenuItemColors$Companion;JJJJJJJJJJJJJJJJLandroidx/compose/runtime/Composer;III)Lorg/jetbrains/jewel/ui/component/styling/MenuItemColors;
 	public static final fun light-Jy8F4Js (Lorg/jetbrains/jewel/ui/component/styling/MenuColors$Companion;JJJLorg/jetbrains/jewel/ui/component/styling/MenuItemColors;Landroidx/compose/runtime/Composer;II)Lorg/jetbrains/jewel/ui/component/styling/MenuColors;
+	public static final fun light-a3tHFA8 (Lorg/jetbrains/jewel/ui/component/styling/MenuItemColors$Companion;JJJJJJJJJJJJJJJJJJJJJLandroidx/compose/runtime/Composer;IIII)Lorg/jetbrains/jewel/ui/component/styling/MenuItemColors;
 }
 
 public final class org/jetbrains/jewel/intui/standalone/styling/IntUiOutlinedButtonColorFactory {

diff --git a/...andalone/src/main/kotlin/org/jetbrains/jewel/intui/standalone/styling/IntUiMenuStyling.kt b/...andalone/src/main/kotlin/org/jetbrains/jewel/intui/standalone/styling/IntUiMenuStyling.kt
@@ -80,6 +80,11 @@ public fun MenuItemColors.Companion.light(
     iconTintFocused: Color = iconTint,
     iconTintPressed: Color = iconTint,
     iconTintHovered: Color = iconTint,
+    keybindingTint: Color = IntUiLightTheme.colors.grey(8),
+    keybindingTintDisabled: Color = keybindingTint,
+    keybindingTintFocused: Color = IntUiLightTheme.colors.grey(1),
+    keybindingTintPressed: Color = keybindingTintFocused,
+    keybindingTintHovered: Color = keybindingTintFocused,
     separator: Color = IntUiLightTheme.colors.grey(12),
 ): MenuItemColors =
     MenuItemColors(
@@ -98,6 +103,11 @@ public fun MenuItemColors.Companion.light(
         iconTintFocused = iconTintFocused,
         iconTintPressed = iconTintPressed,
         iconTintHovered = iconTintHovered,
+        keybindingTint = keybindingTint,
+        keybindingTintDisabled = keybindingTintDisabled,
+        keybindingTintFocused = keybindingTintFocused,
+        keybindingTintPressed = keybindingTintPressed,
+        keybindingTintHovered = keybindingTintHovered,
         separator = separator,
     )
 
@@ -118,6 +128,11 @@ public fun MenuItemColors.Companion.dark(
     iconTintFocused: Color = iconTint,
     iconTintPressed: Color = iconTint,
     iconTintHovered: Color = iconTint,
+    keybindingTint: Color = IntUiDarkTheme.colors.grey(7),
+    keybindingTintDisabled: Color = keybindingTint,
+    keybindingTintFocused: Color = IntUiDarkTheme.colors.grey(12),
+    keybindingTintPressed: Color = keybindingTintFocused,
+    keybindingTintHovered: Color = keybindingTintFocused,
     separator: Color = IntUiDarkTheme.colors.grey(3),
 ): MenuItemColors =
     MenuItemColors(
@@ -137,6 +152,11 @@ public fun MenuItemColors.Companion.dark(
         iconTintPressed = iconTintPressed,
         iconTintHovered = iconTintHovered,
         separator = separator,
+        keybindingTint = keybindingTint,
+        keybindingTintDisabled = keybindingTintDisabled,
+        keybindingTintFocused = keybindingTintFocused,
+        keybindingTintPressed = keybindingTintPressed,
+        keybindingTintHovered = keybindingTintHovered,
     )
 
 public fun MenuMetrics.Companion.defaults(
@@ -162,17 +182,21 @@ public fun MenuMetrics.Companion.defaults(
 
 public fun MenuItemMetrics.Companion.defaults(
     selectionCornerSize: CornerSize = CornerSize(4.dp),
-    outerPadding: PaddingValues = PaddingValues(horizontal = 4.dp),
-    contentPadding: PaddingValues = PaddingValues(horizontal = 12.dp, vertical = 4.dp),
+    outerPadding: PaddingValues = PaddingValues(horizontal = 6.dp),
+    contentPadding: PaddingValues = PaddingValues(horizontal = 10.dp, vertical = 4.dp),
     separatorPadding: PaddingValues = PaddingValues(horizontal = 12.dp, vertical = 4.dp),
+    keybindingsPadding: PaddingValues = PaddingValues(start = 36.dp),
     separatorThickness: Dp = 1.dp,
+    iconSize: Dp = 16.dp,
 ): MenuItemMetrics =
     MenuItemMetrics(
         selectionCornerSize,
         outerPadding,
         contentPadding,
         separatorPadding,
+        keybindingsPadding,
         separatorThickness,
+        iconSize,
     )
 
 public fun SubmenuMetrics.Companion.defaults(

diff --git a/...es/standalone/src/main/kotlin/org/jetbrains/jewel/samples/standalone/view/TitleBarView.kt b/...es/standalone/src/main/kotlin/org/jetbrains/jewel/samples/standalone/view/TitleBarView.kt
@@ -32,9 +32,12 @@ fun DecoratedWindowScope.TitleBarView() {
         Row(Modifier.align(Alignment.Start)) {
             Dropdown(Modifier.height(30.dp), menuContent = {
                 MainViewModel.views.forEach {
-                    selectableItem(MainViewModel.currentView == it, {
-                        MainViewModel.currentView = it
-                    }) {
+                    selectableItem(
+                        selected = MainViewModel.currentView == it,
+                        onClick = {
+                            MainViewModel.currentView = it
+                        },
+                    ) {
                         Row(
                             horizontalArrangement = Arrangement.spacedBy(4.dp),
                             verticalAlignment = Alignment.CenterVertically,

diff --git a/...dalone/src/main/kotlin/org/jetbrains/jewel/samples/standalone/view/component/Dropdowns.kt b/...dalone/src/main/kotlin/org/jetbrains/jewel/samples/standalone/view/component/Dropdowns.kt
@@ -14,6 +14,8 @@ import org.jetbrains.jewel.ui.Outline
 import org.jetbrains.jewel.ui.component.Dropdown
 import org.jetbrains.jewel.ui.component.Text
 import org.jetbrains.jewel.ui.component.separator
+import org.jetbrains.jewel.ui.component.styling.DropdownStyle
+import kotlin.random.Random
 
 @Composable
 @View(title = "Dropdowns", position = 3)
@@ -36,8 +38,7 @@ fun Dropdowns() {
 
         Dropdown(
             enabled = false,
-            menuContent = {
-            },
+            menuContent = {},
         ) {
             Text("Disabled")
         }
@@ -47,9 +48,10 @@ fun Dropdowns() {
                     if (it == "---") {
                         separator()
                     } else {
-                        selectableItem(selected == it, {
-                            selected = it
-                        }) {
+                        selectableItem(
+                            selected = selected == it,
+                            onClick = { selected = it },
+                        ) {
                             Text(it)
                         }
                     }
@@ -60,9 +62,10 @@ fun Dropdowns() {
                         if (it == "---") {
                             separator()
                         } else {
-                            selectableItem(selected == it, {
-                                selected = it
-                            }) {
+                            selectableItem(
+                                selected = selected == it,
+                                onClick = { selected = it },
+                            ) {
                                 Text(it)
                             }
                         }
@@ -73,9 +76,10 @@ fun Dropdowns() {
                             if (it == "---") {
                                 separator()
                             } else {
-                                selectableItem(selected == it, {
-                                    selected = it
-                                }) {
+                                selectableItem(
+                                    selected = selected == it,
+                                    onClick = { selected = it },
+                                ) {
                                     Text(it)
                                 }
                             }
@@ -97,9 +101,10 @@ fun Dropdowns() {
                     if (it == "---") {
                         separator()
                     } else {
-                        selectableItem(selected == it, {
-                            selected = it
-                        }) {
+                        selectableItem(
+                            selected = selected == it,
+                            onClick = { selected = it },
+                        ) {
                             Text(it)
                         }
                     }
@@ -108,5 +113,79 @@ fun Dropdowns() {
         ) {
             Text(selected)
         }
+        Dropdown(
+            menuContent = {
+                items.forEach {
+                    if (it == "---") {
+                        separator()
+                    } else {
+                        selectableItem(
+                            iconResource = dropdownIconsSample.random(),
+                            iconClass = DropdownStyle::class.java,
+                            keybinding = if (Random.nextBoolean()) {
+                                null
+                            } else {
+                                dropdownKeybindingsSample.shuffled()
+                                    .take(2)
+                                    .toSet()
+                            },
+                            selected = false,
+                            onClick = { },
+                        ) {
+                            Text(it)
+                        }
+                    }
+                }
+                submenu(submenu = {
+                    items.forEach {
+                        if (it == "---") {
+                            separator()
+                        } else {
+                            selectableItem(
+                                iconResource = dropdownIconsSample.random(),
+                                iconClass = DropdownStyle::class.java,
+                                keybinding = if (Random.nextBoolean()) {
+                                    null
+                                } else {
+                                    dropdownKeybindingsSample.shuffled()
+                                        .take(2)
+                                        .toSet()
+                                },
+                                selected = false,
+                                onClick = { },
+                            ) {
+                                Text(it)
+                            }
+                        }
+                    }
+                    separator()
+                    submenu(submenu = {
+                        items.forEach {
+                            if (it == "---") {
+                                separator()
+                            } else {
+                                selectableItem(
+                                    iconResource = dropdownIconsSample.random(),
+                                    iconClass = DropdownStyle::class.java,
+                                    selected = false,
+                                    onClick = { },
+                                ) {
+                                    Text(it)
+                                }
+                            }
+                        }
+                    }) {
+                        Text("Submenu2")
+                    }
+                }) {
+                    Text("Submenu")
+                }
+            },
+        ) {
+            Text("With icons")
+        }
     }
 }
+
+private val dropdownIconsSample = listOf("icons/search.svg", "icons/close.svg", null)
+private val dropdownKeybindingsSample = setOf('A', 'B', '↑', '→', '␡')