mirror of
https://github.com/colymba/GridFieldBulkEditingTools.git
synced 2024-10-22 11:05:57 +02:00
UI behavior and visual enhancements
Switch Actions to FormActions buttons and add colored visual hints about items status.
This commit is contained in:
parent
c67408bb90
commit
079fb7fa36
@ -159,27 +159,37 @@ 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 & 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 & 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);
|
||||||
@ -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){
|
||||||
|
@ -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;
|
||||||
|
}
|
@ -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();
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
@ -47,11 +48,21 @@
|
|||||||
|
|
||||||
$('.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();
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
@ -141,8 +154,6 @@
|
|||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
e.stopImmediatePropagation();
|
|
||||||
e.preventDefault();
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user