From a7336e9dca0c58a025ca722a60818e5e44dfa8c4 Mon Sep 17 00:00:00 2001 From: Naomi Guyer Date: Thu, 17 May 2012 13:22:24 +1200 Subject: [PATCH] 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 --- css/AssetUploadField.css | 7 --- css/GridField.css | 8 +-- forms/gridfield/GridField.php | 6 +- forms/gridfield/GridFieldButtonRow.php | 17 ++++++ forms/gridfield/GridFieldConfig.php | 8 ++- forms/gridfield/GridFieldToolbarHeader.php | 5 +- scss/GridField.scss | 3 + scss/_elementMixins.scss | 22 +++---- scss/_mixins.scss | 61 ++++++++++++++++++++ templates/Includes/GridFieldButtonRow.ss | 4 ++ templates/Includes/GridFieldToolbarHeader.ss | 2 - templates/Includes/GridField_print.ss | 2 +- 12 files changed, 110 insertions(+), 35 deletions(-) create mode 100644 forms/gridfield/GridFieldButtonRow.php create mode 100644 scss/_mixins.scss create mode 100644 templates/Includes/GridFieldButtonRow.ss diff --git a/css/AssetUploadField.css b/css/AssetUploadField.css index f4da913cc..a69f81068 100644 --- a/css/AssetUploadField.css +++ b/css/AssetUploadField.css @@ -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; } diff --git a/css/GridField.css b/css/GridField.css index 2360caef6..94669d0b5 100644 --- a/css/GridField.css +++ b/css/GridField.css @@ -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; } diff --git a/forms/gridfield/GridField.php b/forms/gridfield/GridField.php index 48af9ccac..20aff06b1 100755 --- a/forms/gridfield/GridField.php +++ b/forms/gridfield/GridField.php @@ -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'] ); diff --git a/forms/gridfield/GridFieldButtonRow.php b/forms/gridfield/GridFieldButtonRow.php new file mode 100644 index 000000000..1f7a16346 --- /dev/null +++ b/forms/gridfield/GridFieldButtonRow.php @@ -0,0 +1,17 @@ + $gridField->renderWith('GridFieldButtonRow') + ); + } +} diff --git a/forms/gridfield/GridFieldConfig.php b/forms/gridfield/GridFieldConfig.php index f5849d254..118b6de0e 100644 --- a/forms/gridfield/GridFieldConfig.php +++ b/forms/gridfield/GridFieldConfig.php @@ -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()); diff --git a/forms/gridfield/GridFieldToolbarHeader.php b/forms/gridfield/GridFieldToolbarHeader.php index aa2a0b85b..54b369adc 100644 --- a/forms/gridfield/GridFieldToolbarHeader.php +++ b/forms/gridfield/GridFieldToolbarHeader.php @@ -1,10 +1,7 @@ div { margin-bottom: $gf_grid_y*3; + &.addNewGridFieldButton{ + margin-bottom:$gf_grid_y; + } } &[data-selectable] { diff --git a/scss/_elementMixins.scss b/scss/_elementMixins.scss index f31e2bb6f..c31784366 100644 --- a/scss/_elementMixins.scss +++ b/scss/_elementMixins.scss @@ -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; diff --git a/scss/_mixins.scss b/scss/_mixins.scss new file mode 100644 index 000000000..f31e2bb6f --- /dev/null +++ b/scss/_mixins.scss @@ -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; + } +} \ No newline at end of file diff --git a/templates/Includes/GridFieldButtonRow.ss b/templates/Includes/GridFieldButtonRow.ss new file mode 100644 index 000000000..04b3cf264 --- /dev/null +++ b/templates/Includes/GridFieldButtonRow.ss @@ -0,0 +1,4 @@ +
+
\$DefineFragment(toolbar-header-left)
+
\$DefineFragment(toolbar-header-right)
+
\ No newline at end of file diff --git a/templates/Includes/GridFieldToolbarHeader.ss b/templates/Includes/GridFieldToolbarHeader.ss index 31548aa26..5515c43c8 100644 --- a/templates/Includes/GridFieldToolbarHeader.ss +++ b/templates/Includes/GridFieldToolbarHeader.ss @@ -1,7 +1,5 @@ <% if Title %>

$Title

<% end_if %> -
\$DefineFragment(toolbar-header-left)
-
\$DefineFragment(toolbar-header-right)
\ No newline at end of file diff --git a/templates/Includes/GridField_print.ss b/templates/Includes/GridField_print.ss index df1a9779c..80450a9cb 100644 --- a/templates/Includes/GridField_print.ss +++ b/templates/Includes/GridField_print.ss @@ -1,4 +1,4 @@ - + <% if $Title %>$Title<% end_if %>