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
commit 93804a3dabb4582fe74a106f788a83e805356aa7 Author: Yishay Weiss <[email protected]> AuthorDate: Fri May 1 17:10:20 2026 +0100 Added Hero --- .../src/main/royale/HeroPlayGround.mxml | 84 ++++++++++++++++++++++ .../TourDeStyle/src/main/royale/TourDeStyle.mxml | 54 ++++++++++++++ .../projects/Style/src/main/resources/defaults.css | 12 ++++ .../Style/src/main/resources/style-manifest.xml | 6 ++ .../main/royale/org/apache/royale/style/Hero.as | 33 +++++++++ .../royale/org/apache/royale/style/HeroContent.as | 33 +++++++++ .../royale/org/apache/royale/style/HeroOverlay.as | 33 +++++++++ .../apache/royale/style/skins/HeroContentSkin.as | 63 ++++++++++++++++ .../apache/royale/style/skins/HeroOverlaySkin.as | 61 ++++++++++++++++ .../org/apache/royale/style/skins/HeroSkin.as | 72 +++++++++++++++++++ 10 files changed, 451 insertions(+) diff --git a/examples/royale/TourDeStyle/src/main/royale/HeroPlayGround.mxml b/examples/royale/TourDeStyle/src/main/royale/HeroPlayGround.mxml new file mode 100644 index 0000000000..097dd02fc9 --- /dev/null +++ b/examples/royale/TourDeStyle/src/main/royale/HeroPlayGround.mxml @@ -0,0 +1,84 @@ +<?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="Centered Hero" /> + <s:Hero> + <s:HeroContent> + <e:H2 text="Hello there" /> + <e:P text="Hero sections are large attention blocks with headline and action." /> + <e:Div text="Get Started" /> + </s:HeroContent> + </s:Hero> + + <e:Div text="Hero with Figure" /> + <s:Hero> + <s:HeroContent> + <s:FlexContainer gap="24"> + <s:FlexContainer width="220" height="120"> + <s:styleBeads> + <s:Display value="flex" /> + <s:AlignItems value="center" /> + <s:JustifyContent value="center" /> + <s:BackgroundColor value="blue-500" /> + <s:BorderRadius radius="12" /> + </s:styleBeads> + <e:Span text="Figure" /> + </s:FlexContainer> + <s:FlexContainer vertical="true" gap="8"> + <e:H2 text="Box Office News!" /> + <e:P text="Provident cupiditate voluptatem et in. Quaerat fugiat ut assumenda excepturi exercitationem quasi." /> + <e:Div text="Get Started" /> + </s:FlexContainer> + </s:FlexContainer> + </s:HeroContent> + </s:Hero> + + <e:Div text="Hero with Overlay" /> + <s:Hero> + <s:styleBeads> + <s:BackgroundColor value="sky-500" /> + </s:styleBeads> + <s:HeroOverlay> + <s:styleBeads> + <s:BackgroundColor value="slate-900/60" /> + </s:styleBeads> + </s:HeroOverlay> + <s:HeroContent> + <s:styleBeads> + <s:TextColor value="slate-50" /> + </s:styleBeads> + <e:H2 text="Hello there" /> + <e:P text="Background with overlay and centered content." /> + <e:Div text="Get Started" /> + </s:HeroContent> + </s:Hero> + + </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 64ce88ab33..38ef66d9fb 100644 --- a/examples/royale/TourDeStyle/src/main/royale/TourDeStyle.mxml +++ b/examples/royale/TourDeStyle/src/main/royale/TourDeStyle.mxml @@ -35,6 +35,7 @@ menuSection.visible = (idx == 7); stepsSection.visible = (idx == 8); footerSection.visible = (idx == 9); + heroSection.visible = (idx == 10); } private function openModal(id:String):void @@ -63,6 +64,7 @@ <s:Tab text="Menu" /> <s:Tab text="Steps" /> <s:Tab text="Footer" /> + <s:Tab text="Hero" /> </s:tabs> </s:TabBar> @@ -332,6 +334,58 @@ </s:Footer> </s:FlexContainer> + <!-- Hero Section --> + <s:FlexContainer id="heroSection" visible="false" gap="24" vertical="true"> + <s:Hero> + <s:HeroContent> + <e:H2 text="Hello there" /> + <e:P text="Hero sections are large attention blocks with headline and action." /> + <e:Div text="Get Started" /> + </s:HeroContent> + </s:Hero> + + <s:Hero> + <s:HeroContent> + <s:FlexContainer gap="24"> + <s:FlexContainer width="220" height="120"> + <s:styleBeads> + <s:Display value="flex" /> + <s:AlignItems value="center" /> + <s:JustifyContent value="center" /> + <s:BackgroundColor value="blue-500" /> + <s:BorderRadius radius="12" /> + </s:styleBeads> + <e:Span text="Figure" /> + </s:FlexContainer> + <s:FlexContainer vertical="true" gap="8"> + <e:H2 text="Box Office News!" /> + <e:P text="Provident cupiditate voluptatem et in. Quaerat fugiat ut assumenda excepturi exercitationem quasi." /> + <e:Div text="Get Started" /> + </s:FlexContainer> + </s:FlexContainer> + </s:HeroContent> + </s:Hero> + + <s:Hero> + <s:styleBeads> + <s:BackgroundColor value="sky-500" /> + </s:styleBeads> + <s:HeroOverlay> + <s:styleBeads> + <s:BackgroundColor value="slate-900/60" /> + </s:styleBeads> + </s:HeroOverlay> + <s:HeroContent> + <s:styleBeads> + <s:TextColor value="slate-50" /> + </s:styleBeads> + <e:H2 text="Hello there" /> + <e:P text="Background with overlay and centered content." /> + <e:Div text="Get Started" /> + </s:HeroContent> + </s:Hero> + </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 48767abdeb..2487e6a009 100644 --- a/frameworks/projects/Style/src/main/resources/defaults.css +++ b/frameworks/projects/Style/src/main/resources/defaults.css @@ -57,6 +57,18 @@ Footer { IStyleSkin: ClassReference("org.apache.royale.style.skins.FooterSkin"); } +Hero +{ + IStyleSkin: ClassReference("org.apache.royale.style.skins.HeroSkin"); +} +HeroContent +{ + IStyleSkin: ClassReference("org.apache.royale.style.skins.HeroContentSkin"); +} +HeroOverlay +{ + IStyleSkin: ClassReference("org.apache.royale.style.skins.HeroOverlaySkin"); +} 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 c9a2eeac91..70cef20d02 100644 --- a/frameworks/projects/Style/src/main/resources/style-manifest.xml +++ b/frameworks/projects/Style/src/main/resources/style-manifest.xml @@ -28,6 +28,12 @@ <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="Hero" class="org.apache.royale.style.Hero"/> + <component id="HeroContent" class="org.apache.royale.style.HeroContent"/> + <component id="HeroOverlay" class="org.apache.royale.style.HeroOverlay"/> + <component id="HeroSkin" class="org.apache.royale.style.skins.HeroSkin"/> + <component id="HeroContentSkin" class="org.apache.royale.style.skins.HeroContentSkin"/> + <component id="HeroOverlaySkin" class="org.apache.royale.style.skins.HeroOverlaySkin"/> <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/org/apache/royale/style/Hero.as b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/Hero.as new file mode 100644 index 0000000000..66bc707e19 --- /dev/null +++ b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/Hero.as @@ -0,0 +1,33 @@ +//////////////////////////////////////////////////////////////////////////////// +// +// 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 +{ + public class Hero extends Group + { + public function Hero() + { + super(); + } + + override public function getWrapperStyle():String + { + return "hero"; + } + } +} diff --git a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/HeroContent.as b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/HeroContent.as new file mode 100644 index 0000000000..c7ae357b91 --- /dev/null +++ b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/HeroContent.as @@ -0,0 +1,33 @@ +//////////////////////////////////////////////////////////////////////////////// +// +// 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 +{ + public class HeroContent extends Group + { + public function HeroContent() + { + super(); + } + + override public function getWrapperStyle():String + { + return "hero-content"; + } + } +} diff --git a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/HeroOverlay.as b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/HeroOverlay.as new file mode 100644 index 0000000000..1d2ff5a8e5 --- /dev/null +++ b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/HeroOverlay.as @@ -0,0 +1,33 @@ +//////////////////////////////////////////////////////////////////////////////// +// +// 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 +{ + public class HeroOverlay extends Group + { + public function HeroOverlay() + { + super(); + } + + override public function getWrapperStyle():String + { + return "hero-overlay"; + } + } +} diff --git a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/skins/HeroContentSkin.as b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/skins/HeroContentSkin.as new file mode 100644 index 0000000000..ad82c9857f --- /dev/null +++ b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/skins/HeroContentSkin.as @@ -0,0 +1,63 @@ +//////////////////////////////////////////////////////////////////////////////// +// +// 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.HeroContent; + import org.apache.royale.style.StyleSkin; + import org.apache.royale.style.stylebeads.flexgrid.AlignItems; + import org.apache.royale.style.stylebeads.flexgrid.FlexDirection; + 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.layout.Position; + import org.apache.royale.style.stylebeads.layout.ZIndex; + import org.apache.royale.style.stylebeads.sizing.MaxWidth; + import org.apache.royale.style.stylebeads.typography.TextAlign; + + public class HeroContentSkin extends StyleSkin + { + public function HeroContentSkin() + { + super(); + } + + /** + * @royaleignorecoercion org.apache.royale.style.HeroContent + */ + override public function set strand(value:IStrand):void + { + var content:HeroContent = value as HeroContent; + + _styles = [ + new Display("flex"), + new Position("relative"), + new ZIndex(1), + new FlexDirection("column"), + new AlignItems("center"), + new JustifyContent("center"), + new Gap(computeSize(16, content.unit)), + new TextAlign("center"), + new MaxWidth(computeSize(640, content.unit)) + ]; + + super.strand = value; + } + } +} diff --git a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/skins/HeroOverlaySkin.as b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/skins/HeroOverlaySkin.as new file mode 100644 index 0000000000..02cc0356aa --- /dev/null +++ b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/skins/HeroOverlaySkin.as @@ -0,0 +1,61 @@ +//////////////////////////////////////////////////////////////////////////////// +// +// 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.HeroOverlay; + import org.apache.royale.style.StyleSkin; + import org.apache.royale.style.stylebeads.background.BackgroundColor; + import org.apache.royale.style.stylebeads.layout.Bottom; + import org.apache.royale.style.stylebeads.layout.Display; + import org.apache.royale.style.stylebeads.layout.Left; + import org.apache.royale.style.stylebeads.layout.Position; + import org.apache.royale.style.stylebeads.layout.Right; + import org.apache.royale.style.stylebeads.layout.Top; + import org.apache.royale.style.stylebeads.layout.ZIndex; + + public class HeroOverlaySkin extends StyleSkin + { + public function HeroOverlaySkin() + { + super(); + } + + /** + * @royaleignorecoercion org.apache.royale.style.HeroOverlay + */ + override public function set strand(value:IStrand):void + { + var overlay:HeroOverlay = value as HeroOverlay; + + _styles = [ + new Position("absolute"), + new Top(computeSize(0, overlay.unit)), + new Right(computeSize(0, overlay.unit)), + new Bottom(computeSize(0, overlay.unit)), + new Left(computeSize(0, overlay.unit)), + new Display("block"), + new ZIndex(0), + new BackgroundColor("slate-900/55") + ]; + + super.strand = value; + } + } +} diff --git a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/skins/HeroSkin.as b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/skins/HeroSkin.as new file mode 100644 index 0000000000..d5c7399d1a --- /dev/null +++ b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/skins/HeroSkin.as @@ -0,0 +1,72 @@ +//////////////////////////////////////////////////////////////////////////////// +// +// 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.Hero; + 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.JustifyContent; + import org.apache.royale.style.stylebeads.layout.Display; + import org.apache.royale.style.stylebeads.layout.Overflow; + import org.apache.royale.style.stylebeads.layout.Position; + import org.apache.royale.style.stylebeads.sizing.MinHeight; + import org.apache.royale.style.stylebeads.spacing.Padding; + import org.apache.royale.style.util.ThemeManager; + + public class HeroSkin extends StyleSkin + { + public function HeroSkin() + { + super(); + } + + /** + * @royaleignorecoercion org.apache.royale.style.Hero + */ + override public function set strand(value:IStrand):void + { + var hero:Hero = value as Hero; + var colorSet:ThemeColorSet = ThemeManager.instance.activeTheme.themeColorSet; + var bgColor:ColorSwatch = colorSet.getSwatch(ThemeColorSet.BASE, 200); + + var padding:Padding = new Padding(); + padding.block = computeSize(24, hero.unit); + padding.inline = computeSize(24, hero.unit); + + _styles = [ + new Position("relative"), + new Overflow("hidden"), + new Display("flex"), + new AlignItems("center"), + new JustifyContent("center"), + new MinHeight(computeSize(384, hero.unit)), + padding, + new BorderRadius(computeSize(16, hero.unit)), + new BackgroundColor(bgColor.colorSpecifier) + ]; + + super.strand = value; + } + } +}
