This is an automated email from the ASF dual-hosted git repository.
greg-dove 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 6496874edb Numerous small updates, including progress on
media/container queries, tuining to Icon to center visual content in its frame
6496874edb is described below
commit 6496874edb5ab4a6370d1ac9671944852223ad14
Author: greg-dove <[email protected]>
AuthorDate: Thu May 28 14:36:47 2026 +0200
Numerous small updates, including progress on media/container queries,
tuining to Icon to center visual content in its frame
---
.../Style/src/main/resources/style-manifest.xml | 3 +
.../main/royale/org/apache/royale/style/Icon.as | 6 ++
.../royale/style/stylebeads/ILeafStyleBead.as | 1 +
.../royale/style/stylebeads/StyleBeadBase.as | 56 ++++++++++++++----
.../ContainerBreakpoint.as => ClassState.as} | 45 ++++++++------
.../royale/style/stylebeads/states/GroupPseudo.as | 11 +++-
.../royale/style/stylebeads/states/PeerPseudo.as | 3 +-
.../style/stylebeads/states/QueryBaseStyle.as | 54 +++++++++++++++++
.../states/{GroupPseudo.as => SiblingPseudo.as} | 48 +++++++++------
.../stylebeads/states/media/ContainerBreakpoint.as | 51 ++++++++++++++--
.../style/stylebeads/states/media/MediaBetween.as | 68 +++++++++++++++++++++-
.../stylebeads/states/media/MediaBreakpoint.as | 21 +++++--
.../org/apache/royale/style/util/StyleManager.as | 21 +++++++
13 files changed, 325 insertions(+), 63 deletions(-)
diff --git a/frameworks/projects/Style/src/main/resources/style-manifest.xml
b/frameworks/projects/Style/src/main/resources/style-manifest.xml
index 6bd29627f0..786cd0e069 100644
--- a/frameworks/projects/Style/src/main/resources/style-manifest.xml
+++ b/frameworks/projects/Style/src/main/resources/style-manifest.xml
@@ -114,6 +114,9 @@
<component id="SelectionState"
class="org.apache.royale.style.stylebeads.states.pseudo.SelectionState"/>
<component id="NotState"
class="org.apache.royale.style.stylebeads.states.NotState"/>
<component id="PeerPseudo"
class="org.apache.royale.style.stylebeads.states.PeerPseudo"/>
+ <component id="GroupPseudo"
class="org.apache.royale.style.stylebeads.states.GroupPseudo"/>
+ <component id="ClassState"
class="org.apache.royale.style.stylebeads.states.ClassState"/>
+ <component id="SiblingPseudo"
class="org.apache.royale.style.stylebeads.states.SiblingPseudo"/>
<component id="BackgroundStyle"
class="org.apache.royale.style.stylebeads.BackgroundStyle"/>
<component id="ContainerPosition"
class="org.apache.royale.style.stylebeads.ContainerPosition"/>
diff --git
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/Icon.as
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/Icon.as
index 5d6f79bc0c..1425500c78 100644
--- a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/Icon.as
+++ b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/Icon.as
@@ -18,6 +18,8 @@
////////////////////////////////////////////////////////////////////////////////
package org.apache.royale.style
{
+ import org.apache.royale.style.util.StyleManager;
+
COMPILE::JS
{
import org.apache.royale.html.util.createSVG;
@@ -37,6 +39,10 @@ package org.apache.royale.style
*/
public class Icon extends StyleUIBase implements IIcon
{
+
+ //the following ensures that content is centered inside the
Icon's "frame" div:
+ private static var init:Array = [StyleManager.addStyle('.Icon
svg', '.Icon svg','width:100%;height:100%')];
+
public function Icon(name:String = null)
{
super();
diff --git
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/ILeafStyleBead.as
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/ILeafStyleBead.as
index e0ef3e3434..c1148781a1 100644
---
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/ILeafStyleBead.as
+++
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/ILeafStyleBead.as
@@ -26,6 +26,7 @@ package org.apache.royale.style.stylebeads
function getRule():String;
function get selectorBase():String;
function get parentQueryId():String;
+ function set parentQueryId(value:String):void;
function get unit():String;
function set unit(value:String):void;
function get selectorPrefix():String;
diff --git
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/StyleBeadBase.as
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/StyleBeadBase.as
index fb07c5e532..1b9a80ec98 100644
---
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/StyleBeadBase.as
+++
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/StyleBeadBase.as
@@ -25,6 +25,7 @@ package org.apache.royale.style.stylebeads
import org.apache.royale.style.util.CSSLookup;
import org.apache.royale.style.util.StyleData;
import org.apache.royale.style.colors.ColorSwatch;
+ import org.apache.royale.utils.StringUtil;
[DefaultProperty("styles")]
/**
@@ -169,30 +170,61 @@ package org.apache.royale.style.stylebeads
value = "white";
var selectorVal:String = "" + value;
var ruleVal:String = selectorVal;
- switch(selectorVal)
+
+ if (selectorVal.indexOf("color-mix(") == 0)
+ {
+ ruleVal = resolveColorMix(selectorVal);
+ return new
StyleData(selectorVal.replace(/\s+/g, "-").replace(/\(/g, "-").replace(/\)/g,
"").replace(/,/g, "-").replace(/%/g, "pc"), ruleVal, value);
+ }
+
+ ruleVal = resolveColor(selectorVal);
+ return new StyleData(selectorVal, ruleVal,value);
+ }
+
+ private function resolveColor(color:String):String
+ {
+ switch(color)
{
case "transparent":
case "currentColor":
case "inherit":
case "none":
- break;
+ return color;
case "black":
- ruleVal = "#000";
- break;
+ return "#000";
case "white":
- ruleVal = "#fff";
- break;
+ return "#fff";
default:
- if(CSSLookup.has(selectorVal))
- ruleVal =
CSSLookup.getProperty(selectorVal);
- else
+ if(CSSLookup.has(color))
+ return
CSSLookup.getProperty(color);
+ else if (color.indexOf("-") != -1)
{
- var color:ColorSwatch =
ColorSwatch.fromSpecifier(selectorVal,false);
- ruleVal = color.colorValue;
+ var swatch:ColorSwatch =
ColorSwatch.fromSpecifier(color, false);
+ return swatch.colorValue;
}
break;
}
- return new StyleData(selectorVal, ruleVal,value);
+ return color;
+ }
+
+ private function resolveColorMix(value:String):String
+ {
+ // color-mix(in srgb, blue 50%, white)
+ var content:String = value.substring(10, value.length -
1);
+ var parts:Array = content.split(",");
+ var ret:String = "color-mix(" + parts[0]; // in srgb
+ for (var i:int = 1; i < parts.length; i++)
+ {
+ var part:String = StringUtil.trim(parts[i]);
+ var colorPart:Array = part.split(/\s+/);
+ var color:String = colorPart[0];
+ var resolved:String = resolveColor(color);
+ ret += ", " + resolved;
+ if (colorPart.length > 1)
+ ret += " " + colorPart[1];
+ }
+ ret += ")";
+ return ret;
}
}
}
\ No newline at end of file
diff --git
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/states/media/ContainerBreakpoint.as
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/states/ClassState.as
similarity index 52%
copy from
frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/states/media/ContainerBreakpoint.as
copy to
frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/states/ClassState.as
index 38819ffa4f..d84d7dddb2 100644
---
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/states/media/ContainerBreakpoint.as
+++
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/states/ClassState.as
@@ -16,32 +16,41 @@
// limitations under the License.
//
////////////////////////////////////////////////////////////////////////////////
-package org.apache.royale.style.stylebeads.states.media
+package org.apache.royale.style.stylebeads.states
{
-
- import org.apache.royale.style.stylebeads.states.QueryBaseStyle;
-
- public class ContainerBreakpoint extends QueryBaseStyle
+ /**
+ * The ClassState class is a style decorator that applies styles when
+ * an element has a specific CSS class.
+ */
+ public class ClassState extends LeafDecorator
{
- public function ContainerBreakpoint()
+ /**
+ * Constructor.
+ *
+ * @param className The name of the CSS class (without the
dot).
+ * @param styles An array of style beads to apply when the
class is present.
+ */
+ public function ClassState(className:String = null,
styles:Array = null)
{
- super();
- queryType = "container";
+ super(styles);
+ if (className)
+ this.className = className;
}
- private var _size:*;
- public function get size():*
+ private var _className:String;
+
+ public function get className():String
{
- return _size;
+ return _className;
}
- public function set size(value:*):void
+ public function set className(value:String):void
{
- _size = value;
- //TODO
- // protected var queryBody:String = "";
- // protected var querySelector:String;
-
+ _className = value;
+ // Escape colon for things like "lg:drawer-open"
+ var escaped:String = value.replace(/:/g, "\\:");
+ selectorDecorator = value + ":";
+ ruleDecorator = "." + escaped;
}
}
-}
\ No newline at end of file
+}
diff --git
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/states/GroupPseudo.as
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/states/GroupPseudo.as
index 902cac0927..6ca606e0ef 100644
---
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/states/GroupPseudo.as
+++
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/states/GroupPseudo.as
@@ -39,16 +39,22 @@ package org.apache.royale.style.stylebeads.states
* @param styles An array of style beads to apply when the
group condition is met.
* @param groupClass The CSS class name of the parent element
to target.
* If null, it defaults to StyleUIBase.GROUP_WRAPPER_STYLE
('style-group').
+ * @param combiner The combiner to use between the group
element and the child element.
+ * Defaults to a space (descendant combiner). Can be '>', '+',
or '~'.
*/
- public function GroupPseudo(styles:Array = null,
groupClass:String = null)
+ public function GroupPseudo(styles:Array = null,
groupClass:String = null, combiner:String = " ")
{
super(styles);
var base:String = groupClass ||
StyleUIBase.GROUP_WRAPPER_STYLE;
selectorDecorator = base + '-';
ruleDecorator = base;
+ _combiner = combiner;
decoratorType = COMBINER;
}
+
+ private var _combiner:String;
+
override public function
decorateChildStyle(style:ILeafStyleBead, decorations:Array):void
{
style.selectorPrefix = selectorDecorator +
style.selectorPrefix;
@@ -63,7 +69,8 @@ package org.apache.royale.style.stylebeads.states
}
decorations.push(new StyleDecoration(decoratorType,
ruleDecorator));
- style.rulePrefix = "." + ruleDecorator + decorationStr
+ " " + style.rulePrefix;
+ var escapedRuleDecorator:String =
ruleDecorator.indexOf(".") == 0 ? ruleDecorator : "." +
ruleDecorator.replace(/:/g, "\\:");
+ style.rulePrefix = escapedRuleDecorator + decorationStr
+ _combiner + style.rulePrefix;
if(parentStyle)
parentStyle.decorateChildStyle(style,
decorations);
}
diff --git
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/states/PeerPseudo.as
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/states/PeerPseudo.as
index d4ee8c88a3..359c249236 100644
---
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/states/PeerPseudo.as
+++
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/states/PeerPseudo.as
@@ -46,7 +46,8 @@ package org.apache.royale.style.stylebeads.states
}
decorations.push(new StyleDecoration(decoratorType,
ruleDecorator));
- style.rulePrefix = "." + ruleDecorator + decorationStr
+ " ~ " + style.rulePrefix;
+ var escapedRuleDecorator:String =
ruleDecorator.indexOf(".") == 0 ? ruleDecorator : "." +
ruleDecorator.replace(/:/g, "\\:");
+ style.rulePrefix = escapedRuleDecorator + decorationStr
+ " ~ " + style.rulePrefix;
if(parentStyle)
parentStyle.decorateChildStyle(style,
decorations);
}
diff --git
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/states/QueryBaseStyle.as
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/states/QueryBaseStyle.as
index ce747b2833..4441c7cfe2 100644
---
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/states/QueryBaseStyle.as
+++
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/states/QueryBaseStyle.as
@@ -19,7 +19,12 @@
package org.apache.royale.style.stylebeads.states
{
import org.apache.royale.style.util.StyleManager;
+ import org.apache.royale.style.util.ThemeManager;
+ import org.apache.royale.style.util.CSSUnit;
import org.apache.royale.style.stylebeads.IStyleBead;
+ import org.apache.royale.style.stylebeads.ILeafStyleBead;
+ import org.apache.royale.style.IStyleUIBase;
+ import org.apache.royale.core.IStrand;
public class QueryBaseStyle extends StyleStateBase
{
@@ -36,6 +41,17 @@ package org.apache.royale.style.stylebeads.states
{
return querySelector;
}
+
+ /**
+ * @royaleignorecoercion
org.apache.royale.style.stylebeads.ILeafStyleBead
+ */
+ override public function
decorateChildStyle(style:ILeafStyleBead, decorations:Array):void
+ {
+ style.parentQueryId = querySelector;
+ if(parentStyle)
+ parentStyle.decorateChildStyle(style,
decorations);
+ }
+
/**
* Change in subclasses for other query types such as
`container` or `supports`.
*/
@@ -49,6 +65,44 @@ package org.apache.royale.style.stylebeads.states
*/
protected var queryBody:String = "";
protected var querySelector:String;
+
+ /**
+ * @royaleignorecoercion org.apache.royale.core.IStrand
+ */
+ public function get strand():IStrand
+ {
+ return _strand;
+ }
+
+ override public function set strand(value:IStrand):void
+ {
+ super.strand = value;
+ if (value)
+ {
+ applyContainerStyles();
+ }
+ }
+
+ protected function applyContainerStyles():void
+ {
+ // Subclasses can override to apply styles to the strand
+ }
+
+ protected function computeSize(value:*):String
+ {
+ if(value == null) return "";
+ if(parseFloat(value) == value)
+ {
+ var pixelValue:Number =
ThemeManager.instance.activeTheme.spacing * value;
+ return CSSUnit.convert(pixelValue, CSSUnit.PX,
unit) + unit;
+ }
+ return "" + value;
+ }
+
+ protected function sanitizeIdentifier(value:String):String
+ {
+ return value.replace(/[\s\.\(\)\+\*\/\[\]]/g,
"-").replace(/-+/g, "-");
+ }
override protected function preprocessStyle():void
{
diff --git
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/states/GroupPseudo.as
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/states/SiblingPseudo.as
similarity index 55%
copy from
frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/states/GroupPseudo.as
copy to
frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/states/SiblingPseudo.as
index 902cac0927..b55724f1ee 100644
---
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/states/GroupPseudo.as
+++
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/states/SiblingPseudo.as
@@ -18,37 +18,50 @@
////////////////////////////////////////////////////////////////////////////////
package org.apache.royale.style.stylebeads.states
{
- import org.apache.royale.style.StyleUIBase;
import org.apache.royale.style.stylebeads.ILeafStyleBead;
import org.apache.royale.style.util.StyleDecoration;
/**
- * The GroupPseudo class is a style decorator that allows child
elements to be styled
- * based on the state of a parent element. It corresponds to the
"group-*" utility
- * pattern in CSS frameworks like Tailwind CSS.
- *
- * The parent element must have a "group" class (defaults to
'style-group').
- * When this decorator is used, it generates CSS rules like:
- * .style-group[data-disabled] .child-element { ... }
+ * The SiblingPseudo class is a style decorator that allows elements
to be styled
+ * based on the state of a preceding sibling element.
+ * It corresponds to the "peer-*" utility pattern in CSS frameworks
like Tailwind CSS,
+ * but allows specifying the sibling's class/selector explicitly.
*/
- public class GroupPseudo extends LeafDecorator
+ public class SiblingPseudo extends LeafDecorator
{
/**
* Constructor.
*
- * @param styles An array of style beads to apply when the
group condition is met.
- * @param groupClass The CSS class name of the parent element
to target.
- * If null, it defaults to StyleUIBase.GROUP_WRAPPER_STYLE
('style-group').
+ * @param styles An array of style beads to apply when the
sibling condition is met.
+ * @param siblingSelector The CSS selector of the preceding
sibling element.
+ * @param general If true, uses the general sibling combiner
(~),
+ * otherwise uses the adjacent sibling combiner (+).
*/
- public function GroupPseudo(styles:Array = null,
groupClass:String = null)
+ public function SiblingPseudo(styles:Array = null,
siblingSelector:String = null, general:Boolean = true)
{
super(styles);
- var base:String = groupClass ||
StyleUIBase.GROUP_WRAPPER_STYLE;
- selectorDecorator = base + '-';
- ruleDecorator = base;
+ if (siblingSelector)
+ this.siblingSelector = siblingSelector;
+ _combiner = general ? " ~ " : " + ";
decoratorType = COMBINER;
}
+
+ private var _siblingSelector:String;
+ private var _combiner:String;
+
+ public function get siblingSelector():String
+ {
+ return _siblingSelector;
+ }
+
+ public function set siblingSelector(value:String):void
+ {
+ _siblingSelector = value;
+ selectorDecorator = value + (value.indexOf(":") ==
value.length - 1 ? "" : "-");
+ ruleDecorator = value;
+ }
+
override public function
decorateChildStyle(style:ILeafStyleBead, decorations:Array):void
{
style.selectorPrefix = selectorDecorator +
style.selectorPrefix;
@@ -63,7 +76,8 @@ package org.apache.royale.style.stylebeads.states
}
decorations.push(new StyleDecoration(decoratorType,
ruleDecorator));
- style.rulePrefix = "." + ruleDecorator + decorationStr
+ " " + style.rulePrefix;
+ var escapedRuleDecorator:String =
ruleDecorator.indexOf(".") == 0 ? ruleDecorator : "." +
ruleDecorator.replace(/:/g, "\\:");
+ style.rulePrefix = escapedRuleDecorator + decorationStr
+ _combiner + style.rulePrefix;
if(parentStyle)
parentStyle.decorateChildStyle(style,
decorations);
}
diff --git
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/states/media/ContainerBreakpoint.as
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/states/media/ContainerBreakpoint.as
index 38819ffa4f..702ca4f38c 100644
---
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/states/media/ContainerBreakpoint.as
+++
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/states/media/ContainerBreakpoint.as
@@ -18,16 +18,50 @@
////////////////////////////////////////////////////////////////////////////////
package org.apache.royale.style.stylebeads.states.media
{
-
+ import org.apache.royale.style.IStyleUIBase;
import org.apache.royale.style.stylebeads.states.QueryBaseStyle;
+ import org.apache.royale.style.util.ThemeManager;
+ import org.apache.royale.style.util.CSSUnit;
public class ContainerBreakpoint extends QueryBaseStyle
{
- public function ContainerBreakpoint()
+ public function ContainerBreakpoint(size:* = null, styles:Array
= null)
{
super();
queryType = "container";
+ if (styles)
+ this.styles = styles;
+ if (size != null)
+ this.size = size;
+ }
+
+ private var _containerType:String = "inline-size";
+ /**
+ * The type of the container query. Defaults to "inline-size".
+ * Can also be "size" or "normal".
+ */
+ public function get containerType():String
+ {
+ return _containerType;
+ }
+
+ public function set containerType(value:String):void
+ {
+ _containerType = value;
+ if (strand)
+ {
+ applyContainerStyles();
+ }
+ }
+
+ override protected function applyContainerStyles():void
+ {
+ if (strand is IStyleUIBase)
+ {
+ (strand as
IStyleUIBase).setStyle("container-type", _containerType);
+ }
}
+
private var _size:*;
public function get size():*
@@ -38,10 +72,15 @@ package org.apache.royale.style.stylebeads.states.media
public function set size(value:*):void
{
_size = value;
- //TODO
- // protected var queryBody:String = "";
- // protected var querySelector:String;
-
+ if(value == null)
+ {
+ queryBody = "";
+ querySelector = "";
+ return;
+ }
+ var sizeValue:String = computeSize(value);
+ queryBody = "(min-width: " + sizeValue + ")";
+ querySelector = "container-min-width-" +
sanitizeIdentifier(sizeValue);
}
}
}
\ No newline at end of file
diff --git
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/states/media/MediaBetween.as
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/states/media/MediaBetween.as
index ace5b8ebca..d724e352c3 100644
---
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/states/media/MediaBetween.as
+++
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/states/media/MediaBetween.as
@@ -20,13 +20,77 @@ package org.apache.royale.style.stylebeads.states.media
{
import org.apache.royale.style.stylebeads.states.QueryBaseStyle;
+ import org.apache.royale.style.util.ThemeManager;
+ import org.apache.royale.style.util.CSSUnit;
public class MediaBetween extends QueryBaseStyle
{
- public function MediaBetween()
+ public function MediaBetween(min:* = null, max:* = null,
styles:Array = null)
{
super();
+ if (styles)
+ this.styles = styles;
+ if (min != null)
+ this.min = min;
+ if (max != null)
+ this.max = max;
+ }
+
+ private var _min:*;
+ private var _max:*;
+
+ public function get min():*
+ {
+ return _min;
+ }
+
+ public function set min(value:*):void
+ {
+ _min = value;
+ updateQuery();
+ }
+
+ public function get max():*
+ {
+ return _max;
+ }
+
+ public function set max(value:*):void
+ {
+ _max = value;
+ updateQuery();
+ }
+
+ private function updateQuery():void
+ {
+ if(_min == null && _max == null)
+ {
+ queryBody = "";
+ querySelector = "";
+ return;
+ }
+
+ var minVal:String = _min != null ? computeSize(_min) :
null;
+ var maxVal:String = _max != null ? computeSize(_max) :
null;
+
+ var body:String = "";
+ var id:String = "media-between";
+
+ if(minVal)
+ {
+ body += "(min-width: " + minVal + ")";
+ id += "-min-" + sanitizeIdentifier(minVal);
+ }
+
+ if(maxVal)
+ {
+ if(body) body += " and ";
+ body += "(max-width: " + maxVal + ")";
+ id += "-max-" + sanitizeIdentifier(maxVal);
+ }
+
+ queryBody = body;
+ querySelector = id;
}
- //TODO
}
}
\ No newline at end of file
diff --git
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/states/media/MediaBreakpoint.as
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/states/media/MediaBreakpoint.as
index e0fb96ec4e..abc8989fbf 100644
---
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/states/media/MediaBreakpoint.as
+++
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/states/media/MediaBreakpoint.as
@@ -20,12 +20,18 @@ package org.apache.royale.style.stylebeads.states.media
{
import org.apache.royale.style.stylebeads.states.QueryBaseStyle;
+ import org.apache.royale.style.util.ThemeManager;
+ import org.apache.royale.style.util.CSSUnit;
public class MediaBreakpoint extends QueryBaseStyle
{
- public function MediaBreakpoint()
+ public function MediaBreakpoint(size:* = null, styles:Array =
null)
{
super();
+ if (styles)
+ this.styles = styles;
+ if (size != null)
+ this.size = size;
}
private var _size:*;
@@ -37,10 +43,15 @@ package org.apache.royale.style.stylebeads.states.media
public function set size(value:*):void
{
_size = value;
- //TODO
- // protected var queryBody:String = "";
- // protected var querySelector:String;
-
+ if(value == null)
+ {
+ queryBody = "";
+ querySelector = "";
+ return;
+ }
+ var sizeValue:String = computeSize(value);
+ queryBody = "(min-width: " + sizeValue + ")";
+ querySelector = "media-min-width-" +
sanitizeIdentifier(sizeValue);
}
}
}
\ No newline at end of file
diff --git
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/util/StyleManager.as
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/util/StyleManager.as
index f5643c6784..91a152e214 100644
---
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/util/StyleManager.as
+++
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/util/StyleManager.as
@@ -99,6 +99,15 @@ package org.apache.royale.style.util
}
return mediaList.get(identifier) as CSSRule;
}
+
+ /**
+ *
+ * @param identifier
+ * @param query
+ * @param parentId
+ *
+ * @royaleignorecoercion CSSStyleSheet
+ */
public static function addQuery(identifier:String,
query:String,parentId:String = null):void
{
COMPILE::JS
@@ -124,6 +133,17 @@ package org.apache.royale.style.util
}
}
}
+
+ /**
+ *
+ * @param identifier
+ * @param selector
+ * @param normalizedSelector
+ * @param rule
+ *
+ *
+ * @royaleignorecoercion CSSStyleSheet
+ */
public static function addGroupedRule(identifier:String,
selector:String, normalizedSelector:String, rule:String):void
{
COMPILE::JS
@@ -132,6 +152,7 @@ package org.apache.royale.style.util
var toGroup:CSSRule = getQuery(identifier);
// TODO remove this once we have
CSSGroupingRule in the typedefs
var fakeType:CSSStyleSheet = toGroup as
CSSStyleSheet;
+ //var fakeType:CSSGroupingRule = toGroup as
CSSGroupingRule;
var len:int = fakeType.cssRules.length;
fakeType.insertRule(normalizedSelector + "{" +
rule + "}", len);
styleList.add(selector);
