Add bulk edit form header + toggle btn

This commit is contained in:
Thierry Francois 2014-05-02 00:03:43 +03:00
parent c3af2d392d
commit b16ee50233
4 changed files with 166 additions and 37 deletions

View File

@ -58,9 +58,28 @@ class GridFieldBulkActionEditHandler extends GridFieldBulkActionHandler
->setAttribute('src', '')//changes type to image so isn't hooked by default actions handlers
);
$recordList = $this->getRecordIDList();
$editedRecordList = new FieldList();
$config = $this->component->getConfig();
$recordList = $this->getRecordIDList();
$recordsFieldList = new FieldList();
$config = $this->component->getConfig();
$editingCount = count($recordList);
$singleton = singleton($this->gridField->getModelClass());
$editingClassName = (($editingCount > 1) ? $singleton->i18n_plural_name() : $singleton->i18n_singular_name());
$header = LiteralField::create(
'bulkEditHeader',
'<h1 id="bulkEditHeader">' . _t('GRIDFIELD_BULKMANAGER_EDIT_HANDLER.HEADER',
'Editing {count} {class}',
array(
'count' => $editingCount,
'class' => $editingClassName
)
) . '</h1>'
);
$recordsFieldList->push($header);
$toggle = LiteralField::create('bulkEditToggle', '<span id="bulkEditToggle">' . _t('GRIDFIELD_BULKMANAGER_EDIT_HANDLER.TOGGLE_ALL_LINK', 'Show/Hide all') . '</span>');
$recordsFieldList->push($toggle);
foreach ( $recordList as $id )
{
@ -71,7 +90,7 @@ class GridFieldBulkActionEditHandler extends GridFieldBulkActionHandler
$recordCMSDataFields['ID'] = new HiddenField('ID', '', $id);
$recordCMSDataFields = GridFieldBulkEditingHelper::escapeFormFieldsName( $recordCMSDataFields, $id );
$editedRecordList->push(
$recordsFieldList->push(
ToggleCompositeField::create(
'GFBM_'.$id,
DataObject::get_by_id($this->gridField->list->dataClass, $id)->getTitle(),
@ -84,7 +103,7 @@ class GridFieldBulkActionEditHandler extends GridFieldBulkActionHandler
$form = new Form(
$this,
'bulkEditingForm',
$editedRecordList,
$recordsFieldList,
$actions
);

View File

@ -1,33 +1,41 @@
/**
* Bulk editing styles
*/
.bulkEditingForm.hasUpdate .ui-accordion-header
{
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%);
}
#bulkEditHeader {
float: left;
width: 85%;
margin: 40px 0 20px 0;
font-size: 30px;
font-weight: bold; }
.bulkEditingForm.updated .ui-accordion-header
{
background-color: #a4ca3a;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #a4ca3a), color-stop(100%, #59781D));
background-image: -webkit-linear-gradient(top, #a4ca3a 0%, #59781D 100%);
background-image: -moz-linear-gradient(top, #a4ca3a 0%, #59781D 100%);
background-image: -o-linear-gradient(top, #a4ca3a 0%, #59781D 100%);
background-image: -ms-linear-gradient(top, #a4ca3a 0%, #59781D 100%);
background-image: linear-gradient(top, #a4ca3a 0%, #59781D 100%);
}
#bulkEditToggle {
float: right;
clear: right;
width: 10%;
margin: 40px 0 20px 0;
text-decoration: underline;
cursor: pointer; }
.bulkEditingForm.hasUpdate .ui-accordion-header a,
.bulkEditingForm.updated .ui-accordion-header a
{
color: #fff;
text-shadow: none;
}
.bulkEditingForm {
position: relative;
float: left;
width: 100%; }
.bulkEditingForm.hasUpdate .ui-accordion-header {
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%); }
.bulkEditingForm.hasUpdate .ui-accordion-header a {
color: #fff;
text-shadow: none; }
.bulkEditingForm.updated .ui-accordion-header {
background-color: #a4ca3a;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #a4ca3a), color-stop(100%, #59781d));
background-image: -webkit-linear-gradient(top, #a4ca3a 0%, #59781d 100%);
background-image: -moz-linear-gradient(top, #a4ca3a 0%, #59781d 100%);
background-image: -o-linear-gradient(top, #a4ca3a 0%, #59781d 100%);
background-image: -ms-linear-gradient(top, #a4ca3a 0%, #59781d 100%);
background-image: linear-gradient(top, #a4ca3a 0%, #59781d 100%); }
.bulkEditingForm.updated .ui-accordion-header a {
color: #fff;
text-shadow: none; }

View File

@ -0,0 +1,66 @@
#bulkEditHeader
{
float: left;
width: 85%;
margin: 40px 0 20px 0;
font-size: 30px;
font-weight: bold;
}
#bulkEditToggle
{
float: right;
clear: right;
width: 10%;
margin: 40px 0 20px 0;
text-decoration: underline;
cursor: pointer;
}
.bulkEditingForm
{
position: relative;
float: left;
width: 100%;
&.hasUpdate .ui-accordion-header
{
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%);
a
{
color: #fff;
text-shadow: none;
}
}
&.updated .ui-accordion-header
{
background-color: #a4ca3a;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #a4ca3a), color-stop(100%, #59781D));
background-image: -webkit-linear-gradient(top, #a4ca3a 0%, #59781D 100%);
background-image: -moz-linear-gradient(top, #a4ca3a 0%, #59781D 100%);
background-image: -o-linear-gradient(top, #a4ca3a 0%, #59781D 100%);
background-image: -ms-linear-gradient(top, #a4ca3a 0%, #59781D 100%);
background-image: linear-gradient(top, #a4ca3a 0%, #59781D 100%);
a
{
color: #fff;
text-shadow: none;
}
}
}

View File

@ -1,5 +1,41 @@
(function($) {
$.entwine('colymba', function($) {
$.entwine('colymba', function($) {
$('#bulkEditToggle') .entwine({
onmatch: function(){},
onunmatch: function(){},
onclick: function(e)
{
var toggleFields = $(this).parents('#Form_bulkEditingForm').find('.ss-toggle h4'),
state = this.data('state')
;
if ( !state || state === 'close' )
{
state = 'open';
}
else {
state = 'close';
}
toggleFields.each(function()
{
var $this = $(this);
if ( state === 'open' && !$this.hasClass('ui-state-active') )
{
$this.click();
}
if ( state === 'close' && $this.hasClass('ui-state-active') )
{
$this.click();
}
});
this.data('state', state);
}
});
$('.bulkEditingFieldHolder').entwine({