You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@flex.apache.org by bi...@apache.org on 2014/11/16 11:04:48 UTC
git commit: [flex-sdk] [refs/heads/iso7skins] - Add new ios7+
specific skin for SpinnerList and SpinnerListContainer.
Repository: flex-sdk
Updated Branches:
refs/heads/iso7skins 93af62c7a -> ebe4b4f98
Add new ios7+ specific skin for SpinnerList and SpinnerListContainer.
Project: http://git-wip-us.apache.org/repos/asf/flex-sdk/repo
Commit: http://git-wip-us.apache.org/repos/asf/flex-sdk/commit/ebe4b4f9
Tree: http://git-wip-us.apache.org/repos/asf/flex-sdk/tree/ebe4b4f9
Diff: http://git-wip-us.apache.org/repos/asf/flex-sdk/diff/ebe4b4f9
Branch: refs/heads/iso7skins
Commit: ebe4b4f98d4c17c54bbd6c57342c9ab3dd347a3b
Parents: 93af62c
Author: OmPrakash Muppirala <bi...@gmail.com>
Authored: Sun Nov 16 02:04:01 2014 -0800
Committer: OmPrakash Muppirala <bi...@gmail.com>
Committed: Sun Nov 16 02:04:01 2014 -0800
----------------------------------------------------------------------
.../src/spark/components/SpinnerList.as | 12 ++++++
.../spark/components/SpinnerListItemRenderer.as | 35 +++++++++++++++++
frameworks/projects/mobiletheme/defaults.css | 7 +++-
.../skins/ios7/SpinnerListContainerSkin.as | 33 +---------------
.../src/spark/skins/ios7/SpinnerListSkin.as | 41 ++++++++++++++++++--
.../SpinnerListContainerSelectionIndicator.fxg | 12 +++---
6 files changed, 96 insertions(+), 44 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/flex-sdk/blob/ebe4b4f9/frameworks/projects/mobilecomponents/src/spark/components/SpinnerList.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/mobilecomponents/src/spark/components/SpinnerList.as b/frameworks/projects/mobilecomponents/src/spark/components/SpinnerList.as
index f674806..cffc008 100644
--- a/frameworks/projects/mobilecomponents/src/spark/components/SpinnerList.as
+++ b/frameworks/projects/mobilecomponents/src/spark/components/SpinnerList.as
@@ -396,6 +396,18 @@ public class SpinnerList extends ListBase
}
}
}
+
+ override protected function itemSelected(index:int, selected:Boolean):void
+ {
+ super.itemSelected(index, selected);
+
+ var renderer:Object = dataGroup ? dataGroup.getElementAt(index) : null;
+
+ if (renderer is IItemRenderer)
+ {
+ IItemRenderer(renderer).selected = selected;
+ }
+ }
/**
* @private
http://git-wip-us.apache.org/repos/asf/flex-sdk/blob/ebe4b4f9/frameworks/projects/mobilecomponents/src/spark/components/SpinnerListItemRenderer.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/mobilecomponents/src/spark/components/SpinnerListItemRenderer.as b/frameworks/projects/mobilecomponents/src/spark/components/SpinnerListItemRenderer.as
index 1a5f26a..6a5c643 100644
--- a/frameworks/projects/mobilecomponents/src/spark/components/SpinnerListItemRenderer.as
+++ b/frameworks/projects/mobilecomponents/src/spark/components/SpinnerListItemRenderer.as
@@ -21,6 +21,8 @@ package spark.components
import mx.core.DPIClassification;
import mx.core.mx_internal;
+
+import spark.components.supportClasses.ListBase;
use namespace mx_internal;
@@ -83,12 +85,45 @@ public class SpinnerListItemRenderer extends LabelItemRenderer
}
}
+ //--------------------------------------------------------------------------
+ //
+ // Variables
+ //
+ //--------------------------------------------------------------------------
+
+ private var _colorName:String = "color";
+
//--------------------------------------------------------------------------
//
// Overridden Methods
//
//--------------------------------------------------------------------------
+ override public function set selected(value:Boolean):void
+ {
+ var oldValue:Boolean = selected;
+ super.selected = value;
+ if(oldValue != selected)
+ {
+ if(selected)
+ {
+ _colorName = "accentColor"; // highlighted item
+ }else{
+ _colorName = "color"; // reset to use standard color
+ }
+ setTextProperties();
+ }
+ }
+
+ private function setTextProperties():void
+ {
+ if (labelDisplay)
+ {
+ labelDisplay.colorName = _colorName;
+ labelDisplay.alpha = enabled ? 1 : .5;
+ }
+ }
+
/**
* @private
*
http://git-wip-us.apache.org/repos/asf/flex-sdk/blob/ebe4b4f9/frameworks/projects/mobiletheme/defaults.css
----------------------------------------------------------------------
diff --git a/frameworks/projects/mobiletheme/defaults.css b/frameworks/projects/mobiletheme/defaults.css
index 13c1d2a..aceaa51 100644
--- a/frameworks/projects/mobiletheme/defaults.css
+++ b/frameworks/projects/mobiletheme/defaults.css
@@ -1093,6 +1093,9 @@ global
SpinnerList
{
skinClass: ClassReference("spark.skins.ios7.SpinnerListSkin");
+ fontSize: 10;
+ color: #999999;
+ accentColor: #333333;
}
SpinnerListContainer
@@ -1102,8 +1105,8 @@ global
SpinnerListItemRenderer
{
- paddingTop : 18;
- paddingBottom : 18;
+ paddingTop : 9;
+ paddingBottom : 9;
paddingLeft : 6;
paddingRight : 6;
}
http://git-wip-us.apache.org/repos/asf/flex-sdk/blob/ebe4b4f9/frameworks/projects/mobiletheme/src/spark/skins/ios7/SpinnerListContainerSkin.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/mobiletheme/src/spark/skins/ios7/SpinnerListContainerSkin.as b/frameworks/projects/mobiletheme/src/spark/skins/ios7/SpinnerListContainerSkin.as
index 773fce9..0976e33 100644
--- a/frameworks/projects/mobiletheme/src/spark/skins/ios7/SpinnerListContainerSkin.as
+++ b/frameworks/projects/mobiletheme/src/spark/skins/ios7/SpinnerListContainerSkin.as
@@ -64,7 +64,6 @@ package spark.skins.ios7
borderClass = spark.skins.ios7.assets.SpinnerListContainerBackground;
selectionIndicatorClass = spark.skins.ios7.assets.SpinnerListContainerSelectionIndicator;
- shadowClass = spark.skins.ios7.assets.SpinnerListContainerShadow;
cornerRadius = 0;
borderThickness = 0;
switch (applicationDPI)
@@ -84,6 +83,7 @@ package spark.skins.ios7
selectionIndicatorHeight = 96;
break;
}
+ selectionIndicatorHeight = 24;
case DPIClassification.DPI_240:
{
selectionIndicatorHeight = 72;
@@ -96,7 +96,6 @@ package spark.skins.ios7
}
default: // default DPI_160
{
- selectionIndicatorHeight = 48;
break;
}
@@ -156,15 +155,6 @@ package spark.skins.ios7
protected var selectionIndicatorClass:Class;
/**
- * Class for the shadow skin part.
- *
- * @langversion 3.0
- * @playerversion AIR 3
- * @productversion Flex 4.6
- */
- protected var shadowClass:Class;
-
- /**
* Border skin part which includes the background.
*
* @langversion 3.0
@@ -183,15 +173,6 @@ package spark.skins.ios7
protected var selectionIndicator:InteractiveObject;
/**
- * Shadow skin part.
- *
- * @langversion 3.0
- * @playerversion AIR 3
- * @productversion Flex 4.6
- */
- protected var shadow:InteractiveObject;
-
- /**
* Mask for the content group.
*
* @langversion 3.0
@@ -262,15 +243,6 @@ package spark.skins.ios7
addChild(contentGroup);
}
- if (!shadow)
- {
- // Shadowing sits on top of the content
- shadow = new shadowClass();
- shadow.mouseEnabled = false;
- addChild(shadow);
- }
-
-
if (!contentGroupMask)
{
// Create a mask for the content
@@ -308,9 +280,6 @@ package spark.skins.ios7
setElementSize(border, unscaledWidth - borderThickness * 2, unscaledHeight);
setElementPosition(border, borderThickness, 0);
- setElementSize(shadow, unscaledWidth - borderThickness * 4, measuredHeight - borderThickness * 2);
- setElementPosition(shadow, borderThickness * 2, unscaledHeight/2 - measuredHeight/2);
-
// The SpinnerLists contain a left and right border. We don't want to show the leftmost
// SpinnerLists's left border nor the rightmost one's right border.
// We inset the mask on the left and right sides to accomplish this.
http://git-wip-us.apache.org/repos/asf/flex-sdk/blob/ebe4b4f9/frameworks/projects/mobiletheme/src/spark/skins/ios7/SpinnerListSkin.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/mobiletheme/src/spark/skins/ios7/SpinnerListSkin.as b/frameworks/projects/mobiletheme/src/spark/skins/ios7/SpinnerListSkin.as
index fa1ed35..2cd27f5 100644
--- a/frameworks/projects/mobiletheme/src/spark/skins/ios7/SpinnerListSkin.as
+++ b/frameworks/projects/mobiletheme/src/spark/skins/ios7/SpinnerListSkin.as
@@ -30,7 +30,8 @@ package spark.skins.ios7
import spark.components.SpinnerListItemRenderer;
import spark.layouts.VerticalSpinnerLayout;
import spark.skins.ios7.assets.SpinnerListContainerSelectionIndicator;
- import spark.skins.mobile.supportClasses.MobileSkin;
+ import spark.skins.ios7.assets.SpinnerListContainerShadow;
+ import spark.skins.mobile.supportClasses.MobileSkin;
use namespace mx_internal;
@@ -57,6 +58,7 @@ package spark.skins.ios7
super();
selectionIndicatorClass = spark.skins.ios7.assets.SpinnerListContainerSelectionIndicator;
+ shadowClass = spark.skins.ios7.assets.SpinnerListContainerShadow;
borderThickness = 1;
switch (applicationDPI)
{
@@ -97,7 +99,7 @@ package spark.skins.ios7
}
default:
{
- selectionIndicatorHeight = 48;
+ selectionIndicatorHeight = 24;
minWidth = 16;
borderThickness = 1;
}
@@ -178,6 +180,24 @@ package spark.skins.ios7
* @productversion Flex 4.6
*/
protected var selectionIndicatorHeight:Number;
+
+ /**
+ * Class for the shadow skin part.
+ *
+ * @langversion 3.0
+ * @playerversion AIR 3
+ * @productversion Flex 4.6
+ */
+ protected var shadowClass:Class;
+
+ /**
+ * Shadow skin part.
+ *
+ * @langversion 3.0
+ * @playerversion AIR 3
+ * @productversion Flex 4.6
+ */
+ protected var shadow:InteractiveObject;
//--------------------------------------------------------------------------
//
@@ -206,8 +226,9 @@ package spark.skins.ios7
{
// Create data group layout
var layout:VerticalSpinnerLayout = new VerticalSpinnerLayout();
- layout.requestedRowCount = 5;
-
+ layout.requestedRowCount = 9;
+ layout.rowHeight = 20;
+
// Create data group
dataGroup = new DataGroup();
dataGroup.id = "dataGroup";
@@ -231,6 +252,14 @@ package spark.skins.ios7
addChild(scroller);
}
+
+ if (!shadow)
+ {
+ // Shadowing sits on top of the content
+ shadow = new shadowClass();
+ shadow.mouseEnabled = false;
+ addChild(shadow);
+ }
if (!selectionIndicator)
{
@@ -243,6 +272,7 @@ package spark.skins.ios7
// Associate scroller with data group
if (!scroller.viewport)
scroller.viewport = dataGroup;
+
}
/**
@@ -272,6 +302,9 @@ package spark.skins.ios7
setElementSize(selectionIndicator, unscaledWidth, selectionIndicatorHeight);
setElementPosition(selectionIndicator, 0, Math.floor((unscaledHeight - selectionIndicatorHeight) / 2));
+
+ setElementSize(shadow, unscaledWidth - borderThickness * 2, unscaledHeight);
+ setElementPosition(shadow, borderThickness, 0);
}
/**
http://git-wip-us.apache.org/repos/asf/flex-sdk/blob/ebe4b4f9/frameworks/projects/mobiletheme/src/spark/skins/ios7/assets/SpinnerListContainerSelectionIndicator.fxg
----------------------------------------------------------------------
diff --git a/frameworks/projects/mobiletheme/src/spark/skins/ios7/assets/SpinnerListContainerSelectionIndicator.fxg b/frameworks/projects/mobiletheme/src/spark/skins/ios7/assets/SpinnerListContainerSelectionIndicator.fxg
index 067afb1..5582812 100644
--- a/frameworks/projects/mobiletheme/src/spark/skins/ios7/assets/SpinnerListContainerSelectionIndicator.fxg
+++ b/frameworks/projects/mobiletheme/src/spark/skins/ios7/assets/SpinnerListContainerSelectionIndicator.fxg
@@ -21,8 +21,8 @@
-->
-<Graphic version="2.0" xmlns="http://ns.adobe.com/fxg/2008" viewHeight="48" viewWidth="100"
- scaleGridLeft="3" scaleGridTop="5.5" scaleGridRight="97" scaleGridBottom="41">
+<Graphic version="2.0" xmlns="http://ns.adobe.com/fxg/2008" viewHeight="24" viewWidth="100"
+ scaleGridLeft="3" scaleGridTop="5.5" scaleGridRight="97" scaleGridBottom="18.5">
<!-- Transparent rect used to center the bar -->
<Rect x="0" y="0" width="100" height="4">
<fill>
@@ -30,15 +30,15 @@
</fill>
</Rect>
<!-- Top highlight -->
- <Rect x="5" y="5" width="95" height="1.5">
+ <Rect x="0" y="5" width="100" height="1">
<fill>
- <SolidColor color="#33afdd"/>
+ <SolidColor color="#999999"/>
</fill>
</Rect>
<!-- Bottom highlight -->
- <Rect x="5" y="40" width="95" height="1.5">
+ <Rect x="0" y="19" width="100" height="1">
<fill>
- <SolidColor color="#33afdd"/>
+ <SolidColor color="#999999"/>
</fill>
</Rect>
</Graphic>