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/24 22:13:18 UTC
[28/44] git commit: [flex-sdk] [refs/heads/develop] - iOS7+ skins for
Callout, CalloutButton with support for ViewNavigator and ActionBar
iOS7+ skins for Callout, CalloutButton with support for ViewNavigator and ActionBar
Project: http://git-wip-us.apache.org/repos/asf/flex-sdk/repo
Commit: http://git-wip-us.apache.org/repos/asf/flex-sdk/commit/58b0548a
Tree: http://git-wip-us.apache.org/repos/asf/flex-sdk/tree/58b0548a
Diff: http://git-wip-us.apache.org/repos/asf/flex-sdk/diff/58b0548a
Branch: refs/heads/develop
Commit: 58b0548aecc32ec49f7e569e2d3e0ae23fffcfe6
Parents: 807e901
Author: OmPrakash Muppirala <bi...@gmail.com>
Authored: Sun Nov 2 03:50:41 2014 -0800
Committer: OmPrakash Muppirala <bi...@gmail.com>
Committed: Sun Nov 2 03:50:41 2014 -0800
----------------------------------------------------------------------
frameworks/projects/mobiletheme/defaults.css | 42 ++++++--
.../mobiletheme/src/MobileThemeClasses.as | 1 +
.../spark/skins/ios7/CalloutActionBarSkin.as | 102 +++++++++++++++++++
.../src/spark/skins/ios7/CalloutSkin.as | 67 ++----------
.../skins/ios7/assets/ActionBarBackground.fxg | 2 +-
5 files changed, 147 insertions(+), 67 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/flex-sdk/blob/58b0548a/frameworks/projects/mobiletheme/defaults.css
----------------------------------------------------------------------
diff --git a/frameworks/projects/mobiletheme/defaults.css b/frameworks/projects/mobiletheme/defaults.css
index 1c59a72..b0c9a5d 100644
--- a/frameworks/projects/mobiletheme/defaults.css
+++ b/frameworks/projects/mobiletheme/defaults.css
@@ -137,6 +137,11 @@ Callout
borderColor: 0;
}
+CalloutButton
+{
+ rollOverOpenDelay: NaN;
+}
+
Callout ViewNavigator
{
skinClass: ClassReference("spark.skins.mobile.CalloutViewNavigatorSkin");
@@ -1002,20 +1007,26 @@ global
Callout
{
- backgroundColor: #33B5E5;
- contentBackgroundColor: #FFFFFF;
- gap: 12;
skinClass: ClassReference("spark.skins.ios7.CalloutSkin");
+ backgroundColor: #F6F6F6;
+ contentBackgroundColor: #F6F6F6;
+ gap: 12;
borderThickness: 0;
- borderColor: 0;
+ frameThickness: 0;
+ contentBackgroundAppearance: flat;
}
Callout ViewNavigator ActionBar
{
- skinClass: ClassReference("spark.skins.mobile.CalloutActionBarSkin");
- defaultButtonAppearance: none;
+ skinClass: ClassReference("spark.skins.ios7.CalloutActionBarSkin");
+ defaultButtonAppearance: normal;
+ textShadowAlpha: 0;
+ textShadowColor: #000000;
+ paddingBottom: 0;
paddingLeft: 0;
paddingRight: 0;
+ paddingTop: 0;
+ contentBackgroundAppearance: flat;
}
Callout ViewNavigator ActionBar.beveled
@@ -1026,19 +1037,29 @@ global
Callout ViewNavigator ActionBar.beveled Group#navigationGroup Button
{
- skinClass: ClassReference("spark.skins.mobile.BeveledActionButtonSkin");
+ skinClass: ClassReference("spark.skins.ios7.ButtonSkin");
}
Callout ViewNavigator ActionBar.beveled Group#navigationGroup Button.emphasized
{
- skinClass: ClassReference("spark.skins.mobile.DefaultBeveledActionButtonSkin");
+ skinClass: ClassReference("spark.skins.ios7.ButtonSkin");
}
- Callout#viewNavigatorPopUp
+ Callout ViewNavigator ActionBar Group#navigationGroup Button
{
- contentBackgroundAppearance: none;
+ skinClass: ClassReference("spark.skins.ios7.ButtonSkin");
+ }
+
+ Callout ViewNavigator ActionBar Group#navigationGroup Button.emphasized
+ {
+ skinClass: ClassReference("spark.skins.ios7.ButtonSkin");
}
+ Callout#viewNavigatorPopUp
+ {
+ contentBackgroundAppearance: flat;
+ }
+
CheckBox
{
chromeColor: #FFFFFF;
@@ -1463,6 +1484,7 @@ application-dpi=240.
skinClass: ClassReference("spark.skins.android4.CalloutSkin");
borderThickness: 0;
borderColor: 0;
+ contentBackgroundAppearance: flat;
}
Callout ViewNavigator ActionBar
http://git-wip-us.apache.org/repos/asf/flex-sdk/blob/58b0548a/frameworks/projects/mobiletheme/src/MobileThemeClasses.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/mobiletheme/src/MobileThemeClasses.as b/frameworks/projects/mobiletheme/src/MobileThemeClasses.as
index 82b64f9..9b73636 100644
--- a/frameworks/projects/mobiletheme/src/MobileThemeClasses.as
+++ b/frameworks/projects/mobiletheme/src/MobileThemeClasses.as
@@ -115,6 +115,7 @@ package
import spark.skins.ios7.ButtonBarSkin; spark.skins.ios7.ButtonBarSkin;
import spark.skins.ios7.ButtonSkin; spark.skins.ios7.ButtonSkin;
import spark.skins.ios7.CalloutSkin; spark.skins.ios7.CalloutSkin;
+ import spark.skins.ios7.CalloutActionBarSkin; spark.skins.ios7.CalloutActionBarSkin;
import spark.skins.ios7.CheckBoxSkin; spark.skins.ios7.CheckBoxSkin;
import spark.skins.ios7.HScrollBarSkin; spark.skins.ios7.HScrollBarSkin;
import spark.skins.ios7.HScrollBarThumbSkin; spark.skins.ios7.HScrollBarThumbSkin;
http://git-wip-us.apache.org/repos/asf/flex-sdk/blob/58b0548a/frameworks/projects/mobiletheme/src/spark/skins/ios7/CalloutActionBarSkin.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/mobiletheme/src/spark/skins/ios7/CalloutActionBarSkin.as b/frameworks/projects/mobiletheme/src/spark/skins/ios7/CalloutActionBarSkin.as
new file mode 100644
index 0000000..8f22ff6
--- /dev/null
+++ b/frameworks/projects/mobiletheme/src/spark/skins/ios7/CalloutActionBarSkin.as
@@ -0,0 +1,102 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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 spark.skins.ios7
+{
+import mx.core.DPIClassification;
+
+/**
+ * Additional skin class for the Spark ActionBar component for use with a
+ * ViewNavigator inside a Callout component.
+ *
+ * Uses a transparent background instead of a gradient fill.
+ *
+ * @see spark.skins.mobile.ActionBarSkin
+ *
+ * @langversion 3.0
+ * @playerversion AIR 3
+ * @productversion Flex 4.6
+ */
+public class CalloutActionBarSkin extends ActionBarSkin
+{
+ //--------------------------------------------------------------------------
+ //
+ // Constructor
+ //
+ //--------------------------------------------------------------------------
+
+ public function CalloutActionBarSkin()
+ {
+ super();
+
+ // remove default background
+ //borderClass = null;
+
+ // shorten ActionBar height visual paddingTop comes from CalloutSkin
+ switch (applicationDPI)
+ {
+ case DPIClassification.DPI_640:
+ {
+ layoutContentGroupHeight = 108;
+ break;
+ }
+ case DPIClassification.DPI_480:
+ {
+ layoutContentGroupHeight = 84;
+ break;
+ }
+ case DPIClassification.DPI_320:
+ {
+ layoutContentGroupHeight = 54;
+ break;
+ }
+ case DPIClassification.DPI_240:
+ {
+ layoutContentGroupHeight = 42;
+ break;
+ }
+ case DPIClassification.DPI_120:
+ {
+ layoutContentGroupHeight = 21;
+ break;
+ }
+ default:
+ {
+ // default DPI_160
+ layoutContentGroupHeight = 28;
+ break;
+ }
+ }
+ }
+
+ //--------------------------------------------------------------------------
+ //
+ // Overridden methods
+ //
+ //--------------------------------------------------------------------------
+
+ /**
+ * @private
+ */
+ override protected function drawBackground(unscaledWidth:Number, unscaledHeight:Number):void
+ {
+ // do not draw chromeColor
+ }
+}
+}
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/flex-sdk/blob/58b0548a/frameworks/projects/mobiletheme/src/spark/skins/ios7/CalloutSkin.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/mobiletheme/src/spark/skins/ios7/CalloutSkin.as b/frameworks/projects/mobiletheme/src/spark/skins/ios7/CalloutSkin.as
index a824749..ea6d98a 100644
--- a/frameworks/projects/mobiletheme/src/spark/skins/ios7/CalloutSkin.as
+++ b/frameworks/projects/mobiletheme/src/spark/skins/ios7/CalloutSkin.as
@@ -89,17 +89,17 @@ public class CalloutSkin extends MobileSkin
{
super();
- dropShadowAlpha = 0.7;
- contentBackgroundInsetClass = spark.skins.ios7.assets.CalloutContentBackground;
+ dropShadowAlpha = 0;
+ contentBackgroundInsetClass = null;
+ frameThickness = 0;
+ backgroundCornerRadius = 0;
+ backgroundGradientHeight = 0;
switch (applicationDPI)
{
case DPIClassification.DPI_640:
{
- backgroundCornerRadius = 24;
- backgroundGradientHeight = 440;
- frameThickness = 12;
arrowWidth = 160;
arrowHeight = 80;
contentCornerRadius = 40;
@@ -112,12 +112,9 @@ public class CalloutSkin extends MobileSkin
}
case DPIClassification.DPI_480:
{
- backgroundCornerRadius = 16;
- backgroundGradientHeight = 330;
- frameThickness = 8;
arrowWidth = 120;
arrowHeight = 60;
- contentCornerRadius = 28;
+ contentCornerRadius = 30;
dropShadowBlurX = 48;
dropShadowBlurY = 48;
dropShadowDistance = 8;
@@ -128,9 +125,6 @@ public class CalloutSkin extends MobileSkin
case DPIClassification.DPI_320:
{
- backgroundCornerRadius = 12;
- backgroundGradientHeight = 220;
- frameThickness = 6;
arrowWidth = 80;
arrowHeight = 40;
contentCornerRadius = 20;
@@ -143,12 +137,9 @@ public class CalloutSkin extends MobileSkin
}
case DPIClassification.DPI_240:
{
- backgroundCornerRadius = 8;
- backgroundGradientHeight = 165;
- frameThickness = 4;
arrowWidth = 60;
arrowHeight = 30;
- contentCornerRadius = 14;
+ contentCornerRadius = 15;
dropShadowBlurX = 24;
dropShadowBlurY = 24;
dropShadowDistance = 4;
@@ -158,12 +149,9 @@ public class CalloutSkin extends MobileSkin
}
case DPIClassification.DPI_120:
{
- backgroundCornerRadius = 4;
- backgroundGradientHeight = 83;
- frameThickness = 2;
arrowWidth = 30;
arrowHeight = 15;
- contentCornerRadius = 7;
+ contentCornerRadius = 7.5;
dropShadowBlurX = 12;
dropShadowBlurY = 12;
dropShadowDistance = 2;
@@ -174,9 +162,6 @@ public class CalloutSkin extends MobileSkin
default:
{
// default DPI_160
- backgroundCornerRadius = 6;
- backgroundGradientHeight = 110;
- frameThickness = 3;
arrowWidth = 40;
arrowHeight = 20;
contentCornerRadius = 10;
@@ -208,7 +193,7 @@ public class CalloutSkin extends MobileSkin
* @playerversion AIR 3
* @productversion Flex 4.6
*/
- protected var dropShadowVisible:Boolean = true;
+ protected var dropShadowVisible:Boolean = false;
/**
* Enables a vertical linear gradient in the <code>backgroundColor</code> frame. This
@@ -591,42 +576,12 @@ public class CalloutSkin extends MobileSkin
var frameWidth:Number = contentGroup.getLayoutBoundsWidth() + (frameThickness * 2) + borderWeight;
var frameHeight:Number = contentGroup.getLayoutBoundsHeight() + (frameThickness * 2) + borderWeight;
- var backgroundColor:Number = getStyle("primaryAccentColor");
+ var backgroundColor:Number = getStyle("contentBackgroundColor");
var backgroundAlpha:Number = getStyle("backgroundAlpha");
var bgFill:Graphics = backgroundFill.graphics;
bgFill.clear();
-
- if (showBorder)
- bgFill.lineStyle(borderWeight, actualBorderColor, 1, true);
-
- if (useBackgroundGradient)
- {
- // top color is brighter if arrowDirection == ArrowDirection.UP
- var backgroundColorTop:Number = ColorUtil.adjustBrightness2(backgroundColor,
- BACKGROUND_GRADIENT_BRIGHTNESS_TOP);
- var backgroundColorBottom:Number = ColorUtil.adjustBrightness2(backgroundColor,
- BACKGROUND_GRADIENT_BRIGHTNESS_BOTTOM);
-
- // max gradient height = backgroundGradientHeight
- colorMatrix.createGradientBox(unscaledWidth, backgroundGradientHeight,
- Math.PI / 2, 0, 0);
-
- bgFill.beginGradientFill(GradientType.LINEAR,
- [backgroundColorTop, backgroundColorBottom],
- [backgroundAlpha, backgroundAlpha],
- [0, 255],
- colorMatrix);
- }
- else
- {
- bgFill.beginFill(backgroundColor, backgroundAlpha);
- }
-
- bgFill.drawRoundRect(frameX, frameY, frameWidth,
- frameHeight, frameEllipseSize, frameEllipseSize);
- bgFill.endFill();
-
+
// draw content background styles
var contentBackgroundAppearance:String = getStyle("contentBackgroundAppearance");
http://git-wip-us.apache.org/repos/asf/flex-sdk/blob/58b0548a/frameworks/projects/mobiletheme/src/spark/skins/ios7/assets/ActionBarBackground.fxg
----------------------------------------------------------------------
diff --git a/frameworks/projects/mobiletheme/src/spark/skins/ios7/assets/ActionBarBackground.fxg b/frameworks/projects/mobiletheme/src/spark/skins/ios7/assets/ActionBarBackground.fxg
index 8435053..0322648 100644
--- a/frameworks/projects/mobiletheme/src/spark/skins/ios7/assets/ActionBarBackground.fxg
+++ b/frameworks/projects/mobiletheme/src/spark/skins/ios7/assets/ActionBarBackground.fxg
@@ -53,7 +53,7 @@
</mask>
<Path winding="nonZero" data="M640 1 0 1 0 0 640 0 640 1Z">
<fill>
- <SolidColor/>
+ <SolidColor color="#B2B2B2"/>
</fill>
</Path>
</Group>