tonyair
/
silverstripe-framework
mirror of https://github.com/silverstripe/silverstripe-framework
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

ENHANCEMENT: Move GridField buttons out of table (fixes 7213) 

* Added a separate component to grid field to hold buttons.
* Updated templates for changes
* Updated comments
This commit is contained in:
Naomi Guyer 2012-05-17 13:22:24 +12:00
parent f348141cfd
commit a7336e9dca
12 changed files with 110 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
css/AssetUploadField.css
View File

@ -4,13 +4,6 @@
/** ----------------------------------------------- Typography. ------------------------------------------------ */
/** ----------------------------------------------- Grid Units (px) We have a vertical rhythm that the grid is based off both x (=horizontal) and y (=vertical). All internal padding and margins are scaled to this and accounting for paragraphs ------------------------------------------------ */
/** ----------------------------------------------- Application Logo (CMS Logo) Must be 24px x 24px ------------------------------------------------ */
/** This file contains mixins relating to specific functionality Mixins should be stored here rather than individual files */
/*Mixin generates the generic button styling for the gridfield*/
/**
Mixin creates a transparent button with a dropdown arrow,
as is used for files in the files up-load area. The arrows
themselves are added in the _style file
**/
#AssetUploadField { border-bottom: 0; -moz-box-shadow: none; -webkit-box-shadow: none; -o-box-shadow: none; box-shadow: none; }
body.cms.ss-uploadfield-edit-iframe { padding: 16px; overflow: auto; }

8
css/GridField.css
View File

@ -11,14 +11,8 @@
/** ----------------------------------------------- Typography. ------------------------------------------------ */
/** ----------------------------------------------- Grid Units (px) We have a vertical rhythm that the grid is based off both x (=horizontal) and y (=vertical). All internal padding and margins are scaled to this and accounting for paragraphs ------------------------------------------------ */
/** ----------------------------------------------- Application Logo (CMS Logo) Must be 24px x 24px ------------------------------------------------ */
/** This file contains mixins relating to specific functionality Mixins should be stored here rather than individual files */
/*Mixin generates the generic button styling for the gridfield*/
/**
Mixin creates a transparent button with a dropdown arrow,
as is used for files in the files up-load area. The arrows
themselves are added in the _style file
**/
.cms .ss-gridfield > div { margin-bottom: 36px; }
.cms .ss-gridfield > div.addNewGridFieldButton { margin-bottom: 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; }

6
forms/gridfield/GridField.php
View File

