From 4ce531577ce9aaf635a80849d5b195e5c88eef41 Mon Sep 17 00:00:00 2001 From: Anika Henke Date: Sun, 25 Sep 2011 21:07:55 +0100 Subject: media manager: file uploader improvements --- lib/scripts/fileuploaderextended.js | 45 ++++++++++---------- lib/tpl/default/_fileuploader.css | 82 ++++++++++++++++++------------------- 2 files changed, 65 insertions(+), 62 deletions(-) (limited to 'lib') diff --git a/lib/scripts/fileuploaderextended.js b/lib/scripts/fileuploaderextended.js index ed631a9ea..f92d50754 100644 --- a/lib/scripts/fileuploaderextended.js +++ b/lib/scripts/fileuploaderextended.js @@ -76,23 +76,24 @@ qq.FileUploaderExtended = function(o){ listElement: null, template: '
' + - '
' + LANG.media_drop + '
' + - '
' + LANG.media_select + '
' + - '
' + - '
' + - '' + - '
' + - '
', + '
' + LANG.media_drop + '
' + + '
' + LANG.media_select + '
' + + '' + + '
' + + ' ' + + ' ' + + '
' + + '', // template for one item in file list - fileTemplate: '
' + - '' + - '' + - '' + - '' + - '' + LANG.media_cancel + '' + - 'Failed' + - '
', + fileTemplate: '
  • ' + + '' + + ' ' + + ' ' +// @todo: use "qq-upload-spinner hidden" instead + ' ' + + ' ' + LANG.media_cancel + '' + + ' Failed' + + '
    • ', classes: { // used to get elements from templates @@ -101,6 +102,8 @@ qq.FileUploaderExtended = function(o){ dropActive: 'qq-upload-drop-area-active', list: 'qq-upload-list', nameInput: 'qq-upload-name-input', + overwriteInput: 'qq-overwrite-check', + uploadButton: 'qq-upload-action', file: 'qq-upload-file', spinner: 'qq-upload-spinner', @@ -111,7 +114,7 @@ qq.FileUploaderExtended = function(o){ // used in css to hide progress spinner success: 'qq-upload-success', fail: 'qq-upload-fail', - failedText : 'qq-upload-failed-text' + failedText: 'qq-upload-failed-text' } }); @@ -160,7 +163,7 @@ qq.extend(qq.FileUploaderExtended.prototype, { var nameInput = this._find(item, 'nameInput'); var fileElement = this._find(item, 'file'); qq.setText(fileElement, nameInput.value); - qq.removeClass(fileElement, 'qq-upload-file-hidden'); + qq.removeClass(fileElement, 'hidden'); qq.remove(nameInput); jQuery('.qq-upload-button, #mediamanager__upload_button').remove(); jQuery('.dw__ow').parent().hide(); @@ -211,8 +214,8 @@ qq.extend(qq.UploadHandlerForm.prototype, { }, _uploadAll: function(params){ - jQuery(".qq-upload-spinner-hidden").each(function (i) { - jQuery(this).addClass('qq-upload-spinner'); + jQuery(".qq-upload-spinner").each(function (i) { + jQuery(this).removeClass('hidden'); }); for (key in this._inputs) { this.upload(key, params); @@ -328,8 +331,8 @@ qq.extend(qq.UploadHandlerXhr.prototype, { }, _uploadAll: function(params){ - jQuery(".qq-upload-spinner-hidden").each(function (i) { - jQuery(this).addClass('qq-upload-spinner'); + jQuery(".qq-upload-spinner").each(function (i) { + jQuery(this).removeClass('hidden'); }); for (key in this._files) { this.upload(key, params); diff --git a/lib/tpl/default/_fileuploader.css b/lib/tpl/default/_fileuploader.css index 9e60393a0..458267be0 100644 --- a/lib/tpl/default/_fileuploader.css +++ b/lib/tpl/default/_fileuploader.css @@ -1,20 +1,26 @@ + .qq-uploader { position: relative; width: 100%; } +.qq-uploader .error { + color: #f00; + background-color: #fff; +} + +/* select file button */ + .qq-upload-button { display: inline-block; border: 1px solid __border__; color: __text__; - background-color: __background__; + background: __background__ url(images/buttonshadow.png) repeat-x bottom; text-decoration: none; font-size: 100%; cursor: pointer; - margin: 1px; - margin-bottom: 5px; + margin: 1px 1px 5px; padding: 0.125em 0.4em; - background: __background__ url(images/buttonshadow.png) repeat-x bottom; } * html .qq-upload-button, @@ -23,9 +29,11 @@ } .qq-upload-button-focus { - outline: 1px dotted black; + outline: 1px dotted; } +/* drop area */ + .qq-upload-drop-area { position: absolute; top: 0; @@ -35,15 +43,16 @@ min-height: 70px; z-index: 2; background: __background_neu__; + color: __text__; text-align: center; } .qq-upload-drop-area span { - display:block; - position:absolute; + display: block; + position: absolute; top: 50%; - width:100%; - margin-top:-8px; + width: 100%; + margin-top: -8px; font-size: 120%; } @@ -51,8 +60,22 @@ background: __background_alt__; } -.qq-upload-file, .qq-upload-spinner, .qq-upload-size, .qq-upload-cancel, .qq-upload-failed-text { - margin-right: 7px; +/* list of files to upload */ + +.qq-uploader li { + margin-bottom: 5px; + color: __text__; +} + +.qq-uploader li span, +.qq-uploader li input, +.qq-uploader li a { + margin-right: 5px; +} + +.qq-upload-file { + display: block; + font-weight: bold; } .qq-upload-spinner { @@ -63,44 +86,21 @@ vertical-align: text-bottom; } -.qq-upload-size,.qq-upload-cancel { +.qq-upload-size, +.qq-upload-cancel { font-size: 85%; } .qq-upload-failed-text { - display:none; + display: none; } - .qq-upload-fail .qq-upload-failed-text { - display:inline; -} - -.qq-upload-file { - display: block; - font-weight: bold; -} - -.qq-upload-file-hidden { - display:none; + display: inline; } -.qq-upload-cancel { - padding-left: 10px; +.qq-action-container * { + vertical-align: middle; } - -.qq-uploader .dw__ow { +.qq-overwrite-check input { margin-left: 10px; - margin-right: 3px; -} - -.qq-uploader .check { - line-height: 18px; -} - -.qq-uploader #mediamanager__upload_button { - margin-bottom: 10px; } - -.qq-uploader div.li { - margin-bottom: 5px; -} \ No newline at end of file -- cgit v1.2.3