Tweak Callout skin. No dropshadows allowed!
Project: http://git-wip-us.apache.org/repos/asf/flex-sdk/repo Commit: http://git-wip-us.apache.org/repos/asf/flex-sdk/commit/965d6d19 Tree: http://git-wip-us.apache.org/repos/asf/flex-sdk/tree/965d6d19 Diff: http://git-wip-us.apache.org/repos/asf/flex-sdk/diff/965d6d19 Branch: refs/heads/iso7skins Commit: 965d6d19474f562b83a17dc98be51d9026fd266a Parents: 85a9128 Author: OmPrakash Muppirala <bigosma...@gmail.com> Authored: Fri Nov 21 14:58:32 2014 -0800 Committer: OmPrakash Muppirala <bigosma...@gmail.com> Committed: Fri Nov 21 14:58:32 2014 -0800 ---------------------------------------------------------------------- frameworks/projects/mobiletheme/defaults.css | 6 + .../mobiletheme/src/MobileThemeClasses.as | 1 + .../src/spark/skins/ios7/CalloutSkin.as | 1 - .../skins/ios7/CalloutViewNavigatorSkin.as | 236 +++++++++++++++++++ 4 files changed, 243 insertions(+), 1 deletion(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/flex-sdk/blob/965d6d19/frameworks/projects/mobiletheme/defaults.css ---------------------------------------------------------------------- diff --git a/frameworks/projects/mobiletheme/defaults.css b/frameworks/projects/mobiletheme/defaults.css index 209ceda..c4bed86 100644 --- a/frameworks/projects/mobiletheme/defaults.css +++ b/frameworks/projects/mobiletheme/defaults.css @@ -1023,6 +1023,12 @@ global contentBackgroundAppearance: flat; } + Callout ViewNavigator + { + skinClass: ClassReference("spark.skins.ios7.CalloutViewNavigatorSkin"); + contentBackgroundColor: #FFFFFF; + } + Callout ViewNavigator ActionBar { skinClass: ClassReference("spark.skins.ios7.CalloutActionBarSkin"); http://git-wip-us.apache.org/repos/asf/flex-sdk/blob/965d6d19/frameworks/projects/mobiletheme/src/MobileThemeClasses.as ---------------------------------------------------------------------- diff --git a/frameworks/projects/mobiletheme/src/MobileThemeClasses.as b/frameworks/projects/mobiletheme/src/MobileThemeClasses.as index 9b73636..32c2239 100644 --- a/frameworks/projects/mobiletheme/src/MobileThemeClasses.as +++ b/frameworks/projects/mobiletheme/src/MobileThemeClasses.as @@ -116,6 +116,7 @@ package 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.CalloutViewNavigatorSkin; spark.skins.ios7.CalloutViewNavigatorSkin; 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/965d6d19/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 ea6d98a..b578406 100644 --- a/frameworks/projects/mobiletheme/src/spark/skins/ios7/CalloutSkin.as +++ b/frameworks/projects/mobiletheme/src/spark/skins/ios7/CalloutSkin.as @@ -39,7 +39,6 @@ import spark.components.Group; import spark.core.SpriteVisualElement; import spark.effects.Fade; import spark.primitives.RectangularDropShadow; -import spark.skins.ios7.assets.CalloutContentBackground; import spark.skins.ios7.supportClasses.CalloutArrow; import spark.skins.mobile.supportClasses.MobileSkin; http://git-wip-us.apache.org/repos/asf/flex-sdk/blob/965d6d19/frameworks/projects/mobiletheme/src/spark/skins/ios7/CalloutViewNavigatorSkin.as ---------------------------------------------------------------------- diff --git a/frameworks/projects/mobiletheme/src/spark/skins/ios7/CalloutViewNavigatorSkin.as b/frameworks/projects/mobiletheme/src/spark/skins/ios7/CalloutViewNavigatorSkin.as new file mode 100644 index 0000000..a8b972d --- /dev/null +++ b/frameworks/projects/mobiletheme/src/spark/skins/ios7/CalloutViewNavigatorSkin.as @@ -0,0 +1,236 @@ +//////////////////////////////////////////////////////////////////////////////// +// +// 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 flash.display.Graphics; + +import mx.core.DPIClassification; +import mx.core.mx_internal; + +import spark.core.SpriteVisualElement; +import spark.skins.mobile.ViewNavigatorSkin; + +use namespace mx_internal; + +/** + * The ActionScript-based skin for view navigators inside a callout. + * This skin lays out the action bar and content + * group in a vertical fashion, where the action bar is on top. + * Unlike the default skin, overlay modes are not supported. + * + * @langversion 3.0 + * @playerversion AIR 3 + * @productversion Flex 4.6 + */ +public class CalloutViewNavigatorSkin extends ViewNavigatorSkin +{ + //-------------------------------------------------------------------------- + // + // Constructor + // + //-------------------------------------------------------------------------- + + /** + * Constructor. + * + * @langversion 3.0 + * @playerversion AIR 3 + * @productversion Flex 4.6 + */ + public function CalloutViewNavigatorSkin() + { + super(); + + switch (applicationDPI) + { + case DPIClassification.DPI_640: + { + contentCornerRadius = 28; + gap = 48; + break; + } + case DPIClassification.DPI_480: + { + contentCornerRadius = 14; + gap = 24; + break; + } + case DPIClassification.DPI_320: + { + contentCornerRadius = 10; + gap = 16; + break; + } + case DPIClassification.DPI_240: + { + contentCornerRadius = 7; + gap = 12; + break; + } + case DPIClassification.DPI_240: + { + contentCornerRadius = 4; + gap = 6; + break; + } + default: + { + // default DPI_160 + contentCornerRadius = 5; + gap = 8; + break; + } + } + } + + //-------------------------------------------------------------------------- + // + // Layout variables + // + //-------------------------------------------------------------------------- + + mx_internal var gap:Number; + + //-------------------------------------------------------------------------- + // + // Variables + // + //-------------------------------------------------------------------------- + + mx_internal var contentCornerRadius:Number; + + private var contentMask:SpriteVisualElement; + + //-------------------------------------------------------------------------- + // + // Overridden methods + // + //-------------------------------------------------------------------------- + + /** + * @private + */ + override protected function createChildren():void + { + super.createChildren(); + + // mask the ViewNavigator contentGroup + contentMask = new SpriteVisualElement(); + contentGroup.mask = contentMask; + + } + + /** + * @private + */ + override protected function measure():void + { + super.measure(); + + measuredWidth = Math.max(actionBar.getPreferredBoundsWidth(), + contentGroup.getPreferredBoundsWidth()); + measuredHeight = actionBar.getPreferredBoundsHeight() + + contentGroup.getPreferredBoundsHeight() + + gap; + } + + /** + * @private + */ + override protected function commitCurrentState():void + { + super.commitCurrentState(); + + // Force a layout pass on the components + invalidateProperties(); + invalidateSize(); + invalidateDisplayList(); + } + + /** + * @private + */ + override protected function layoutContents(unscaledWidth:Number, unscaledHeight:Number):void + { + // omit super call + + var actionBarHeight:Number = 0; + + // The action bar is always placed at 0,0 and stretches the entire + // width of the navigator + if (actionBar.includeInLayout) + { + actionBarHeight = Math.min(actionBar.getPreferredBoundsHeight(), unscaledHeight); + setElementSize(actionBar, unscaledWidth, actionBarHeight); + setElementPosition(actionBar, 0, 0); + actionBarHeight = actionBar.getLayoutBoundsHeight(); + } + + // If the hostComponent is in overlay mode, the contentGroup extends + // the entire bounds of the navigator and the alpha for the action + // bar changes + // If this changes, also update validateEstimatedSizesOfChild + var contentGroupHeight:Number = 0; + + if (contentGroup.includeInLayout) + { + contentGroupHeight = Math.max(unscaledHeight - actionBarHeight - gap, 0); + + setElementSize(contentGroup, unscaledWidth, contentGroupHeight); + setElementPosition(contentGroup, 0, actionBarHeight + gap); + + } + + setElementSize(contentMask, unscaledWidth, contentGroupHeight); + } + + /** + * @private + */ + override protected function drawBackground(unscaledWidth:Number, unscaledHeight:Number):void + { + super.drawBackground(unscaledWidth, unscaledHeight); + + // draw the contentBackgroundColor + // the shading and highlight are drawn in FXG + var contentEllipseSize:Number = contentCornerRadius * 2; + var contentBackgroundAlpha:Number = getStyle("contentBackgroundAlpha"); + var contentWidth:Number = contentGroup.getLayoutBoundsWidth(); + var contentHeight:Number = contentGroup.getLayoutBoundsHeight(); + + graphics.beginFill(getStyle("contentBackgroundColor"), + contentBackgroundAlpha); + graphics.endFill(); + + if (contentMask) + { + // content mask in contentGroup coordinate space + var maskGraphics:Graphics = contentMask.graphics; + maskGraphics.clear(); + maskGraphics.beginFill(0, 1); + maskGraphics.drawRoundRect(0, 0, contentWidth, contentHeight, + contentEllipseSize, contentEllipseSize); + maskGraphics.endFill(); + } + + } +} +} \ No newline at end of file
