You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@flex.apache.org by ah...@apache.org on 2015/07/28 20:40:28 UTC
[02/36] git commit: [flex-asjs] [refs/heads/develop] - get Borders on
TextInput to work in FlatUI-like CSS
get Borders on TextInput to work in FlatUI-like CSS
Project: http://git-wip-us.apache.org/repos/asf/flex-asjs/repo
Commit: http://git-wip-us.apache.org/repos/asf/flex-asjs/commit/cfded8d2
Tree: http://git-wip-us.apache.org/repos/asf/flex-asjs/tree/cfded8d2
Diff: http://git-wip-us.apache.org/repos/asf/flex-asjs/diff/cfded8d2
Branch: refs/heads/develop
Commit: cfded8d2bb67b6c2e81c0b5abb2b3096f166643a
Parents: 3ceb21b
Author: Alex Harui <ah...@apache.org>
Authored: Fri Jul 10 08:38:43 2015 -0700
Committer: Alex Harui <ah...@apache.org>
Committed: Fri Jul 10 08:38:43 2015 -0700
----------------------------------------------------------------------
.../as/src/org/apache/flex/core/CSSTextField.as | 30 +++++---
.../org/apache/flex/core/SimpleCSSValuesImpl.as | 1 +
.../as/src/org/apache/flex/utils/CSSUtils.as | 8 +++
.../org/apache/flex/utils/SolidBorderUtil.as | 44 +++++++++---
frameworks/projects/HTML/as/defaults.css | 16 +++++
.../org/apache/flex/html/beads/CSSButtonView.as | 5 +-
.../apache/flex/html/beads/CSSTextButtonView.as | 12 +++-
.../flex/html/beads/SingleLineBorderBead.as | 74 +++++++++++++++-----
frameworks/projects/HTML/basic-manifest.xml | 2 +
9 files changed, 148 insertions(+), 44 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/cfded8d2/frameworks/projects/Core/as/src/org/apache/flex/core/CSSTextField.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/Core/as/src/org/apache/flex/core/CSSTextField.as b/frameworks/projects/Core/as/src/org/apache/flex/core/CSSTextField.as
index e32b199..a91174d 100644
--- a/frameworks/projects/Core/as/src/org/apache/flex/core/CSSTextField.as
+++ b/frameworks/projects/Core/as/src/org/apache/flex/core/CSSTextField.as
@@ -77,6 +77,18 @@ package org.apache.flex.core
/**
* @private
+ * The parentHandlesPadding property is set if the CSSTextField
+ * shouldn't worry about padding
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion FlexJS 0.0
+ */
+ public var parentHandlesPadding:Boolean;
+
+ /**
+ * @private
*/
override public function set text(value:String):void
{
@@ -89,15 +101,15 @@ package org.apache.flex.core
tf.font = ValuesManager.valuesImpl.getValue(sp, "fontFamily") as String;
tf.size = ValuesManager.valuesImpl.getValue(sp, "fontSize");
tf.bold = ValuesManager.valuesImpl.getValue(sp, "fontWeight") == "bold";
- tf.color = ValuesManager.valuesImpl.getValue(sp, "color");
- var padding:Object = ValuesManager.valuesImpl.getValue(sp, "padding");
- if (padding == null) padding = 0;
- var paddingLeft:Object = ValuesManager.valuesImpl.getValue(sp,"padding-left");
- if (paddingLeft == null) paddingLeft = padding;
- var paddingRight:Object = ValuesManager.valuesImpl.getValue(sp,"padding-right");
- if (paddingRight == null) paddingRight = padding;
- tf.leftMargin = paddingLeft;
- tf.rightMargin = paddingRight;
+ tf.color = CSSUtils.toColor(ValuesManager.valuesImpl.getValue(sp, "color"));
+ if (!parentHandlesPadding)
+ {
+ var padding:Object = ValuesManager.valuesImpl.getValue(sp, "padding");
+ var paddingLeft:Object = ValuesManager.valuesImpl.getValue(sp,"padding-left");
+ var paddingRight:Object = ValuesManager.valuesImpl.getValue(sp,"padding-right");
+ tf.leftMargin = CSSUtils.getLeftValue(paddingLeft, padding, width);
+ tf.rightMargin = CSSUtils.getRightValue(paddingRight, padding, width);
+ }
var align:Object = ValuesManager.valuesImpl.getValue(sp, "text-align");
if (align == "center")
{
http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/cfded8d2/frameworks/projects/Core/as/src/org/apache/flex/core/SimpleCSSValuesImpl.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/Core/as/src/org/apache/flex/core/SimpleCSSValuesImpl.as b/frameworks/projects/Core/as/src/org/apache/flex/core/SimpleCSSValuesImpl.as
index bbbd6c0..57d6726 100644
--- a/frameworks/projects/Core/as/src/org/apache/flex/core/SimpleCSSValuesImpl.as
+++ b/frameworks/projects/Core/as/src/org/apache/flex/core/SimpleCSSValuesImpl.as
@@ -399,6 +399,7 @@ package org.apache.flex.core
if (value !== undefined)
return value;
}
+ return undefined;
}
return "inherit";
}
http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/cfded8d2/frameworks/projects/Core/as/src/org/apache/flex/utils/CSSUtils.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/Core/as/src/org/apache/flex/utils/CSSUtils.as b/frameworks/projects/Core/as/src/org/apache/flex/utils/CSSUtils.as
index b023c4f..2f6d6d5 100644
--- a/frameworks/projects/Core/as/src/org/apache/flex/utils/CSSUtils.as
+++ b/frameworks/projects/Core/as/src/org/apache/flex/utils/CSSUtils.as
@@ -156,6 +156,8 @@ package org.apache.flex.utils
if (value != null)
return toNumber(value as String, reference);
+ if (values == null)
+ return 0;
if (values is Array)
{
var arr:Array = values as Array;
@@ -191,6 +193,8 @@ package org.apache.flex.utils
if (value != null)
return toNumber(value as String, reference);
+ if (values == null)
+ return 0;
if (values is Array)
{
var arr:Array = values as Array;
@@ -223,6 +227,8 @@ package org.apache.flex.utils
if (value != null)
return toNumber(value as String, reference);
+ if (values == null)
+ return 0;
if (values is Array)
{
var arr:Array = values as Array;
@@ -255,6 +261,8 @@ package org.apache.flex.utils
if (value != null)
return toNumber(value as String, reference);
+ if (values == null)
+ return 0;
if (values is Array)
{
var arr:Array = values as Array;
http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/cfded8d2/frameworks/projects/Core/as/src/org/apache/flex/utils/SolidBorderUtil.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/Core/as/src/org/apache/flex/utils/SolidBorderUtil.as b/frameworks/projects/Core/as/src/org/apache/flex/utils/SolidBorderUtil.as
index aca4275..5848826 100644
--- a/frameworks/projects/Core/as/src/org/apache/flex/utils/SolidBorderUtil.as
+++ b/frameworks/projects/Core/as/src/org/apache/flex/utils/SolidBorderUtil.as
@@ -59,18 +59,40 @@ public class SolidBorderUtil
thickness:int = 1, alpha:Number = 1.0,
ellipseWidth:Number = NaN, ellipseHeight:Number = NaN):void
{
- g.clear();
+ g.lineStyle(); // don't draw the line, it tends to get aligned on half-pixels
- g.lineStyle(thickness, color, thickness == 0 ? 0 : 1);
- if (backgroundColor != null)
- g.beginFill(uint(backgroundColor), alpha);
-
- if (!isNaN(ellipseWidth))
- g.drawRoundRect(x, y, width, height, ellipseWidth, ellipseHeight);
- else
- g.drawRect(x, y, width, height);
- if (backgroundColor != null)
- g.endFill();
+ if (thickness > 0)
+ {
+ g.beginFill(color, alpha);
+ if (!isNaN(ellipseWidth))
+ {
+ g.drawRoundRect(x, y, width, height, ellipseWidth, ellipseHeight);
+ g.drawRoundRect(x + thickness, y + thickness,
+ width - thickness * 2, height - thickness * 2,
+ ellipseWidth, ellipseHeight);
+ }
+ else
+ {
+ g.drawRect(x, y, width, height);
+ g.drawRect(x + thickness, y + thickness,
+ width - thickness * 2, height - thickness * 2);
+ }
+ g.endFill();
+ }
+
+ if (backgroundColor != null)
+ {
+ g.beginFill(uint(backgroundColor), alpha);
+
+ if (!isNaN(ellipseWidth))
+ g.drawRoundRect(x + thickness, y + thickness,
+ width - thickness * 2, height - thickness * 2,
+ ellipseWidth, ellipseHeight);
+ else
+ g.drawRect(x + thickness, y + thickness,
+ width - thickness * 2, height - thickness * 2);
+ g.endFill();
+ }
}
}
}
http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/cfded8d2/frameworks/projects/HTML/as/defaults.css
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/as/defaults.css b/frameworks/projects/HTML/as/defaults.css
index 81658b2..76830dd 100644
--- a/frameworks/projects/HTML/as/defaults.css
+++ b/frameworks/projects/HTML/as/defaults.css
@@ -217,6 +217,16 @@ StringItemRenderer
height: 16;
}
+TextInput
+{
+ height: 35px;
+ padding: 6px 10px;
+ font-size: 13px;
+ line-height: 1.462;
+ border-radius: 6px;
+ border: 2px solid #1abc9c;
+}
+
TitleBar
{
IBeadModel: ClassReference("org.apache.flex.html.beads.models.TitleBarModel");
@@ -266,6 +276,12 @@ Alert
border-width: 1px;
}
+Border
+{
+ border-radius: inherit;
+ border: inherit;
+}
+
Button
{
IBeadView: ClassReference("org.apache.flex.html.beads.CSSButtonView");
http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/cfded8d2/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/CSSButtonView.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/CSSButtonView.as b/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/CSSButtonView.as
index a40c7a9..4377e8e 100644
--- a/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/CSSButtonView.as
+++ b/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/CSSButtonView.as
@@ -102,7 +102,7 @@ package org.apache.flex.html.beads
var borderStyles:Object = ValuesManager.valuesImpl.getValue(_strand, "border", state);
if (borderStyles is Array)
{
- borderColor = borderStyles[2];
+ borderColor = CSSUtils.toColor(borderStyles[2]);
borderStyle = borderStyles[1];
borderThickness = borderStyles[0];
}
@@ -113,7 +113,7 @@ package org.apache.flex.html.beads
borderStyle = value as String;
value = ValuesManager.valuesImpl.getValue(_strand, "border-color", state);
if (value != null)
- borderColor = value as uint;
+ borderColor = CSSUtils.toColor(value);
value = ValuesManager.valuesImpl.getValue(_strand, "border-thickness", state);
if (value != null)
borderThickness = value as uint;
@@ -164,6 +164,7 @@ package org.apache.flex.html.beads
}
if (borderStyle == "solid")
{
+ sprite.graphics.clear();
SolidBorderUtil.drawBorder(sprite.graphics,
0, 0, sprite.width + pl + pr,
sprite.height + pt + pb,
http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/cfded8d2/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/CSSTextButtonView.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/CSSTextButtonView.as b/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/CSSTextButtonView.as
index fd48998..98dc7f5 100644
--- a/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/CSSTextButtonView.as
+++ b/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/CSSTextButtonView.as
@@ -114,6 +114,9 @@ package org.apache.flex.html.beads
upTextField.parentDrawsBackground = true;
downTextField.parentDrawsBackground = true;
overTextField.parentDrawsBackground = true;
+ upTextField.parentHandlesPadding = true;
+ downTextField.parentHandlesPadding = true;
+ overTextField.parentHandlesPadding = true;
SimpleButton(value).upState = upSprite;
SimpleButton(value).downState = downSprite;
SimpleButton(value).overState = overSprite;
@@ -144,14 +147,16 @@ package org.apache.flex.html.beads
textField.defaultTextFormat.leftMargin = 0;
textField.defaultTextFormat.rightMargin = 0;
-
+ // set it again so it gets noticed
+ textField.defaultTextFormat = textField.defaultTextFormat;
+
var borderColor:uint;
var borderThickness:uint;
var borderStyle:String;
var borderStyles:Object = ValuesManager.valuesImpl.getValue(_strand, "border", state);
if (borderStyles is Array)
{
- borderColor = borderStyles[2];
+ borderColor = CSSUtils.toColor(borderStyles[2]);
borderStyle = borderStyles[1];
borderThickness = borderStyles[0];
}
@@ -162,7 +167,7 @@ package org.apache.flex.html.beads
borderStyle = value as String;
value = ValuesManager.valuesImpl.getValue(_strand, "border-color", state);
if (value != null)
- borderColor = value as uint;
+ borderColor = CSSUtils.toColor(value);
value = ValuesManager.valuesImpl.getValue(_strand, "border-thickness", state);
if (value != null)
borderThickness = value as uint;
@@ -222,6 +227,7 @@ package org.apache.flex.html.beads
if ((useHeight-pt-pb-2*borderThickness) < textField.textHeight)
useHeight = textField.textHeight+pt+pb+2*borderThickness;
+ sprite.graphics.clear();
SolidBorderUtil.drawBorder(sprite.graphics,
0, 0, useWidth, useHeight,
borderColor, backgroundColor == null ? null : bgColor, borderThickness, bgAlpha,
http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/cfded8d2/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/SingleLineBorderBead.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/SingleLineBorderBead.as b/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/SingleLineBorderBead.as
index bd933df..470fa9d 100644
--- a/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/SingleLineBorderBead.as
+++ b/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/SingleLineBorderBead.as
@@ -22,10 +22,14 @@ package org.apache.flex.html.beads
import org.apache.flex.core.IBead;
import org.apache.flex.core.IStrand;
+ import org.apache.flex.core.IStatesObject;
import org.apache.flex.core.UIBase;
import org.apache.flex.core.ValuesManager;
import org.apache.flex.events.Event;
import org.apache.flex.events.IEventDispatcher;
+ import org.apache.flex.utils.CSSUtils;
+ import org.apache.flex.utils.SolidBorderUtil;
+ import org.apache.flex.utils.StringTrimmer;
/**
* The SingleLineBorderBead class draws a single line solid border.
@@ -72,33 +76,65 @@ package org.apache.flex.html.beads
private function changeHandler(event:Event):void
{
- var styleObject:* = ValuesManager.valuesImpl.getValue(_strand,"border-color");
- if (styleObject is String)
- {
- if (styleObject.charAt(0) == "#")
- styleObject = styleObject.replace("#", "0x");
- }
- var borderColor:Number = Number(styleObject);
- if( isNaN(borderColor) ) borderColor = 0x000000;
- styleObject = ValuesManager.valuesImpl.getValue(_strand,"border-width");
- if (styleObject is String)
- styleObject = styleObject.replace("px", "");
- var borderThickness:Number = Number(styleObject);
- if( isNaN(borderThickness) ) borderThickness = 1;
-
var host:UIBase = UIBase(_strand);
var g:Graphics = host.graphics;
var w:Number = host.width;
var h:Number = host.height;
+ var state:String;
+ if (host is IStatesObject)
+ state = IStatesObject(host).currentState;
var gd:IGraphicsDrawing = _strand.getBeadByType(IGraphicsDrawing) as IGraphicsDrawing;
if( this == gd ) g.clear();
- g.lineStyle();
- g.beginFill(borderColor);
- g.drawRect(0, 0, w, h);
- g.drawRect(borderThickness, borderThickness, w-2*borderThickness, h-2*borderThickness);
- g.endFill();
+ var borderColor:uint;
+ var borderThickness:uint;
+ var borderStyle:String;
+ var borderStyles:Object = ValuesManager.valuesImpl.getValue(_strand, "border", state);
+ if (borderStyles is Array)
+ {
+ borderColor = CSSUtils.toColor(borderStyles[2]);
+ borderStyle = borderStyles[1];
+ borderThickness = borderStyles[0];
+ }
+ else if (borderStyles is String)
+ borderStyle = borderStyles as String;
+ var value:Object = ValuesManager.valuesImpl.getValue(_strand, "border-style", state);
+ if (value != null)
+ borderStyle = value as String;
+ value = ValuesManager.valuesImpl.getValue(_strand, "border-color", state);
+ if (value != null)
+ borderColor = CSSUtils.toColor(value);
+ value = ValuesManager.valuesImpl.getValue(_strand, "border-thickness", state);
+ if (value != null)
+ borderThickness = value as uint;
+ if (borderStyle == "none")
+ {
+ borderStyle = "solid";
+ borderThickness = 0;
+ }
+
+ var borderRadius:String;
+ var borderEllipseWidth:Number = NaN;
+ var borderEllipseHeight:Number = NaN;
+ value = ValuesManager.valuesImpl.getValue(_strand, "border-radius", state);
+ if (value != null)
+ {
+ if (value is Number)
+ borderEllipseWidth = value as Number;
+ else
+ {
+ borderRadius = value as String;
+ var arr:Array = StringTrimmer.splitAndTrim(borderRadius, "/");
+ borderEllipseWidth = CSSUtils.toNumber(arr[0]);
+ if (arr.length > 1)
+ borderEllipseHeight = CSSUtils.toNumber(arr[1]);
+ }
+ }
+ SolidBorderUtil.drawBorder(g,
+ 0, 0, w, h,
+ borderColor, null, borderThickness, 1,
+ borderEllipseWidth, borderEllipseHeight);
}
}
}
http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/cfded8d2/frameworks/projects/HTML/basic-manifest.xml
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/basic-manifest.xml b/frameworks/projects/HTML/basic-manifest.xml
index fcd23d5..1591aed 100644
--- a/frameworks/projects/HTML/basic-manifest.xml
+++ b/frameworks/projects/HTML/basic-manifest.xml
@@ -93,4 +93,6 @@
<component id="OneFlexibleChildHorizontalLayout" class="org.apache.flex.html.beads.layouts.OneFlexibleChildHorizontalLayout"/>
<component id="MXMLBeadViewBase" class="org.apache.flex.html.MXMLBeadViewBase"/>
+ <component id="Border" class="org.apache.flex.html.supportClasses.Border"/>
+
</componentPackage>