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

ENHANCEMENT: Gridfield usability (fixes 7215) 

1. Modified gridfield to use default colours
2. Added ability to show and hide the filter
3. Design changes to icons used
4. Gridfield template fixes: Took out broken mark-up from templates
(spans were being inserted inside spans), and adjusted styles. Added
extra class to template
5. Added "filter by ..." placeholder text to input fields
This commit is contained in:
Naomi Guyer 2012-05-16 12:18:23 +12:00
parent 5a023f985d
commit 458171ff92
14 changed files with 259 additions and 174 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
admin/css/ie7.css
View File

@ -8,6 +8,7 @@
.cms .ss-ui-button.ui-state-hover { background-color: #f3f3f3; }
.cms .ss-ui-button.ss-ui-action-constructive { background-color: #1f9433; }
.cms .ss-ui-button.ss-ui-action-constructive.ui-state-hover { background-color: #23a93a; }
.cms .ss-ui-button.ss-gridfield-button-filter { background: #55a4d2 url(../../images/icons/filter-icons.png) no-repeat -14px 4px; }
.cms-content-toolbar { border-bottom: 1px solid #c9cdce; }
@ -72,6 +73,8 @@ html { overflow: hidden; }
.pagination-page-number { position: relative; bottom: 10px; right: 10px; }
.pagination-page-number input { width: 45px; padding: 0px; position: relative; bottom: 2px; }
input.ss-gridfield-sort { padding-top: 0 !important; padding-bottom: 0 !important; }
table.ss-gridfield-table tr.title th h2 { float: left; }
table.ss-gridfield-table tr.ss-gridfield-item.odd { background: white; }

1
admin/css/ie8.css
View File

@ -8,6 +8,7 @@
.cms .ss-ui-button.ui-state-hover { background-color: #f3f3f3; }
.cms .ss-ui-button.ss-ui-action-constructive { background-color: #1f9433; }
.cms .ss-ui-button.ss-ui-action-constructive.ui-state-hover { background-color: #23a93a; }
.cms .ss-ui-button.ss-gridfield-button-filter { background: #55a4d2 url(../../images/icons/filter-icons.png) no-repeat -14px 4px; }
.cms-content-toolbar { border-bottom: 1px solid #c9cdce; }

63
admin/css/screen.css
View File

@ -29,21 +29,9 @@ If more variables exist in the future, consider creating a variables file.*/
/** ----------------------------------------------- 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 ------------------------------------------------ */
/** ----------------------------- Custom mixins ------------------------------ */
/** This file contains generic mixins which we use throughout the admin panels. Mixins should be stored here rather than individual files so that we can keep. */
/** ---------------------------------------------------- Hides the overflowing text from a container Note: you must define a width on the element with this overflow. ----------------------------------------------------- */
/** ---------------------------------------------------- Clear the properties of sub form fields. Often needed for nested form fields and ----------------------------------------------------- */
/** ---------------------------------------------------- Double tone borders http://daverupert.com/2011/06/two-tone-borders-with-css3/ ----------------------------------------------------- */
/**----------------------------------------------------
Clearfix mixin clears the float of it's parent element
----------------------------------------------------**/
/**
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
**/
/** ----------------------------- Sprite images ----------------------------- */
/** Helper SCSS file for generating sprites for the interface. */
.btn-icon-sprite, .ui-state-default .btn-icon-accept, .ui-widget-content .btn-icon-accept, .ui-state-default .btn-icon-accept_disabled, .ui-widget-content .btn-icon-accept_disabled, .ui-state-default .btn-icon-add, .ui-widget-content .btn-icon-add, .ui-state-default .btn-icon-add_disabled, .ui-widget-content .btn-icon-add_disabled, .ui-state-default .btn-icon-addpage, .ui-widget-content .btn-icon-addpage, .ui-state-default .btn-icon-addpage_disabled, .ui-widget-content .btn-icon-addpage_disabled, .ui-state-default .btn-icon-arrow-circle-135-left, .ui-widget-content .btn-icon-arrow-circle-135-left, .ui-state-default .btn-icon-arrow-circle-double, .ui-widget-content .btn-icon-arrow-circle-double, .ui-state-default .btn-icon-back, .ui-widget-content .btn-icon-back, .ui-state-default .btn-icon-back_disabled, .ui-widget-content .btn-icon-back_disabled, .ui-state-default .btn-icon-chain--arrow, .ui-widget-content .btn-icon-chain--arrow, .ui-state-default .btn-icon-chain--exclamation, .ui-widget-content .btn-icon-chain--exclamation, .ui-state-default .btn-icon-chain--minus, .ui-widget-content .btn-icon-chain--minus, .ui-state-default .btn-icon-chain--pencil, .ui-widget-content .btn-icon-chain--pencil, .ui-state-default .btn-icon-chain--plus, .ui-widget-content .btn-icon-chain--plus, .ui-state-default .btn-icon-chain-small, .ui-widget-content .btn-icon-chain-small, .ui-state-default .btn-icon-chain-unchain, .ui-widget-content .btn-icon-chain-unchain, .ui-state-default .btn-icon-chain, .ui-widget-content .btn-icon-chain, .ui-state-default .btn-icon-cross-circle, .ui-widget-content .btn-icon-cross-circle, .ui-state-default .btn-icon-cross-circle_disabled, .ui-widget-content .btn-icon-cross-circle_disabled, .ui-state-default .btn-icon-decline, .ui-widget-content .btn-icon-decline, .ui-state-default .btn-icon-decline_disabled, .ui-widget-content .btn-icon-decline_disabled, .ui-state-default .btn-icon-document--pencil, .ui-widget-content .btn-icon-document--pencil, .ui-state-default .btn-icon-download-csv, .ui-widget-content .btn-icon-download-csv, .ui-state-default .btn-icon-drive-upload, .ui-widget-content .btn-icon-drive-upload, .ui-state-default .btn-icon-drive-upload_disabled, .ui-widget-content .btn-icon-drive-upload_disabled, .ui-state-default .btn-icon-grid_print, .ui-widget-content .btn-icon-grid_print, .ui-state-default .btn-icon-magnifier, .ui-widget-content .btn-icon-magnifier, .ui-state-default .btn-icon-minus-circle, .ui-widget-content .btn-icon-minus-circle, .ui-state-default .btn-icon-minus-circle_disabled, .ui-widget-content .btn-icon-minus-circle_disabled, .ui-state-default .btn-icon-navigation, .ui-widget-content .btn-icon-navigation, .ui-state-default .btn-icon-navigation_disabled, .ui-widget-content .btn-icon-navigation_disabled, .ui-state-default .btn-icon-network-cloud, .ui-widget-content .btn-icon-network-cloud, .ui-state-default .btn-icon-network-cloud_disabled, .ui-widget-content .btn-icon-network-cloud_disabled, .ui-state-default .btn-icon-pencil, .ui-widget-content .btn-icon-pencil, .ui-state-default .btn-icon-pencil_disabled, .ui-widget-content .btn-icon-pencil_disabled, .ui-state-default .btn-icon-plug-disconnect-prohibition, .ui-widget-content .btn-icon-plug-disconnect-prohibition, .ui-state-default .btn-icon-plug-disconnect-prohibition_disabled, .ui-widget-content .btn-icon-plug-disconnect-prohibition_disabled, .ui-state-default .btn-icon-preview, .ui-widget-content .btn-icon-preview, .ui-state-default .btn-icon-preview_disabled, .ui-widget-content .btn-icon-preview_disabled, .ui-state-default .btn-icon-settings, .ui-widget-content .btn-icon-settings, .ui-state-default .btn-icon-settings_disabled, .ui-widget-content .btn-icon-settings_disabled, .ui-state-default .btn-icon-unpublish, .ui-widget-content .btn-icon-unpublish, .ui-state-default .btn-icon-unpublish_disabled, .ui-widget-content .btn-icon-unpublish_disabled { background: url('../images/btn-icon-sf90be001ed.png') no-repeat; }
.btn-icon-sprite, .ui-state-default .btn-icon-accept, .ui-widget-content .btn-icon-accept, .ui-state-default .btn-icon-accept_disabled, .ui-widget-content .btn-icon-accept_disabled, .ui-state-default .btn-icon-add, .ui-widget-content .btn-icon-add, .ui-state-default .btn-icon-add_disabled, .ui-widget-content .btn-icon-add_disabled, .ui-state-default .btn-icon-addpage, .ui-widget-content .btn-icon-addpage, .ui-state-default .btn-icon-addpage_disabled, .ui-widget-content .btn-icon-addpage_disabled, .ui-state-default .btn-icon-arrow-circle-135-left, .ui-widget-content .btn-icon-arrow-circle-135-left, .ui-state-default .btn-icon-arrow-circle-double, .ui-widget-content .btn-icon-arrow-circle-double, .ui-state-default .btn-icon-back, .ui-widget-content .btn-icon-back, .ui-state-default .btn-icon-back_disabled, .ui-widget-content .btn-icon-back_disabled, .ui-state-default .btn-icon-chain--arrow, .ui-widget-content .btn-icon-chain--arrow, .ui-state-default .btn-icon-chain--exclamation, .ui-widget-content .btn-icon-chain--exclamation, .ui-state-default .btn-icon-chain--minus, .ui-widget-content .btn-icon-chain--minus, .ui-state-default .btn-icon-chain--pencil, .ui-widget-content .btn-icon-chain--pencil, .ui-state-default .btn-icon-chain--plus, .ui-widget-content .btn-icon-chain--plus, .ui-state-default .btn-icon-chain-small, .ui-widget-content .btn-icon-chain-small, .ui-state-default .btn-icon-chain-unchain, .ui-widget-content .btn-icon-chain-unchain, .ui-state-default .btn-icon-chain, .ui-widget-content .btn-icon-chain, .ui-state-default .btn-icon-cross-circle, .ui-widget-content .btn-icon-cross-circle, .ui-state-default .btn-icon-cross-circle_disabled, .ui-widget-content .btn-icon-cross-circle_disabled, .ui-state-default .btn-icon-cross, .ui-widget-content .btn-icon-cross, .ui-state-default .btn-icon-decline, .ui-widget-content .btn-icon-decline, .ui-state-default .btn-icon-decline_disabled, .ui-widget-content .btn-icon-decline_disabled, .ui-state-default .btn-icon-document--pencil, .ui-widget-content .btn-icon-document--pencil, .ui-state-default .btn-icon-download-csv, .ui-widget-content .btn-icon-download-csv, .ui-state-default .btn-icon-drive-upload, .ui-widget-content .btn-icon-drive-upload, .ui-state-default .btn-icon-drive-upload_disabled, .ui-widget-content .btn-icon-drive-upload_disabled, .ui-state-default .btn-icon-grid_print, .ui-widget-content .btn-icon-grid_print, .ui-state-default .btn-icon-magnifier, .ui-widget-content .btn-icon-magnifier, .ui-state-default .btn-icon-minus-circle, .ui-widget-content .btn-icon-minus-circle, .ui-state-default .btn-icon-minus-circle_disabled, .ui-widget-content .btn-icon-minus-circle_disabled, .ui-state-default .btn-icon-navigation, .ui-widget-content .btn-icon-navigation, .ui-state-default .btn-icon-navigation_disabled, .ui-widget-content .btn-icon-navigation_disabled, .ui-state-default .btn-icon-network-cloud, .ui-widget-content .btn-icon-network-cloud, .ui-state-default .btn-icon-network-cloud_disabled, .ui-widget-content .btn-icon-network-cloud_disabled, .ui-state-default .btn-icon-pencil, .ui-widget-content .btn-icon-pencil, .ui-state-default .btn-icon-pencil_disabled, .ui-widget-content .btn-icon-pencil_disabled, .ui-state-default .btn-icon-plug-disconnect-prohibition, .ui-widget-content .btn-icon-plug-disconnect-prohibition, .ui-state-default .btn-icon-plug-disconnect-prohibition_disabled, .ui-widget-content .btn-icon-plug-disconnect-prohibition_disabled, .ui-state-default .btn-icon-preview, .ui-widget-content .btn-icon-preview, .ui-state-default .btn-icon-preview_disabled, .ui-widget-content .btn-icon-preview_disabled, .ui-state-default .btn-icon-settings, .ui-widget-content .btn-icon-settings, .ui-state-default .btn-icon-settings_disabled, .ui-widget-content .btn-icon-settings_disabled, .ui-state-default .btn-icon-unpublish, .ui-widget-content .btn-icon-unpublish, .ui-state-default .btn-icon-unpublish_disabled, .ui-widget-content .btn-icon-unpublish_disabled { background: url('../images/btn-icon-sd3ddece98a.png') no-repeat; }
.ui-state-default .btn-icon-accept, .ui-widget-content .btn-icon-accept { background-position: 0 0; }
.ui-state-default .btn-icon-accept_disabled, .ui-widget-content .btn-icon-accept_disabled { background-position: 0 -16px; }
@ -65,30 +53,31 @@ Clearfix mixin clears the float of it's parent element
.ui-state-default .btn-icon-chain, .ui-widget-content .btn-icon-chain { background-position: 0 -272px; }
.ui-state-default .btn-icon-cross-circle, .ui-widget-content .btn-icon-cross-circle { background-position: 0 -288px; }
.ui-state-default .btn-icon-cross-circle_disabled, .ui-widget-content .btn-icon-cross-circle_disabled { background-position: 0 -304px; }
.ui-state-default .btn-icon-decline, .ui-widget-content .btn-icon-decline { background-position: 0 -320px; }
.ui-state-default .btn-icon-decline_disabled, .ui-widget-content .btn-icon-decline_disabled { background-position: 0 -336px; }
.ui-state-default .btn-icon-document--pencil, .ui-widget-content .btn-icon-document--pencil { background-position: 0 -352px; }
.ui-state-default .btn-icon-download-csv, .ui-widget-content .btn-icon-download-csv { background-position: 0 -368px; }
.ui-state-default .btn-icon-drive-upload, .ui-widget-content .btn-icon-drive-upload { background-position: 0 -384px; }
.ui-state-default .btn-icon-drive-upload_disabled, .ui-widget-content .btn-icon-drive-upload_disabled { background-position: 0 -400px; }
.ui-state-default .btn-icon-grid_print, .ui-widget-content .btn-icon-grid_print { background-position: 0 -416px; }
.ui-state-default .btn-icon-magnifier, .ui-widget-content .btn-icon-magnifier { background-position: 0 -432px; }
.ui-state-default .btn-icon-minus-circle, .ui-widget-content .btn-icon-minus-circle { background-position: 0 -448px; }
.ui-state-default .btn-icon-minus-circle_disabled, .ui-widget-content .btn-icon-minus-circle_disabled { background-position: 0 -464px; }
.ui-state-default .btn-icon-navigation, .ui-widget-content .btn-icon-navigation { background-position: 0 -480px; }
.ui-state-default .btn-icon-navigation_disabled, .ui-widget-content .btn-icon-navigation_disabled { background-position: 0 -496px; }
.ui-state-default .btn-icon-network-cloud, .ui-widget-content .btn-icon-network-cloud { background-position: 0 -512px; }
.ui-state-default .btn-icon-network-cloud_disabled, .ui-widget-content .btn-icon-network-cloud_disabled { background-position: 0 -528px; }
.ui-state-default .btn-icon-pencil, .ui-widget-content .btn-icon-pencil { background-position: 0 -544px; }
.ui-state-default .btn-icon-pencil_disabled, .ui-widget-content .btn-icon-pencil_disabled { background-position: 0 -560px; }
.ui-state-default .btn-icon-plug-disconnect-prohibition, .ui-widget-content .btn-icon-plug-disconnect-prohibition { background-position: 0 -576px; }
.ui-state-default .btn-icon-plug-disconnect-prohibition_disabled, .ui-widget-content .btn-icon-plug-disconnect-prohibition_disabled { background-position: 0 -592px; }
.ui-state-default .btn-icon-preview, .ui-widget-content .btn-icon-preview { background-position: 0 -608px; }
.ui-state-default .btn-icon-preview_disabled, .ui-widget-content .btn-icon-preview_disabled { background-position: 0 -624px; }
.ui-state-default .btn-icon-settings, .ui-widget-content .btn-icon-settings { background-position: 0 -640px; }
.ui-state-default .btn-icon-settings_disabled, .ui-widget-content .btn-icon-settings_disabled { background-position: 0 -656px; }
.ui-state-default .btn-icon-unpublish, .ui-widget-content .btn-icon-unpublish { background-position: 0 -672px; }
.ui-state-default .btn-icon-unpublish_disabled, .ui-widget-content .btn-icon-unpublish_disabled { background-position: 0 -688px; }
.ui-state-default .btn-icon-cross, .ui-widget-content .btn-icon-cross { background-position: 0 -320px; }
.ui-state-default .btn-icon-decline, .ui-widget-content .btn-icon-decline { background-position: 0 -335px; }
.ui-state-default .btn-icon-decline_disabled, .ui-widget-content .btn-icon-decline_disabled { background-position: 0 -351px; }
.ui-state-default .btn-icon-document--pencil, .ui-widget-content .btn-icon-document--pencil { background-position: 0 -367px; }
.ui-state-default .btn-icon-download-csv, .ui-widget-content .btn-icon-download-csv { background-position: 0 -383px; }
.ui-state-default .btn-icon-drive-upload, .ui-widget-content .btn-icon-drive-upload { background-position: 0 -399px; }
.ui-state-default .btn-icon-drive-upload_disabled, .ui-widget-content .btn-icon-drive-upload_disabled { background-position: 0 -415px; }
.ui-state-default .btn-icon-grid_print, .ui-widget-content .btn-icon-grid_print { background-position: 0 -431px; }
.ui-state-default .btn-icon-magnifier, .ui-widget-content .btn-icon-magnifier { background-position: 0 -447px; }
.ui-state-default .btn-icon-minus-circle, .ui-widget-content .btn-icon-minus-circle { background-position: 0 -463px; }
.ui-state-default .btn-icon-minus-circle_disabled, .ui-widget-content .btn-icon-minus-circle_disabled { background-position: 0 -479px; }
.ui-state-default .btn-icon-navigation, .ui-widget-content .btn-icon-navigation { background-position: 0 -495px; }
.ui-state-default .btn-icon-navigation_disabled, .ui-widget-content .btn-icon-navigation_disabled { background-position: 0 -511px; }
.ui-state-default .btn-icon-network-cloud, .ui-widget-content .btn-icon-network-cloud { background-position: 0 -527px; }
.ui-state-default .btn-icon-network-cloud_disabled, .ui-widget-content .btn-icon-network-cloud_disabled { background-position: 0 -543px; }
.ui-state-default .btn-icon-pencil, .ui-widget-content .btn-icon-pencil { background-position: 0 -559px; }
.ui-state-default .btn-icon-pencil_disabled, .ui-widget-content .btn-icon-pencil_disabled { background-position: 0 -575px; }
.ui-state-default .btn-icon-plug-disconnect-prohibition, .ui-widget-content .btn-icon-plug-disconnect-prohibition { background-position: 0 -591px; }
.ui-state-default .btn-icon-plug-disconnect-prohibition_disabled, .ui-widget-content .btn-icon-plug-disconnect-prohibition_disabled { background-position: 0 -607px; }
.ui-state-default .btn-icon-preview, .ui-widget-content .btn-icon-preview { background-position: 0 -623px; }
.ui-state-default .btn-icon-preview_disabled, .ui-widget-content .btn-icon-preview_disabled { background-position: 0 -639px; }
.ui-state-default .btn-icon-settings, .ui-widget-content .btn-icon-settings { background-position: 0 -655px; }
.ui-state-default .btn-icon-settings_disabled, .ui-widget-content .btn-icon-settings_disabled { background-position: 0 -671px; }
.ui-state-default .btn-icon-unpublish, .ui-widget-content .btn-icon-unpublish { background-position: 0 -687px; }
.ui-state-default .btn-icon-unpublish_disabled, .ui-widget-content .btn-icon-unpublish_disabled { background-position: 0 -703px; }
.icon { text-indent: -9999px; border: none; outline: none; }
.icon.icon-24 { width: 24px; height: 24px; background: url('../images/menu-icons/24x24-s546fcae8fd.png'); }

BIN
admin/images/btn-icon-sd3ddece98a.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 20 KiB

BIN
admin/images/btn-icon/cross.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

8
admin/scss/_ieShared.scss
View File

@ -2,14 +2,18 @@
.cms .ss-ui-button {
background-color: $color-button-generic;
&.ui-state-hover {
background-color:lighten($color-button-generic, 5%);
}
background-color:lighten($color-button-generic, 5%);
}
&.ss-ui-action-constructive {
background-color:$color-button-constructive;
&.ui-state-hover {
background-color:lighten($color-button-constructive, 5%);
}
}
&.ss-gridfield-button-filter{
$bgImage: url(../../images/icons/filter-icons.png) no-repeat;
background:lighten($color-menu-button,10%) $bgImage -14px 4px;
}
}
.cms-content-toolbar{

9
admin/scss/ie7.scss
View File

@ -4,7 +4,7 @@
html {
overflow: hidden;
}
.field {
input.text,
textarea,
@ -134,6 +134,13 @@ html {
}
}
input {
&.ss-gridfield-sort {
padding-top:0 !important;
padding-bottom:0 !important;
}
}
//fix for wrong height on users groups gridfield table header
table.ss-gridfield-table tr.title th h2 {
float:left;

28
forms/gridfield/GridFieldFilterHeader.php
View File

@ -88,7 +88,7 @@ class GridFieldFilterHeader implements GridField_HTMLProvider, GridField_DataMan
$state = $gridField->State->GridFieldFilterHeader;
if(!isset($state->Columns)) {
return $dataList;
}
}
$filterArguments = $state->Columns->toArray();
foreach($filterArguments as $columnName => $value ) {
@ -107,12 +107,13 @@ class GridFieldFilterHeader implements GridField_HTMLProvider, GridField_DataMan
$columns = $gridField->getColumns();
$filterArguments = $gridField->State->GridFieldFilterHeader->Columns->toArray();
$currentColumn = 0;
foreach($columns as $columnField) {
$currentColumn++;
$metadata = $gridField->getColumnMetadata($columnField);
$title = $metadata['title'];
if($title && $gridField->getList()->canFilterBy($columnField)) {
$value = '';
if(isset($filterArguments[$columnField])) {
@ -121,24 +122,33 @@ class GridFieldFilterHeader implements GridField_HTMLProvider, GridField_DataMan
$field = new TextField('filter['.$columnField.']', '', $value);
$field->addExtraClass('ss-gridfield-sort');
$field->setAttribute('placeholder', _t('GridField.FilterBy', "Filter by ")._t('GridField.'.$metadata['title'], $metadata['title']));
$field = new FieldGroup(
$field,
GridField_FormAction::create($gridField, 'filter', false, 'filter', null)
->addExtraClass('ss-gridfield-button-filter')
->setAttribute('title', _t('GridField.Filter', "Filter"))
,
GridField_FormAction::create($gridField, 'reset', false, 'reset', null)
->addExtraClass('ss-gridfield-button-reset')
->setAttribute('title', _t('GridField.ResetFilter', "Reset"))
);
} else {
$field = new LiteralField('', '');
if($currentColumn == count($columns)){
$field = new FieldGroup(
GridField_FormAction::create($gridField, 'filter', false, 'filter', null)
->addExtraClass('ss-gridfield-button-filter')
->setAttribute('title', _t('GridField.Filter', "Filter")),
GridField_FormAction::create($gridField, 'reset', false, 'reset', null)
->addExtraClass('ss-gridfield-button-close')
->setAttribute('title', _t('GridField.ResetFilter', "Reset"))
);
$field->addExtraClass('filter-buttons');
}else{
$field = new LiteralField('', '');
}
}
$forTemplate->Fields->push($field);
}
return array(
'header' => $forTemplate->renderWith('GridFieldFilterHeader_Row'),
);

11
forms/gridfield/GridFieldSortableHeader.php
View File

@ -17,7 +17,7 @@ class GridFieldSortableHeader implements GridField_HTMLProvider, GridField_DataM
/**
* Determine what happens when this component is used with a list that isn't {@link SS_Filterable}.
*
* - true: An exception is thrown
* - true: An exception is thrown
* - false: This component will be ignored - it won't make any changes to the GridField.
*
* By default, this is set to true so that it's clearer what's happening, but the predefined
@ -60,8 +60,9 @@ class GridFieldSortableHeader implements GridField_HTMLProvider, GridField_DataM
$state = $gridField->State->GridFieldSortableHeader;
$columns = $gridField->getColumns();
$currentColumn = 0;
foreach($columns as $columnField) {
$currentColumn++;
$metadata = $gridField->getColumnMetadata($columnField);
$title = $metadata['title'];
if($title && $gridField->getList()->canSortBy($columnField)) {
@ -84,7 +85,11 @@ class GridFieldSortableHeader implements GridField_HTMLProvider, GridField_DataM
$field->addExtraClass('ss-gridfield-sorted-desc');
}
} else {
$field = new LiteralField($columnField, '<span class="non-sortable">' . $title . '</span>');
if($currentColumn == count($columns)){
$field = new LiteralField($columnField, '<button name="showFilter" class="ss-gridfield-button-filter" id="showFilter"></button>');
}else{
$field = new LiteralField($columnField, '<span class="non-sortable">' . $title . '</span>');
}
}
$forTemplate->Fields->push($field);
}

44
javascript/GridField.js
View File

@ -5,6 +5,7 @@
* @param {Object} Additional options for jQuery.ajax() call
* @param {successCallback} callback to call after reloading succeeded.
*/
reload: function(ajaxOpts, successCallback) {
var self = this, form = this.closest('form'),
focusedElName = this.find(':input:focus').attr('name'), // Save focused element for restoring after refresh
@ -14,6 +15,7 @@
if(!ajaxOpts.data) ajaxOpts.data = [];
ajaxOpts.data = ajaxOpts.data.concat(data);
// Include any GET parameters from the current URL, as the view state might depend on it.
// For example, a list prefiltered through external search criteria might be passed to GridField.
if(window.location.search) {
@ -37,6 +39,17 @@
// multiple relationships via keyboard.
if(focusedElName) self.find(':input[name="' + focusedElName + '"]').focus();
var content;
if(ajaxOpts.data[0].filter=="show"){
content = '<span class="non-sortable"></span>';
self.addClass('showFilter').find('.filter-header').show();
}else{
content = '<button name="showFilter" class="ss-gridfield-button-filter" id="showFilter"></button>';
self.removeClass('showFilter').find('.filter-header').hide();
}
self.find('.sortable-header th:last').html(content);
form.removeClass('loading');
if(successCallback) successCallback.apply(this, arguments);
self.trigger('reload', self);
@ -76,6 +89,18 @@
}
});
$('.ss-gridfield #showFilter').entwine({
onclick: function(e) {
$('.filter-header').show('slow');
this.closest('.ss-gridfield').addClass('showFilter');
this.parent().html('<span class="non-sortable"></span>');
e.preventDefault();
}
});
$('.ss-gridfield .ss-gridfield-item').entwine({
onclick: function(e) {
if($(e.target).closest('.action').length) {
@ -93,10 +118,16 @@
this.css('cursor', 'default');
}
});
$('.ss-gridfield .action').entwine({
onclick: function(e){
this.getGridField().reload({data: [{name: this.attr('name'), value: this.val()}]});
var filterState='show'; //filterstate should equal current state.
if(this.hasClass('ss-gridfield-button-close') || !(this.closest('.ss-gridfield').hasClass('showFilter'))){
filterState='hidden';
}
this.getGridField().reload({data: [{name: this.attr('name'), value: this.val(), filter: filterState}]});
e.preventDefault();
}
});
@ -224,9 +255,16 @@
onkeydown: function(e) {
filterbtn = this.closest('.fieldgroup').find('.ss-gridfield-button-filter');
resetbtn = this.closest('.fieldgroup').find('.ss-gridfield-button-reset');
if(e.keyCode == '13') {
btns = this.closest('.filter-header').find('.ss-gridfield-button-filter');
this.getGridField().reload({data: [{name: btns.attr('name'), value: btns.val()}]});
var filterState='show'; //filterstate should equal current state.
if(this.hasClass('ss-gridfield-button-close')||!(this.closest('.ss-gridfield').hasClass('showFilter'))){
filterState='hidden';
}
this.getGridField().reload({data: [{name: btns.attr('name'), value: btns.val(), filter: filterState}]});
return false;
}else{
filterbtn.addClass('hover-alike');

258
scss/GridField.scss
View File

@ -11,29 +11,26 @@
@import "compass/css3/images";
@import "compass/css3/text-shadow";
@import "compass/css3/border-radius";
@import "../admin/scss/themes/default";
@import "../admin/scss/themes/default";
@import "_elementMixins";
/*$experimental-support-for-svg variable comes from
imported compass/support file and enables svg gradients in IE9.
This is needed for the background gradients to work as desired with
multiple images. */
//$experimental-support-for-svg variable comes from
//imported compass/support file and enables svg gradients in IE9.
//This is needed for the background gradients to work as desired with
//multiple images.
$experimental-support-for-svg: true;
$gf_colour_gradient_light: #B1C0C5;
$gf_colour_gradient_dark: #7F9198;
$gf_colour_base: #95a5ab;
$gf_colour_header_border: #819198;
$gf_colour_subheader: #BAC8CE;
$gf_colour_base: desaturate(darken(adjust-hue($color-base, -10%), 10%),5%);
$gf_colour_gradient_light: lighten($gf_colour_base, 10%);
$gf_colour_gradient_dark: darken($gf_colour_base, 5%);
$gf_colour_header_border: $gf_colour_gradient_dark;
$gf_colour_subheader: saturate(lighten($gf_colour_base, 15%),5%);
$gf_colour_border: rgba(0,0,0,.1);
$gf_colour_zebra: #F0F4F7;
$gf_colour_zebra: lighten($gf_colour_subheader,17%);
$gf_colour_font: #666;
$gf_colour_text_shadow: rgba(0,0,0,.3);
$color-text-blue-link:#1556B2 !default;
$gf_border_radius: 7px;
$gf_color_border_filter_button: #9A9A9A;
$gf_color_button: #e6e6e6;
$gf_color_button_filter_hover: #338DC1;
$gf_color_button_reset_hover: #FF0000;
$color-text-light: white;
$gf_grid_y: 12px;
$gf_grid_x: 16px;
@ -136,7 +133,8 @@ $gf_grid_x: 16px;
width: auto;
white-space:nowrap;
&.col-buttons {
width: auto;
width: 70px;
padding:0;
text-align: right;
}
@ -257,7 +255,7 @@ $gf_grid_x: 16px;
min-height: 40px; //this is to accomodate the add new button.
@include background-image(linear-gradient($gf_colour_gradient_light, $gf_colour_gradient_dark));
@include single-text-shadow($gf_colour_text_shadow, 0px, -1px, 0);
h2{
h2{
padding: 0px;
font-size: $gf_grid_y*1.4;
color:#fff;
@ -274,12 +272,11 @@ $gf_grid_x: 16px;
}
}
}
&.sortable-header {
background: $gf_colour_subheader;
&.sortable-header {
background: $gf_colour_subheader;
th{
padding: 0px;
}
}
}
&:hover {
background: #FFFAD6 !important;
@ -304,12 +301,7 @@ $gf_grid_x: 16px;
color: #FFF;
padding: 5px;
border-right: 1px solid $gf_colour_border;
&.main:first-child{
//@include border-top-left-radius($gf_border_radius);
}
&.main:last-child{
//@include border-top-right-radius($gf_border_radius);
}
div {
&.fieldgroup,&.fieldgroup-field {
width: 100%;
@ -318,12 +310,16 @@ $gf_grid_x: 16px;
&.fieldgroup {
min-width: $gf_grid_x*12.5;
padding-right:0;
&.filter-buttons{
min-width:0;
div{
@extend .col-buttons;
width:auto;
display:inline;
}
}
}
}
&.extra,&.action {
padding: 0;
cursor: default;
}
&.main{
white-space:nowrap;
border-top: 1px solid $gf_colour_border;
@ -337,17 +333,18 @@ $gf_grid_x: 16px;
border-right:none;
}
}
&.extra,&.action {
padding: 0;
cursor: default;
}
&.extra {
background: $gf_colour_subheader;
position:relative;
background:darken($color-dark-grey, 10%);
background: rgba(#000, 0.7);
padding: 5px;
border-top: $gf_colour_text_shadow;
span {
width: auto;
display: inline;
position: static;
input {
height:28px; //height of input field - to match design.
}
input {
height:28px; //height of input field - to match design.
}
button.ss-ui-button {
padding: .3em;
@ -364,6 +361,8 @@ $gf_grid_x: 16px;
&.last {
@include border-top-right-radius($gf_border_radius);
}
button {
&#action_gridfield_relationadd:hover {
@ -377,7 +376,7 @@ $gf_grid_x: 16px;
@include box-shadow-none;
}
&.ss-gridfield-sort {
background: transparent url(../images/arrows.png) no-repeat right 6px;
background: transparent url(../images/arrows.png) no-repeat right 10px;
border:none;
width:100%;
text-align: left;
@ -386,7 +385,7 @@ $gf_grid_x: 16px;
color: #fff;
@include border-radius(0);
&:hover {
background-position: right -34px;
background-position: right -30px;
}
&.ss-gridfield-sorted-desc {
background-position: right -72px;
@ -395,84 +394,110 @@ $gf_grid_x: 16px;
background-position: right -116px;
}
}
&.ss-gridfield-button-filter.ss-ui-button{
position:absolute;
top: -28px;
right: -1px;
display:block;
text-indent:-9999em;
width:30px;
height:28px; //match the height of the input field
border: {
top-left-radius:0px;
bottom-left-radius:0px;
top-right-radius:4px;
bottom-right-radius:4px;
bottom-width:1px;
color:$gf_color_border_filter_button;
&.ss-ui-button{
&.ss-gridfield-button-filter{
$bgImage: url(../images/icons/filter-icons.png) no-repeat;
background-color:lighten($color-menu-button,10%);
@include gridFieldButtons;
@include background(
$bgImage -14px 4px,
linear-gradient(
$color-menu-button,
darken($color-menu-button, 10%)
)
);
border-top: 1px solid lighten($color-menu-button, 5%);
&.hover-alike:active, &:active, &.hover-alike, &:hover {
@include background (
$bgImage -14px 4px,
linear-gradient(
lighten($color-menu-button, 10%),
$color-menu-button
));
}
&#showFilter{ //The magnifying glass before filter is opened
margin-left: $gf_grid_y;
border:none;
@include background ($bgImage -17px 6px);
span{ //this is the dropdown arrow
opacity: 0.4;
position:absolute;
width:10px;
left:30px;
top:40%;
background: url(../admin/images/btn_arrow_down_grey.png) no-repeat 0px 0px;
}
&:hover{
@include background ($bgImage -40px 6px);
span{//dropdown arrow
opacity:0.9;
}
}
}
}
@include background (url(../images/icons/filter-icons.png) no-repeat -40px 6px,
linear-gradient(
lighten($gf_color_button, 10%),
darken($gf_color_button, 5%)
));
&.hover-alike:active {
@include background (url(../images/icons/filter-icons.png) no-repeat -16px 6px,
linear-gradient(
lighten($gf_color_button_filter_hover, 5%),
darken($gf_color_button_filter_hover, 5%)
));
@include box-shadow(inset 0 1px 3px rgb(23, 24, 26), 0 1px 0 rgba(255, 255, 255, .6));
&.ss-gridfield-button-close{
$bgImage: url(../images/icons/filter-icons.png) no-repeat;
@include background ($bgImage 7px -17px);
@include gridFieldButtons;
width:25px;
opacity:0.8;
margin-right:-5px; //For IE
&.hover-alike:active, &:active, &.hover-alike, &:hover {
opacity:1;
@include background (
$bgImage 7px -17px,
linear-gradient(
rgba(#fff,0.1),
rgba(#fff,0.1)
)
);
}
}
&.hover-alike {
@include background (url(../images/icons/filter-icons.png) no-repeat -16px 6px,
linear-gradient(
lighten($gf_color_button_filter_hover, 5%),
darken($gf_color_button_filter_hover, 5%)
));
}
}
&.ss-gridfield-button-reset.ss-ui-button{
position:absolute;
right: 28px;
top: -28px;
display:block;
text-indent:-9999em;
width:30px;
height:28px; //match the height of the input field
float:right;
border: {
radius:0px;
bottom-width:1px;
color:$gf_color_border_filter_button;
}
@include background (url(../images/icons/filter-icons.png) no-repeat 8px 5px,
linear-gradient(color-stops(
lighten($gf_color_button, 10%),
darken($gf_color_button, 5%)
))
);
&.filtered:hover {
@include background (url(../images/icons/filter-icons.png) no-repeat 8px -17px,
linear-gradient(
$gf_color_button_reset_hover,
darken($gf_color_button_reset_hover, 10%)
));
}
&.filtered:active {
@include background (url(../images/icons/filter-icons.png) no-repeat 8px -17px,
linear-gradient(
$gf_color_button_reset_hover,
darken($gf_color_button_reset_hover, 10%)
));
@include box-shadow(inset 0 1px 3px rgb(23, 24, 26), 0 1px 0 rgba(255, 255, 255, .6));
}
}
&.ss-gridfield-button-reset{
@include gridFieldButtons;
position:absolute;
top: -21px;
right: -1px;
width:20px;
height:20px;
display:none;
&.filtered{
display:block;
background: url(../admin/images/btn-icon/cross.png) no-repeat 0px 0px;
opacity:0.5;
&:hover{
opacity:0.8;
}
&:active {
opacity:1;
}
}
}
}
}
input {
&.ss-gridfield-sort {
padding: 2px;
height:25px;
// Placeholder styling done with an each loop because when a browser
// doesn’t understand a selector, it invalidates the entire line of selectors.
// This avoids that, and keeps the scss tidy
$browserPlaceholder: "::-webkit-input-placeholder", ":-moz-placeholder", ":-ms-input-placeholder", ":placeholder";
@each $browser in $browserPlaceholder {
&#{$browser}{
font-style:italic;
color: lighten($color-dark-grey,30%);
}
}
&:focus {
@include box-shadow-none;
}
@ -564,8 +589,11 @@ $gf_grid_x: 16px;
border-bottom: 0 none;
}
}
td:first-child, th:first-child{
td:first-child{
border-left: 1px solid $gf_colour_border;
}
td:last-child{
border-right: 1px solid $gf_colour_border;
}
}
}

4
templates/Includes/GridFieldFilterHeader_Row.ss
View File

@ -1,5 +1,5 @@
<tr class="filter-header">
<tr class="filter-header" style="display:none;">
<% loop Fields %>
<th class="extra"><span>$Field</span></th>
<th class="extra">$Field</th>
<% end_loop %>
</tr>

2
templates/Includes/GridFieldSortableHeader_Row.ss
View File

@ -1,5 +1,5 @@
<tr class="sortable-header">
<% loop Fields %>
<th class="main col-$getName"><span>$Field</span></th>
<th class="main col-$getName">$Field</th>
<% end_loop %>
</tr>

2
templates/forms/FieldGroup.ss
View File

@ -1,4 +1,4 @@
<div class="fieldgroup <% if Zebra %>fieldgroup-zebra<% end_if %>" <% if ID %>id="$ID"<% end_if %>>
<div class="<% if extraClass %>$extraClass<% else %>fieldgroup<% end_if %><% if Zebra %> fieldgroup-zebra<% end_if %>" <% if ID %>id="$ID"<% end_if %>>
<% loop FieldList %>
<div class="fieldgroup-field $FirstLast $EvenOdd">
$SmallFieldHolder