mirror of
https://github.com/EGroupware/egroupware.git
synced 2024-10-06 10:02:21 +02:00
Implement dropdown list style for file upload
This commit is contained in:
parent
ae8754638e
commit
cc9dfd0043
@ -78,7 +78,13 @@ var et2_file = et2_inputWidget.extend(
|
|||||||
"type": "string",
|
"type": "string",
|
||||||
"default": "Choose file...",
|
"default": "Choose file...",
|
||||||
"description": "String caption to be displayed on file upload span"
|
"description": "String caption to be displayed on file upload span"
|
||||||
}
|
},
|
||||||
|
progress_dropdownlist: {
|
||||||
|
"name": "List on files in progress like dropdown",
|
||||||
|
"type": "boolean",
|
||||||
|
"default": false,
|
||||||
|
"description": "Style list of files in uploading progress like dropdown list with a total upload progress indicator"
|
||||||
|
},
|
||||||
},
|
},
|
||||||
|
|
||||||
asyncOptions: {},
|
asyncOptions: {},
|
||||||
@ -419,7 +425,13 @@ var et2_file = et2_inputWidget.extend(
|
|||||||
.css('cursor', 'default');
|
.css('cursor', 'default');
|
||||||
|
|
||||||
event.data = this;
|
event.data = this;
|
||||||
|
|
||||||
|
//Add dropdown_progress
|
||||||
|
if (this.options.progress_dropdownlist)
|
||||||
|
{
|
||||||
|
this._build_progressDropDownList();
|
||||||
|
}
|
||||||
|
|
||||||
// Callback
|
// Callback
|
||||||
if(this.options.onStart) return et2_call(this.options.onStart, event, file_count);
|
if(this.options.onStart) return et2_call(this.options.onStart, event, file_count);
|
||||||
return true;
|
return true;
|
||||||
@ -457,8 +469,41 @@ var et2_file = et2_inputWidget.extend(
|
|||||||
// Fire legacy change action when done
|
// Fire legacy change action when done
|
||||||
this.change(this.input);
|
this.change(this.input);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
//Remove progress_dropDown_fileList class and unbind the click handler from body
|
||||||
|
if (this.options.progress_dropdownlist)
|
||||||
|
{
|
||||||
|
this.progress.removeClass("progress_dropDown_fileList");
|
||||||
|
jQuery(this.node).find('span').removeClass('totalProgress_loader');
|
||||||
|
jQuery('body').off('click');
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Build up dropdown progress with total count indicator
|
||||||
|
*
|
||||||
|
* @todo Implement totalProgress bar instead of ajax-loader, in order to show how much percent of uploading is completed
|
||||||
|
*/
|
||||||
|
_build_progressDropDownList: function ()
|
||||||
|
{
|
||||||
|
this.progress.addClass("progress_dropDown_fileList");
|
||||||
|
|
||||||
|
//Add uploading indicator and bind hover handler on it
|
||||||
|
jQuery(this.node).find('span')
|
||||||
|
.addClass('totalProgress_loader')
|
||||||
|
.hover(function(){
|
||||||
|
jQuery('.progress_dropDown_fileList').show();
|
||||||
|
});
|
||||||
|
|
||||||
|
//Bind click handler to dismiss the dropdown while uploading
|
||||||
|
jQuery('body').on('click', function(event){
|
||||||
|
if (event.target.className != 'remove')
|
||||||
|
{
|
||||||
|
jQuery('.progress_dropDown_fileList').hide();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Creates the elements used for displaying the file, and it's upload status, and
|
* Creates the elements used for displaying the file, and it's upload status, and
|
||||||
|
@ -480,6 +480,25 @@ div.et2_file {
|
|||||||
margin-left: 8px;
|
margin-left: 8px;
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
}
|
}
|
||||||
|
.et2_file .progress_dropDown_fileList {
|
||||||
|
background: white;
|
||||||
|
position: absolute;
|
||||||
|
border: 1px solid gray;
|
||||||
|
border-top: 0;
|
||||||
|
margin-top: 6px !important;
|
||||||
|
margin-left: 0 !important;
|
||||||
|
border-bottom-left-radius: 5px;
|
||||||
|
border-bottom-right-radius: 5px;
|
||||||
|
max-height: 300px;
|
||||||
|
width: 181px !important;
|
||||||
|
z-index: 201 !important;
|
||||||
|
box-shadow: 6px 6px 9px gray;
|
||||||
|
}
|
||||||
|
.et2_file .totalProgress_loader {
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-image: url('images/ajax-loader.gif');
|
||||||
|
}
|
||||||
|
|
||||||
.et2_file .progress {
|
.et2_file .progress {
|
||||||
width: 300px;
|
width: 300px;
|
||||||
max-height: 6em;
|
max-height: 6em;
|
||||||
|
Loading…
Reference in New Issue
Block a user