diff --git a/etemplate/js/et2_widget_file.js b/etemplate/js/et2_widget_file.js index 8fa6d891f0..5de61e4e21 100644 --- a/etemplate/js/et2_widget_file.js +++ b/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; diff --git a/etemplate/templates/default/etemplate2.css b/etemplate/templates/default/etemplate2.css index f873e6b839..990c8043f3 100644 --- a/etemplate/templates/default/etemplate2.css +++ b/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%; }