diff --git a/frameworks/projects/Style/src/main/resources/defaults.css b/frameworks/projects/Style/src/main/resources/defaults.css index 467add0004..82d63c3f4c 100644 --- a/frameworks/projects/Style/src/main/resources/defaults.css +++ b/frameworks/projects/Style/src/main/resources/defaults.css @@ -62,6 +62,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 8ba4def654..1b86c1d4e2 100644 --- a/frameworks/projects/Style/src/main/resources/style-manifest.xml +++ b/frameworks/projects/Style/src/main/resources/style-manifest.xml @@ -30,6 +30,7 @@ + @@ -71,7 +72,6 @@ - @@ -301,6 +301,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..beb85804e8 --- /dev/null +++ b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/Status.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 +{ + 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 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..fbbe026f99 --- /dev/null +++ b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/skins/StatusSkin.as @@ -0,0 +1,97 @@ +// ////////////////////////////////////////////////////////////////////////////// +// +// 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); + var heightWidth:String = computeSize(getSize(), host.unit); + _styles = [ + new Position("relative"), + new Display("inline-block"), + new HeightStyle(heightWidth), + new WidthStyle(heightWidth), + 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; + } + } + } +}