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 4eabd28aee Add Card
4eabd28aee is described below
commit 4eabd28aee050be568e17bebc8ca1b81542466e7
Author: Yishay Weiss <[email protected]>
AuthorDate: Tue Apr 14 16:36:36 2026 +0300
Add Card
---
.../projects/Style/src/main/resources/defaults.css | 16 ++++
.../Style/src/main/resources/style-manifest.xml | 8 ++
.../main/royale/org/apache/royale/style/Card.as | 52 +++++++++++++
.../royale/org/apache/royale/style/CardActions.as | 33 ++++++++
.../royale/org/apache/royale/style/CardBody.as | 33 ++++++++
.../royale/org/apache/royale/style/CardTitle.as | 40 ++++++++++
.../apache/royale/style/skins/CardActionsSkin.as | 61 +++++++++++++++
.../org/apache/royale/style/skins/CardBodySkin.as | 87 ++++++++++++++++++++++
.../org/apache/royale/style/skins/CardSkin.as | 86 +++++++++++++++++++++
.../org/apache/royale/style/skins/CardTitleSkin.as | 79 ++++++++++++++++++++
10 files changed, 495 insertions(+)
diff --git a/frameworks/projects/Style/src/main/resources/defaults.css
b/frameworks/projects/Style/src/main/resources/defaults.css
index 77162e985b..47336a903b 100644
--- a/frameworks/projects/Style/src/main/resources/defaults.css
+++ b/frameworks/projects/Style/src/main/resources/defaults.css
@@ -67,6 +67,22 @@ TabBar
{
IStyleSkin: ClassReference("org.apache.royale.style.skins.TabBarSkin");
}
+Card
+{
+ IStyleSkin: ClassReference("org.apache.royale.style.skins.CardSkin");
+}
+CardBody
+{
+ IStyleSkin:
ClassReference("org.apache.royale.style.skins.CardBodySkin");
+}
+CardTitle
+{
+ IStyleSkin:
ClassReference("org.apache.royale.style.skins.CardTitleSkin");
+}
+CardActions
+{
+ IStyleSkin:
ClassReference("org.apache.royale.style.skins.CardActionsSkin");
+}
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 b9454a7eac..6aba75fdc3 100644
--- a/frameworks/projects/Style/src/main/resources/style-manifest.xml
+++ b/frameworks/projects/Style/src/main/resources/style-manifest.xml
@@ -32,6 +32,10 @@
<component id="Dropdown" class="org.apache.royale.style.Dropdown"/>
<component id="Tab" class="org.apache.royale.style.Tab"/>
<component id="TabBar" class="org.apache.royale.style.TabBar"/>
+ <component id="Card" class="org.apache.royale.style.Card"/>
+ <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="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"/>
@@ -331,6 +335,10 @@
<component id="ListRendererSkin"
class="org.apache.royale.style.skins.ListRendererSkin"/>
<component id="TabSkin" class="org.apache.royale.style.skins.TabSkin"/>
<component id="TabBarSkin" class="org.apache.royale.style.skins.TabBarSkin"/>
+ <component id="CardSkin" class="org.apache.royale.style.skins.CardSkin"/>
+ <component id="CardBodySkin"
class="org.apache.royale.style.skins.CardBodySkin"/>
+ <component id="CardTitleSkin"
class="org.apache.royale.style.skins.CardTitleSkin"/>
+ <component id="CardActionsSkin"
class="org.apache.royale.style.skins.CardActionsSkin"/>
<component id="ToggleSkin" class="org.apache.royale.style.skins.ToggleSkin"/>
</componentPackage>
diff --git
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/Card.as
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/Card.as
new file mode 100644
index 0000000000..8e4e44fe1c
--- /dev/null
+++ b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/Card.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
+{
+ public class Card extends Group
+ {
+ public function Card()
+ {
+ super();
+ }
+
+ private var _variant:String;
+
+ public function get variant():String
+ {
+ return _variant;
+ }
+
+ public function set variant(value:String):void
+ {
+ if(_variant != value)
+ {
+ if(_variant)
+ toggleAttribute("data-" + _variant,
false);
+ _variant = value;
+ if(value)
+ toggleAttribute("data-" + value, true);
+ }
+ }
+
+ override public function getWrapperStyle():String
+ {
+ return 'card';
+ }
+ }
+}
diff --git
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/CardActions.as
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/CardActions.as
new file mode 100644
index 0000000000..7372045a21
--- /dev/null
+++
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/CardActions.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 CardActions extends Group
+ {
+ public function CardActions()
+ {
+ super();
+ }
+
+ override public function getWrapperStyle():String
+ {
+ return 'card-actions';
+ }
+ }
+}
diff --git
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/CardBody.as
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/CardBody.as
new file mode 100644
index 0000000000..32da115394
--- /dev/null
+++
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/CardBody.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 CardBody extends Group
+ {
+ public function CardBody()
+ {
+ super();
+ }
+
+ override public function getWrapperStyle():String
+ {
+ return 'card-body';
+ }
+ }
+}
diff --git
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/CardTitle.as
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/CardTitle.as
new file mode 100644
index 0000000000..0b45ec58ba
--- /dev/null
+++
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/CardTitle.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 CardTitle extends TextNodeContainerBase
+ {
+ public function CardTitle()
+ {
+ super();
+ }
+
+ override protected function getTag():String
+ {
+ return "h2";
+ }
+
+ override public function getWrapperStyle():String
+ {
+ return 'card-title';
+ }
+ }
+}
diff --git
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/skins/CardActionsSkin.as
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/skins/CardActionsSkin.as
new file mode 100644
index 0000000000..8f0d5618c0
--- /dev/null
+++
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/skins/CardActionsSkin.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.style.StyleSkin;
+ import org.apache.royale.style.CardActions;
+ 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 CardActionsSkin extends StyleSkin
+ {
+ public function CardActionsSkin()
+ {
+ super();
+ }
+
+ /**
+ * @royaleignorecoercion org.apache.royale.style.CardActions
+ */
+ private function get host():CardActions
+ {
+ return _strand as CardActions;
+ }
+
+ override public function set strand(value:IStrand):void
+ {
+ super.strand = value;
+ applyStyles();
+ }
+
+ private function applyStyles():void
+ {
+ var gapVal:String = computeSize(8, host.unit);
+
+ _styles = [
+ new Display("flex"),
+ new JustifyContent("end"),
+ new Gap(gapVal)
+ ];
+ host.setStyles(_styles);
+ }
+ }
+}
diff --git
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/skins/CardBodySkin.as
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/skins/CardBodySkin.as
new file mode 100644
index 0000000000..f6e2c7cf8b
--- /dev/null
+++
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/skins/CardBodySkin.as
@@ -0,0 +1,87 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.CardBody;
+ 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;
+ import org.apache.royale.style.stylebeads.spacing.Padding;
+
+ public class CardBodySkin extends StyleSkin
+ {
+ public function CardBodySkin()
+ {
+ super();
+ }
+
+ /**
+ * @royaleignorecoercion org.apache.royale.style.CardBody
+ */
+ private function get host():CardBody
+ {
+ return _strand as CardBody;
+ }
+
+ override public function set strand(value:IStrand):void
+ {
+ super.strand = value;
+ applyStyles();
+ }
+
+ private function applyStyles():void
+ {
+ var size:Number = 16 * getMultiplier();
+ var paddingVal:String = computeSize(size * 1.5,
host.unit);
+ var gapVal:String = computeSize(size * 0.5, host.unit);
+
+ var padding:Padding = new Padding();
+ padding.padding = paddingVal;
+
+ _styles = [
+ new Display("flex"),
+ new FlexDirection("column"),
+ new Gap(gapVal),
+ padding
+ ];
+ host.setStyles(_styles);
+ }
+
+ private function getMultiplier():Number
+ {
+ switch(host.size)
+ {
+ case "xs":
+ return 0.75;
+ case "sm":
+ return 0.875;
+ case "md":
+ return 1;
+ case "lg":
+ return 1.125;
+ case "xl":
+ return 1.25;
+ default:
+ return 1;
+ }
+ }
+ }
+}
diff --git
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/skins/CardSkin.as
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/skins/CardSkin.as
new file mode 100644
index 0000000000..8842d563e4
--- /dev/null
+++
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/skins/CardSkin.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.skins
+{
+ import org.apache.royale.style.StyleSkin;
+ import org.apache.royale.style.Card;
+ 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.layout.Overflow;
+ import org.apache.royale.style.stylebeads.flexgrid.FlexDirection;
+ import org.apache.royale.style.stylebeads.background.BackgroundColor;
+ import org.apache.royale.style.stylebeads.border.Border;
+ import org.apache.royale.style.stylebeads.border.BorderRadius;
+ import org.apache.royale.style.stylebeads.states.attribute.DataState;
+
+ public class CardSkin extends StyleSkin
+ {
+ public function CardSkin()
+ {
+ super();
+ }
+
+ /**
+ * @royaleignorecoercion org.apache.royale.style.Card
+ */
+ private function get host():Card
+ {
+ return _strand as Card;
+ }
+
+ override public function set strand(value:IStrand):void
+ {
+ super.strand = value;
+ applyStyles();
+ }
+
+ private function applyStyles():void
+ {
+ var colorSet:ThemeColorSet =
ThemeManager.instance.activeTheme.themeColorSet;
+ var bgColor:ColorSwatch =
colorSet.getSwatch(ThemeColorSet.BASE, 0);
+ var borderColor:ColorSwatch =
colorSet.getSwatch(ThemeColorSet.BASE, 200);
+
+ var defaultBorder:Border = new Border();
+ defaultBorder.color = borderColor.colorSpecifier;
+ defaultBorder.style = "solid";
+ defaultBorder.width = "1px";
+
+ var dashBorder:Border = new Border();
+ dashBorder.color = borderColor.colorSpecifier;
+ dashBorder.style = "dashed";
+ dashBorder.width = "1px";
+
+ _styles = [
+ new Display("flex"),
+ new FlexDirection("column"),
+ new Overflow("hidden"),
+ new BorderRadius(computeSize(8, host.unit)),
+ new BackgroundColor(bgColor.colorSpecifier),
+ defaultBorder,
+ new DataState("dash", [
+ dashBorder
+ ])
+ ];
+ host.setStyles(_styles);
+ }
+ }
+}
diff --git
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/skins/CardTitleSkin.as
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/skins/CardTitleSkin.as
new file mode 100644
index 0000000000..6aeba929a8
--- /dev/null
+++
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/skins/CardTitleSkin.as
@@ -0,0 +1,79 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.CardTitle;
+ import org.apache.royale.core.IStrand;
+ import org.apache.royale.style.stylebeads.typography.FontSize;
+ import org.apache.royale.style.stylebeads.typography.FontWeight;
+
+ public class CardTitleSkin extends StyleSkin
+ {
+ public function CardTitleSkin()
+ {
+ super();
+ }
+
+ /**
+ * @royaleignorecoercion org.apache.royale.style.CardTitle
+ */
+ private function get host():CardTitle
+ {
+ return _strand as CardTitle;
+ }
+
+ override public function set strand(value:IStrand):void
+ {
+ super.strand = value;
+ applyStyles();
+ }
+
+ private function applyStyles():void
+ {
+ var size:Number = 16 * getMultiplier();
+ var fontSize:String = computeSize(size * 1.125,
host.unit);
+
+ _styles = [
+ new FontSize(fontSize),
+ new FontWeight("600")
+ ];
+ host.setStyles(_styles);
+ }
+
+ private function getMultiplier():Number
+ {
+ switch(host.size)
+ {
+ case "xs":
+ return 0.75;
+ case "sm":
+ return 0.875;
+ case "md":
+ return 1;
+ case "lg":
+ return 1.125;
+ case "xl":
+ return 1.25;
+ default:
+ return 1;
+ }
+ }
+ }
+}
