diff --git a/bulkUpload/code/GridFieldBulkUpload.php b/bulkUpload/code/GridFieldBulkUpload.php index 79b35aa..8245b63 100644 --- a/bulkUpload/code/GridFieldBulkUpload.php +++ b/bulkUpload/code/GridFieldBulkUpload.php @@ -272,13 +272,19 @@ class GridFieldBulkUpload implements GridField_HTMLProvider, GridField_URLHandle ->setUseButtonTag(true) ->setAttribute('src', '');//changes type to image so isn't hooked by default actions handlers - $cancelButton = FormAction::create('Cancel', _t('GridFieldBulkTools.CANCEL_BTN_LABEL', 'Cancel & delete all')) + $cancelButton = FormAction::create('Cancel', _t('GridFieldBulkTools.CANCEL_BTN_LABEL', 'Cancel')) ->addExtraClass('bulkUploadCancelButton ss-ui-action-destructive') ->setAttribute('data-icon', 'decline') ->setAttribute('data-url', $gridField->Link('bulkupload/cancel')) ->setUseButtonTag(true) ->setAttribute('src', ''); + $clearErrorButton = FormAction::create('ClearError', _t('GridFieldBulkTools.CLEAR_ERROR_BTN_LABEL', 'Clear errors')) + ->addExtraClass('bulkUploadClearErrorButton') + ->setAttribute('data-icon', 'arrow-circle-double') + ->setUseButtonTag(true) + ->setAttribute('src', ''); + if ( $gridField->getConfig()->getComponentsByType('GridFieldBulkManager') ) { $editAllButton = FormAction::create('EditAll', _t('GridFieldBulkTools.EDIT_ALL_BTN_LABEL', 'Edit all')) @@ -293,9 +299,10 @@ class GridFieldBulkUpload implements GridField_HTMLProvider, GridField_URLHandle // get uploadField + inject extra buttons $uploadField = $this->bulkUploadField($gridField); - $uploadField->FinishButton = $finishButton; - $uploadField->CancelButton = $cancelButton; - $uploadField->EditAllButton = $editAllButton; + $uploadField->FinishButton = $finishButton; + $uploadField->CancelButton = $cancelButton; + $uploadField->EditAllButton = $editAllButton; + $uploadField->ClearErrorButton = $clearErrorButton; $data = ArrayData::create(array( 'Colspan' => count($gridField->getColumns()), diff --git a/bulkUpload/css/GridFieldBulkUpload.css b/bulkUpload/css/GridFieldBulkUpload.css index 9ec7176..a602df5 100644 --- a/bulkUpload/css/GridFieldBulkUpload.css +++ b/bulkUpload/css/GridFieldBulkUpload.css @@ -14,8 +14,7 @@ position: relative; float: left; clear: both; - width: 100%; - padding-top: 70px; } + width: 100%; } .bulkUpload .component div.ss-uploadfield .ss-uploadfield-files { float: left; clear: both; @@ -86,13 +85,9 @@ float: right; margin-top: 2px; } .bulkUpload .component div.ss-uploadfield .ss-uploadfield-addfile { - position: absolute; - top: 0; - left: 0; float: left; clear: both; width: 98%; - height: 50px; padding: 1%; } .bulkUpload .component div.ss-uploadfield .ss-uploadfield-addfile.borderTop { border: none; } @@ -114,7 +109,8 @@ width: 60%; margin: 0; } .bulkUpload .component div.ss-uploadfield .ss-uploadfield-addfile .ss-uploadfield-item-info .ss-uploadfield-item-name { - height: 20px; } + height: auto; + margin-bottom: 2px; } .bulkUpload .component div.ss-uploadfield .ss-uploadfield-addfile .ss-uploadfield-item-info .ss-ui-button .ui-button-text .ui-button-text { padding: 0px; } .bulkUpload .component div.ss-uploadfield .ss-uploadfield-addfile .ss-uploadfield-item-info .ss-uploadfield-fromcomputer { @@ -122,3 +118,23 @@ .bulkUpload .component div.ss-uploadfield .ss-uploadfield-addfile .ss-uploadfield-item-info .ss-uploadfield-fromfiles { margin-bottom: 0; padding: .5px; } + .bulkUpload .component div.ss-uploadfield .colymba-bulkupload-buttons { + display: none; + float: left; + width: 98%; + padding: 6px 1% 6px 1%; + border-top: 1px solid rgba(0, 0, 0, 0.1); } + .bulkUpload .component div.ss-uploadfield .colymba-bulkupload-buttons button { + float: left; + margin: 0 6px 0 0; } + .bulkUpload .component div.ss-uploadfield .colymba-bulkupload-buttons button .ui-button-text .ui-button-text { + padding: 0; } + .bulkUpload .component div.ss-uploadfield .colymba-bulkupload-buttons button.bulkUploadEditButton, .bulkUpload .component div.ss-uploadfield .colymba-bulkupload-buttons button.bulkUploadClearErrorButton { + float: right; + margin: 0 0 0 6px; } + .bulkUpload .component div.ss-uploadfield .colymba-bulkupload-buttons .colymba-bulkupload-info { + float: left; + margin: 0 6px 0 0; + line-height: 28px; + height: 28px; + color: #73818a; } diff --git a/bulkUpload/css/GridFieldBulkUpload.scss b/bulkUpload/css/GridFieldBulkUpload.scss index ee670a2..37a9045 100644 --- a/bulkUpload/css/GridFieldBulkUpload.scss +++ b/bulkUpload/css/GridFieldBulkUpload.scss @@ -3,7 +3,7 @@ .bulkUpload { padding: 0 !important; - border-bottom: 1px solid rgba(0, 0, 0, 0.1); + border-bottom: 1px solid rgba(0, 0, 0, 0.1); &:hover { @@ -29,8 +29,6 @@ clear: both; width: 100%; - padding-top: 70px; - // uploading file progress .ss-uploadfield-files { @@ -168,15 +166,10 @@ // upload tools .ss-uploadfield-addfile { - position: absolute; - top: 0; - left: 0; - float: left; clear: both; width: 98%; - height: 50px; padding: 1%; @@ -214,7 +207,8 @@ .ss-uploadfield-item-name { - height: 20px; + height: auto; + margin-bottom: 2px; } .ss-ui-button @@ -239,7 +233,47 @@ padding: .5px; } } - }// .ss-uploadfield-item + }// .ss-uploadfield-addfile + + .colymba-bulkupload-buttons + { + display: none; + float: left; + width: 98%; + padding: 6px 1% 6px 1%; + + border-top: 1px solid rgba(0, 0, 0, 0.1); + + button + { + float: left; + margin: 0 6px 0 0; + + .ui-button-text + { + .ui-button-text + { + padding: 0; + } + } + + &.bulkUploadEditButton, + &.bulkUploadClearErrorButton + { + float: right; + margin: 0 0 0 6px; + } + }// button + + .colymba-bulkupload-info + { + float: left; + margin: 0 6px 0 0; + line-height: 28px; + height: 28px; + color: #73818a; + } + } }// .ss-uploadfield diff --git a/bulkUpload/javascript/GridFieldBulkUpload.js b/bulkUpload/javascript/GridFieldBulkUpload.js index 6a9d62d..30709a2 100644 --- a/bulkUpload/javascript/GridFieldBulkUpload.js +++ b/bulkUpload/javascript/GridFieldBulkUpload.js @@ -133,61 +133,131 @@ onunmatch: function(){} }); - - /* - * handles individual edit forms changes - * updates buttons and visual styles - */ - $('.bulkImageUploadUpdateForm').entwine({ - onmatch: function(){}, - onunmatch: function(){}, - haschanged: function() - { - var itemInfo, - itemStatus - ; - - itemStatus = $(this).parents('li').find('.ss-uploadfield-item-status'); - itemInfo = $(this).parents('li').find('.ss-uploadfield-item-info'); - - if ( !$(this).hasClass('hasUpdate') ) - { - $(this).addClass('hasUpdate'); - } - - $(itemStatus).removeClass('updated').addClass('dirty').html(ss.i18n._t('GridFieldBulkTools.EDIT_CHANGED')); - if ( $(itemInfo).hasClass('updated') ) $(itemInfo).removeClass('updated'); - if ( !$(itemInfo).hasClass('dirty') ) $(itemInfo).addClass('dirty'); - $('#bulkImageUploadUpdateBtn').removeClass('ui-state-disabled ssui-button-disabled'); - $('#bulkImageUploadUpdateBtn').attr('aria-disabled', 'false'); - $('#bulkImageUploadUpdateBtn').removeAttr('disabled'); + /** + * Track upload progress... + */ + $('ul.ss-uploadfield-files').entwine({ + onmatch: function(){}, + onunmatch: function(){}, + trackProgress: function() + { + var $li = this.find('li.ss-uploadfield-item'), + total = $li.length, + $done = $li.filter('.done'), + done = $done.length, + $errors = $li.not($done).find('.ui-state-warning-text,.ui-state-error-text'), + errors = $errors.length + ; + + this.parents('.ss-uploadfield').find('.colymba-bulkupload-buttons').refresh(total, done, errors); + /* + this.closest('.colymba-bulkupload-info').html(ss.i18n.sprintf( + ss.i18n._t('GRIDFIELD_BULK_UPLOAD.PROGRESS_INFO'), + total, + done, + total + ));*/ } }); - - /* - * catches edit form changes - */ - $('.bulkImageUploadUpdateForm input.text, .bulkImageUploadUpdateForm input.checkbox, .bulkImageUploadUpdateForm select, .bulkImageUploadUpdateForm textarea').entwine({ - onchange: function() - { - this.closest('.bulkImageUploadUpdateForm').haschanged(); - } - }); - - /* - * catches edit form changes - * HTMLEditorField hack - */ - //textarea node is being removed from the DOM when the HTMLEditorFieldChanges, not the best but works - $('.field.htmleditor textarea').entwine({ - onmatch: function(){}, - onunmatch: function() - { - //note sure why querying straight from the texarea doesn't work... maybe because it is already removed from DOM? - $('input[type="hidden"][name="'+$(this).attr('name')+'"]').parents('.bulkImageUploadUpdateForm').haschanged(); - } + + + /** + * Track new and canceled updloads + */ + $('li.ss-uploadfield-item').entwine({ + onmatch: function(){ + this.parents('ul.ss-uploadfield-files').trackProgress(); + }, + onunmatch: function(){ + $('ul.ss-uploadfield-files').trackProgress(); + }, }); + + /** + * Track updload warning/errors + */ + $('li.ss-uploadfield-item .ui-state-warning-text,li.ss-uploadfield-item .ui-state-error-text').entwine({ + onmatch: function(){ + this.parents('ul.ss-uploadfield-files').trackProgress(); + }, + onunmatch: function(){ + $('ul.ss-uploadfield-files').trackProgress(); + }, + }); + + + /** + * Track completed uploads + *//* + $('li.ss-uploadfield-item.done').entwine({ + onmatch: function(){ + this.parents('ul.ss-uploadfield-files').trackProgress(); + }, + onunmatch: function(){}, + });*/ + + + /** + * Update buttons state and progress info... + */ + $('.colymba-bulkupload-buttons').entwine({ + onmatch: function(){}, + onunmatch: function(){}, + refresh: function(total, done, error) + { + var $info = this.find('.colymba-bulkupload-info'), + $editBtn = this.find('.bulkUploadEditButton'), + $cancelBtn = this.find('.bulkUploadCancelButton'), + $finishBtn = this.find('.bulkUploadFinishButton'), + $clearErrorBtn = this.find('.bulkUploadClearErrorButton') + ; + + if ( total > 0 ) + { + this.css({display: 'block'}); + + $info.html(ss.i18n.sprintf( + ss.i18n._t('GRIDFIELD_BULK_UPLOAD.PROGRESS_INFO'), + total, + done, + error + )); + + $cancelBtn.removeClass('ui-state-disabled ssui-button-disabled').attr('aria-disabled', 'false').removeAttr('disabled'); + $finishBtn.removeClass('ui-state-disabled ssui-button-disabled').attr('aria-disabled', 'false').removeAttr('disabled'); + + if ( total === done ) + { + $editBtn.removeClass('ui-state-disabled ssui-button-disabled').attr('aria-disabled', 'false').removeAttr('disabled'); + } + else{ + $editBtn.addClass('ui-state-disabled ssui-button-disabled').attr('aria-disabled', 'true').attr('disabled', 'true'); + } + + if ( error > 0 ) + { + $clearErrorBtn.removeClass('ui-state-disabled ssui-button-disabled').attr('aria-disabled', 'false').removeAttr('disabled'); + } + else{ + $clearErrorBtn.addClass('ui-state-disabled ssui-button-disabled').attr('aria-disabled', 'true').attr('disabled', 'true'); + } + } + else{ + this.css({display: 'none'}); + $editBtn.addClass('ui-state-disabled ssui-button-disabled').attr('aria-disabled', 'true').attr('disabled', 'true'); + $cancelBtn.addClass('ui-state-disabled ssui-button-disabled').attr('aria-disabled', 'true').attr('disabled', 'true'); + $finishBtn.addClass('ui-state-disabled ssui-button-disabled').attr('aria-disabled', 'true').attr('disabled', 'true'); + $clearErrorBtn.addClass('ui-state-disabled ssui-button-disabled').attr('aria-disabled', 'true').attr('disabled', 'true'); + } + } + }); + + + + + + /* * save changes button behaviour @@ -263,19 +333,6 @@ return false; } }); - - /* - * edit forms ovverides - */ - $('.ss-uploadfield-item-editform').entwine({ - onmatch: function(e) - { - $('#bulkImageUploadUpdateCancelBtn').removeClass('ui-state-disabled ssui-button-disabled'); - $('#bulkImageUploadUpdateCancelBtn').attr('aria-disabled', 'false'); - $('#bulkImageUploadUpdateCancelBtn').removeAttr('disabled'); - }, - onunmatch: function(){} - }); /* * cancel button behaviour @@ -329,4 +386,4 @@ // ============================================================================================ }); -}(jQuery)); \ No newline at end of file +}(jQuery)); diff --git a/bulkUpload/javascript/lang/en.js b/bulkUpload/javascript/lang/en.js index 2af5028..e7a1c03 100644 --- a/bulkUpload/javascript/lang/en.js +++ b/bulkUpload/javascript/lang/en.js @@ -4,6 +4,7 @@ if(typeof(ss) == 'undefined' || typeof(ss.i18n) == 'undefined') { if(typeof(console) != 'undefined') console.error('Class ss.i18n not defined'); } else { ss.i18n.addDictionary('en', { + "GRIDFIELD_BULK_UPLOAD.PROGRESS_INFO": "Uploading %s file(s). %s done. %s error(s).", "GridFieldBulkTools.FINISH_CONFIRM": "You have unsaved changes. Continuing will loose all unsaved data.\n\nDo your really want to continue?", "GridFieldBulkTools.EDIT_CHANGED": "Modified", "GridFieldBulkTools.EDIT_UPDATED": "Saved", diff --git a/bulkUpload/templates/GridFieldBulkUploadField.ss b/bulkUpload/templates/GridFieldBulkUploadField.ss index 130b600..c913d6a 100644 --- a/bulkUpload/templates/GridFieldBulkUploadField.ss +++ b/bulkUpload/templates/GridFieldBulkUploadField.ss @@ -42,9 +42,11 @@
-
+
$FinishButton $CancelButton + + $ClearErrorButton $EditAllButton
<% end_if %>