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 a70a8dc0cd1c5b999dbd6c5f37be97b47ae4cbb1 Author: Yishay Weiss <[email protected]> AuthorDate: Thu Apr 16 16:13:09 2026 +0300 Add NavBar --- .../src/main/royale/NavbarPlayGround.mxml | 67 ++++++++++++++++++++++ .../TourDeStyle/src/main/royale/TourDeStyle.mxml | 32 +++++++++++ .../projects/Style/src/main/resources/defaults.css | 16 ++++++ .../Style/src/main/resources/style-manifest.xml | 8 +++ .../main/royale/org/apache/royale/style/Navbar.as | 46 +++++++++++++++ .../royale/org/apache/royale/style/NavbarCenter.as | 33 +++++++++++ .../royale/org/apache/royale/style/NavbarEnd.as | 33 +++++++++++ .../royale/org/apache/royale/style/NavbarStart.as | 33 +++++++++++ .../apache/royale/style/skins/NavbarCenterSkin.as | 50 ++++++++++++++++ .../org/apache/royale/style/skins/NavbarEndSkin.as | 52 +++++++++++++++++ .../org/apache/royale/style/skins/NavbarSkin.as | 66 +++++++++++++++++++++ .../apache/royale/style/skins/NavbarStartSkin.as | 45 +++++++++++++++ 12 files changed, 481 insertions(+) diff --git a/examples/royale/TourDeStyle/src/main/royale/NavbarPlayGround.mxml b/examples/royale/TourDeStyle/src/main/royale/NavbarPlayGround.mxml new file mode 100644 index 0000000000..9c7471ce8f --- /dev/null +++ b/examples/royale/TourDeStyle/src/main/royale/NavbarPlayGround.mxml @@ -0,0 +1,67 @@ +<?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"> + + <!-- Title only --> + <e:Div text="Title Only — A minimal navbar with just a brand name." /> + <s:Navbar> + <e:Span text="Brand" /> + </s:Navbar> + + <!-- Start / Center / End --> + <e:Div text="Three Slots — Brand on the left, links in the center, action on the right." /> + <s:Navbar> + <s:NavbarStart> + <e:Span text="Brand" /> + </s:NavbarStart> + <s:NavbarCenter> + <e:A text="Features" href="#" /> + <e:A text="Pricing" href="#" /> + <e:A text="About" href="#" /> + </s:NavbarCenter> + <s:NavbarEnd> + <e:Div text="Get Started" /> + </s:NavbarEnd> + </s:Navbar> + + <!-- Two-section: Start + End (no center) --> + <e:Div text="Two Slots — Brand on the left, links pushed to the right. No center slot." /> + <s:Navbar> + <s:NavbarStart> + <e:Span text="Brand" /> + </s:NavbarStart> + <s:NavbarEnd> + <e:A text="Features" href="#" /> + <e:A text="Pricing" href="#" /> + <e:A text="Contact" href="#" /> + </s:NavbarEnd> + </s:Navbar> + + </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 bd3d17b255..dad72434cb 100644 --- a/examples/royale/TourDeStyle/src/main/royale/TourDeStyle.mxml +++ b/examples/royale/TourDeStyle/src/main/royale/TourDeStyle.mxml @@ -31,6 +31,7 @@ dropdownSection.visible = (idx == 3); modalSection.visible = (idx == 4); paginationSection.visible = (idx == 5); + navbarSection.visible = (idx == 6); } private function openModal(id:String):void @@ -55,6 +56,7 @@ <s:Tab text="Dropdown" /> <s:Tab text="Modal" /> <s:Tab text="Pagination" /> + <s:Tab text="Navbar" /> </s:tabs> </s:TabBar> @@ -194,6 +196,36 @@ </s:Pagination> </s:FlexContainer> + <!-- Navbar Section --> + <s:FlexContainer id="navbarSection" visible="false" gap="24" vertical="true"> + <s:Navbar> + <e:Span text="Brand" /> + </s:Navbar> + <s:Navbar> + <s:NavbarStart> + <e:Span text="Brand" /> + </s:NavbarStart> + <s:NavbarCenter> + <e:A text="Features" href="#" /> + <e:A text="Pricing" href="#" /> + <e:A text="About" href="#" /> + </s:NavbarCenter> + <s:NavbarEnd> + <e:Div text="Get Started" /> + </s:NavbarEnd> + </s:Navbar> + <s:Navbar> + <s:NavbarStart> + <e:Span text="Brand" /> + </s:NavbarStart> + <s:NavbarEnd> + <e:A text="Features" href="#" /> + <e:A text="Pricing" href="#" /> + <e:A text="Contact" href="#" /> + </s:NavbarEnd> + </s:Navbar> + </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 6a03fbfc85..9960cc19ac 100644 --- a/frameworks/projects/Style/src/main/resources/defaults.css +++ b/frameworks/projects/Style/src/main/resources/defaults.css @@ -111,6 +111,22 @@ Toggle { IStyleSkin: ClassReference("org.apache.royale.style.skins.ToggleSkin"); } +Navbar +{ + IStyleSkin: ClassReference("org.apache.royale.style.skins.NavbarSkin"); +} +NavbarStart +{ + IStyleSkin: ClassReference("org.apache.royale.style.skins.NavbarStartSkin"); +} +NavbarCenter +{ + IStyleSkin: ClassReference("org.apache.royale.style.skins.NavbarCenterSkin"); +} +NavbarEnd +{ + IStyleSkin: ClassReference("org.apache.royale.style.skins.NavbarEndSkin"); +} DataItemRenderer { diff --git a/frameworks/projects/Style/src/main/resources/style-manifest.xml b/frameworks/projects/Style/src/main/resources/style-manifest.xml index afc610ae5f..2ab488049d 100644 --- a/frameworks/projects/Style/src/main/resources/style-manifest.xml +++ b/frameworks/projects/Style/src/main/resources/style-manifest.xml @@ -42,6 +42,10 @@ <component id="ModalActions" class="org.apache.royale.style.ModalActions"/> <component id="Pagination" class="org.apache.royale.style.Pagination"/> <component id="PaginationItem" class="org.apache.royale.style.PaginationItem"/> + <component id="Navbar" class="org.apache.royale.style.Navbar"/> + <component id="NavbarStart" class="org.apache.royale.style.NavbarStart"/> + <component id="NavbarCenter" class="org.apache.royale.style.NavbarCenter"/> + <component id="NavbarEnd" class="org.apache.royale.style.NavbarEnd"/> <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"/> @@ -300,5 +304,9 @@ <component id="ModalActionsSkin" class="org.apache.royale.style.skins.ModalActionsSkin"/> <component id="PaginationSkin" class="org.apache.royale.style.skins.PaginationSkin"/> <component id="PaginationItemSkin" class="org.apache.royale.style.skins.PaginationItemSkin"/> + <component id="NavbarSkin" class="org.apache.royale.style.skins.NavbarSkin"/> + <component id="NavbarStartSkin" class="org.apache.royale.style.skins.NavbarStartSkin"/> + <component id="NavbarCenterSkin" class="org.apache.royale.style.skins.NavbarCenterSkin"/> + <component id="NavbarEndSkin" class="org.apache.royale.style.skins.NavbarEndSkin"/> </componentPackage> diff --git a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/Navbar.as b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/Navbar.as new file mode 100644 index 0000000000..c4b957d438 --- /dev/null +++ b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/Navbar.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 Navbar extends Group + { + public function Navbar() + { + super(); + } + + COMPILE::JS + override protected function createElement():WrappedHTMLElement + { + addElementToWrapper(this, 'nav'); + return element; + } + + override public function getWrapperStyle():String + { + return 'navbar'; + } + } +} diff --git a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/NavbarCenter.as b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/NavbarCenter.as new file mode 100644 index 0000000000..b505d2d976 --- /dev/null +++ b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/NavbarCenter.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 NavbarCenter extends Group + { + public function NavbarCenter() + { + super(); + } + + override public function getWrapperStyle():String + { + return 'navbar-center'; + } + } +} diff --git a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/NavbarEnd.as b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/NavbarEnd.as new file mode 100644 index 0000000000..4724b34f03 --- /dev/null +++ b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/NavbarEnd.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 NavbarEnd extends Group + { + public function NavbarEnd() + { + super(); + } + + override public function getWrapperStyle():String + { + return 'navbar-end'; + } + } +} diff --git a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/NavbarStart.as b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/NavbarStart.as new file mode 100644 index 0000000000..56e028540a --- /dev/null +++ b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/NavbarStart.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 NavbarStart extends Group + { + public function NavbarStart() + { + super(); + } + + override public function getWrapperStyle():String + { + return 'navbar-start'; + } + } +} diff --git a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/skins/NavbarCenterSkin.as b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/skins/NavbarCenterSkin.as new file mode 100644 index 0000000000..6f361512d6 --- /dev/null +++ b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/skins/NavbarCenterSkin.as @@ -0,0 +1,50 @@ +//////////////////////////////////////////////////////////////////////////////// +// +// 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.NavbarCenter; + import org.apache.royale.core.IStrand; + import org.apache.royale.style.stylebeads.layout.Display; + import org.apache.royale.style.stylebeads.flexgrid.FlexShrink; + import org.apache.royale.style.stylebeads.flexgrid.AlignItems; + import org.apache.royale.style.stylebeads.flexgrid.Gap; + + public class NavbarCenterSkin extends StyleSkin + { + public function NavbarCenterSkin() + { + super(); + } + + override public function set strand(value:IStrand):void + { + var nav:NavbarCenter = value as NavbarCenter; + + _styles = [ + new Display("flex"), + new FlexShrink(0), + new AlignItems("center"), + new Gap(computeSize(16, nav.unit)) + ]; + + super.strand = value; + } + } +} diff --git a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/skins/NavbarEndSkin.as b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/skins/NavbarEndSkin.as new file mode 100644 index 0000000000..451ed598e2 --- /dev/null +++ b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/skins/NavbarEndSkin.as @@ -0,0 +1,52 @@ +//////////////////////////////////////////////////////////////////////////////// +// +// 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.NavbarEnd; + import org.apache.royale.core.IStrand; + import org.apache.royale.style.stylebeads.layout.Display; + 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; + + public class NavbarEndSkin extends StyleSkin + { + public function NavbarEndSkin() + { + super(); + } + + override public function set strand(value:IStrand):void + { + var nav:NavbarEnd = value as NavbarEnd; + + _styles = [ + new Display("flex"), + new FlexGrow(1), + new AlignItems("center"), + new JustifyContent("end"), + new Gap(computeSize(16, nav.unit)) + ]; + + super.strand = value; + } + } +} diff --git a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/skins/NavbarSkin.as b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/skins/NavbarSkin.as new file mode 100644 index 0000000000..8945886cb7 --- /dev/null +++ b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/skins/NavbarSkin.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.Navbar; + 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.AlignItems; + import org.apache.royale.style.stylebeads.spacing.Padding; + import org.apache.royale.style.stylebeads.sizing.MinHeight; + import org.apache.royale.style.stylebeads.background.BackgroundColor; + import org.apache.royale.style.stylebeads.border.BorderRadius; + + public class NavbarSkin extends StyleSkin + { + public function NavbarSkin() + { + super(); + } + + /** + * @royaleignorecoercion org.apache.royale.style.Navbar + */ + override public function set strand(value:IStrand):void + { + var nav:Navbar = value as Navbar; + var colorSet:ThemeColorSet = ThemeManager.instance.activeTheme.themeColorSet; + var bgColor:ColorSwatch = colorSet.getSwatch(ThemeColorSet.BASE, 200); + + var padding:Padding = new Padding(); + padding.left = computeSize(16, nav.unit); + padding.right = computeSize(16, nav.unit); + + _styles = [ + new Display("flex"), + new AlignItems("center"), + new MinHeight(computeSize(56, nav.unit)), + padding, + new BackgroundColor(bgColor.colorSpecifier), + new BorderRadius(computeSize(12, nav.unit)) + ]; + + super.strand = value; + } + } +} diff --git a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/skins/NavbarStartSkin.as b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/skins/NavbarStartSkin.as new file mode 100644 index 0000000000..75c93aeba7 --- /dev/null +++ b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/skins/NavbarStartSkin.as @@ -0,0 +1,45 @@ +//////////////////////////////////////////////////////////////////////////////// +// +// 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.core.IStrand; + import org.apache.royale.style.stylebeads.layout.Display; + import org.apache.royale.style.stylebeads.flexgrid.FlexGrow; + import org.apache.royale.style.stylebeads.flexgrid.AlignItems; + + public class NavbarStartSkin extends StyleSkin + { + public function NavbarStartSkin() + { + super(); + } + + override public function set strand(value:IStrand):void + { + _styles = [ + new Display("flex"), + new FlexGrow(1), + new AlignItems("center") + ]; + + super.strand = value; + } + } +}
