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

etemplate/js/et2_widget_file.js

@@ -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: {},
@@ -420,6 +426,12 @@ var et2_file = et2_inputWidget.extend(
 
 		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

etemplate/templates/default/etemplate2.css

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

filemanager/templates/default/index.xet

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