Merge pull request #2136 from nedmas/fix-remove-export-button-padding

FIX: GridField button styling
This commit is contained in:
Ingo Schommer 2013-08-30 00:24:21 -07:00
commit 20b49e215c
7 changed files with 27 additions and 12 deletions

View File

@ -67,7 +67,8 @@ class SecurityAdmin extends LeftAndMain implements PermissionProvider {
false,
Member::get(),
$memberListConfig = GridFieldConfig_RecordEditor::create()
->addComponent(new GridFieldExportButton())
->addComponent(new GridFieldButtonRow('after'))
->addComponent(new GridFieldExportButton('buttons-after-left'))
)->addExtraClass("members_grid");
$memberListConfig->getComponentByType('GridFieldDetailForm')->setValidator(new Member_Validator());

View File

@ -14,6 +14,10 @@ Used in side panels and action tabs
.cms .ss-gridfield > div { margin-bottom: 36px; }
.cms .ss-gridfield > div.addNewGridFieldButton { margin-bottom: 0; }
.cms .ss-gridfield > div.addNewGridFieldButton .action { margin-bottom: 12px; }
.cms .ss-gridfield > div.ss-gridfield-buttonrow-before { margin-bottom: 0; }
.cms .ss-gridfield > div.ss-gridfield-buttonrow-before .action { margin-bottom: 12px; }
.cms .ss-gridfield > div.ss-gridfield-buttonrow-after { margin-bottom: 0; }
.cms .ss-gridfield > div.ss-gridfield-buttonrow-after .action { margin-top: 12px; }
.cms .ss-gridfield[data-selectable] tr.ui-selected, .cms .ss-gridfield[data-selectable] tr.ui-selecting { background: #FFFAD6 !important; }
.cms .ss-gridfield[data-selectable] td { cursor: pointer; }
.cms .ss-gridfield span button#action_gridfield_relationfind { display: none; }
@ -29,7 +33,7 @@ Used in side panels and action tabs
.cms .ss-gridfield .add-existing-autocompleter { width: 500px; }
.cms .ss-gridfield .add-existing-autocompleter span { display: -moz-inline-stack; display: inline-block; vertical-align: top; *vertical-align: auto; zoom: 1; *display: inline; }
.cms .ss-gridfield .add-existing-autocompleter input.relation-search { width: 270px; margin-bottom: 12px; }
.cms .ss-gridfield .grid-csv-button, .cms .ss-gridfield .grid-print-button { margin-bottom: 12px; display: -moz-inline-stack; display: inline-block; vertical-align: middle; *vertical-align: auto; zoom: 1; *display: inline; }
.cms .ss-gridfield .grid-csv-button, .cms .ss-gridfield .grid-print-button { font-size: 12px; margin-bottom: 0; display: -moz-inline-stack; display: inline-block; vertical-align: middle; *vertical-align: auto; zoom: 1; *display: inline; }
.cms table.ss-gridfield-table { display: table; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; padding: 0; border-collapse: separate; border-bottom: 0 none; width: 100%; }
.cms table.ss-gridfield-table thead { color: #323e46; background: transparent; }
.cms table.ss-gridfield-table thead tr.filter-header .fieldgroup { max-width: 512px; }
@ -127,4 +131,3 @@ Used in side panels and action tabs
.cms table.ss-gridfield-table tr.last td { border-bottom: 0 none; }
.cms table.ss-gridfield-table td:first-child { border-left: 1px solid rgba(0, 0, 0, 0.1); }
.cms table.ss-gridfield-table td:last-child { border-right: 1px solid rgba(0, 0, 0, 0.1); }
.cms .grid-bottom-button { margin-top: 12px; }

View File

@ -21,6 +21,7 @@ class GridFieldButtonRow implements GridField_HTMLProvider {
public function getHTMLFragments( $gridField) {
$data = new ArrayData(array(
"TargetFragmentName" => $this->targetFragment,
"LeftFragment" => "\$DefineFragment(buttons-{$this->targetFragment}-left)",
"RightFragment" => "\$DefineFragment(buttons-{$this->targetFragment}-right)",
));

View File

@ -53,7 +53,7 @@ class GridFieldExportButton implements GridField_HTMLProvider, GridField_ActionP
$button->setAttribute('data-icon', 'download-csv');
$button->addExtraClass('no-ajax');
return array(
$this->targetFragment => '<p class="grid-bottom-button grid-csv-button">' . $button->Field() . '</p>',
$this->targetFragment => '<p class="grid-csv-button">' . $button->Field() . '</p>',
);
}

View File

@ -45,6 +45,18 @@ $gf_grid_x: 16px;
.action {
margin-bottom:$gf_grid_y;
}
}
&.ss-gridfield-buttonrow-before{
margin-bottom: 0;
.action {
margin-bottom:$gf_grid_y;
}
}
&.ss-gridfield-buttonrow-after{
margin-bottom: 0;
.action {
margin-top:$gf_grid_y;
}
}
}
@ -116,7 +128,8 @@ $gf_grid_x: 16px;
width: 500px;
}
.grid-csv-button, .grid-print-button {
margin-bottom: $gf_grid_y;
margin-bottom: 0;
font-size: $font-base-size;
@include inline-block();
}
}
@ -641,8 +654,4 @@ $gf_grid_x: 16px;
border-right: 1px solid $gf_colour_border;
}
}
.grid-bottom-button {
margin-top:$gf_grid_y;
}
}

View File

@ -96,8 +96,9 @@ class Group extends DataObject {
if($this->ID) {
$group = $this;
$config = new GridFieldConfig_RelationEditor();
$config->addComponents(new GridFieldExportButton('after'));
$config->addComponents(new GridFieldPrintButton('after'));
$config->addComponent(new GridFieldButtonRow('after'));
$config->addComponents(new GridFieldExportButton('buttons-after-left'));
$config->addComponents(new GridFieldPrintButton('buttons-after-left'));
$config->getComponentByType('GridFieldAddExistingAutocompleter')
->setResultsFormat('$Title ($Email)')->setSearchFields(array('FirstName', 'Surname', 'Email'));
$config->getComponentByType('GridFieldDetailForm')

View File

@ -1,4 +1,4 @@
<div class="addNewGridFieldButton ss-gridfield-buttonrow">
<div class="ss-gridfield-buttonrow ss-gridfield-buttonrow-{$TargetFragmentName}">
<div class="left">$LeftFragment</div>
<div class="right">$RightFragment</div>
</div>