extern/egroupware_official
1
0
Fork 0
mirror of https://github.com/EGroupware/egroupware.git synced 2024-12-22 14:41:29 +01:00
Code Issues Packages Projects Releases Wiki Activity

* Filemanager: New styling and access to list of uploading files in progress

Browse Source
This commit is contained in:
Hadi Nategh 2014-10-01 15:21:48 +00:00
parent 3ec23b92fd
commit ee46807842
3 changed files with 72 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
etemplate/js/et2_widget_file.js
View File

@ -78,7 +78,13 @@ var et2_file = et2_inputWidget.extend(
"type": "string",
"default": "Choose file...",
"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: {},
@ -419,7 +425,13 @@ var et2_file = et2_inputWidget.extend(
.css('cursor', 'default');
event.data = this;
//Add dropdown_progress
if (this.options.progress_dropdownlist)
{
this._build_progressDropDownList();
}
// Callback
if(this.options.onStart) return et2_call(this.options.onStart, event, file_count);
return true;
@ -457,8 +469,41 @@ var et2_file = et2_inputWidget.extend(
// Fire legacy change action when done
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

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

@ -480,6 +480,28 @@ div.et2_file {
margin-left: 8px;
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 .progress_dropDown_fileList > li {
border-bottom: 1px solid lightgray;
}
.et2_file .totalProgress_loader {
background-repeat: no-repeat;
background-image: url('images/ajax-loader.gif');
}
.et2_file .progress {
width: 300px;
max-height: 6em;
@ -515,6 +537,7 @@ div.et2_file {
background-color: green;
height: 5px;
margin: 0px;
width: 0px;
}
/* Hide progress bar when completed */
.et2_file .progress li.success > span.progressBar {

2
filemanager/templates/default/index.xet
View File

@ -58,7 +58,7 @@
<buttononly label="Paste link" id="button[linkpaste]" onclick="app.filemanager.paste('linkpaste');" options="linkpaste,linkpaste_disabled"/>
<buttononly label="Mail paste" id="button[mailpaste]" onclick="app.filemanager.paste('mailpaste');" options="mailpaste,mailpaste_disabled"/>
<button label="File a file" onclick="window.open(egw::link('/index.php','menuaction=stylite.stylite_filemanager.upload'),'_blank','dependent=yes,width=550,height=350,scrollbars=yes,status=yes'); return false;" image="upload"/>
<file statustext="Select file to upload in current directory" id="upload" drop_target ="divAppbox" multiple="true" onFinish="app.filemanager.upload"/>
<file statustext="Select file to upload in current directory" id="upload" progress_dropdownlist = "true" drop_target ="divAppbox" multiple="true" onFinish="app.filemanager.upload"/>
</hbox>
</hbox>
</template>