From 1fc3dc0dc0c55d97e0e66dca9972c4d4869963ba Mon Sep 17 00:00:00 2001 From: Esti Braverman Date: Thu, 16 Apr 2026 10:16:08 +0300 Subject: [PATCH 1/3] Added Status --- .../Style/src/main/resources/defaults.css | 4 + .../src/main/resources/style-manifest.xml | 3 +- .../royale/org/apache/royale/style/Status.as | 58 +++++++++++ .../apache/royale/style/skins/StatusSkin.as | 96 +++++++++++++++++++ 4 files changed, 160 insertions(+), 1 deletion(-) create mode 100644 frameworks/projects/Style/src/main/royale/org/apache/royale/style/Status.as create mode 100644 frameworks/projects/Style/src/main/royale/org/apache/royale/style/skins/StatusSkin.as diff --git a/frameworks/projects/Style/src/main/resources/defaults.css b/frameworks/projects/Style/src/main/resources/defaults.css index 47336a903b..433e9e1c6d 100644 --- a/frameworks/projects/Style/src/main/resources/defaults.css +++ b/frameworks/projects/Style/src/main/resources/defaults.css @@ -55,6 +55,10 @@ CheckBox { IStyleSkin: ClassReference("org.apache.royale.style.skins.CheckBoxSkin"); } +Status +{ + IStyleSkin: ClassReference("org.apache.royale.style.skins.StatusSkin"); +} Dropdown { IStyleSkin: ClassReference("org.apache.royale.style.skins.DropdownSkin"); diff --git a/frameworks/projects/Style/src/main/resources/style-manifest.xml b/frameworks/projects/Style/src/main/resources/style-manifest.xml index 17ce768459..cbfbfc3bd1 100644 --- a/frameworks/projects/Style/src/main/resources/style-manifest.xml +++ b/frameworks/projects/Style/src/main/resources/style-manifest.xml @@ -28,6 +28,7 @@ + @@ -51,7 +52,6 @@ - @@ -273,6 +273,7 @@ + diff --git a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/Status.as b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/Status.as new file mode 100644 index 0000000000..79199f630a --- /dev/null +++ b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/Status.as @@ -0,0 +1,58 @@ +// ////////////////////////////////////////////////////////////////////////////// +// +// 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.style.elements.Span; + import org.apache.royale.debugging.assert; + + /** + * Displays a small status indicator dot with an inner highlight. + */ + + public class Status extends StyleUIBase + { + + public function Status() + { + super(); + } + + COMPILE::JS + private var span:Span; + + COMPILE::JS + override protected function getTag():String + { + return "label"; + } + COMPILE::JS + + override protected function createElement():WrappedHTMLElement + { + var elem:WrappedHTMLElement = super.createElement(); + span = new Span(); + addElement(span); + return elem; + } + } +} diff --git a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/skins/StatusSkin.as b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/skins/StatusSkin.as new file mode 100644 index 0000000000..461a68c692 --- /dev/null +++ b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/skins/StatusSkin.as @@ -0,0 +1,96 @@ +// ////////////////////////////////////////////////////////////////////////////// +// +// 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.Status; + import org.apache.royale.core.IStrand; + import org.apache.royale.style.stylebeads.background.BackgroundColor; + import org.apache.royale.style.stylebeads.border.BorderRadius; + import org.apache.royale.style.stylebeads.border.Outline; + 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.layout.Left; + import org.apache.royale.style.stylebeads.layout.Top; + import org.apache.royale.style.stylebeads.sizing.HeightStyle; + import org.apache.royale.style.stylebeads.sizing.WidthStyle; + import org.apache.royale.style.stylebeads.typography.VerticalAlign; + import org.apache.royale.style.stylebeads.effects.OpacityStyle; + import org.apache.royale.style.colors.ColorSwatch; + import org.apache.royale.style.colors.ThemeColorSet; + import org.apache.royale.style.util.ThemeManager; + + public class StatusSkin extends StyleSkin + { + public function StatusSkin() + { + super(); + } + + private function get host():Status + { + return _strand as Status; + } + // Currently using the simplest implementation. + // There are additional styling options available for the status indicator + // (e.g. different animations, and visual effects) + // clsses: + // + // + override public function set strand(value:IStrand):void + { + super.strand = value; + if (_styles) + return; + var colorSet:ThemeColorSet = ThemeManager.instance.activeTheme.themeColorSet; + var baseColor:ColorSwatch = (host.theme && host.theme != "default") ? colorSet.getSwatch(host.theme, 600) : colorSet.getSwatch(ThemeColorSet.NEUTRAL, 300); + _styles = [ + new Position("relative"), + new Display("inline-block"), + new HeightStyle(getSize() + "px"), + new WidthStyle(getSize() + "px"), + new Overflow("hidden"), + new BorderRadius("9999px"), + new VerticalAlign("middle"), + new BackgroundColor(baseColor), + ]; + + host.setStyles(_styles); + } + private function getSize():Number + { + switch (host.size) + { + case "xs": + return 4; + case "sm": + return 6; + case "md": + return 9; + case "lg": + return 11; + case "xl": + return 13; + default: + return 9; + } + } + } +} From 24175f75d31bfc79bd849a45f589a0d6a2bc6924 Mon Sep 17 00:00:00 2001 From: Esti Braverman Date: Sun, 26 Apr 2026 11:56:57 +0300 Subject: [PATCH 2/3] Fix size to rem --- .../main/royale/org/apache/royale/style/skins/StatusSkin.as | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/skins/StatusSkin.as b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/skins/StatusSkin.as index 461a68c692..fbbe026f99 100644 --- a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/skins/StatusSkin.as +++ b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/skins/StatusSkin.as @@ -61,11 +61,12 @@ package org.apache.royale.style.skins return; var colorSet:ThemeColorSet = ThemeManager.instance.activeTheme.themeColorSet; var baseColor:ColorSwatch = (host.theme && host.theme != "default") ? colorSet.getSwatch(host.theme, 600) : colorSet.getSwatch(ThemeColorSet.NEUTRAL, 300); + var heightWidth:String = computeSize(getSize(), host.unit); _styles = [ new Position("relative"), new Display("inline-block"), - new HeightStyle(getSize() + "px"), - new WidthStyle(getSize() + "px"), + new HeightStyle(heightWidth), + new WidthStyle(heightWidth), new Overflow("hidden"), new BorderRadius("9999px"), new VerticalAlign("middle"), From a46ead6bad9ea074b8dc50918672e42539105432 Mon Sep 17 00:00:00 2001 From: Esti Braverman Date: Mon, 18 May 2026 09:03:46 +0300 Subject: [PATCH 3/3] claenup --- .../Style/src/main/royale/org/apache/royale/style/Status.as | 6 ------ 1 file changed, 6 deletions(-) diff --git a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/Status.as b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/Status.as index 79199f630a..beb85804e8 100644 --- a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/Status.as +++ b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/Status.as @@ -41,12 +41,6 @@ package org.apache.royale.style private var span:Span; COMPILE::JS - override protected function getTag():String - { - return "label"; - } - COMPILE::JS - override protected function createElement():WrappedHTMLElement { var elem:WrappedHTMLElement = super.createElement();