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 f47bc74e1f Adding Footer
new 7c43a40616 Merge branch 'develop' of
https://github.com/apache/royale-asjs into develop
f47bc74e1f is described below
commit f47bc74e1fba12263d980e73c152d939c101a5af
Author: Yishay Weiss <[email protected]>
AuthorDate: Fri May 1 15:35:53 2026 +0100
Adding Footer
---
.../src/main/royale/FooterPlayGround.mxml | 80 ++++++++++++++++++++++
.../TourDeStyle/src/main/royale/TourDeStyle.mxml | 50 ++++++++++++++
.../projects/Style/src/main/resources/defaults.css | 4 ++
.../Style/src/main/resources/style-manifest.xml | 1 +
.../projects/Style/src/main/royale/StyleClasses.as | 2 +
.../main/royale/org/apache/royale/style/Footer.as | 46 +++++++++++++
.../org/apache/royale/style/skins/FooterSkin.as | 70 +++++++++++++++++++
7 files changed, 253 insertions(+)
diff --git a/examples/royale/TourDeStyle/src/main/royale/FooterPlayGround.mxml
b/examples/royale/TourDeStyle/src/main/royale/FooterPlayGround.mxml
new file mode 100644
index 0000000000..d1c147a509
--- /dev/null
+++ b/examples/royale/TourDeStyle/src/main/royale/FooterPlayGround.mxml
@@ -0,0 +1,80 @@
+<?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">
+
+ <e:Div text="Basic Footer — Copyright and links." />
+ <s:Footer>
+ <e:Span text="Acme Inc. © 2026" />
+ <s:FlexContainer gap="12">
+ <e:A text="Docs" href="#" />
+ <e:A text="Privacy" href="#" />
+ <e:A text="Terms" href="#" />
+ </s:FlexContainer>
+ </s:Footer>
+
+ <e:Div text="Footer with Logo — Brand block and link groups." />
+ <s:Footer>
+ <s:FlexContainer vertical="true" gap="4">
+ <e:Span text="ACME Industries Ltd." />
+ <e:Small text="Providing reliable tech since 1992" />
+ </s:FlexContainer>
+ <s:FlexContainer gap="20">
+ <s:FlexContainer vertical="true" gap="4">
+ <e:Strong text="Services" />
+ <e:A text="Branding" href="#" />
+ <e:A text="Design" href="#" />
+ </s:FlexContainer>
+ <s:FlexContainer vertical="true" gap="4">
+ <e:Strong text="Company" />
+ <e:A text="About" href="#" />
+ <e:A text="Contact" href="#" />
+ </s:FlexContainer>
+ </s:FlexContainer>
+ </s:Footer>
+
+ <e:Div text="Centered Footer — Links and social actions." />
+ <s:Footer>
+ <s:FlexContainer vertical="true" gap="10">
+ <s:FlexContainer gap="12">
+ <e:A text="About us" href="#" />
+ <e:A text="Contact" href="#" />
+ <e:A text="Jobs" href="#" />
+ <e:A text="Press kit" href="#" />
+ </s:FlexContainer>
+ <s:FlexContainer gap="10">
+ <e:Span text="X" />
+ <e:Span text="YT" />
+ <e:Span text="FB" />
+ </s:FlexContainer>
+ <e:Small text="Copyright © 2026 - All rights reserved" />
+ </s:FlexContainer>
+ </s:Footer>
+
+ </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 37a5821ecf..64ce88ab33 100644
--- a/examples/royale/TourDeStyle/src/main/royale/TourDeStyle.mxml
+++ b/examples/royale/TourDeStyle/src/main/royale/TourDeStyle.mxml
@@ -34,6 +34,7 @@
navbarSection.visible = (idx == 6);
menuSection.visible = (idx == 7);
stepsSection.visible = (idx == 8);
+ footerSection.visible = (idx == 9);
}
private function openModal(id:String):void
@@ -61,6 +62,7 @@
<s:Tab text="Navbar" />
<s:Tab text="Menu" />
<s:Tab text="Steps" />
+ <s:Tab text="Footer" />
</s:tabs>
</s:TabBar>
@@ -282,6 +284,54 @@
</s:Steps>
</s:FlexContainer>
+ <!-- Footer Section -->
+ <s:FlexContainer id="footerSection" visible="false" gap="24"
vertical="true">
+ <s:Footer>
+ <e:Span text="Acme Inc. © 2026" />
+ <s:FlexContainer gap="12">
+ <e:A text="Docs" href="#" />
+ <e:A text="Privacy" href="#" />
+ <e:A text="Terms" href="#" />
+ </s:FlexContainer>
+ </s:Footer>
+
+ <s:Footer>
+ <s:FlexContainer vertical="true" gap="4">
+ <e:Span text="ACME Industries Ltd." />
+ <e:Small text="Providing reliable tech since 1992" />
+ </s:FlexContainer>
+ <s:FlexContainer gap="20">
+ <s:FlexContainer vertical="true" gap="4">
+ <e:Strong text="Services" />
+ <e:A text="Branding" href="#" />
+ <e:A text="Design" href="#" />
+ </s:FlexContainer>
+ <s:FlexContainer vertical="true" gap="4">
+ <e:Strong text="Company" />
+ <e:A text="About" href="#" />
+ <e:A text="Contact" href="#" />
+ </s:FlexContainer>
+ </s:FlexContainer>
+ </s:Footer>
+
+ <s:Footer>
+ <s:FlexContainer vertical="true" gap="10">
+ <s:FlexContainer gap="12">
+ <e:A text="About us" href="#" />
+ <e:A text="Contact" href="#" />
+ <e:A text="Jobs" href="#" />
+ <e:A text="Press kit" href="#" />
+ </s:FlexContainer>
+ <s:FlexContainer gap="10">
+ <e:Span text="X" />
+ <e:Span text="YT" />
+ <e:Span text="FB" />
+ </s:FlexContainer>
+ <e:Small text="Copyright © 2026 - All rights reserved" />
+ </s:FlexContainer>
+ </s:Footer>
+ </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 467add0004..156c27d70a 100644
--- a/frameworks/projects/Style/src/main/resources/defaults.css
+++ b/frameworks/projects/Style/src/main/resources/defaults.css
@@ -53,6 +53,10 @@ FileInput
{
IStyleSkin:
ClassReference("org.apache.royale.style.skins.FileInputSkin");
}
+Footer
+{
+ IStyleSkin: ClassReference("org.apache.royale.style.skins.FooterSkin");
+}
View
{
IBeadView: ClassReference("org.apache.royale.html.beads.GroupView");
diff --git a/frameworks/projects/Style/src/main/resources/style-manifest.xml
b/frameworks/projects/Style/src/main/resources/style-manifest.xml
index 8ba4def654..b066abd484 100644
--- a/frameworks/projects/Style/src/main/resources/style-manifest.xml
+++ b/frameworks/projects/Style/src/main/resources/style-manifest.xml
@@ -27,6 +27,7 @@
<component id="Radio" class="org.apache.royale.style.Radio"/>
<component id="Badge" class="org.apache.royale.style.Badge"/>
<component id="FileInput" class="org.apache.royale.style.FileInput"/>
+ <component id="Footer" class="org.apache.royale.style.Footer"/>
<component id="View" class="org.apache.royale.style.View"/>
<component id="Container" class="org.apache.royale.style.Container"/>
<component id="CheckBox" class="org.apache.royale.style.CheckBox"/>
diff --git a/frameworks/projects/Style/src/main/royale/StyleClasses.as
b/frameworks/projects/Style/src/main/royale/StyleClasses.as
index 6b891a9cf7..13235efd4c 100644
--- a/frameworks/projects/Style/src/main/royale/StyleClasses.as
+++ b/frameworks/projects/Style/src/main/royale/StyleClasses.as
@@ -37,6 +37,8 @@ package
import org.apache.royale.style.skins.ModalBodySkin;
ModalBodySkin;
import org.apache.royale.style.skins.ModalTitleSkin;
ModalTitleSkin;
import org.apache.royale.style.skins.ModalActionsSkin;
ModalActionsSkin;
+ import org.apache.royale.style.Footer; Footer;
+ import org.apache.royale.style.skins.FooterSkin; FooterSkin;
}
}
diff --git
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/Footer.as
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/Footer.as
new file mode 100644
index 0000000000..32dfc0e61a
--- /dev/null
+++
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/Footer.as
@@ -0,0 +1,46 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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;
+ }
+
+ public class Footer extends Group
+ {
+ public function Footer()
+ {
+ super();
+ }
+
+ COMPILE::JS
+ override protected function createElement():WrappedHTMLElement
+ {
+ addElementToWrapper(this, "footer");
+ return element;
+ }
+
+ override public function getWrapperStyle():String
+ {
+ return "footer";
+ }
+ }
+}
diff --git
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/skins/FooterSkin.as
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/skins/FooterSkin.as
new file mode 100644
index 0000000000..21caa5223e
--- /dev/null
+++
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/skins/FooterSkin.as
@@ -0,0 +1,70 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.core.IStrand;
+ import org.apache.royale.style.Footer;
+ import org.apache.royale.style.StyleSkin;
+ import org.apache.royale.style.colors.ColorSwatch;
+ import org.apache.royale.style.colors.ThemeColorSet;
+ import org.apache.royale.style.stylebeads.background.BackgroundColor;
+ import org.apache.royale.style.stylebeads.border.BorderRadius;
+ import org.apache.royale.style.stylebeads.flexgrid.AlignItems;
+ import org.apache.royale.style.stylebeads.flexgrid.FlexWrap;
+ import org.apache.royale.style.stylebeads.flexgrid.Gap;
+ import org.apache.royale.style.stylebeads.flexgrid.JustifyContent;
+ import org.apache.royale.style.stylebeads.layout.Display;
+ import org.apache.royale.style.stylebeads.spacing.Padding;
+ import org.apache.royale.style.util.ThemeManager;
+
+ public class FooterSkin extends StyleSkin
+ {
+ public function FooterSkin()
+ {
+ super();
+ }
+
+ /**
+ * @royaleignorecoercion org.apache.royale.style.Footer
+ */
+ override public function set strand(value:IStrand):void
+ {
+ var footer:Footer = value as Footer;
+ var colorSet:ThemeColorSet =
ThemeManager.instance.activeTheme.themeColorSet;
+ var bgColor:ColorSwatch =
colorSet.getSwatch(ThemeColorSet.BASE, 200);
+
+ var padding:Padding = new Padding();
+ padding.block = computeSize(16, footer.unit);
+ padding.inline = computeSize(20, footer.unit);
+
+ _styles = [
+ new Display("flex"),
+ new FlexWrap("wrap"),
+ new AlignItems("center"),
+ new JustifyContent("space-between"),
+ new Gap(computeSize(12, footer.unit)),
+ padding,
+ new BorderRadius(computeSize(12, footer.unit)),
+ new BackgroundColor(bgColor.colorSpecifier)
+ ];
+
+ super.strand = value;
+ }
+ }
+}
