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 b272a0da4c Added Modal
b272a0da4c is described below
commit b272a0da4c11465a3975de92622e4d3ec18a62f6
Author: Yishay Weiss <[email protected]>
AuthorDate: Wed Apr 15 12:58:52 2026 +0300
Added Modal
---
.../projects/Style/src/main/resources/defaults.css | 16 +++
.../Style/src/main/resources/style-manifest.xml | 4 +
.../projects/Style/src/main/royale/StyleClasses.as | 4 +
.../main/royale/org/apache/royale/style/Modal.as | 110 +++++++++++++++++++++
.../royale/org/apache/royale/style/ModalActions.as | 33 +++++++
.../royale/org/apache/royale/style/ModalBody.as | 33 +++++++
.../royale/org/apache/royale/style/ModalTitle.as | 40 ++++++++
.../apache/royale/style/skins/ModalActionsSkin.as | 62 ++++++++++++
.../org/apache/royale/style/skins/ModalBodySkin.as | 62 ++++++++++++
.../org/apache/royale/style/skins/ModalSkin.as | 83 ++++++++++++++++
.../apache/royale/style/skins/ModalTitleSkin.as | 60 +++++++++++
11 files changed, 507 insertions(+)
diff --git a/frameworks/projects/Style/src/main/resources/defaults.css
b/frameworks/projects/Style/src/main/resources/defaults.css
index 47336a903b..078abf583c 100644
--- a/frameworks/projects/Style/src/main/resources/defaults.css
+++ b/frameworks/projects/Style/src/main/resources/defaults.css
@@ -83,6 +83,22 @@ CardActions
{
IStyleSkin:
ClassReference("org.apache.royale.style.skins.CardActionsSkin");
}
+Modal
+{
+ IStyleSkin: ClassReference("org.apache.royale.style.skins.ModalSkin");
+}
+ModalBody
+{
+ IStyleSkin:
ClassReference("org.apache.royale.style.skins.ModalBodySkin");
+}
+ModalTitle
+{
+ IStyleSkin:
ClassReference("org.apache.royale.style.skins.ModalTitleSkin");
+}
+ModalActions
+{
+ IStyleSkin:
ClassReference("org.apache.royale.style.skins.ModalActionsSkin");
+}
Toggle
{
IStyleSkin: ClassReference("org.apache.royale.style.skins.ToggleSkin");
diff --git a/frameworks/projects/Style/src/main/resources/style-manifest.xml
b/frameworks/projects/Style/src/main/resources/style-manifest.xml
index 17ce768459..f7cc930c28 100644
--- a/frameworks/projects/Style/src/main/resources/style-manifest.xml
+++ b/frameworks/projects/Style/src/main/resources/style-manifest.xml
@@ -36,6 +36,10 @@
<component id="CardBody" class="org.apache.royale.style.CardBody"/>
<component id="CardTitle" class="org.apache.royale.style.CardTitle"/>
<component id="CardActions" class="org.apache.royale.style.CardActions"/>
+ <component id="Modal" class="org.apache.royale.style.Modal"/>
+ <component id="ModalBody" class="org.apache.royale.style.ModalBody"/>
+ <component id="ModalTitle" class="org.apache.royale.style.ModalTitle"/>
+ <component id="ModalActions" class="org.apache.royale.style.ModalActions"/>
<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"/>
diff --git a/frameworks/projects/Style/src/main/royale/StyleClasses.as
b/frameworks/projects/Style/src/main/royale/StyleClasses.as
index 61d0672910..6b891a9cf7 100644
--- a/frameworks/projects/Style/src/main/royale/StyleClasses.as
+++ b/frameworks/projects/Style/src/main/royale/StyleClasses.as
@@ -33,6 +33,10 @@ package
import org.apache.royale.style.util.ContentAlign; ContentAlign;
import org.apache.royale.style.support.UIItemRendererBase;
UIItemRendererBase;
import org.apache.royale.style.const.Theme; Theme;
+ import org.apache.royale.style.skins.ModalSkin; ModalSkin;
+ import org.apache.royale.style.skins.ModalBodySkin;
ModalBodySkin;
+ import org.apache.royale.style.skins.ModalTitleSkin;
ModalTitleSkin;
+ import org.apache.royale.style.skins.ModalActionsSkin;
ModalActionsSkin;
}
}
diff --git
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/Modal.as
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/Modal.as
new file mode 100644
index 0000000000..6b476b9ce2
--- /dev/null
+++ b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/Modal.as
@@ -0,0 +1,110 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.events.Event;
+
+ [Event(name="openChanged", type="org.apache.royale.events.Event")]
+
+ public class Modal extends Group
+ {
+ public function Modal()
+ {
+ super();
+ }
+
+ private var _open:Boolean = false;
+
+ public function get open():Boolean
+ {
+ return _open;
+ }
+
+ public function set open(value:Boolean):void
+ {
+ if (value != _open)
+ {
+ _open = value;
+ COMPILE::JS
+ {
+ if (element)
+ {
+ var dialog:HTMLDialogElement =
element as HTMLDialogElement;
+ if (value)
+ dialog.showModal();
+ else
+ dialog.close();
+ }
+ }
+ dispatchEvent(new Event("openChanged"));
+ }
+ }
+
+ private var _easyDismiss:Boolean = false;
+
+ public function set easyDismiss(value:Boolean):void
+ {
+ _easyDismiss = value;
+ }
+
+ override protected function getTag():String
+ {
+ return "dialog";
+ }
+
+ override public function getWrapperStyle():String
+ {
+ return 'modal';
+ }
+
+ COMPILE::JS
+ override protected function createElement():WrappedHTMLElement
+ {
+ var elem:WrappedHTMLElement = super.createElement();
+
+ element.addEventListener("close", handleDialogClose);
+ element.addEventListener("click", handleDialogClick);
+
+ return elem;
+ }
+
+ COMPILE::JS
+ private function handleDialogClose(event:Object):void
+ {
+ if (_open)
+ {
+ _open = false;
+ dispatchEvent(new Event("openChanged"));
+ }
+ }
+
+ COMPILE::JS
+ private function handleDialogClick(event:Object):void
+ {
+ if (_easyDismiss && event.target === element)
+ {
+ (element as HTMLDialogElement).close();
+ }
+ }
+ }
+}
diff --git
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/ModalActions.as
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/ModalActions.as
new file mode 100644
index 0000000000..2dc11d763e
--- /dev/null
+++
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/ModalActions.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 ModalActions extends Group
+ {
+ public function ModalActions()
+ {
+ super();
+ }
+
+ override public function getWrapperStyle():String
+ {
+ return 'modal-actions';
+ }
+ }
+}
diff --git
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/ModalBody.as
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/ModalBody.as
new file mode 100644
index 0000000000..3a70cc45b1
--- /dev/null
+++
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/ModalBody.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 ModalBody extends Group
+ {
+ public function ModalBody()
+ {
+ super();
+ }
+
+ override public function getWrapperStyle():String
+ {
+ return 'modal-body';
+ }
+ }
+}
diff --git
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/ModalTitle.as
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/ModalTitle.as
new file mode 100644
index 0000000000..7c3514d996
--- /dev/null
+++
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/ModalTitle.as
@@ -0,0 +1,40 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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
+{
+ import org.apache.royale.style.support.TextNodeContainerBase;
+
+ public class ModalTitle extends TextNodeContainerBase
+ {
+ public function ModalTitle()
+ {
+ super();
+ }
+
+ override protected function getTag():String
+ {
+ return "h3";
+ }
+
+ override public function getWrapperStyle():String
+ {
+ return 'modal-title';
+ }
+ }
+}
diff --git
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/skins/ModalActionsSkin.as
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/skins/ModalActionsSkin.as
new file mode 100644
index 0000000000..33dd5e5007
--- /dev/null
+++
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/skins/ModalActionsSkin.as
@@ -0,0 +1,62 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.ModalActions;
+ import org.apache.royale.core.IStrand;
+ import org.apache.royale.style.stylebeads.layout.Display;
+ import org.apache.royale.style.stylebeads.flexgrid.JustifyContent;
+ import org.apache.royale.style.stylebeads.flexgrid.Gap;
+
+ public class ModalActionsSkin extends StyleSkin
+ {
+ public function ModalActionsSkin()
+ {
+ super();
+ }
+
+ /**
+ * @royaleignorecoercion org.apache.royale.style.ModalActions
+ */
+ private function get host():ModalActions
+ {
+ return _strand as ModalActions;
+ }
+
+ override public function set strand(value:IStrand):void
+ {
+ super.strand = value;
+ applyStyles();
+ }
+
+ private function applyStyles():void
+ {
+ if(!_styles)
+ {
+ _styles = [
+ new Display("flex"),
+ new JustifyContent("end"),
+ new Gap(computeSize(8, host.unit))
+ ];
+ host.setStyles(_styles);
+ }
+ }
+ }
+}
diff --git
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/skins/ModalBodySkin.as
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/skins/ModalBodySkin.as
new file mode 100644
index 0000000000..a56aa354b7
--- /dev/null
+++
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/skins/ModalBodySkin.as
@@ -0,0 +1,62 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.ModalBody;
+ 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.flexgrid.Gap;
+
+ public class ModalBodySkin extends StyleSkin
+ {
+ public function ModalBodySkin()
+ {
+ super();
+ }
+
+ /**
+ * @royaleignorecoercion org.apache.royale.style.ModalBody
+ */
+ private function get host():ModalBody
+ {
+ return _strand as ModalBody;
+ }
+
+ override public function set strand(value:IStrand):void
+ {
+ super.strand = value;
+ applyStyles();
+ }
+
+ private function applyStyles():void
+ {
+ if(!_styles)
+ {
+ _styles = [
+ new Display("flex"),
+ new FlexDirection("column"),
+ new Gap(computeSize(16, host.unit))
+ ];
+ host.setStyles(_styles);
+ }
+ }
+ }
+}
diff --git
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/skins/ModalSkin.as
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/skins/ModalSkin.as
new file mode 100644
index 0000000000..6d30eab895
--- /dev/null
+++
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/skins/ModalSkin.as
@@ -0,0 +1,83 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.Modal;
+ 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.background.BackgroundColor;
+ import org.apache.royale.style.stylebeads.border.BorderRadius;
+ import org.apache.royale.style.stylebeads.spacing.Padding;
+ import org.apache.royale.style.stylebeads.sizing.MaxWidth;
+ import org.apache.royale.style.stylebeads.layout.Overflow;
+ import org.apache.royale.style.stylebeads.effects.OpacityStyle;
+ import org.apache.royale.style.stylebeads.states.pseudo.BackdropState;
+
+ public class ModalSkin extends StyleSkin
+ {
+ public function ModalSkin()
+ {
+ super();
+ }
+
+ /**
+ * @royaleignorecoercion org.apache.royale.style.Modal
+ */
+ private function get host():Modal
+ {
+ return _strand as Modal;
+ }
+
+ override public function set strand(value:IStrand):void
+ {
+ super.strand = value;
+ applyStyles();
+ }
+
+ private function applyStyles():void
+ {
+ if(!_styles)
+ {
+ var colorSet:ThemeColorSet =
ThemeManager.instance.activeTheme.themeColorSet;
+ var bgColor:ColorSwatch =
colorSet.getSwatch(ThemeColorSet.BASE, 0);
+
+ var padding:Padding = new Padding();
+ padding.padding = computeSize(24, host.unit);
+
+ var backdropColor:ColorSwatch =
colorSet.getSwatch(ThemeColorSet.BASE, 900);
+
+ _styles = [
+ new
BackgroundColor(bgColor.colorSpecifier),
+ new BorderRadius(computeSize(16,
host.unit)),
+ padding,
+ new MaxWidth(computeSize(448,
host.unit)), // Tailwind max-w-md (28rem)
+ new Overflow("auto"),
+ new BackdropState([
+ new
BackgroundColor(backdropColor.colorSpecifier),
+ new OpacityStyle(40)
+ ])
+ ];
+ host.setStyles(_styles);
+ }
+ }
+ }
+}
diff --git
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/skins/ModalTitleSkin.as
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/skins/ModalTitleSkin.as
new file mode 100644
index 0000000000..a6e1449bdd
--- /dev/null
+++
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/skins/ModalTitleSkin.as
@@ -0,0 +1,60 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.ModalTitle;
+ import org.apache.royale.core.IStrand;
+ import org.apache.royale.style.stylebeads.typography.FontSize;
+ import org.apache.royale.style.stylebeads.typography.FontWeight;
+
+ public class ModalTitleSkin extends StyleSkin
+ {
+ public function ModalTitleSkin()
+ {
+ super();
+ }
+
+ /**
+ * @royaleignorecoercion org.apache.royale.style.ModalTitle
+ */
+ private function get host():ModalTitle
+ {
+ return _strand as ModalTitle;
+ }
+
+ override public function set strand(value:IStrand):void
+ {
+ super.strand = value;
+ applyStyles();
+ }
+
+ private function applyStyles():void
+ {
+ if(!_styles)
+ {
+ _styles = [
+ new FontSize(host.size || "lg"),
+ new FontWeight("700")
+ ];
+ host.setStyles(_styles);
+ }
+ }
+ }
+}
