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

45
code/GridFieldBulkImageUpload_Request.php
View File

@ -159,27 +159,37 @@ 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);
@ -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;
}

35
javascript/GridFieldBulkImageUpload.js
View File

@ -27,6 +27,7 @@
$('.ss-uploadfield-files .ss-uploadfield-item-editform').show();
$(this).addClass('opened');
}
e.preventDefault();
}
});
@ -47,11 +48,21 @@
$('.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');
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();
}
}
});
@ -141,8 +154,6 @@
});
});
e.stopImmediatePropagation();
e.preventDefault();
}
});