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:25 UTC
[35/44] git commit: [flex-sdk] [refs/heads/develop] - iOS7+ skins for
StateTextArea, StageTextInput, TextArea and TextInput.
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/develop
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();
+ }
}
/**