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 f2dffe7fdcff8dc4992397c37b68b8c6971c9b4d Author: greg-dove <[email protected]> AuthorDate: Wed Apr 1 20:09:54 2026 +1300 Improvements in Divider. Followed Checkbox more to separate the divider line and the edge padding. (tried :after, but that seems like it is discouraged) --- .../main/royale/org/apache/royale/style/Divider.as | 41 +++++++- .../org/apache/royale/style/skins/DividerSkin.as | 107 ++++++++++++++------- .../org/apache/royale/style/skins/IDividerSkin.as | 27 ++++++ 3 files changed, 138 insertions(+), 37 deletions(-) diff --git a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/Divider.as b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/Divider.as index e8d142f458..2cd69f941a 100644 --- a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/Divider.as +++ b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/Divider.as @@ -18,11 +18,17 @@ //////////////////////////////////////////////////////////////////////////////// package org.apache.royale.style { + COMPILE::JS{ + import org.apache.royale.core.WrappedHTMLElement; + import org.apache.royale.style.elements.Div; + } import org.apache.royale.core.IBead; import org.apache.royale.core.IMXMLDocument; import org.apache.royale.core.ValuesManager; import org.apache.royale.events.Event; import org.apache.royale.utils.MXMLDataInterpreter; + import org.apache.royale.debugging.assert; + import org.apache.royale.style.skins.IDividerSkin; public class Divider extends StyleUIBase @@ -32,6 +38,7 @@ package org.apache.royale.style super(); unit = 'px'; } + override protected function requiresView():Boolean{ return false; } @@ -42,11 +49,41 @@ package org.apache.royale.style return false; }*/ + COMPILE::JS + private var _line:Div; + + COMPILE::JS + override protected function createElement():WrappedHTMLElement{ + var elem:WrappedHTMLElement = super.createElement(); + _line = new Div(); + addElement(_line); + return elem; + } + + /** + * The internal line element. + */ + COMPILE::JS + public function get line():Div{ + return _line; + } + + override protected function applySkin():void + { + var divSkin:IDividerSkin = skin as IDividerSkin; + assert(divSkin, "Divider requires a skin that implements IDividerSkin"); + COMPILE::JS + { + var styles:Array = divSkin.lineStyles || []; + _line.setStyles(styles, true); + } + } + private var _edgePadding:Number = 0; - public function get edgePadding():uint{ + public function get edgePadding():Number{ return _edgePadding; } - public function set edgePadding(value:uint):void{ + public function set edgePadding(value:Number):void{ if (_edgePadding != value) { _edgePadding = value; if (skin) skin.update(); diff --git a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/skins/DividerSkin.as b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/skins/DividerSkin.as index ad9a5e1543..473a2d71f1 100644 --- a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/skins/DividerSkin.as +++ b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/skins/DividerSkin.as @@ -28,16 +28,26 @@ package org.apache.royale.style.skins import org.apache.royale.style.util.ThemeManager; import org.apache.royale.style.stylebeads.background.BackgroundColor; - import org.apache.royale.style.Divider; + import org.apache.royale.style.stylebeads.flexgrid.AlignItems; + import org.apache.royale.style.stylebeads.flexgrid.JustifyContent; + import org.apache.royale.style.stylebeads.flexgrid.FlexDirection; + import org.apache.royale.style.stylebeads.flexgrid.Flex; + import org.apache.royale.style.stylebeads.flexgrid.FlexGrow; + import org.apache.royale.style.stylebeads.flexgrid.FlexBasis; + import org.apache.royale.style.stylebeads.spacing.Margin; + import org.apache.royale.style.stylebeads.layout.Display; - public class DividerSkin extends StyleSkin /*implements ICheckBoxSkin*/ + import org.apache.royale.style.Divider; + + public class DividerSkin extends StyleSkin implements IDividerSkin { public function DividerSkin() { super(); } + /** - * @royaleignorecoercion org.apache.royale.style.CheckBox + * @royaleignorecoercion org.apache.royale.style.Divider */ private function getHost():Divider { @@ -46,6 +56,7 @@ 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; @@ -55,49 +66,75 @@ package org.apache.royale.style.skins override public function update():void{ processStyles() } + + private var _lineStyles:Array; + + public function get lineStyles():Array + { + if(!_lineStyles) + processStyles(); + return _lineStyles; + } private function processStyles():void{ var host:Divider = getHost(); - var hostSize:String = getHost().size; + var hostSize:String = host.size; + var hostUnit:String = host.unit; var size:Number = getAppliedSize(hostSize); var colorAdjust:Number = getShading(hostSize); - var edgePadding:Number = host.edgePadding; - var appliedSize:String = computeSize(size + edgePadding * 2 , host.unit); - //edgePadding will be applied with transparent borders; - var borderPadding:Border - if (edgePadding) { - var appliedEdgePadding:String = computeSize(edgePadding,host.unit); - borderPadding = new Border(); - borderPadding.color = 'transparent'; - } + var edgePadding:String = computeSize(host.edgePadding, hostUnit); - var styles:Array = [ - new BackgroundColor("slate-"+colorAdjust), - new BorderRadius(ThemeManager.instance.activeTheme.radiusSM), - ] - if (borderPadding) { - styles.push(borderPadding); - styles.push(new BackgroundClip('padding-box')); - } - if (getHost().vertical) { - styles.push(new HeightStyle('100%')); - styles.push(new WidthStyle(appliedSize)); - if (borderPadding) { - //there seems to be no way to configure top and bottom border...tbd - borderPadding.width = appliedEdgePadding; - } + var appliedSize:String = computeSize(size, hostUnit); + + var hostStyles:Array = [ + // new BackgroundColor('transparent'), //probably not needed + new Display('flex'), + new Flex(0), + new JustifyContent('center'), + new AlignItems('center') + ]; + + var lineStylesArr:Array = [ + new BackgroundColor("slate-"+colorAdjust), + new BorderRadius(ThemeManager.instance.activeTheme.radiusSM) + ]; + + lineStylesArr.push(new Display('block')); // Ensure it renders + + if (host.vertical) { + hostStyles.push(new FlexDirection('column')); + hostStyles.push(new HeightStyle('100%')); + lineStylesArr.push(new WidthStyle(appliedSize)); + lineStylesArr.push(new FlexGrow(1)); + lineStylesArr.push(new FlexBasis(0)); + + if (edgePadding) { + var hMargin:Margin = new Margin(); + hMargin.unit = hostUnit; + hMargin.left = edgePadding; + hMargin.right = edgePadding; + lineStylesArr.push(hMargin); + } } else { - - if (borderPadding) { - //there seems to be no way to configure left and right border...tbd - borderPadding.width = appliedEdgePadding; + hostStyles.push(new FlexDirection('row')); + hostStyles.push(new WidthStyle('100%')); + + lineStylesArr.push(new HeightStyle(appliedSize)); + lineStylesArr.push(new FlexGrow(1)); + lineStylesArr.push(new FlexBasis(0)); + + if (edgePadding) { + var vMargin:Margin = new Margin(); + vMargin.unit = hostUnit; + vMargin.top = edgePadding; + vMargin.bottom = edgePadding; + lineStylesArr.push(vMargin); } - styles.push(new WidthStyle('100%')); - styles.push(new HeightStyle(appliedSize)); } - _styles = styles; + _lineStyles = lineStylesArr; + _styles = hostStyles; host.setStyles(_styles, true); } diff --git a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/skins/IDividerSkin.as b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/skins/IDividerSkin.as new file mode 100644 index 0000000000..907dfcca69 --- /dev/null +++ b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/skins/IDividerSkin.as @@ -0,0 +1,27 @@ +//////////////////////////////////////////////////////////////////////////////// +// +// Licensed to the Apache Software Foundation (ASF) under one or more +// contributor license agreements. See the NOTICE file distributed with +// this work for additional information regarding copyright ownership. +// The ASF licenses this file to You under the Apache License, Version 2.0 +// (the "License"); you may not use this file except in compliance with +// the License. You may obtain a copy of the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. +// +//////////////////////////////////////////////////////////////////////////////// +package org.apache.royale.style.skins +{ + import org.apache.royale.style.IStyleSkin; + + public interface IDividerSkin extends IStyleSkin + { + function get lineStyles():Array; + } +}
