tonyair
/
GridFieldBulkEditingTools
mirror of https://github.com/colymba/GridFieldBulkEditingTools.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

UI behavior and visual enhancements 

Switch Actions to FormActions buttons and add colored visual hints about
items status.
This commit is contained in:
colymba 2012-08-10 00:30:50 +03:00
parent c67408bb90
commit 079fb7fa36
3 changed files with 77 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
code/GridFieldBulkImageUpload_Request.php
View File

@ -159,28 +159,38 @@ class GridFieldBulkImageUpload_Request extends RequestHandler {
$actions = new FieldList();
$html = "
<a id=\"bulkImageUploadUpdateBtn\" class=\"cms-panel-link action ss-ui-action-constructive ss-ui-button ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary\" data-icon=\"accept\" data-url=\"".$this->Link('update')."\" href=\"#\">
Save All
</a>";
$actions->push(new LiteralField('savebutton', $html));
$actions->push(
FormAction::create('SaveAll', 'Save All')
->setAttribute('id', 'bulkImageUploadUpdateBtn')
->addExtraClass('ss-ui-action-constructive cms-panel-link')
->setAttribute('data-icon', 'accept')
->setAttribute('data-url', $this->Link('update'))
->setUseButtonTag(true)
);
if($crumbs && $crumbs->count()>=2)
{
$html = "
<a id=\"bulkImageUploadUpdateFinishBtn\" class=\"cms-panel-link action ss-ui-action-constructive ss-ui-button ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary\" data-icon=\"accept\" data-url=\"".$this->Link('update')."\" href=\"".$one_level_up->Link."\">
Save All &amp; Finish
</a>";
$actions->push(new LiteralField('finishbutton', $html));
$actions->push(
FormAction::create('SaveAndFinish', 'Save All & Finish')
->setAttribute('id', 'bulkImageUploadUpdateFinishBtn')
->addExtraClass('ss-ui-action-constructive cms-panel-link')
->setAttribute('data-icon', 'accept')
->setAttribute('data-url', $this->Link('update'))
->setAttribute('data-return-url', $one_level_up->Link)
->setUseButtonTag(true)
);
}
$html = "
<a id=\"bulkImageUploadUpdateCancelBtn\" class=\"cms-panel-link delete ss-ui-action-destructive ss-ui-button ui-button ui-widget ui-state-default ui-button-text-icon-primary\" data-icon=\"decline\" data-url=\"".$this->Link('cancel')."\" href=\"#\">
Cancel &amp; Delete All
</a>";
$actions->push(new LiteralField('cancelbutton', $html));
$actions->push(
FormAction::create('Cancel', 'Cancel & Delete All')
->setAttribute('id', 'bulkImageUploadUpdateCancelBtn')
->addExtraClass('ss-ui-action-destructive cms-panel-link')
->setAttribute('data-icon', 'decline')
->setAttribute('data-url', $this->Link('cancel'))
->setUseButtonTag(true)
);
$uploadField = UploadField::create('BulkImageUploadField', '');
$uploadField->setConfig('previewMaxWidth', 40);
$uploadField->setConfig('previewMaxHeight', 30);
@ -207,7 +217,8 @@ class GridFieldBulkImageUpload_Request extends RequestHandler {
);
$form->setTemplate('LeftAndMain_EditForm');
$form->addExtraClass('center cms-edit-form cms-content');
//$form->addExtraClass('center cms-edit-form cms-content');
$form->addExtraClass('center cms-content');
$form->setAttribute('data-pjax-fragment', 'CurrentForm Content');
if($crumbs && $crumbs->count()>=2){

20
css/GridFieldBulkImageUpload.css
View File

@ -29,3 +29,23 @@ li.ss-uploadfield-item.template-download .imgPreview
background-image: linear-gradient(top, #a4ca3a 0%, #59781D 100%);
}
#BulkImageUploadField .ss-uploadfield-item-info.dirty
{
background-color: #f2ba11;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #f2ba11), color-stop(100%, #df6e00));
background-image: -webkit-linear-gradient(top, #f2ba11 0%, #df6e00 100%);
background-image: -moz-linear-gradient(top, #f2ba11 0%, #df6e00 100%);
background-image: -o-linear-gradient(top, #f2ba11 0%, #df6e00 100%);
background-image: -ms-linear-gradient(top, #f2ba11 0%, #df6e00 100%);
background-image: linear-gradient(top, #f2ba11 0%, #df6e00 100%);
}
#BulkImageUploadField .ss-uploadfield-item-status.updated
{
color: #3b8716;
}
#BulkImageUploadField .ss-uploadfield-item-status.dirty
{
color: #f25000;
}

45
javascript/GridFieldBulkImageUpload.js
View File

@ -27,6 +27,7 @@
$('.ss-uploadfield-files .ss-uploadfield-item-editform').show();
$(this).addClass('opened');
}
e.preventDefault();
}
});
@ -44,14 +45,24 @@
// start add-on behaviours
$.entwine('colymba', function($) {
$('.bulkImageUploadUpdateForm input.text, .bulkImageUploadUpdateForm input.checkbox, .bulkImageUploadUpdateForm select, .bulkImageUploadUpdateForm textarea').entwine({
onchange: function(){
var form = this.closest('.bulkImageUploadUpdateForm');
var form, itemInfo, itemStatus;
form = this.closest('.bulkImageUploadUpdateForm');
itemStatus = (this).parents('li').find('.ss-uploadfield-item-status');
itemInfo = $(this).parents('li').find('.ss-uploadfield-item-info');
if ( !$(form).hasClass('hasUpdate') ) {
$(form).addClass('hasUpdate');
}
$('a#bulkImageUploadUpdateFinishBtn').addClass('dirty');
$(itemStatus).removeClass('updated').addClass('dirty').html('Changed');
if ( $(itemInfo).hasClass('updated') ) $(itemInfo).removeClass('updated');
if ( !$(itemInfo).hasClass('dirty') ) $(itemInfo).addClass('dirty');
$('#bulkImageUploadUpdateFinishBtn').addClass('dirty');
}
});
@ -68,6 +79,8 @@
var url = $(this).data('url');
var cacheBuster = new Date().getTime();
if ( $(formsWithUpadtes).length > 0 ) $(this).addClass('loading');
$(formsWithUpadtes).each(function(){
var data = $(this).serialize();
$.ajax({
@ -77,31 +90,32 @@
context: $(this)
}).done(function() {
var btn = $('a#bulkImageUploadUpdateBtn');
var btn = $('#bulkImageUploadUpdateBtn');
var totalForms = parseInt( $(btn).data('formsToUpdate') );
var counter = parseInt( $(btn).data('completedForms') );
counter = counter + 1;
$(btn).data('completedForms', counter);
$(this).removeClass('hasUpdate');
$(this).parents('li').find('.ss-uploadfield-item-status').html('Updated');
$(this).parents('li').find('.ss-uploadfield-item-info').addClass('updated');
$(this).parents('li').find('.ss-uploadfield-item-status').removeClass('dirty').addClass('updated').html('Updated');
$(this).parents('li').find('.ss-uploadfield-item-info').removeClass('dirty').addClass('updated');
$(this).parents('li').find('.ss-uploadfield-item-editform').css('display', 'none');
$(this).removeClass('hasUpdate');
$(this).removeClass('hasUpdate');
if ( counter == totalForms ) {
$('#bulkImageUploadUpdateFinishBtn').removeClass('dirty');
if ( $(this).hasClass('doFinish') ) {
$('#bulkImageUploadUpdateFinishBtn').clcik();
}
$('#bulkImageUploadUpdateBtn').data('completedForms', 0);
$('#bulkImageUploadUpdateBtn').removeClass('loading');
if ( $('#bulkImageUploadUpdateBtn').hasClass('doFinish') ) {
//@TODO find a way to pass this as CMS navigation through AJAX
window.location = $('#bulkImageUploadUpdateFinishBtn').data('return-url');
}
}
});
})
//@todo Fix IE, seems to go right through the prevent default and
e.preventDefault();
}
});
@ -110,7 +124,6 @@
if ( $(this).hasClass('dirty') ) {
$('#bulkImageUploadUpdateBtn').addClass('doFinish');
$('#bulkImageUploadUpdateBtn').click();
e.stopImmediatePropagation();
}
}
});
@ -139,10 +152,8 @@
}
});
});
e.stopImmediatePropagation();
e.preventDefault();
});
}
});