This is an automated email from the ASF dual-hosted git repository. gregdove pushed a commit to branch develop in repository https://gitbox.apache.org/repos/asf/royale-asjs.git
commit 41af9e20abfce7908106e4eb16e0731775b80f1d Author: greg-dove <[email protected]> AuthorDate: Tue Mar 31 18:44:56 2026 +1300 support labelPlacement in CheckBox, and also handle dynamic updates (includes some tuning to animation and flexgrid stylebeads) --- .../royale/org/apache/royale/style/CheckBox.as | 23 ++- .../org/apache/royale/style/skins/CheckBoxSkin.as | 154 ++++++++++++++++++--- .../org/apache/royale/style/skins/ICheckBoxSkin.as | 1 + .../style/stylebeads/anim/TransitionDuration.as | 5 +- .../style/stylebeads/anim/TransitionProperty.as | 5 +- .../stylebeads/anim/TransitionTimingFunction.as | 2 +- .../stylebeads/flexgrid/GridTemplateColumns.as | 3 +- .../style/stylebeads/flexgrid/GridTemplateRows.as | 5 +- 8 files changed, 164 insertions(+), 34 deletions(-) diff --git a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/CheckBox.as b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/CheckBox.as index b5c4a9048c..c96672c244 100644 --- a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/CheckBox.as +++ b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/CheckBox.as @@ -49,6 +49,25 @@ package org.apache.royale.style //we could use the following for a generic name, or override getWrapperStyle with something specific //useWrapperStyle = true; } + private var _labelPlacement:String = "right"; + [Bindable] + public function get labelPlacement():String + { + return _labelPlacement; + } + [Inspectable(category="General", enumeration="left,right,top,bottom")] + public function set labelPlacement(value:String):void + { + if(_labelPlacement != value){ + _labelPlacement = value; + if(_stylesLoaded) + { + if (skin is ICheckBoxSkin) + (skin as ICheckBoxSkin).updateStyles(); + applySkin(); + } + } + } COMPILE::JS private var input:HTMLInputElement; @@ -111,7 +130,7 @@ package org.apache.royale.style var checkSkin:ICheckBoxSkin = skin as ICheckBoxSkin; assert(checkSkin, "CheckBox requires a skin that implements ICheckBoxSkin"); var styles:Array = checkSkin.boxStyles || []; - box.setStyles(styles); + box.setStyles(styles, true); applyCheckSkin(); applyIndeterminateSkin(); applyLabelSkin(); @@ -124,7 +143,7 @@ package org.apache.royale.style if(!span) return; var checkSkin:ICheckBoxSkin = skin as ICheckBoxSkin; assert(checkSkin && checkSkin.labelStyles, "CheckBox requires a skin that implements ICheckBoxSkin"); - span.setStyles(checkSkin.labelStyles); + span.setStyles(checkSkin.labelStyles, true); } private var _truncate:Boolean; diff --git a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/skins/CheckBoxSkin.as b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/skins/CheckBoxSkin.as index 5f67b1b051..b40863631a 100644 --- a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/skins/CheckBoxSkin.as +++ b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/skins/CheckBoxSkin.as @@ -30,6 +30,9 @@ package org.apache.royale.style.skins import org.apache.royale.style.stylebeads.interact.Cursor; import org.apache.royale.style.stylebeads.flexgrid.GridAutoColumns; import org.apache.royale.style.stylebeads.flexgrid.AlignItems; + import org.apache.royale.style.stylebeads.flexgrid.AlignSelf; + import org.apache.royale.style.stylebeads.flexgrid.JustifyItems; + import org.apache.royale.style.stylebeads.flexgrid.GridTemplateRows; import org.apache.royale.style.stylebeads.flexgrid.RowGap; import org.apache.royale.style.stylebeads.interact.UserSelect; import org.apache.royale.style.stylebeads.states.DisabledState; @@ -71,6 +74,8 @@ package org.apache.royale.style.skins import org.apache.royale.style.stylebeads.states.attribute.AttributeState; import org.apache.royale.style.stylebeads.states.GroupPseudo; + import org.apache.royale.style.stylebeads.typography.VerticalAlign; + public class CheckBoxSkin extends StyleSkin implements ICheckBoxSkin { public function CheckBoxSkin() @@ -87,16 +92,55 @@ package org.apache.royale.style.skins override public function set strand(value:IStrand):void { super.strand = value; - // Manually set. Don't create the default ones. - if(_styles) - return; - + applyStyles(); + } + + public function updateStyles():void + { + _styles = null; + _boxStyles = null; + _labelStyles = null; + _checkIcon = null; + _indeterminateIcon = null; + applyStyles(); + } + + private function applyStyles():void + { var size:Number = 16 * getMultiplier(); var box:String = computeSize(size * 1.25, host.unit); - var gapValue:Number = size * 0.75; + var gapValue:Number = size * 0.375; var gap:String = computeSize(gapValue, host.unit); + var padding:Padding = new Padding(); + padding.unit = host.unit; + var layoutStyles:Array = []; + var placement:String = host.labelPlacement; + if (placement == "top" || placement == "bottom") + { + layoutStyles.push(new Display("inline-grid")); + layoutStyles.push(new VerticalAlign("top")); + var rowTemplate:String = (placement == "top") ? "auto " + box : box + " auto"; + layoutStyles.push(new GridTemplateRows(rowTemplate)); + layoutStyles.push(new GridTemplateColumns("auto")); + layoutStyles.push(new JustifyItems("center")); + layoutStyles.push(new AlignItems("flex-start")); + layoutStyles.push(new RowGap(gap)); + padding.right = gap; + } + else + { + layoutStyles.push(new Display("inline-grid")); + layoutStyles.push(new VerticalAlign("top")); + var colTemplate:String = (placement == "left") ? "auto " + box : box + " auto"; + layoutStyles.push(new GridTemplateColumns(colTemplate)); + layoutStyles.push(new GridTemplateRows("auto")); + layoutStyles.push(new AlignItems("flex-start")); + layoutStyles.push(new ColumnGap(gap)); + padding.right = gap; + } + // Style components often use a "group" pattern where the wrapper element // (usually a label) holds the state (like data-disabled), and child elements // (box, icon, text) respond to that state. @@ -107,20 +151,13 @@ package org.apache.royale.style.skins var disabledState:AttributeState = new AttributeState("data-disabled", [ new Cursor("auto") ]); - var padding:Padding = new Padding(); - padding.unit = host.unit; - padding.right = gap; _styles = [ - new Display("inline-grid"), - new GridTemplateColumns(box + " auto"), - new AlignItems("center"), - new ColumnGap(gap), new UserSelect("none"), new Cursor("pointer"), padding, disabledState - ]; + ].concat(layoutStyles); host.setStyles(_styles, true); } @@ -162,6 +199,24 @@ package org.apache.royale.style.skins var size:Number = 16 * getMultiplier(); var box:String = computeSize(size * 1.25, host.unit); + + var boxColumn:String = "1"; + var boxRow:String = "1"; + var placement:String = host.labelPlacement; + if (placement == "top") { + boxRow = "2"; + boxColumn = "1"; + } else if (placement == "left") { + boxColumn = "2"; + boxRow = "1"; + } else if (placement == "bottom") { + boxRow = "1"; + boxColumn = "1"; + } else { // right + boxColumn = "1"; + boxRow = "1"; + } + var outline:Outline = new Outline(); outline.unit = host.unit; outline.width = 0.5; @@ -170,10 +225,11 @@ package org.apache.royale.style.skins outline.offset = 0.5; _boxStyles = [ - new GridColumnStart("1"), - new GridRowStart("1"), + new GridColumnStart(boxColumn), + new GridRowStart(boxRow), new HeightStyle(box), new WidthStyle(box), + new AlignSelf("center"), new BorderRadius(ThemeManager.instance.activeTheme.radiusSM), new BorderWidth(0.5), new BorderColor(enabledBorder), @@ -221,9 +277,26 @@ package org.apache.royale.style.skins var enabledColor:ColorSwatch = colorSet.baseContent; var disabledColor:ColorSwatch = colorSet.baseContentWeak; + var labelColumn:String = "2"; + var labelRow:String = "1"; + var placement:String = host.labelPlacement; + if (placement == "top") { + labelColumn = "1"; + labelRow = "1"; + } else if (placement == "bottom") { + labelColumn = "1"; + labelRow = "2"; + } else if (placement == "left") { + labelColumn = "1"; + labelRow = "1"; + } else { // right + labelColumn = "2"; + labelRow = "1"; + } + _labelStyles = [ - new GridColumnStart("2"), - new GridRowStart("1"), + new GridColumnStart(labelColumn), + new GridRowStart(labelRow), new FontSize(fontSize), new FontWeight("600"), new TextColor(enabledColor), @@ -255,19 +328,38 @@ package org.apache.royale.style.skins _checkIcon = new Div(); var size:Number = 16 * getMultiplier(); + + var boxColumn:String = "1"; + var boxRow:String = "1"; + var placement:String = host.labelPlacement; + if (placement == "top") { + boxRow = "2"; + boxColumn = "1"; + } else if (placement == "left") { + boxColumn = "2"; + boxRow = "1"; + } else if (placement == "bottom") { + boxRow = "1"; + boxColumn = "1"; + } else { // right + boxColumn = "1"; + boxRow = "1"; + } + var transform:Transform = new Transform(); - transform.translateY = "-8%"; transform.rotate = "45deg"; + transform.translateY = "-8%"; var borderWidth:BorderWidth = new BorderWidth(); borderWidth.bottom = 0.75; borderWidth.right = 0.75; var styles:Array = [ - new GridColumnStart("1"), - new GridRowStart("1"), + new GridColumnStart(boxColumn), + new GridRowStart(boxRow), new HeightStyle(computeSize(size * 0.625, host.unit)), new WidthStyle(computeSize(size * 0.375, host.unit)), + new AlignSelf("center"), new PlaceSelf("center"), transform, borderWidth, @@ -314,11 +406,29 @@ package org.apache.royale.style.skins _indeterminateIcon = new Div(); var size:Number = 16 * getMultiplier(); + var boxColumn:String = "1"; + var boxRow:String = "1"; + var placement:String = host.labelPlacement; + if (placement == "top") { + boxRow = "2"; + boxColumn = "1"; + } else if (placement == "left") { + boxColumn = "2"; + boxRow = "1"; + } else if (placement == "bottom") { + boxRow = "1"; + boxColumn = "1"; + } else { // right + boxColumn = "1"; + boxRow = "1"; + } + var styles:Array = [ - new GridColumnStart("1"), - new GridRowStart("1"), + new GridColumnStart(boxColumn), + new GridRowStart(boxRow), new HeightStyle("14%"), new WidthStyle(computeSize(size * 0.625, host.unit)), + new AlignSelf("center"), new PlaceSelf("center"), new BorderRadius(ThemeManager.instance.activeTheme.radiusSM), new BackgroundColor(enabledColor), diff --git a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/skins/ICheckBoxSkin.as b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/skins/ICheckBoxSkin.as index 010e9de961..bdc2a1e74b 100644 --- a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/skins/ICheckBoxSkin.as +++ b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/skins/ICheckBoxSkin.as @@ -23,6 +23,7 @@ package org.apache.royale.style.skins public interface ICheckBoxSkin extends IStyleSkin { + function updateStyles():void; function get boxStyles():Array; function get labelStyles():Array; function get checkIcon():IStyleUIBase; diff --git a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/anim/TransitionDuration.as b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/anim/TransitionDuration.as index 8da56f4a1d..82f91d2b33 100644 --- a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/anim/TransitionDuration.as +++ b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/anim/TransitionDuration.as @@ -32,12 +32,13 @@ package org.apache.royale.style.stylebeads.anim override public function set value(value:*):void { + _value = value; assert(value == "default" || isVar(value) || (isInt(value) && value >= 0), "transition-duration only accepts valid CSS variables or non-negative integers representing milliseconds"); - calculatedSelector = _value = value; + calculatedSelector = value; if(value == "default") calculatedRuleValue = ThemeManager.instance.activeTheme.defaultTransitionDuration; else calculatedRuleValue = isInt(value) ? value + "ms" : fromVar(value); - } + } } } \ No newline at end of file diff --git a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/anim/TransitionProperty.as b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/anim/TransitionProperty.as index 57b037da2f..9d58922f81 100644 --- a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/anim/TransitionProperty.as +++ b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/anim/TransitionProperty.as @@ -39,6 +39,7 @@ package org.apache.royale.style.stylebeads.anim override public function set value(value:*):void { + _value = value; switch(value) { case "default": @@ -60,10 +61,10 @@ package org.apache.royale.style.stylebeads.anim case "all": case "opacity": default: - calculatedSelector = _value = value; + calculatedSelector = value; calculatedRuleValue = acceptVar(value); break; } - } + } } } \ No newline at end of file diff --git a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/anim/TransitionTimingFunction.as b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/anim/TransitionTimingFunction.as index 89e2340b7f..ee0f6057d2 100644 --- a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/anim/TransitionTimingFunction.as +++ b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/anim/TransitionTimingFunction.as @@ -32,6 +32,7 @@ package org.apache.royale.style.stylebeads.anim } override public function set value(value:*):void { + _value = value; var ruleValue:String = value; var selectorValue:String = value; var theme:StyleTheme = ThemeManager.instance.activeTheme; @@ -57,7 +58,6 @@ package org.apache.royale.style.stylebeads.anim break; } assert(ruleValue, "transition-timing-function only accepts 'linear', 'in', 'out', 'in-out', 'initial', or a valid CSS timing function value"); - _value = value; calculatedSelector = selectorValue; calculatedRuleValue = ruleValue; } diff --git a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/flexgrid/GridTemplateColumns.as b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/flexgrid/GridTemplateColumns.as index 47e486eb4b..37a40f8f71 100644 --- a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/flexgrid/GridTemplateColumns.as +++ b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/flexgrid/GridTemplateColumns.as @@ -33,8 +33,7 @@ package org.apache.royale.style.stylebeads.flexgrid // TODO validate aspect before setting var ruleValue:String = value; var selectorValue:String = value; - var isInt:Boolean = int(value) == value; - if(isInt) + if(isInt(value)) { ruleValue = "repeat(" + value + ", minmax(0, 1fr))"; } diff --git a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/flexgrid/GridTemplateRows.as b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/flexgrid/GridTemplateRows.as index b70e1e20e0..088f0e1222 100644 --- a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/flexgrid/GridTemplateRows.as +++ b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/flexgrid/GridTemplateRows.as @@ -33,13 +33,12 @@ package org.apache.royale.style.stylebeads.flexgrid // TODO validate aspect before setting var ruleValue:String = value; var selectorValue:String = value; - var isInt:Boolean = int(value) == value; - if(isInt) + if(isInt(value)) { ruleValue = "repeat(" + value + ", minmax(0, 1fr))"; } assert(selectorValue.indexOf("--") != 0, "css variables for grid-template-rows not yet supported: " + value); - assert(selectorValue.indexOf(" ") == -1, "values with spaces for grid-template-rows not yet supported: " + value); + // assert(selectorValue.indexOf(" ") == -1, "values with spaces for grid-template-rows not yet supported: " + value); calculatedRuleValue = ruleValue; calculatedSelector = selectorValue; _value = value;
