* etemplate|widget_file: Make widget_file stylable

etemplate/js/et2_widget_file.js

@@ -72,6 +72,12 @@ var et2_file = et2_inputWidget.extend(
 			"type": "string",
 			"default": et2_no_init,
 			"description": "The ID of an additional drop target for HTML5 drag-n-drop file uploads"
+		},
+		label: {
+			"name": "Label of file upload",
+			"type": "string",
+			"default": "Choose file...",
+			"description": "String caption to be displayed on file upload span"
 		}
 	},
 
@@ -88,6 +94,7 @@ var et2_file = et2_inputWidget.extend(
 		this.node = null;
 		this.input = null;
 		this.progress = null;
+		this.span = null;
 
 		if(!this.options.id) {
 			console.warn("File widget needs an ID.  Used 'file_widget'.");
@@ -150,14 +157,32 @@ var et2_file = et2_inputWidget.extend(
 		this.set_drop_target(null);
 		this.node = null;
 		this.input = null;
+		this.span = null;
 		this.progress = null;
 	},
 	
 	createInputWidget: function() {
 		this.node = $j(document.createElement("div")).addClass("et2_file");
+		this.span = $j(document.createElement("span"))
+			.addClass('et2_file_span et2_button et2_button_text')
+			.appendTo (this.node);
+		var span = this.span;
 		this.input = $j(document.createElement("input"))
 			.attr("type", "file").attr("placeholder", this.options.blur)
-			.appendTo(this.node);
+			.addClass ("et2_file_upload")
+			.appendTo(this.node)
+			.hover(function(e){
+				$j(span)
+					.toggleClass('et2_file_spanHover');
+			})	
+			.on({
+				mousedown:function (e){
+					$j(span).addClass('et2_file_spanActive');
+				},
+				mouseup:function (e){
+					$j(span).removeClass('et2_file_spanActive');
+				}
+			});
 
 		// Check for File interface, should fall back to normal form submit if missing
 		if(typeof File != "undefined" && typeof (new XMLHttpRequest()).upload != "undefined")
@@ -303,6 +328,20 @@ var et2_file = et2_inputWidget.extend(
 			this.input[0].files = value;
 		}
 	},
+	
+	/**
+	 * Set the value for label
+	 * The label is used as caption for span tag which customize the HTML file upload styling
+	 *  
+	 * @param {string} value text value of label
+	 */
+	set_label: function (value)
+	{
+		if (this.span != null && value != null)
+		{
+			this.span.text(value);
+		}
+	},
 
 	getInputNode: function() {
 		if (typeof this.input == 'undefined') return false;

etemplate/templates/default/etemplate2.css

@@ -182,6 +182,7 @@ input[type=button] {
   padding: 0px;
 }
 button.et2_button_text:hover,
+.et2_file_spanHover,
 input[type=button]:hover {
   color: #050505;
   border: 1px solid gray;
@@ -193,6 +194,7 @@ input[type=button]:active {
   background-color: #D0D0E0;
 }
 button.et2_button_text:focus,
+.et2_file_spanActive,
 input[type=button]:focus {
   border: 1px solid #2c3d6f;
   color: #202d52;
@@ -436,6 +438,10 @@ action buttons, left aligned for "extra" controls
  */
 div.et2_file {
 	display: inline-block;
+	position: relative;
+	vertical-align: middle;
+	overflow: hidden;
+	width: 150px;
 }
 .et2_file .progress {
   width: 300px;
@@ -473,6 +479,27 @@ div.et2_file {
 .et2_file .progress li.success > span.progressBar {
   display: none;
 }
+/* Customize file upload styling */
+span.et2_file_span{
+	display: block;
+	background-position: left;
+	background-image: url(images/upload.png);
+	background-repeat: no-repeat;
+	background-size: 16px;
+	cursor: pointer;
+	
+	height: 15px;
+	text-align: left;
+	text-indent: 20px;
+}
+div.et2_file input.et2_file_upload{
+	position: absolute;
+	top: 4px;
+	padding-right: 100%;
+	cursor: pointer;
+	margin-left: -84px;
+	opacity: 0;
+}
 /**
  * Autocomplete - used in link widget
  * Restricting result size
@@ -1352,7 +1379,7 @@ ul.et2_nowrap, div.et2_nowrap{
 /**
  * Some general styles usable for all apps (and widgets)
  */
-.et2_fullWidth, .et2_fullWidth input, .et2_fullWidth select,
+.et2_fullWidth, .et2_fullWidth input, .et2_fullWidth select,et2_fullWidth.et2_file
 .et2_fullWidth textarea , .et2_fullWidth input.et2_link_entry {
 	width: 99%;
 }