You are viewing a plain text version of this content. The canonical link for it is here.
Posted to dev@flex.apache.org by OmPrakash Muppirala <bi...@gmail.com> on 2014/11/19 02:34:47 UTC
Re: [1/3] git commit: [flex-sdk] [refs/heads/iso7skins] - iOS7+ skins
for StateTextArea, StageTextInput, TextArea and TextInput.
I forgot to mention in my commit comment that the Text related skins were
donated by Aaron Nash (quick6black)
Thanks,
Om
On Tue, Nov 18, 2014 at 5:31 PM, <bi...@apache.org> wrote:
> Repository: flex-sdk
> Updated Branches:
> refs/heads/iso7skins ebe4b4f98 -> 404f5b57a
>
>
> iOS7+ skins for StateTextArea, StageTextInput, TextArea and TextInput.
>
>
> Project: http://git-wip-us.apache.org/repos/asf/flex-sdk/repo
> Commit: http://git-wip-us.apache.org/repos/asf/flex-sdk/commit/ef507a46
> Tree: http://git-wip-us.apache.org/repos/asf/flex-sdk/tree/ef507a46
> Diff: http://git-wip-us.apache.org/repos/asf/flex-sdk/diff/ef507a46
>
> Branch: refs/heads/iso7skins
> Commit: ef507a4631d1a80413d6618353c9c15cec62491a
> Parents: ebe4b4f
> Author: OmPrakash Muppirala <bi...@gmail.com>
> Authored: Tue Nov 18 17:21:03 2014 -0800
> Committer: OmPrakash Muppirala <bi...@gmail.com>
> Committed: Tue Nov 18 17:21:03 2014 -0800
>
> ----------------------------------------------------------------------
> frameworks/projects/mobiletheme/defaults.css | 19 +++---
> .../src/spark/skins/ios7/StageTextInputSkin.as | 1 -
> .../src/spark/skins/ios7/TextAreaSkin.as | 61 ++++++++++----------
> .../src/spark/skins/ios7/TextInputSkin.as | 61 ++++++++++----------
> .../ios7/supportClasses/StageTextSkinBase.as | 60 ++++++++++---------
> 5 files changed, 99 insertions(+), 103 deletions(-)
> ----------------------------------------------------------------------
>
>
>
> http://git-wip-us.apache.org/repos/asf/flex-sdk/blob/ef507a46/frameworks/projects/mobiletheme/defaults.css
> ----------------------------------------------------------------------
> diff --git a/frameworks/projects/mobiletheme/defaults.css
> b/frameworks/projects/mobiletheme/defaults.css
> index aceaa51..c5f34de 100644
> --- a/frameworks/projects/mobiletheme/defaults.css
> +++ b/frameworks/projects/mobiletheme/defaults.css
> @@ -1093,7 +1093,6 @@ global
> SpinnerList
> {
> skinClass:
> ClassReference("spark.skins.ios7.SpinnerListSkin");
> - fontSize: 10;
> color: #999999;
> accentColor: #333333;
> }
> @@ -1127,29 +1126,33 @@ global
> }
>
> TextInput
> - {
> + {
> skinClass:
> ClassReference("spark.skins.ios7.StageTextInputSkin");
> - contentBackgroundAlpha: 0;
> - focusColor: #33B5E5;
> + contentBackgroundAlpha: 0;
> + focusColor: #cccccc;
> + borderColor: #cccccc;
> contentBackgroundColor: #DEDEDD;
> - contentBackgroundBorder: "flat";
> + contentBackgroundBorder: "roundedrect";
> fontFamily: RobotoRegular;
> + fontWeight: normal;
> selectionHighlighting: "never";
> focusEnabled:"false";
> focusThickness: 0;
> + focusAlpha: 0;
> }
>
> TextArea
> - {
> + {
> skinClass:
> ClassReference("spark.skins.ios7.StageTextAreaSkin");
> contentBackgroundAlpha: 1;
> contentBackgroundBorder: "rectangle";
> contentBackgroundColor: #DEDEDD;
> - focusColor: #33B5E5;
> - fontFamily: RobotoRegular;
> + focusColor: #cccccc;
> + borderColor: #cccccc;
> selectionHighlighting: "never";
> focusEnabled:"false";
> focusThickness: 0;
> + focusAlpha: 0;
> }
>
> ToggleSwitch
>
>
> http://git-wip-us.apache.org/repos/asf/flex-sdk/blob/ef507a46/frameworks/projects/mobiletheme/src/spark/skins/ios7/StageTextInputSkin.as
> ----------------------------------------------------------------------
> diff --git
> a/frameworks/projects/mobiletheme/src/spark/skins/ios7/StageTextInputSkin.as
> b/frameworks/projects/mobiletheme/src/spark/skins/ios7/StageTextInputSkin.as
> index 388a599..6d6c811 100644
> ---
> a/frameworks/projects/mobiletheme/src/spark/skins/ios7/StageTextInputSkin.as
> +++
> b/frameworks/projects/mobiletheme/src/spark/skins/ios7/StageTextInputSkin.as
> @@ -129,6 +129,5 @@ package spark.skins.ios7
> {
> return new ScrollableStageText(multiline);
> }
> -
> }
> }
> \ No newline at end of file
>
>
> http://git-wip-us.apache.org/repos/asf/flex-sdk/blob/ef507a46/frameworks/projects/mobiletheme/src/spark/skins/ios7/TextAreaSkin.as
> ----------------------------------------------------------------------
> diff --git
> a/frameworks/projects/mobiletheme/src/spark/skins/ios7/TextAreaSkin.as
> b/frameworks/projects/mobiletheme/src/spark/skins/ios7/TextAreaSkin.as
> index 7f87388..5133ae8 100644
> --- a/frameworks/projects/mobiletheme/src/spark/skins/ios7/TextAreaSkin.as
> +++ b/frameworks/projects/mobiletheme/src/spark/skins/ios7/TextAreaSkin.as
> @@ -106,48 +106,48 @@ public class TextAreaSkin extends TextSkinBase
> {
> measuredDefaultWidth = 1024;
> measuredDefaultHeight = 212;
> - layoutBorderSize = 4;
> - flatheight = 9;
> + layoutBorderSize = 3;
> + roundheight = 24;
> break;
> }
> case DPIClassification.DPI_480:
> {
> measuredDefaultWidth = 880;
> measuredDefaultHeight = 140;
> - layoutBorderSize = 3;
> - flatheight = 7;
> + layoutBorderSize = 2;
> + roundheight = 18;
> break;
> }
> case DPIClassification.DPI_320:
> {
> measuredDefaultWidth = 612;
> measuredDefaultHeight = 106;
> - layoutBorderSize = 2;
> - flatheight = 6;
> + layoutBorderSize = 1.5;
> + roundheight = 14;
> break;
> }
> case DPIClassification.DPI_240:
> {
> measuredDefaultWidth = 440;
> measuredDefaultHeight = 70;
> - layoutBorderSize = 2;
> - flatheight = 5;
> + layoutBorderSize = 1;
> + roundheight = 10;
> break;
> }
> case DPIClassification.DPI_120:
> {
> measuredDefaultWidth = 220;
> measuredDefaultHeight = 35;
> - layoutBorderSize = 1;
> - flatheight = 2;
> + layoutBorderSize = .5;
> + roundheight = 5;
> break;
> }
> default:
> {
> measuredDefaultWidth = 306;
> measuredDefaultHeight = 53;
> - layoutBorderSize = 1;
> - flatheight = 3;
> + layoutBorderSize = .5;
> + roundheight = 7;
> break;
> }
> }
> @@ -190,7 +190,7 @@ public class TextAreaSkin extends TextSkinBase
>
> protected var isFocused:Boolean = false;
>
> - protected var flatheight:uint;
> + protected var roundheight:uint;
>
> /**
> * @private
> @@ -622,37 +622,35 @@ public class TextAreaSkin extends TextSkinBase
> var contentBackgroundAlpha:Number =
> getStyle("contentBackgroundAlpha");
> //change border color and thickness when in focus
> var borderColor:uint = isFocused ? getStyle("focusColor")
> : getStyle("borderColor");
> - var selectWidth:uint = isFocused ? layoutBorderSize + 1 :
> layoutBorderSize;
> + var borderWidth:uint = layoutBorderSize * 2;
> if (isNaN(contentBackgroundAlpha))
> {
> contentBackgroundAlpha = 1;
> }
> - if (getStyle("contentBackgroundBorder") == "flat")
> + if (getStyle("contentBackgroundBorder") == "roundedrect")
> {
> - var halfGap:int = flatheight * 2;
> - //background
> + graphics.lineStyle(layoutBorderSize, borderColor,
> 1, true);
> graphics.beginFill(contentBackgroundColor,
> contentBackgroundAlpha);
> - graphics.drawRect(0, 0, unscaledWidth,
> unscaledHeight - flatheight);
> - graphics.endFill();
> - //begin flat border
> - graphics.beginFill(borderColor, 1);
> - //left half border
> - graphics.drawRect(0, unscaledHeight - halfGap,
> selectWidth, flatheight );
> - //bottom border
> - graphics.drawRect(0, unscaledHeight - flatheight,
> unscaledWidth, selectWidth);
> - //right border
> - graphics.drawRect(unscaledWidth - selectWidth,
> unscaledHeight - halfGap, selectWidth, flatheight);
> + graphics.drawRoundRectComplex(layoutBorderSize,
> layoutBorderSize, unscaledWidth - borderWidth, unscaledHeight -
> borderWidth, roundheight, roundheight, roundheight, roundheight);
> graphics.endFill();
> }
> - else if (getStyle("contentBackgroundBorder") ==
> "rectangle")
> + if (getStyle("contentBackgroundBorder") == "rectangle")
> {
> - var borderWidth:uint = layoutBorderSize * 2;
> +
> //rectangle border and background
> - graphics.lineStyle(selectWidth, borderColor, 1);
> + graphics.lineStyle(layoutBorderSize, borderColor,
> 1);
> graphics.beginFill(contentBackgroundColor,
> contentBackgroundAlpha);
> graphics.drawRect(layoutBorderSize,
> layoutBorderSize, unscaledWidth - borderWidth, unscaledHeight -
> borderWidth);
> graphics.endFill();
> }
> + else if (getStyle("contentBackgroundBorder") == "none")
> + {
> +
> + //rectangle border and background
> + graphics.beginFill(contentBackgroundColor,
> contentBackgroundAlpha);
> + graphics.drawRect(0, 0, unscaledWidth -
> borderWidth, unscaledHeight - borderWidth);
> + graphics.endFill();
> + }
> }
>
> /**
> @@ -663,8 +661,7 @@ public class TextAreaSkin extends TextSkinBase
> {
> var maxHsp:Number = textDisplayGroup.contentWidth >
> textDisplayGroup.width ?
> textDisplayGroup.contentWidth-textDisplayGroup.width : 0;
> - textDisplayGroup.horizontalScrollPosition =
> -
> Math.min(Math.max(0,textDisplayGroup.horizontalScrollPosition),maxHsp);
> + textDisplayGroup.horizontalScrollPosition =
> Math.min(Math.max(0,textDisplayGroup.horizontalScrollPosition),maxHsp);
>
> var maxVsp:Number = textDisplayGroup.contentHeight >
> textDisplayGroup.height ?
> textDisplayGroup.contentHeight-textDisplayGroup.height : 0;
>
>
> http://git-wip-us.apache.org/repos/asf/flex-sdk/blob/ef507a46/frameworks/projects/mobiletheme/src/spark/skins/ios7/TextInputSkin.as
> ----------------------------------------------------------------------
> diff --git
> a/frameworks/projects/mobiletheme/src/spark/skins/ios7/TextInputSkin.as
> b/frameworks/projects/mobiletheme/src/spark/skins/ios7/TextInputSkin.as
> index 3533aa1..f2b243e 100644
> --- a/frameworks/projects/mobiletheme/src/spark/skins/ios7/TextInputSkin.as
> +++ b/frameworks/projects/mobiletheme/src/spark/skins/ios7/TextInputSkin.as
> @@ -22,6 +22,7 @@ package spark.skins.ios7
> import flash.events.Event;
> import flash.events.FocusEvent;
> import flash.events.SoftKeyboardEvent;
> + import flash.system.Capabilities;
>
> import mx.core.DPIClassification;
> import mx.core.EventPriority;
> @@ -45,7 +46,7 @@ package spark.skins.ios7
> * @playerversion AIR 2.5
> * @productversion Flex 4.5
> */
> - public class TextInputSkin extends TextSkinBase
> + public class TextInputSkin extends TextSkinBase
> {
>
> //--------------------------------------------------------------------------
> //
> @@ -74,8 +75,8 @@ package spark.skins.ios7
> {
> measuredDefaultWidth = 1200;
> measuredDefaultHeight = 132;
> - layoutBorderSize = 4;
> - flatheight = 9;
> + layoutBorderSize = 3;
> + roundheight = 24;
> break;
> }
> case DPIClassification.DPI_480:
> @@ -83,40 +84,40 @@ package spark.skins.ios7
>
> measuredDefaultWidth = 880;
> measuredDefaultHeight = 100;
> - layoutBorderSize = 3;
> - flatheight = 7;
> + layoutBorderSize = 2;
> + roundheight = 18;
> break;
> }
> case DPIClassification.DPI_320:
> {
> measuredDefaultWidth = 600;
> measuredDefaultHeight = 66;
> - layoutBorderSize = 2;
> - flatheight = 6;
> + layoutBorderSize = 1.5;
> + roundheight = 14;
> break;
> }
> case DPIClassification.DPI_240:
> {
> measuredDefaultWidth = 440;
> measuredDefaultHeight = 50;
> - layoutBorderSize = 2;
> - flatheight = 5;
> + layoutBorderSize = 1;
> + roundheight = 10;
> break;
> }
> case DPIClassification.DPI_120:
> {
> measuredDefaultWidth = 220;
> measuredDefaultHeight = 25;
> - layoutBorderSize = 1;
> - flatheight = 2;
> + layoutBorderSize = .5;
> + roundheight = 5;
> break;
> }
> default:
> {
> measuredDefaultWidth = 300;
> measuredDefaultHeight = 33;
> - layoutBorderSize = 1;
> - flatheight = 3;
> + layoutBorderSize = .5;
> + roundheight = 7;
> break;
> }
> }
> @@ -132,7 +133,7 @@ package spark.skins.ios7
>
> protected var isFocused:Boolean = false;
>
> - protected var flatheight:uint;
> + protected var roundheight:uint;
>
> /**
> * @copy spark.skins.spark.ApplicationSkin#hostComponent
> @@ -290,37 +291,35 @@ package spark.skins.ios7
> var contentBackgroundAlpha:Number =
> getStyle("contentBackgroundAlpha");
> //change border color and thickness when in focus
> var borderColor:uint = isFocused ?
> getStyle("focusColor") : getStyle("borderColor");
> - var selectWidth:uint = isFocused ?
> layoutBorderSize + 1 : layoutBorderSize;
> + var borderWidth:uint = layoutBorderSize * 2;
> if (isNaN(contentBackgroundAlpha))
> {
> contentBackgroundAlpha = 1;
> }
> - if (getStyle("contentBackgroundBorder") == "flat")
> + if (getStyle("contentBackgroundBorder") ==
> "roundedrect")
> {
> - var halfGap:int = flatheight * 2;
> - //background
> + graphics.lineStyle(layoutBorderSize,
> borderColor, 1, true);
> graphics.beginFill(contentBackgroundColor,
> contentBackgroundAlpha);
> - graphics.drawRect(0, 0, unscaledWidth,
> unscaledHeight - flatheight);
> - graphics.endFill();
> - //begin flat border
> - graphics.beginFill(borderColor, 1);
> - //left half border
> - graphics.drawRect(0, unscaledHeight -
> halfGap, selectWidth, flatheight );
> - //bottom border
> - graphics.drawRect(0, unscaledHeight -
> flatheight, unscaledWidth, selectWidth);
> - //right border
> - graphics.drawRect(unscaledWidth -
> selectWidth, unscaledHeight - halfGap, selectWidth, flatheight);
> +
> graphics.drawRoundRectComplex(layoutBorderSize, layoutBorderSize,
> unscaledWidth - borderWidth, unscaledHeight - borderWidth, roundheight,
> roundheight, roundheight, roundheight);
> graphics.endFill();
> }
> - else if (getStyle("contentBackgroundBorder") ==
> "rectangle")
> + if (getStyle("contentBackgroundBorder") ==
> "rectangle")
> {
> - var borderWidth:uint = layoutBorderSize *
> 2;
> +
> //rectangle border and background
> - graphics.lineStyle(selectWidth,
> borderColor, 1);
> + graphics.lineStyle(layoutBorderSize,
> borderColor, 1);
> graphics.beginFill(contentBackgroundColor,
> contentBackgroundAlpha);
> graphics.drawRect(layoutBorderSize,
> layoutBorderSize, unscaledWidth - borderWidth, unscaledHeight -
> borderWidth);
> graphics.endFill();
> }
> + else if (getStyle("contentBackgroundBorder") ==
> "none")
> + {
> +
> + //rectangle border and background
> + graphics.beginFill(contentBackgroundColor,
> contentBackgroundAlpha);
> + graphics.drawRect(0, 0, unscaledWidth -
> borderWidth, unscaledHeight - borderWidth);
> + graphics.endFill();
> + }
> }
>
> /**
>
>
> http://git-wip-us.apache.org/repos/asf/flex-sdk/blob/ef507a46/frameworks/projects/mobiletheme/src/spark/skins/ios7/supportClasses/StageTextSkinBase.as
> ----------------------------------------------------------------------
> diff --git
> a/frameworks/projects/mobiletheme/src/spark/skins/ios7/supportClasses/StageTextSkinBase.as
> b/frameworks/projects/mobiletheme/src/spark/skins/ios7/supportClasses/StageTextSkinBase.as
> index 10e0632..89b8b13 100644
> ---
> a/frameworks/projects/mobiletheme/src/spark/skins/ios7/supportClasses/StageTextSkinBase.as
> +++
> b/frameworks/projects/mobiletheme/src/spark/skins/ios7/supportClasses/StageTextSkinBase.as
> @@ -66,48 +66,48 @@ public class StageTextSkinBase extends MobileSkin
> {
> measuredDefaultWidth = 1200;
> measuredDefaultHeight = 132;
> - layoutBorderSize = 4;
> - flatheight = 9;
> + layoutBorderSize = 3;
> + roundheight = 24;
> break;
> }
> case DPIClassification.DPI_480:
> {
> measuredDefaultWidth = 880;
> measuredDefaultHeight = 100;
> - layoutBorderSize = 3;
> - flatheight = 7;
> + layoutBorderSize = 2;
> + roundheight = 18;
> break;
> }
> case DPIClassification.DPI_320:
> {
> measuredDefaultWidth = 600;
> measuredDefaultHeight = 66;
> - layoutBorderSize = 2;
> - flatheight = 6;
> + layoutBorderSize = 1.5;
> + roundheight = 14;
> break;
> }
> case DPIClassification.DPI_240:
> {
> measuredDefaultWidth = 440;
> measuredDefaultHeight = 50;
> - layoutBorderSize = 2;
> - flatheight = 5;
> + layoutBorderSize = 1;
> + roundheight = 10;
> break;
> }
> case DPIClassification.DPI_120:
> {
> measuredDefaultWidth = 220;
> measuredDefaultHeight = 25;
> - layoutBorderSize = 1;
> - flatheight = 2;
> + layoutBorderSize = .5;
> + roundheight = 5;
> break;
> }
> default:
> {
> measuredDefaultWidth = 300;
> measuredDefaultHeight = 33;
> - layoutBorderSize = 1;
> - flatheight = 3;
> + layoutBorderSize = .5;
> + roundheight = 7;
> break;
> }
>
> @@ -138,7 +138,7 @@ public class StageTextSkinBase extends MobileSkin
> */
> protected var layoutBorderSize:uint;
>
> - protected var flatheight:uint;
> + protected var roundheight:uint;
>
>
> //--------------------------------------------------------------------------
> //
> @@ -216,7 +216,7 @@ public class StageTextSkinBase extends MobileSkin
> *
> * @return instance of IStyleableEditableText
> */
> - protected function createTextDisplay():IStyleableEditableText
> + protected function createTextDisplay():IStyleableEditableText
> {
> return new StyleableStageText(multiline);
> }
> @@ -232,38 +232,36 @@ public class StageTextSkinBase extends MobileSkin
> var contentBackgroundAlpha:Number =
> getStyle("contentBackgroundAlpha");
> //change border color and thickness when in focus
> var borderColor:uint = isFocused ? getStyle("focusColor")
> : getStyle("borderColor");
> - var selectWidth:uint = isFocused ? layoutBorderSize + 1 :
> layoutBorderSize;
> + var borderWidth:uint = layoutBorderSize * 2;
> if (isNaN(contentBackgroundAlpha))
> {
> contentBackgroundAlpha = 1;
> }
> - var halfGap:int = flatheight * 2;
> // change the border type
> - if (getStyle("contentBackgroundBorder") == "flat")
> + if (getStyle("contentBackgroundBorder") == "roundedrect")
> {
> - //background
> + graphics.lineStyle(layoutBorderSize, borderColor,
> 1, true);
> graphics.beginFill(contentBackgroundColor,
> contentBackgroundAlpha);
> - graphics.drawRect(0, 0, unscaledWidth,
> unscaledHeight - flatheight);
> - graphics.endFill();
> - //begin flat border
> - graphics.beginFill(borderColor, 1);
> - //left half border
> - graphics.drawRect(0, unscaledHeight - halfGap,
> selectWidth, flatheight );
> - //bottom border
> - graphics.drawRect(0, unscaledHeight - flatheight,
> unscaledWidth, selectWidth);
> - //right border
> - graphics.drawRect(unscaledWidth - selectWidth,
> unscaledHeight - halfGap, selectWidth, flatheight);
> + graphics.drawRoundRectComplex(layoutBorderSize,
> layoutBorderSize, unscaledWidth - borderWidth, unscaledHeight -
> borderWidth, roundheight, roundheight, roundheight, roundheight);
> graphics.endFill();
> }
> - else if (getStyle("contentBackgroundBorder") ==
> "rectangle")
> + if (getStyle("contentBackgroundBorder") == "rectangle")
> {
> - var borderWidth:uint = layoutBorderSize * 2;
> +
> //rectangle border and background
> - graphics.lineStyle(selectWidth, borderColor, 1);
> + graphics.lineStyle(layoutBorderSize, borderColor,
> 1);
> graphics.beginFill(contentBackgroundColor,
> contentBackgroundAlpha);
> graphics.drawRect(layoutBorderSize,
> layoutBorderSize, unscaledWidth - borderWidth, unscaledHeight -
> borderWidth);
> graphics.endFill();
> }
> + else if (getStyle("contentBackgroundBorder") == "none")
> + {
> +
> + //rectangle border and background
> + graphics.beginFill(contentBackgroundColor,
> contentBackgroundAlpha);
> + graphics.drawRect(0, 0, unscaledWidth -
> borderWidth, unscaledHeight - borderWidth);
> + graphics.endFill();
> + }
> }
>
> /**
>
>