From 08d1e1f97f57877c5a051c7e0362922246c1e13b Mon Sep 17 00:00:00 2001 From: Kirill Grouchnikov Date: Sun, 15 Jan 2023 12:25:13 -0500 Subject: [PATCH] Tweaks for command popups * Fix for fill alignment under Medium state in RTL * Support fill alignment under Tile state * Add `menuHorizontalAlignment` to `CommandPopupMenuPresentationModel` and set its default value to fill * Small visual tweaks for first level content in ribbon application menu For #56 --- .../CommandButtonLayoutManagerMedium.kt | 6 ++-- .../layout/CommandButtonLayoutManagerTile.kt | 33 ++++++++++++++----- .../CommandPopupMenuPresentationModel.kt | 4 +-- .../component/ribbon/RibbonApplicationMenu.kt | 14 +++++--- .../popup/GeneralCommandMenuPopupHandler.kt | 4 +-- .../aurora/demo/ribbon/AuroraRibbonDemo.kt | 1 - 6 files changed, 41 insertions(+), 21 deletions(-) diff --git a/component/src/desktopMain/kotlin/org/pushingpixels/aurora/component/layout/CommandButtonLayoutManagerMedium.kt b/component/src/desktopMain/kotlin/org/pushingpixels/aurora/component/layout/CommandButtonLayoutManagerMedium.kt index bdc5176a..d19b0de9 100644 --- a/component/src/desktopMain/kotlin/org/pushingpixels/aurora/component/layout/CommandButtonLayoutManagerMedium.kt +++ b/component/src/desktopMain/kotlin/org/pushingpixels/aurora/component/layout/CommandButtonLayoutManagerMedium.kt @@ -188,8 +188,10 @@ internal open class CommandButtonLayoutManagerMedium( // how we should shift the content horizontally. when (presentationModel.horizontalAlignment) { HorizontalAlignment.Leading, - HorizontalAlignment.Fill -> - shiftX = 0.0f + HorizontalAlignment.Fill -> if (!ltr) { + // shift everything to the right + shiftX = finalWidth - preferredSize.width + } HorizontalAlignment.Center -> // shift everything to be centered horizontally diff --git a/component/src/desktopMain/kotlin/org/pushingpixels/aurora/component/layout/CommandButtonLayoutManagerTile.kt b/component/src/desktopMain/kotlin/org/pushingpixels/aurora/component/layout/CommandButtonLayoutManagerTile.kt index a8766b1a..9565783d 100644 --- a/component/src/desktopMain/kotlin/org/pushingpixels/aurora/component/layout/CommandButtonLayoutManagerTile.kt +++ b/component/src/desktopMain/kotlin/org/pushingpixels/aurora/component/layout/CommandButtonLayoutManagerTile.kt @@ -196,12 +196,12 @@ internal open class CommandButtonLayoutManagerTile( // Consult the horizontal alignment attribute of the command button to see // how we should shift the content horizontally. when (presentationModel.horizontalAlignment) { - HorizontalAlignment.Leading -> if (!ltr) { + HorizontalAlignment.Leading, + HorizontalAlignment.Fill -> if (!ltr) { // shift everything to the right shiftX = finalWidth - preferredSize.width } - HorizontalAlignment.Center, - HorizontalAlignment.Fill -> + HorizontalAlignment.Center -> // shift everything to be centered horizontally shiftX = (finalWidth - preferredSize.width) / 2 HorizontalAlignment.Trailing -> if (ltr) { @@ -302,11 +302,19 @@ internal open class CommandButtonLayoutManagerTile( x += layoutHGap } if (hasPopup) { - if (hasText && hasIcon) { - x += 2 * layoutHGap - } val popupIconWidth = CommandButtonSizingConstants.PopupIconWidth.toPx() val popupIconHeight = CommandButtonSizingConstants.PopupIconHeight.toPx() + if (hasText || hasIcon) { + if (presentationModel.horizontalAlignment == HorizontalAlignment.Fill) { + // Under Fill alignment, popup icon goes all the way to the right edge + x = finalWidth - presentationModel.horizontalGapScaleFactor * + paddingValues.endPadding.toPx() - + popupIconWidth - 4 + } else { + // Otherwise, the popup icon is to the right of the texts + x += 2 * layoutHGap + } + } popupActionRect = Rect( left = x, right = x + 4 + popupIconWidth, @@ -562,11 +570,18 @@ internal open class CommandButtonLayoutManagerTile( x -= layoutHGap } if (hasPopup) { - if (hasText && hasIcon) { - x -= 2 * layoutHGap - } val popupIconWidth = CommandButtonSizingConstants.PopupIconWidth.toPx() val popupIconHeight = CommandButtonSizingConstants.PopupIconHeight.toPx() + if (hasText || hasIcon) { + if (presentationModel.horizontalAlignment == HorizontalAlignment.Fill) { + // Under Fill alignment, popup icon goes all the way to the left edge + x = presentationModel.horizontalGapScaleFactor * + paddingValues.endPadding.toPx() + 4 + } else { + // Otherwise, the popup icon is to the left of the texts + x -= 2 * layoutHGap + } + } popupActionRect = Rect( left = x - 4 - popupIconWidth, right = x, diff --git a/component/src/desktopMain/kotlin/org/pushingpixels/aurora/component/model/CommandPopupMenuPresentationModel.kt b/component/src/desktopMain/kotlin/org/pushingpixels/aurora/component/model/CommandPopupMenuPresentationModel.kt index 37af6ba5..b6e6964e 100644 --- a/component/src/desktopMain/kotlin/org/pushingpixels/aurora/component/model/CommandPopupMenuPresentationModel.kt +++ b/component/src/desktopMain/kotlin/org/pushingpixels/aurora/component/model/CommandPopupMenuPresentationModel.kt @@ -39,8 +39,8 @@ data class CommandPopupMenuPresentationModel( val menuIconActiveFilterStrategy: IconFilterStrategy = IconFilterStrategy.Original, val menuIconEnabledFilterStrategy: IconFilterStrategy = IconFilterStrategy.Original, val menuIconDisabledFilterStrategy: IconFilterStrategy = IconFilterStrategy.ThemedFollowColorScheme, - val menuContentPadding: PaddingValues = - CommandButtonSizingConstants.CompactButtonContentPadding, + val menuContentPadding: PaddingValues = CommandButtonSizingConstants.CompactButtonContentPadding, + val menuHorizontalAlignment: HorizontalAlignment = HorizontalAlignment.Fill, val maxVisibleMenuCommands: Int = 0, val iconGutterFillColorQuery: ((AuroraColorScheme) -> Color)? = null, val backgroundFillColorQuery: ((Int, AuroraColorScheme) -> Color) = { _, scheme -> scheme.backgroundFillColor }, diff --git a/component/src/desktopMain/kotlin/org/pushingpixels/aurora/component/ribbon/RibbonApplicationMenu.kt b/component/src/desktopMain/kotlin/org/pushingpixels/aurora/component/ribbon/RibbonApplicationMenu.kt index bb7a1054..4880c901 100644 --- a/component/src/desktopMain/kotlin/org/pushingpixels/aurora/component/ribbon/RibbonApplicationMenu.kt +++ b/component/src/desktopMain/kotlin/org/pushingpixels/aurora/component/ribbon/RibbonApplicationMenu.kt @@ -185,7 +185,8 @@ data class RibbonApplicationMenuCommandButtonPresentationModel( override val contentPadding: PaddingValues = CommandButtonSizingConstants.WideButtonContentPadding, override val sides: Sides = Sides() ) : BaseCommandButtonPresentationModel { - override val presentationState: CommandButtonPresentationState = RibbonApplicationMenuButtonPresentationStates.AppMenuButtonState + override val presentationState: CommandButtonPresentationState = + RibbonApplicationMenuButtonPresentationStates.AppMenuButtonState override val backgroundAppearanceStrategy: BackgroundAppearanceStrategy = BackgroundAppearanceStrategy.Always override val horizontalAlignment: HorizontalAlignment = HorizontalAlignment.Center override val iconDimension: DpSize? = null @@ -203,7 +204,10 @@ data class RibbonApplicationMenuCommandButtonPresentationModel( override val actionRichTooltipPresentationModel = RichTooltipPresentationModel() override val toDismissPopupsOnActivation: Boolean = true override val popupMenuPresentationModel: CommandPopupMenuPresentationModel = - CommandPopupMenuPresentationModel(menuPresentationState = CommandButtonPresentationState.Tile) + CommandPopupMenuPresentationModel( + menuPresentationState = CommandButtonPresentationState.Tile, + menuContentPadding = PaddingValues(horizontal = 6.dp, vertical = 8.dp) + ) override val horizontalGapScaleFactor: Float = 1.0f override val verticalGapScaleFactor: Float = 1.0f override val minWidth: Dp = 0.dp @@ -251,10 +255,10 @@ private object RibbonApplicationMenuPopupHandler : BaseCommandMenuHandler< iconEnabledFilterStrategy = IconFilterStrategy.Original, iconDisabledFilterStrategy = IconFilterStrategy.ThemedFollowColorScheme, forceAllocateSpaceForIcon = atLeastOneButtonHasIcon, - popupPlacementStrategy = PopupPlacementStrategy.Downward.HAlignStart, + popupPlacementStrategy = PopupPlacementStrategy.Endward.VAlignTop, backgroundAppearanceStrategy = BackgroundAppearanceStrategy.Flat, - horizontalAlignment = HorizontalAlignment.Leading, - contentPadding = CommandButtonSizingConstants.CompactButtonContentPadding, + horizontalAlignment = HorizontalAlignment.Fill, + contentPadding = menuPresentationModel.menuContentPadding, isMenu = true, sides = Sides.ClosedRectangle ) diff --git a/component/src/desktopMain/kotlin/org/pushingpixels/aurora/component/utils/popup/GeneralCommandMenuPopupHandler.kt b/component/src/desktopMain/kotlin/org/pushingpixels/aurora/component/utils/popup/GeneralCommandMenuPopupHandler.kt index f4a4bf12..2fd7ab6e 100644 --- a/component/src/desktopMain/kotlin/org/pushingpixels/aurora/component/utils/popup/GeneralCommandMenuPopupHandler.kt +++ b/component/src/desktopMain/kotlin/org/pushingpixels/aurora/component/utils/popup/GeneralCommandMenuPopupHandler.kt @@ -103,7 +103,7 @@ internal object GeneralCommandMenuPopupHandler : BaseCommandMenuHandler< iconDisabledFilterStrategy = menuPresentationModel.menuIconDisabledFilterStrategy, popupPlacementStrategy = menuPresentationModel.popupPlacementStrategy, backgroundAppearanceStrategy = BackgroundAppearanceStrategy.Flat, - horizontalAlignment = HorizontalAlignment.Leading, + horizontalAlignment = menuPresentationModel.menuHorizontalAlignment, contentPadding = menuPresentationModel.menuContentPadding, isMenu = true ) @@ -368,7 +368,7 @@ internal object GeneralCommandMenuPopupHandler : BaseCommandMenuHandler< forceAllocateSpaceForIcon = atLeastOneButtonHasIcon, popupPlacementStrategy = menuPresentationModel.popupPlacementStrategy, backgroundAppearanceStrategy = BackgroundAppearanceStrategy.Flat, - horizontalAlignment = HorizontalAlignment.Leading, + horizontalAlignment = menuPresentationModel.menuHorizontalAlignment, contentPadding = menuPresentationModel.menuContentPadding, isMenu = true, sides = Sides.ClosedRectangle diff --git a/demo/src/desktopMain/kotlin/org/pushingpixels/aurora/demo/ribbon/AuroraRibbonDemo.kt b/demo/src/desktopMain/kotlin/org/pushingpixels/aurora/demo/ribbon/AuroraRibbonDemo.kt index 32475676..9a8e1352 100644 --- a/demo/src/desktopMain/kotlin/org/pushingpixels/aurora/demo/ribbon/AuroraRibbonDemo.kt +++ b/demo/src/desktopMain/kotlin/org/pushingpixels/aurora/demo/ribbon/AuroraRibbonDemo.kt @@ -1415,7 +1415,6 @@ internal class RibbonBuilder(val resourceBundle: ResourceBundle) { ) overlays[amEntryOpen] = CommandButtonPresentationModel.Overlay( - presentationState = CommandButtonPresentationState.Medium, actionKeyTip = "O", textClick = TextClick.Action )