From 593251aa1c9ceb0e8b8712f9927a103e0e68b72d Mon Sep 17 00:00:00 2001 From: Josh Tynjala Date: Fri, 16 Aug 2024 14:08:24 -0700 Subject: [PATCH] Button, ToggleButton: VARIANT_QUIET --- src/feathers/controls/Button.hx | 20 +++++++++ src/feathers/controls/ToggleButton.hx | 20 +++++++++ .../steel/components/SteelButtonStyles.hx | 38 +++++++++++++++++ .../components/SteelToggleButtonStyles.hx | 41 +++++++++++++++++++ 4 files changed, 119 insertions(+) diff --git a/src/feathers/controls/Button.hx b/src/feathers/controls/Button.hx index 0844f2ff..69dab740 100644 --- a/src/feathers/controls/Button.hx +++ b/src/feathers/controls/Button.hx @@ -99,6 +99,26 @@ class Button extends BasicButton implements ITextControl implements IHTMLTextCon **/ public static final VARIANT_DANGER = "danger"; + /** + A variant used to style the button in a less prominent style — typically + hiding the background skin until interaction. Variants allow themes to + provide an assortment of different appearances for the same type of UI + component. + + The following example uses this variant: + + ```haxe + var button = new Button(); + button.variant = Button.VARIANT_QUIET; + ``` + + @see `feathers.style.IVariantStyleObject.variant` + @see [Feathers UI User Manual: Themes](https://feathersui.com/learn/haxe-openfl/themes/) + + @since 1.4.0 + **/ + public static final VARIANT_QUIET = "quiet"; + /** Creates a new `Button` object. diff --git a/src/feathers/controls/ToggleButton.hx b/src/feathers/controls/ToggleButton.hx index ee5c46b9..44583c34 100644 --- a/src/feathers/controls/ToggleButton.hx +++ b/src/feathers/controls/ToggleButton.hx @@ -60,6 +60,26 @@ import flash.text.StyleSheet; @defaultXmlProperty("text") @:styleContext class ToggleButton extends BasicToggleButton implements ITextControl implements IHTMLTextControl implements IFocusObject { + /** + A variant used to style the button in a less prominent style — typically + hiding the background skin until interaction. Variants allow themes to + provide an assortment of different appearances for the same type of UI + component. + + The following example uses this variant: + + ```haxe + var button = new ToggleButton(); + button.variant = ToggleButton.VARIANT_QUIET; + ``` + + @see `feathers.style.IVariantStyleObject.variant` + @see [Feathers UI User Manual: Themes](https://feathersui.com/learn/haxe-openfl/themes/) + + @since 1.4.0 + **/ + public static final VARIANT_QUIET = "quiet"; + /** Creates a new `ToggleButton` object. diff --git a/src/feathers/themes/steel/components/SteelButtonStyles.hx b/src/feathers/themes/steel/components/SteelButtonStyles.hx index 8cccd4a8..67d59ebc 100644 --- a/src/feathers/themes/steel/components/SteelButtonStyles.hx +++ b/src/feathers/themes/steel/components/SteelButtonStyles.hx @@ -130,6 +130,44 @@ class SteelButtonStyles { button.disabledTextFormat = theme.getDisabledTextFormat(); } + button.paddingTop = theme.smallPadding; + button.paddingRight = theme.largePadding; + button.paddingBottom = theme.smallPadding; + button.paddingLeft = theme.largePadding; + button.gap = theme.smallPadding; + }); + } + if (styleProvider.getStyleFunction(Button, Button.VARIANT_QUIET) == null) { + styleProvider.setStyleFunction(Button, Button.VARIANT_QUIET, function(button:Button):Void { + if (button.backgroundSkin == null) { + var skin = new RectangleSkin(); + skin.fill = theme.getButtonFill(); + skin.disabledFill = theme.getButtonDisabledFill(); + skin.setFillForState(UP, SolidColor(0xff00ff, 0.0)); // transparent + skin.setFillForState(DOWN, theme.getReversedActiveThemeFill()); + skin.border = theme.getButtonBorder(); + skin.disabledBorder = theme.getButtonDisabledBorder(); + skin.setBorderForState(UP, None); + skin.setBorderForState(DOWN, theme.getActiveFillBorder()); + skin.cornerRadius = 3.0; + button.backgroundSkin = skin; + } + + if (button.focusRectSkin == null) { + var focusRectSkin = new RectangleSkin(); + focusRectSkin.fill = None; + focusRectSkin.border = theme.getFocusBorder(); + focusRectSkin.cornerRadius = 3.0; + button.focusRectSkin = focusRectSkin; + } + + if (button.textFormat == null) { + button.textFormat = theme.getTextFormat(); + } + if (button.disabledTextFormat == null) { + button.disabledTextFormat = theme.getDisabledTextFormat(); + } + button.paddingTop = theme.smallPadding; button.paddingRight = theme.largePadding; button.paddingBottom = theme.smallPadding; diff --git a/src/feathers/themes/steel/components/SteelToggleButtonStyles.hx b/src/feathers/themes/steel/components/SteelToggleButtonStyles.hx index 23231134..f03a6395 100644 --- a/src/feathers/themes/steel/components/SteelToggleButtonStyles.hx +++ b/src/feathers/themes/steel/components/SteelToggleButtonStyles.hx @@ -69,6 +69,47 @@ class SteelToggleButtonStyles { button.paddingLeft = theme.largePadding; button.gap = theme.smallPadding; }); + if (styleProvider.getStyleFunction(ToggleButton, ToggleButton.VARIANT_QUIET) == null) { + styleProvider.setStyleFunction(ToggleButton, ToggleButton.VARIANT_QUIET, function(button:ToggleButton):Void { + if (button.backgroundSkin == null) { + var skin = new RectangleSkin(); + skin.fill = theme.getButtonFill(); + skin.disabledFill = theme.getButtonDisabledFill(); + skin.selectedFill = theme.getThemeFill(); + skin.setFillForState(UP(false), SolidColor(0xff00ff, 0.0)); // transparent + skin.setFillForState(DOWN(false), theme.getReversedActiveThemeFill()); + skin.border = theme.getButtonBorder(); + skin.selectedBorder = theme.getSelectedBorder(); + skin.disabledBorder = theme.getButtonDisabledBorder(); + skin.setBorderForState(UP(false), None); + skin.setBorderForState(DOWN(false), theme.getActiveFillBorder()); + skin.setBorderForState(DOWN(true), theme.getActiveFillBorder()); + skin.cornerRadius = 3.0; + button.backgroundSkin = skin; + } + + if (button.focusRectSkin == null) { + var focusRectSkin = new RectangleSkin(); + focusRectSkin.fill = None; + focusRectSkin.border = theme.getFocusBorder(); + focusRectSkin.cornerRadius = 3.0; + button.focusRectSkin = focusRectSkin; + } + + if (button.textFormat == null) { + button.textFormat = theme.getTextFormat(); + } + if (button.disabledTextFormat == null) { + button.disabledTextFormat = theme.getDisabledTextFormat(); + } + + button.paddingTop = theme.smallPadding; + button.paddingRight = theme.largePadding; + button.paddingBottom = theme.smallPadding; + button.paddingLeft = theme.largePadding; + button.gap = theme.smallPadding; + }); + } } } }