@ -226,6 +226,7 @@ class GridField extends FormField {
$content = array(
"before" => "",
"after" => "",
"buttons" => "",
"header" => "",
"footer" => "",
);
@ -250,7 +251,7 @@ class GridField extends FormField {
// Circular dependencies are detected by disallowing any item to be deferred more than 5 times
// It's a fairly crude algorithm but it works
$fragmentDefined = array('header' => true, 'footer' => true, 'before' => true, 'after' => true);
$fragmentDefined = array('header' => true, 'buttons'=>true, 'footer' => true, 'before' => true, 'after' => true);
reset($content);
while(list($k,$v) = each($content)) {
if(preg_match_all('/\$DefineFragment\(([a-z0-9\-_]+)\)/i', $v, $matches)) {
@ -350,9 +351,12 @@ class GridField extends FormField {
'cellpadding' => '0',
'cellspacing' => '0'
);
return
$this->createTag('fieldset', $attrs,
$content['before'] .
$content['buttons'] .
$this->createTag('table', $tableAttrs, $head."\n".$foot."\n".$body) .
$content['after']
);

17
forms/gridfield/GridFieldButtonRow.php Normal file
View File

@ -0,0 +1,17 @@
<?php
/**
* Adding this class to a {@link GridFieldConfig} of a {@link GridField} adds a buttonrow to that field.
* The button row provides a space for actions on this grid.
*
* This row provides two new HTML fragment spaces: 'toolbar-header-left' and 'toolbar-header-right'.
*
* @package framework
* @subpackage gridfield
*/
class GridFieldButtonRow implements GridField_HTMLProvider {
public function getHTMLFragments( $gridField) {
return array(
'buttons' => $gridField->renderWith('GridFieldButtonRow')
);
}
}

8
forms/gridfield/GridFieldConfig.php
View File

@ -191,8 +191,11 @@ class GridFieldConfig_RecordEditor extends GridFieldConfig {
* @param int $itemsPerPage - How many items per page should show up
*/
public function __construct($itemsPerPage=null) {
$this->addComponent(new GridFieldToolbarHeader());
$this->addComponent(new GridFieldAddNewButton('toolbar-header-right'));
$this->addComponent(new GridFieldButtonRow());
$this->addComponent(new GridFieldAddNewButton('toolbar-header-left'));
$this->addComponent($sort = new GridFieldSortableHeader());
$this->addComponent($filter = new GridFieldFilterHeader());
$this->addComponent(new GridFieldDataColumns());
@ -240,7 +243,8 @@ class GridFieldConfig_RelationEditor extends GridFieldConfig {
public function __construct($itemsPerPage=null) {
$this->addComponent(new GridFieldToolbarHeader());
$this->addComponent(new GridFieldAddExistingAutocompleter('toolbar-header-left'));
$this->addComponent(new GridFieldAddNewButton('toolbar-header-right'));
$this->addComponent(new GridFieldButtonRow());
$this->addComponent(new GridFieldAddNewButton('toolbar-header-left'));
$this->addComponent($sort = new GridFieldSortableHeader());
$this->addComponent($filter = new GridFieldFilterHeader());
$this->addComponent(new GridFieldDataColumns());

5
forms/gridfield/GridFieldToolbarHeader.php
View File

@ -1,10 +1,7 @@
<?php
/**
* Adding this class to a {@link GridFieldConfig} of a {@link GridField} adds a header title to that field.
* The header serves double duty of displaying the name of the data the GridField is showing and
* providing a space for actions on this grid.
*
* This header provides two new HTML fragment spaces: 'toolbar-header-left' and 'toolbar-header-right'.
* The header serves to display the name of the data the GridField is showing.
*
* @package framework
* @subpackage gridfield

3
scss/GridField.scss
View File

@ -45,6 +45,9 @@ $gf_grid_x: 16px;
.ss-gridfield {
& > div {
margin-bottom: $gf_grid_y*3;
&.addNewGridFieldButton{
margin-bottom:$gf_grid_y;
}
}
&[data-selectable] {

22
scss/_elementMixins.scss
View File

@ -1,11 +1,11 @@
/**
* This file contains mixins relating to specific functionality
*
* Mixins should be stored here rather than individual files
*/
//**
// * This file contains mixins relating to specific functionality
// *
// * Mixins should be stored here rather than individual files
// */
/*Mixin generates the generic button styling for the gridfield*/
//*Mixin generates the generic button styling for the gridfield*/
@mixin gridFieldButtons{
border:none;
display:block;
@ -15,11 +15,11 @@
}
/**
Mixin creates a transparent button with a dropdown arrow,
as is used for files in the files up-load area. The arrows
themselves are added in the _style file
**/
//**
// Mixin creates a transparent button with a dropdown arrow,
// as is used for files in the files up-load area. The arrows
// themselves are added in the _style file
//**/
@mixin ss-uploadfield-editButton{
&.ss-uploadfield-item-edit {
opacity:0.9;

61
scss/_mixins.scss Normal file
View File

@ -0,0 +1,61 @@
/**
* This file contains mixins relating to specific functionality
*
* Mixins should be stored here rather than individual files
*/
/*Mixin generates the generic button styling for the gridfield*/
@mixin gridFieldButtons{
border:none;
display:block;
text-indent:-9999em;
width:30px;
height:25px; //match the height of the input field
}
/**
Mixin creates a transparent button with a dropdown arrow,
as is used for files in the files up-load area. The arrows
themselves are added in the _style file
**/
@mixin ss-uploadfield-editButton{
&.ss-uploadfield-item-edit {
opacity:0.9;
padding-top: 3px;
padding-bottom: 0;
height:100%;
@include border-radius(0);
&.ui-state-hover{
background:none;
opacity:1;
span.toggle-details{
opacity:1;
}
}
span.toggle-details{
opacity:0.9;
margin-left:3px;
display: inline-block;
width: 5px;
height: 100%;
cursor: pointer;
.toggle-details-icon {
margin-top:1px;
display: inline-block;
width: 8px;
height: 8px;
vertical-align: middle;
&.opened {
margin-top:0;
}
}
}
}
.ui-icon {
display: none;
}
}

4
templates/Includes/GridFieldButtonRow.ss Normal file
View File

@ -0,0 +1,4 @@
<div class="addNewGridFieldButton">
<div class="left">\$DefineFragment(toolbar-header-left)</div>
<div class="right">\$DefineFragment(toolbar-header-right)</div>
</div>

2
templates/Includes/GridFieldToolbarHeader.ss
View File

@ -1,7 +1,5 @@
<tr class="title">
<th colspan="$ColumnCount">
<% if Title %><h2>$Title</h2><% end_if %>
<div class="left">\$DefineFragment(toolbar-header-left)</div>
<div class="right">\$DefineFragment(toolbar-header-right)</div>
</th>
</tr>

2
templates/Includes/GridField_print.ss
View File

@ -1,4 +1,4 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<% if $Title %><title>$Title</title><% end_if %>