
Ui.CanvasElement.extend('Ui.TextBgGraphic', {
	textHasFocus: false,

	setHasFocus: function(hasFocus) {
		if(this.textHasFocus !== hasFocus) {
			this.textHasFocus = hasFocus;
			this.invalidateDraw();
		}
	},

	getBackground: function() {
		var color;
		if(this.textHasFocus)
			color = Ui.Color.create(this.getStyleProperty('focusBackground'));
		else
			color = Ui.Color.create(this.getStyleProperty('background'));
		return color;
	}

}, {
	updateCanvas: function(ctx) {	
		var w = this.getLayoutWidth();
		var h = this.getLayoutHeight();

		var borderWidth = this.getStyleProperty('borderWidth');
		
		var lh = Math.max(8, h-4-16);
	
		// handle disable
		if(this.getIsDisabled())
			ctx.globalAlpha = 0.2;
		
		ctx.fillStyle = this.getBackground().getCssRgba();
		ctx.beginPath();
		ctx.moveTo(0, h-lh-4);
		ctx.lineTo(0, h-4);
		ctx.lineTo(w, h-4);
		ctx.lineTo(w, h-8-4+borderWidth);
		ctx.lineTo(w-borderWidth, h-8-4+borderWidth);
		ctx.lineTo(w-borderWidth, h-4-borderWidth);
		ctx.lineTo(borderWidth, h-4-borderWidth);
		ctx.lineTo(borderWidth, h-lh-4);
		ctx.closePath();
		ctx.fill();	
	},
	
	onDisable: function() {
		this.invalidateDraw();
	},

	onEnable: function() {
		this.invalidateDraw();
	},

	onStyleChange: function() {
		this.spacing = Math.max(0, this.getStyleProperty('spacing'));
		this.iconSize = Math.max(0, this.getStyleProperty('iconSize'));
		this.fontFamily = this.getStyleProperty('fontFamily');
		this.fontSize = Math.max(0, this.getStyleProperty('fontSize'));
		this.fontWeight = this.getStyleProperty('fontWeight');
		this.invalidateDraw();
	}
}, {
	style: {
		borderWidth: 2,
		background: '#444444',
		focusBackground: '#21d3ff'
	}
});
@@ -538,16 +538,126 @@
 ght();%0A%0A
+%09%09var radius = this.getStyleProperty('radius');%0A%09%09radius = Math.max(0, Math.min(radius, Math.min(w/2, h/2)));%0A
 %09%09var bo
@@ -706,16 +706,16 @@
 idth');%0A
-
 %09%09%0A%09%09var
@@ -887,26 +887,91 @@
 eginPath();%0A
+%0A
 %09%09
+ctx.roundRect(0, 0, w, h, radius, radius, radius, radius);%0A%0A%09%09/*
 ctx.moveTo(0
@@ -1229,24 +1229,143 @@
 th, h-lh-4);
+*/%0A%0A%09%09/*ctx.moveTo(0, h-4);%0A%09%09ctx.lineTo(w, h-4);%0A%09%09ctx.lineTo(w, h-4-borderWidth);%0A%09%09ctx.lineTo(0, h-4-borderWidth);*/
 %0A%09%09ctx.close
@@ -1385,17 +1385,16 @@
 .fill();
-%09
 %0A%09%7D,%0A%09%0A%09
@@ -1873,16 +1873,16 @@
 %09%7D%0A%7D, %7B%0A
-
 %09style: 
@@ -1883,16 +1883,29 @@
 tyle: %7B%0A
+%09%09radius: 3,%0A
 %09%09border

change the look the text fields for a more web classic one