This is an automated email from the ASF dual-hosted git repository.
yishayw pushed a commit to branch develop
in repository https://gitbox.apache.org/repos/asf/royale-asjs.git
The following commit(s) were added to refs/heads/develop by this push:
new 41da87bf8b Added Steps
41da87bf8b is described below
commit 41da87bf8be61aa52156004a0f6aafeae6e72a70
Author: Yishay Weiss <[email protected]>
AuthorDate: Sun Apr 19 12:59:12 2026 +0300
Added Steps
---
.../src/main/royale/StepsPlayGround.mxml | 81 +++++++
.../TourDeStyle/src/main/royale/TourDeStyle.mxml | 37 +++
.../projects/Style/src/main/resources/defaults.css | 8 +
.../Style/src/main/resources/style-manifest.xml | 5 +
.../main/royale/org/apache/royale/style/Step.as | 253 +++++++++++++++++++++
.../main/royale/org/apache/royale/style/Steps.as | 86 +++++++
.../org/apache/royale/style/skins/IStepSkin.as | 31 +++
.../org/apache/royale/style/skins/StepSkin.as | 224 ++++++++++++++++++
.../org/apache/royale/style/skins/StepsSkin.as | 66 ++++++
9 files changed, 791 insertions(+)
diff --git a/examples/royale/TourDeStyle/src/main/royale/StepsPlayGround.mxml
b/examples/royale/TourDeStyle/src/main/royale/StepsPlayGround.mxml
new file mode 100644
index 0000000000..7d8880267e
--- /dev/null
+++ b/examples/royale/TourDeStyle/src/main/royale/StepsPlayGround.mxml
@@ -0,0 +1,81 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+ 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.
+
+-->
+<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009";
+ xmlns:s="library://ns.apache.org/royale/style"
+ xmlns:e="library://ns.apache.org/royale/style-elements">
+
+ <s:initialView>
+ <s:View>
+ <s:FlexContainer vertical="true" gap="24">
+
+ <!-- Horizontal steps -->
+ <e:Div text="Horizontal — First two steps completed, last two
pending." />
+ <s:Steps>
+ <s:Step text="Register" content="1" completed="true" />
+ <s:Step text="Choose plan" content="2" completed="true" />
+ <s:Step text="Purchase" content="3" />
+ <s:Step text="Receive Product" content="4" />
+ </s:Steps>
+
+ <!-- Vertical steps -->
+ <e:Div text="Vertical — Same four steps in vertical layout." />
+ <s:Steps vertical="true">
+ <s:Step text="Register" content="1" completed="true" />
+ <s:Step text="Choose plan" content="2" completed="true" />
+ <s:Step text="Purchase" content="3" />
+ <s:Step text="Receive Product" content="4" />
+ </s:Steps>
+
+ <!-- Custom content -->
+ <e:Div text="Custom Content — Symbols instead of numbers in circles."
/>
+ <s:Steps>
+ <s:Step text="Step 1" content="?" completed="true" />
+ <s:Step text="Step 2" content="!" completed="true" />
+ <s:Step text="Step 3" content="✓" completed="true" />
+ <s:Step text="Step 4" content="✕" />
+ <s:Step text="Step 5" content="★" />
+ </s:Steps>
+
+ <!-- Sizes -->
+ <e:Div text="Sizes — sm, md (default), and lg." />
+ <s:Steps>
+ <s:Step text="Register" content="1" size="sm" completed="true" />
+ <s:Step text="Choose plan" content="2" size="sm" completed="true"
/>
+ <s:Step text="Purchase" content="3" size="sm" />
+ <s:Step text="Receive Product" content="4" size="sm" />
+ </s:Steps>
+ <s:Steps>
+ <s:Step text="Register" content="1" completed="true" />
+ <s:Step text="Choose plan" content="2" completed="true" />
+ <s:Step text="Purchase" content="3" />
+ <s:Step text="Receive Product" content="4" />
+ </s:Steps>
+ <s:Steps>
+ <s:Step text="Register" content="1" size="lg" completed="true" />
+ <s:Step text="Choose plan" content="2" size="lg" completed="true"
/>
+ <s:Step text="Purchase" content="3" size="lg" />
+ <s:Step text="Receive Product" content="4" size="lg" />
+ </s:Steps>
+
+ </s:FlexContainer>
+ </s:View>
+ </s:initialView>
+
+</s:Application>
diff --git a/examples/royale/TourDeStyle/src/main/royale/TourDeStyle.mxml
b/examples/royale/TourDeStyle/src/main/royale/TourDeStyle.mxml
index 402baa9929..37a5821ecf 100644
--- a/examples/royale/TourDeStyle/src/main/royale/TourDeStyle.mxml
+++ b/examples/royale/TourDeStyle/src/main/royale/TourDeStyle.mxml
@@ -33,6 +33,7 @@
paginationSection.visible = (idx == 5);
navbarSection.visible = (idx == 6);
menuSection.visible = (idx == 7);
+ stepsSection.visible = (idx == 8);
}
private function openModal(id:String):void
@@ -59,6 +60,7 @@
<s:Tab text="Pagination" />
<s:Tab text="Navbar" />
<s:Tab text="Menu" />
+ <s:Tab text="Steps" />
</s:tabs>
</s:TabBar>
@@ -245,6 +247,41 @@
</s:Menu>
</s:FlexContainer>
+ <!-- Steps Section -->
+ <s:FlexContainer id="stepsSection" visible="false" gap="24"
vertical="true">
+ <s:Steps>
+ <s:Step text="Register" content="1" completed="true" />
+ <s:Step text="Choose plan" content="2" completed="true" />
+ <s:Step text="Purchase" content="3" />
+ <s:Step text="Receive Product" content="4" />
+ </s:Steps>
+ <s:Steps vertical="true">
+ <s:Step text="Register" content="1" completed="true" />
+ <s:Step text="Choose plan" content="2" completed="true" />
+ <s:Step text="Purchase" content="3" />
+ <s:Step text="Receive Product" content="4" />
+ </s:Steps>
+ <s:Steps>
+ <s:Step text="Step 1" content="?" completed="true" />
+ <s:Step text="Step 2" content="!" completed="true" />
+ <s:Step text="Step 3" content="✓" completed="true" />
+ <s:Step text="Step 4" content="✕" />
+ <s:Step text="Step 5" content="★" />
+ </s:Steps>
+ <s:Steps>
+ <s:Step text="Register" content="1" size="sm" completed="true"
/>
+ <s:Step text="Choose plan" content="2" size="sm"
completed="true" />
+ <s:Step text="Purchase" content="3" size="sm" />
+ <s:Step text="Receive Product" content="4" size="sm" />
+ </s:Steps>
+ <s:Steps>
+ <s:Step text="Register" content="1" size="lg" completed="true"
/>
+ <s:Step text="Choose plan" content="2" size="lg"
completed="true" />
+ <s:Step text="Purchase" content="3" size="lg" />
+ <s:Step text="Receive Product" content="4" size="lg" />
+ </s:Steps>
+ </s:FlexContainer>
+
</s:FlexContainer>
</s:View>
</s:initialView>
diff --git a/frameworks/projects/Style/src/main/resources/defaults.css
b/frameworks/projects/Style/src/main/resources/defaults.css
index ae64dfe46c..d4b34cc9a9 100644
--- a/frameworks/projects/Style/src/main/resources/defaults.css
+++ b/frameworks/projects/Style/src/main/resources/defaults.css
@@ -143,6 +143,14 @@ MenuDetails
{
IStyleSkin:
ClassReference("org.apache.royale.style.skins.MenuDetailsSkin");
}
+Steps
+{
+ IStyleSkin: ClassReference("org.apache.royale.style.skins.StepsSkin");
+}
+Step
+{
+ IStyleSkin: ClassReference("org.apache.royale.style.skins.StepSkin");
+}
DataItemRenderer
{
diff --git a/frameworks/projects/Style/src/main/resources/style-manifest.xml
b/frameworks/projects/Style/src/main/resources/style-manifest.xml
index 2b2ce5c72d..7e3f6b0265 100644
--- a/frameworks/projects/Style/src/main/resources/style-manifest.xml
+++ b/frameworks/projects/Style/src/main/resources/style-manifest.xml
@@ -50,6 +50,8 @@
<component id="MenuItem" class="org.apache.royale.style.MenuItem"/>
<component id="MenuTitle" class="org.apache.royale.style.MenuTitle"/>
<component id="MenuDetails" class="org.apache.royale.style.MenuDetails"/>
+ <component id="Steps" class="org.apache.royale.style.Steps"/>
+ <component id="Step" class="org.apache.royale.style.Step"/>
<component id="Toggle" class="org.apache.royale.style.Toggle"/>
<component id="FlexContainer" class="org.apache.royale.style.FlexContainer"/>
<component id="GridContainer" class="org.apache.royale.style.GridContainer"/>
@@ -317,5 +319,8 @@
<component id="MenuTitleSkin"
class="org.apache.royale.style.skins.MenuTitleSkin"/>
<component id="MenuDetailsSkin"
class="org.apache.royale.style.skins.MenuDetailsSkin"/>
<component id="IMenuDetailsSkin"
class="org.apache.royale.style.skins.IMenuDetailsSkin"/>
+ <component id="StepsSkin" class="org.apache.royale.style.skins.StepsSkin"/>
+ <component id="StepSkin" class="org.apache.royale.style.skins.StepSkin"/>
+ <component id="IStepSkin" class="org.apache.royale.style.skins.IStepSkin"/>
</componentPackage>
diff --git
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/Step.as
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/Step.as
new file mode 100644
index 0000000000..a6b527c797
--- /dev/null
+++ b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/Step.as
@@ -0,0 +1,253 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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
+{
+ COMPILE::JS
+ {
+ import org.apache.royale.core.WrappedHTMLElement;
+ import org.apache.royale.html.util.addElementToWrapper;
+ }
+ import org.apache.royale.debugging.assert;
+ import org.apache.royale.style.skins.IStepSkin;
+ import org.apache.royale.style.elements.Div;
+ import org.apache.royale.style.elements.Span;
+
+ public class Step extends StyleUIBase
+ {
+ public function Step()
+ {
+ super();
+ }
+
+ // Step is a purely visual element with no user interaction,
+ // so it doesn't need MVC view or controller beads.
+ override protected function requiresView():Boolean
+ {
+ return false;
+ }
+
+ override protected function requiresController():Boolean
+ {
+ return false;
+ }
+
+ private var _text:String = "";
+
+ public function get text():String
+ {
+ return _text;
+ }
+
+ public function set text(value:String):void
+ {
+ if (_text != value)
+ {
+ _text = value;
+ COMPILE::JS
+ {
+ if (_labelElem)
+ _labelElem.element.textContent
= value;
+ }
+ }
+ }
+
+ private var _content:String = "";
+
+ /**
+ * Custom content to display inside the circle.
+ * If empty, the circle shows the step number.
+ */
+ public function get content():String
+ {
+ return _content;
+ }
+
+ public function set content(value:String):void
+ {
+ if (_content != value)
+ {
+ _content = value;
+ COMPILE::JS
+ {
+ if (_circleElem)
+ _circleElem.element.textContent
= value;
+ }
+ }
+ }
+
+ private var _vertical:Boolean = false;
+
+ public function get vertical():Boolean
+ {
+ return _vertical;
+ }
+
+ public function set vertical(value:Boolean):void
+ {
+ if (_vertical != value)
+ {
+ _vertical = value;
+ if (skin)
+ {
+ skin.update();
+ applySkin();
+ }
+ }
+ }
+
+ private var _completed:Boolean = false;
+
+ public function get completed():Boolean
+ {
+ return _completed;
+ }
+
+ public function set completed(value:Boolean):void
+ {
+ if (_completed != value)
+ {
+ _completed = value;
+ toggleAttribute("data-completed", value);
+ COMPILE::JS
+ {
+ if (_connectorRow)
+ {
+
setElementDataCompleted(_connectorRow.element, value);
+
setElementDataCompleted(_beforeLine.element, value);
+
setElementDataCompleted(_circleElem.element, value);
+
setElementDataCompleted(_afterLine.element, value);
+
setElementDataCompleted(_labelElem.element, value);
+ }
+ }
+ }
+ }
+
+ COMPILE::JS
+ private function setElementDataCompleted(el:Object,
value:Boolean):void
+ {
+ if (value)
+ el.setAttribute("data-completed", "");
+ else
+ el.removeAttribute("data-completed");
+ }
+
+ COMPILE::JS
+ private var _connectorRow:Div;
+
+ COMPILE::JS
+ private var _beforeLine:Span;
+
+ COMPILE::JS
+ private var _circleElem:Span;
+
+ COMPILE::JS
+ private var _afterLine:Span;
+
+ COMPILE::JS
+ private var _labelElem:Span;
+
+ COMPILE::JS
+ public function get connectorRow():Div
+ {
+ return _connectorRow;
+ }
+
+ COMPILE::JS
+ public function get beforeLine():Span
+ {
+ return _beforeLine;
+ }
+
+ COMPILE::JS
+ public function get circleElem():Span
+ {
+ return _circleElem;
+ }
+
+ COMPILE::JS
+ public function get afterLine():Span
+ {
+ return _afterLine;
+ }
+
+ COMPILE::JS
+ public function get labelElem():Span
+ {
+ return _labelElem;
+ }
+
+ override protected function getTag():String
+ {
+ return "li";
+ }
+
+ COMPILE::JS
+ override protected function createElement():WrappedHTMLElement
+ {
+ addElementToWrapper(this, 'li');
+
+ _connectorRow = new Div();
+ element.appendChild(_connectorRow.element);
+
+ _beforeLine = new Span();
+ _connectorRow.element.appendChild(_beforeLine.element);
+
+ _circleElem = new Span();
+ _circleElem.element.textContent = _content;
+ _connectorRow.element.appendChild(_circleElem.element);
+
+ _afterLine = new Span();
+ _connectorRow.element.appendChild(_afterLine.element);
+
+ _labelElem = new Span();
+ _labelElem.element.textContent = _text;
+ element.appendChild(_labelElem.element);
+
+ if (_completed)
+ {
+ setElementDataCompleted(_connectorRow.element,
true);
+ setElementDataCompleted(_beforeLine.element,
true);
+ setElementDataCompleted(_circleElem.element,
true);
+ setElementDataCompleted(_afterLine.element,
true);
+ setElementDataCompleted(_labelElem.element,
true);
+ }
+
+ return element;
+ }
+
+ override protected function applySkin():void
+ {
+ var stepSkin:IStepSkin = skin as IStepSkin;
+ assert(stepSkin, "Step requires a skin that implements
IStepSkin");
+ COMPILE::JS
+ {
+
_connectorRow.setStyles(stepSkin.connectorStyles, true);
+ _circleElem.setStyles(stepSkin.circleStyles,
true);
+
_beforeLine.setStyles(stepSkin.beforeLineStyles, true);
+ _afterLine.setStyles(stepSkin.afterLineStyles,
true);
+ _labelElem.setStyles(stepSkin.labelStyles,
true);
+ }
+ }
+
+ override public function getWrapperStyle():String
+ {
+ return 'step';
+ }
+ }
+}
diff --git
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/Steps.as
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/Steps.as
new file mode 100644
index 0000000000..14a255212f
--- /dev/null
+++ b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/Steps.as
@@ -0,0 +1,86 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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
+{
+ COMPILE::JS
+ {
+ import org.apache.royale.core.WrappedHTMLElement;
+ import org.apache.royale.html.util.addElementToWrapper;
+ }
+
+ import org.apache.royale.core.IChild;
+
+ public class Steps extends Group
+ {
+ public function Steps()
+ {
+ super();
+ }
+
+ private var _vertical:Boolean = false;
+
+ public function get vertical():Boolean
+ {
+ return _vertical;
+ }
+
+ public function set vertical(value:Boolean):void
+ {
+ if (value != _vertical)
+ {
+ _vertical = value;
+ if (skin) skin.update();
+ propagateVertical();
+ }
+ }
+
+ override public function addElement(c:IChild,
dispatchEvent:Boolean = true):void
+ {
+ // Set vertical before super.addElement() so the Step's
skin
+ // initializes with the correct orientation on first
render.
+ var step:Step = c as Step;
+ if (step)
+ step.vertical = _vertical;
+ super.addElement(c, dispatchEvent);
+ }
+
+ private function propagateVertical():void
+ {
+ for (var i:int = 0; i < numElements; i++)
+ {
+ var step:Step = getElementAt(i) as Step;
+ if (step)
+ step.vertical = _vertical;
+ }
+ }
+
+ COMPILE::JS
+ override protected function createElement():WrappedHTMLElement
+ {
+ addElementToWrapper(this, 'ol');
+ element.setAttribute("role", "list");
+ return element;
+ }
+
+ override public function getWrapperStyle():String
+ {
+ return 'steps';
+ }
+ }
+}
diff --git
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/skins/IStepSkin.as
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/skins/IStepSkin.as
new file mode 100644
index 0000000000..93d2139f43
--- /dev/null
+++
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/skins/IStepSkin.as
@@ -0,0 +1,31 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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 IStepSkin extends IStyleSkin
+ {
+ function get connectorStyles():Array;
+ function get circleStyles():Array;
+ function get beforeLineStyles():Array;
+ function get afterLineStyles():Array;
+ function get labelStyles():Array;
+ }
+}
diff --git
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/skins/StepSkin.as
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/skins/StepSkin.as
new file mode 100644
index 0000000000..572275c91f
--- /dev/null
+++
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/skins/StepSkin.as
@@ -0,0 +1,224 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.StyleSkin;
+ import org.apache.royale.style.Step;
+ import org.apache.royale.core.IStrand;
+ import org.apache.royale.style.colors.ColorSwatch;
+ import org.apache.royale.style.colors.ThemeColorSet;
+ import org.apache.royale.style.util.ThemeManager;
+ import org.apache.royale.style.stylebeads.layout.Display;
+ import org.apache.royale.style.stylebeads.flexgrid.FlexDirection;
+ import org.apache.royale.style.stylebeads.flexgrid.FlexGrow;
+ import org.apache.royale.style.stylebeads.flexgrid.AlignItems;
+ import org.apache.royale.style.stylebeads.flexgrid.JustifyContent;
+ import org.apache.royale.style.stylebeads.flexgrid.Gap;
+ import org.apache.royale.style.stylebeads.sizing.HeightStyle;
+ import org.apache.royale.style.stylebeads.sizing.WidthStyle;
+ import org.apache.royale.style.stylebeads.background.BackgroundColor;
+ import org.apache.royale.style.stylebeads.border.Border;
+ import org.apache.royale.style.stylebeads.border.BorderColor;
+ import org.apache.royale.style.stylebeads.border.BorderRadius;
+ import org.apache.royale.style.stylebeads.typography.TextColor;
+ import org.apache.royale.style.stylebeads.typography.FontSize;
+ import org.apache.royale.style.stylebeads.typography.FontWeight;
+ import org.apache.royale.style.stylebeads.states.attribute.DataState;
+ import org.apache.royale.style.stylebeads.spacing.Padding;
+
+ public class StepSkin extends StyleSkin implements IStepSkin
+ {
+ public function StepSkin()
+ {
+ super();
+ }
+
+ private var _connectorStyles:Array;
+ private var _circleStyles:Array;
+ private var _beforeLineStyles:Array;
+ private var _afterLineStyles:Array;
+ private var _labelStyles:Array;
+
+ /**
+ * @royaleignorecoercion org.apache.royale.style.Step
+ */
+ private function get host():Step
+ {
+ return _strand as Step;
+ }
+
+ override public function set strand(value:IStrand):void
+ {
+ super.strand = value;
+ if (_styles)
+ return;
+ processStyles();
+ }
+
+ override public function update():void
+ {
+ processStyles();
+ }
+
+ private function getMultiplier():Number
+ {
+ switch(host.size)
+ {
+ case "sm":
+ return 0.875;
+ case "lg":
+ return 1.125;
+ case "xl":
+ return 1.25;
+ case "md":
+ default:
+ return 1;
+ }
+ }
+
+ private function processStyles():void
+ {
+ var hostUnit:String = host.unit;
+ var vert:Boolean = host.vertical;
+ var mult:Number = getMultiplier();
+ var colorSet:ThemeColorSet =
ThemeManager.instance.activeTheme.themeColorSet;
+
+ var completedBg:ColorSwatch =
colorSet.getSwatch(ThemeColorSet.PRIMARY, 500);
+ var completedText:ColorSwatch =
colorSet.getSwatch(ThemeColorSet.BASE, 0);
+ var incompleteBg:ColorSwatch =
colorSet.getSwatch(ThemeColorSet.BASE, 100);
+ var incompleteBorder:ColorSwatch =
colorSet.getSwatch(ThemeColorSet.BASE, 300);
+ var incompleteText:ColorSwatch =
colorSet.getSwatch(ThemeColorSet.BASE, 500);
+ var lineBg:ColorSwatch =
colorSet.getSwatch(ThemeColorSet.BASE, 300);
+
+ var hostSize:String = host.size;
+ var circleSize:Number = 8 * mult;
+ var lineThickness:Number = 2 * mult;
+
+ var completedDataState:DataState = new
DataState("completed", [
+ new BackgroundColor(completedBg.colorSpecifier)
+ ]);
+
+ // Label styles: shared for both orientations
+ _labelStyles = [
+ new TextColor(incompleteText),
+ new DataState("completed", [
+ new
TextColor(colorSet.getSwatch(ThemeColorSet.BASE, 700))
+ ])
+ ];
+
+ // Line base: shared appearance for connectors
+ var lineBase:Array = [
+ new FlexGrow(1),
+ new BackgroundColor(lineBg.colorSpecifier),
+ completedDataState
+ ];
+
+ if (vert)
+ {
+ _styles = [
+ new Display("flex"),
+ new FlexDirection("row"),
+ new Gap(computeSize(16 * mult,
hostUnit)),
+ new FontSize(hostSize)
+ ];
+ _connectorStyles = [
+ new Display("flex"),
+ new FlexDirection("column"),
+ new AlignItems("center")
+ ];
+ _beforeLineStyles = [new Display("none")];
+ _afterLineStyles = [new
WidthStyle(computeSize(lineThickness, hostUnit))].concat(lineBase);
+
+ var labelPad:Padding = new Padding();
+ labelPad.top = computeSize(4 * mult, hostUnit);
+ labelPad.bottom = computeSize(32 * mult,
hostUnit);
+ _labelStyles.unshift(labelPad);
+ }
+ else
+ {
+ _styles = [
+ new Display("flex"),
+ new FlexDirection("column"),
+ new AlignItems("center"),
+ new FlexGrow(1),
+ new Gap(computeSize(8 * mult,
hostUnit)),
+ new FontSize(hostSize)
+ ];
+ _connectorStyles = [
+ new Display("flex"),
+ new WidthStyle("full"),
+ new AlignItems("center")
+ ];
+ _beforeLineStyles = _afterLineStyles = [new
HeightStyle(computeSize(lineThickness, hostUnit))].concat(lineBase);
+ }
+
+ // Circle styles: same for both orientations
+ var border:Border = new Border();
+ border.color = incompleteBorder.colorSpecifier;
+ border.style = "solid";
+ border.width = computeSize(1, hostUnit);
+
+ _circleStyles = [
+ new Display("flex"),
+ new HeightStyle(circleSize),
+ new WidthStyle(circleSize),
+ new AlignItems("center"),
+ new JustifyContent("center"),
+ new BorderRadius("9999px"),
+ new FontSize(hostSize),
+ new FontWeight("600"),
+ new
BackgroundColor(incompleteBg.colorSpecifier),
+ new TextColor(incompleteText),
+ border,
+ new DataState("completed", [
+ new
BackgroundColor(completedBg.colorSpecifier),
+ new TextColor(completedText),
+ new BorderColor("border",
"border-color", "transparent")
+ ])
+ ];
+
+ host.setStyles(_styles);
+ }
+
+ public function get connectorStyles():Array
+ {
+ return _connectorStyles;
+ }
+
+ public function get circleStyles():Array
+ {
+ return _circleStyles;
+ }
+
+ public function get beforeLineStyles():Array
+ {
+ return _beforeLineStyles;
+ }
+
+ public function get afterLineStyles():Array
+ {
+ return _afterLineStyles;
+ }
+
+ public function get labelStyles():Array
+ {
+ return _labelStyles;
+ }
+ }
+}
diff --git
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/skins/StepsSkin.as
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/skins/StepsSkin.as
new file mode 100644
index 0000000000..4ee3b2868f
--- /dev/null
+++
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/skins/StepsSkin.as
@@ -0,0 +1,66 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.StyleSkin;
+ import org.apache.royale.style.Steps;
+ import org.apache.royale.core.IStrand;
+ import org.apache.royale.style.stylebeads.layout.Display;
+ import org.apache.royale.style.stylebeads.flexgrid.FlexDirection;
+ import org.apache.royale.style.stylebeads.typography.TextAlign;
+
+ public class StepsSkin extends StyleSkin
+ {
+ public function StepsSkin()
+ {
+ super();
+ }
+
+ /**
+ * @royaleignorecoercion org.apache.royale.style.Steps
+ */
+ private function get host():Steps
+ {
+ return _strand as Steps;
+ }
+
+ override public function set strand(value:IStrand):void
+ {
+ super.strand = value;
+ if (_styles)
+ return;
+ processStyles();
+ }
+
+ override public function update():void
+ {
+ processStyles();
+ }
+
+ private function processStyles():void
+ {
+ _styles = [
+ new Display("flex"),
+ new FlexDirection(host.vertical ? "column" :
"row"),
+ new TextAlign("center")
+ ];
+ host.setStyles(_styles);
+ }
+ }
+}
