tonyair/GridFieldBulkEditingTools
1
0
Fork 0
mirror of https://github.com/colymba/GridFieldBulkEditingTools.git synced 2024-10-22 11:05:57 +02:00
Code Issues Projects Releases Wiki Activity

UI behavior and visual enhancements

Browse Source 
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(); $actions = new FieldList();
$html = " $actions->push(
<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=\"#\"> FormAction::create('SaveAll', 'Save All')
Save All ->setAttribute('id', 'bulkImageUploadUpdateBtn')
</a>"; ->addExtraClass('ss-ui-action-constructive cms-panel-link')
$actions->push(new LiteralField('savebutton', $html)); ->setAttribute('data-icon', 'accept')
->setAttribute('data-url', $this->Link('update'))
->setUseButtonTag(true)
);
if($crumbs && $crumbs->count()>=2) if($crumbs && $crumbs->count()>=2)
{ {
$html = " $actions->push(
<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."\"> FormAction::create('SaveAndFinish', 'Save All & Finish')
Save All &amp; Finish ->setAttribute('id', 'bulkImageUploadUpdateFinishBtn')
</a>"; ->addExtraClass('ss-ui-action-constructive cms-panel-link')
$actions->push(new LiteralField('finishbutton', $html)); ->setAttribute('data-icon', 'accept')
->setAttribute('data-url', $this->Link('update'))
->setAttribute('data-return-url', $one_level_up->Link)
->setUseButtonTag(true)
);
} }
$html = " $actions->push(
<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=\"#\"> FormAction::create('Cancel', 'Cancel & Delete All')
Cancel &amp; Delete All ->setAttribute('id', 'bulkImageUploadUpdateCancelBtn')
</a>"; ->addExtraClass('ss-ui-action-destructive cms-panel-link')
$actions->push(new LiteralField('cancelbutton', $html)); ->setAttribute('data-icon', 'decline')
->setAttribute('data-url', $this->Link('cancel'))
->setUseButtonTag(true)
);
$uploadField = UploadField::create('BulkImageUploadField', ''); $uploadField = UploadField::create('BulkImageUploadField', '');
$uploadField->setConfig('previewMaxWidth', 40); $uploadField->setConfig('previewMaxWidth', 40);
$uploadField->setConfig('previewMaxHeight', 30); $uploadField->setConfig('previewMaxHeight', 30);
@ -207,7 +217,8 @@ class GridFieldBulkImageUpload_Request extends RequestHandler {
); );
$form->setTemplate('LeftAndMain_EditForm'); $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'); $form->setAttribute('data-pjax-fragment', 'CurrentForm Content');
if($crumbs && $crumbs->count()>=2){ 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%); 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(); $('.ss-uploadfield-files .ss-uploadfield-item-editform').show();
$(this).addClass('opened'); $(this).addClass('opened');
} }
e.preventDefault();
} }
}); });
@ -44,14 +45,24 @@
// start add-on behaviours // start add-on behaviours
$.entwine('colymba', function($) { $.entwine('colymba', function($) {
$('.bulkImageUploadUpdateForm input.text, .bulkImageUploadUpdateForm input.checkbox, .bulkImageUploadUpdateForm select, .bulkImageUploadUpdateForm textarea').entwine({ $('.bulkImageUploadUpdateForm input.text, .bulkImageUploadUpdateForm input.checkbox, .bulkImageUploadUpdateForm select, .bulkImageUploadUpdateForm textarea').entwine({
onchange: function(){ 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') ) { if ( !$(form).hasClass('hasUpdate') ) {
$(form).addClass('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 url = $(this).data('url');
var cacheBuster = new Date().getTime(); var cacheBuster = new Date().getTime();
if ( $(formsWithUpadtes).length > 0 ) $(this).addClass('loading');
$(formsWithUpadtes).each(function(){ $(formsWithUpadtes).each(function(){
var data = $(this).serialize(); var data = $(this).serialize();
$.ajax({ $.ajax({
@ -77,31 +90,32 @@
context: $(this) context: $(this)
}).done(function() { }).done(function() {
var btn = $('a#bulkImageUploadUpdateBtn'); var btn = $('#bulkImageUploadUpdateBtn');
var totalForms = parseInt( $(btn).data('formsToUpdate') ); var totalForms = parseInt( $(btn).data('formsToUpdate') );
var counter = parseInt( $(btn).data('completedForms') ); var counter = parseInt( $(btn).data('completedForms') );
counter = counter + 1; counter = counter + 1;
$(btn).data('completedForms', counter); $(btn).data('completedForms', counter);
$(this).removeClass('hasUpdate'); $(this).removeClass('hasUpdate');
$(this).parents('li').find('.ss-uploadfield-item-status').html('Updated'); $(this).parents('li').find('.ss-uploadfield-item-status').removeClass('dirty').addClass('updated').html('Updated');
$(this).parents('li').find('.ss-uploadfield-item-info').addClass('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).parents('li').find('.ss-uploadfield-item-editform').css('display', 'none');
$(this).removeClass('hasUpdate'); $(this).removeClass('hasUpdate');
if ( counter == totalForms ) { if ( counter == totalForms ) {
$('#bulkImageUploadUpdateFinishBtn').removeClass('dirty'); $('#bulkImageUploadUpdateFinishBtn').removeClass('dirty');
if ( $(this).hasClass('doFinish') ) { $('#bulkImageUploadUpdateBtn').data('completedForms', 0);
$('#bulkImageUploadUpdateFinishBtn').clcik(); $('#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') ) { if ( $(this).hasClass('dirty') ) {
$('#bulkImageUploadUpdateBtn').addClass('doFinish'); $('#bulkImageUploadUpdateBtn').addClass('doFinish');
$('#bulkImageUploadUpdateBtn').click(); $('#bulkImageUploadUpdateBtn').click();
e.stopImmediatePropagation();
} }
} }
}); });
@ -139,10 +152,8 @@
} }
}); });
}); });
e.stopImmediatePropagation();
e.preventDefault();
} }
}); });