extern/egroupware_official
1
0
Fork 0
mirror of https://github.com/EGroupware/egroupware.git synced 2024-11-22 07:53:39 +01:00
Code Issues Packages Projects Releases Wiki Activity

* etemplate|widget_file: Make widget_file stylable

Browse Source
This commit is contained in:
Hadi Nategh 2014-03-21 16:27:09 +00:00
parent bec6913567
commit dd95ab16cc
2 changed files with 68 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
etemplate/js/et2_widget_file.js
View File

@ -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;

29
etemplate/templates/default/etemplate2.css
View File

@ -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%;
}