Merge pull request #2584 from cb1kenobi/timob-9870-2_1_X

[TIMOB-9870] Fixed button active state styling mainly for Android.
tidev · Jul 17, 2012 · 5eb9388 · 5eb9388
2 parents 0a43607 + 5ab47a4
commit 5eb9388
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 16 deletions.
diff --git a/mobileweb/themes/common.css b/mobileweb/themes/common.css
@@ -162,6 +162,7 @@ textarea {
 		from(#fff), to(#999));
 }
 
+.TiUIElementGradientActive,
 .TiUIElementGradient:active {
 	background: -moz-linear-gradient(
 		top,

diff --git a/mobileweb/titanium/Ti/UI/Button.js b/mobileweb/titanium/Ti/UI/Button.js
@@ -1,7 +1,8 @@
 define(["Ti/_/declare", "Ti/_/UI/Widget", "Ti/_/dom", "Ti/_/css", "Ti/_/style", "Ti/_/lang", "Ti/Locale", "Ti/UI"],
 	function(declare, Widget, dom, css, style, lang, Locale, UI) {
 
-	var setStyle = style.set,
+	var on = require.on,
+		setStyle = style.set,
 		postDoBackground = {
 			post: function() {
 				if (this.backgroundColor || this.backgroundDisabledColor || this.backgroundDisabledImage || this.backgroundFocusedColor || 
@@ -24,31 +25,38 @@ define(["Ti/_/declare", "Ti/_/UI/Widget", "Ti/_/dom", "Ti/_/css", "Ti/_/style",
 
 		constructor: function() {
 			var contentContainer = this._contentContainer = UI.createView({
-				width: UI.INHERIT,
-				height: UI.INHERIT,
-				layout: UI._LAYOUT_CONSTRAINING_HORIZONTAL,
-				borderColor: "transparent"
-			});
+					width: UI.INHERIT,
+					height: UI.INHERIT,
+					layout: UI._LAYOUT_CONSTRAINING_HORIZONTAL,
+					borderColor: "transparent"
+				}),
+				node = this.domNode;
+
 			this._add(contentContainer);
+
 			contentContainer._add(this._buttonImage = UI.createImageView());
 			contentContainer._add(this._buttonTitle = UI.createLabel({
 				textAlign: UI.TEXT_ALIGNMENT_CENTER,
 				verticalAlign: UI.TEXT_VERTICAL_ALIGNMENT_CENTER,
 				width: UI.INHERIT,
 				height: UI.INHERIT
 			}));
-			
+
 			this._setDefaultLook();
-
-			this.addEventListener("touchstart",function(){
+
+			on(this, "touchstart", this, function() {
+				css.remove(node, "TiUIElementGradient");
+				css.add(node, "TiUIElementGradientActive");
 				this.selectedColor && (this._buttonTitle.color = this.selectedColor);
 			});
-			this.addEventListener("touchend",function(){
-				this.selectedColor && (this._buttonTitle.color = this.color || "black");
+			on(this, "touchend", this, function() {
+				css.remove(node, "TiUIElementGradientActive");
+				css.add(node, "TiUIElementGradient");
+				this.selectedColor && (this._buttonTitle.color = this.color || "#000");
+			});
+			on(node, "mouseout", this, function() {
+				this.selectedColor && (this._buttonTitle.color = this.color || "#000");
 			});
-			this.domNode.addEventListener("mouseout",lang.hitch(this,function(){
-				this.selectedColor && (this._buttonTitle.color = this.color || "black");
-			}));
 		},
 
 		_defaultWidth: UI.SIZE,

diff --git a/mobileweb/titanium/Ti/_/UI/Element.js b/mobileweb/titanium/Ti/_/UI/Element.js
@@ -630,8 +630,8 @@ define(
 				if (bi) {
 					tmp = repeat ? "repeat" : "no-repeat";
 					nodeStyle.backgroundRepeat !== tmp && (nodeStyle.backgroundRepeat = tmp);
-					tmp = repeat ? "auto" : "100% 100%";
-					nodeStyle.backgroundSize !== tmp && (nodeStyle.backgroundSize = tmp);
+					tmp = repeat ? "auto" : "100%";
+					nodeStyle.backgroundSize.replace(/(100%) 100%/, "$1") !== tmp && (nodeStyle.backgroundSize = tmp);
 				}
 			}
 		},