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 <bigosma...@gmail.com> Authored: Tue Nov 18 17:21:03 2014 -0800 Committer: OmPrakash Muppirala <bigosma...@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(); + } } /**
