tonyair/silverstripe-framework
1
0
Fork 0
mirror of https://github.com/silverstripe/silverstripe-framework synced 2024-10-22 14:05:37 +02:00
Code Issues Projects Releases Wiki Activity

ENHANCEMENT: Gridfield usability (fixes 7215)

Browse Source 
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.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 { background-color: #1f9433; }
.cms .ss-ui-button.ss-ui-action-constructive.ui-state-hover { background-color: #23a93a; } .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; } .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 { position: relative; bottom: 10px; right: 10px; }
.pagination-page-number input { width: 45px; padding: 0px; position: relative; bottom: 2px; } .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.title th h2 { float: left; }
table.ss-gridfield-table tr.ss-gridfield-item.odd { background: white; } 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.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 { background-color: #1f9433; }
.cms .ss-ui-button.ss-ui-action-constructive.ui-state-hover { background-color: #23a93a; } .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; } .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 ------------------------------------------------ */ /** ----------------------------------------------- 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 ------------------------------------------------ */ /** ----------------------------------------------- Application Logo (CMS Logo) Must be 24px x 24px ------------------------------------------------ */
/** ----------------------------- Custom mixins ------------------------------ */ /** ----------------------------- 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 ----------------------------- */ /** ----------------------------- Sprite images ----------------------------- */
/** Helper SCSS file for generating sprites for the interface. */ /** 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, .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; } .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-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, .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-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-cross, .ui-widget-content .btn-icon-cross { 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-decline, .ui-widget-content .btn-icon-decline { background-position: 0 -335px; }
.ui-state-default .btn-icon-document--pencil, .ui-widget-content .btn-icon-document--pencil { background-position: 0 -352px; } .ui-state-default .btn-icon-decline_disabled, .ui-widget-content .btn-icon-decline_disabled { background-position: 0 -351px; }
.ui-state-default .btn-icon-download-csv, .ui-widget-content .btn-icon-download-csv { background-position: 0 -368px; } .ui-state-default .btn-icon-document--pencil, .ui-widget-content .btn-icon-document--pencil { background-position: 0 -367px; }
.ui-state-default .btn-icon-drive-upload, .ui-widget-content .btn-icon-drive-upload { background-position: 0 -384px; } .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_disabled, .ui-widget-content .btn-icon-drive-upload_disabled { background-position: 0 -400px; } .ui-state-default .btn-icon-drive-upload, .ui-widget-content .btn-icon-drive-upload { background-position: 0 -399px; }
.ui-state-default .btn-icon-grid_print, .ui-widget-content .btn-icon-grid_print { background-position: 0 -416px; } .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-magnifier, .ui-widget-content .btn-icon-magnifier { background-position: 0 -432px; } .ui-state-default .btn-icon-grid_print, .ui-widget-content .btn-icon-grid_print { background-position: 0 -431px; }
.ui-state-default .btn-icon-minus-circle, .ui-widget-content .btn-icon-minus-circle { background-position: 0 -448px; } .ui-state-default .btn-icon-magnifier, .ui-widget-content .btn-icon-magnifier { background-position: 0 -447px; }
.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-minus-circle, .ui-widget-content .btn-icon-minus-circle { background-position: 0 -463px; }
.ui-state-default .btn-icon-navigation, .ui-widget-content .btn-icon-navigation { background-position: 0 -480px; } .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_disabled, .ui-widget-content .btn-icon-navigation_disabled { background-position: 0 -496px; } .ui-state-default .btn-icon-navigation, .ui-widget-content .btn-icon-navigation { background-position: 0 -495px; }
.ui-state-default .btn-icon-network-cloud, .ui-widget-content .btn-icon-network-cloud { background-position: 0 -512px; } .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_disabled, .ui-widget-content .btn-icon-network-cloud_disabled { background-position: 0 -528px; } .ui-state-default .btn-icon-network-cloud, .ui-widget-content .btn-icon-network-cloud { background-position: 0 -527px; }
.ui-state-default .btn-icon-pencil, .ui-widget-content .btn-icon-pencil { background-position: 0 -544px; } .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_disabled, .ui-widget-content .btn-icon-pencil_disabled { background-position: 0 -560px; } .ui-state-default .btn-icon-pencil, .ui-widget-content .btn-icon-pencil { background-position: 0 -559px; }
.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-pencil_disabled, .ui-widget-content .btn-icon-pencil_disabled { background-position: 0 -575px; }
.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-plug-disconnect-prohibition, .ui-widget-content .btn-icon-plug-disconnect-prohibition { background-position: 0 -591px; }
.ui-state-default .btn-icon-preview, .ui-widget-content .btn-icon-preview { background-position: 0 -608px; } .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_disabled, .ui-widget-content .btn-icon-preview_disabled { background-position: 0 -624px; } .ui-state-default .btn-icon-preview, .ui-widget-content .btn-icon-preview { background-position: 0 -623px; }
.ui-state-default .btn-icon-settings, .ui-widget-content .btn-icon-settings { background-position: 0 -640px; } .ui-state-default .btn-icon-preview_disabled, .ui-widget-content .btn-icon-preview_disabled { background-position: 0 -639px; }
.ui-state-default .btn-icon-settings_disabled, .ui-widget-content .btn-icon-settings_disabled { background-position: 0 -656px; } .ui-state-default .btn-icon-settings, .ui-widget-content .btn-icon-settings { background-position: 0 -655px; }
.ui-state-default .btn-icon-unpublish, .ui-widget-content .btn-icon-unpublish { background-position: 0 -672px; } .ui-state-default .btn-icon-settings_disabled, .ui-widget-content .btn-icon-settings_disabled { background-position: 0 -671px; }
.ui-state-default .btn-icon-unpublish_disabled, .ui-widget-content .btn-icon-unpublish_disabled { background-position: 0 -688px; } .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 { text-indent: -9999px; border: none; outline: none; }
.icon.icon-24 { width: 24px; height: 24px; background: url('../images/menu-icons/24x24-s546fcae8fd.png'); } .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

4
admin/scss/_ieShared.scss
View File

@ -10,6 +10,10 @@
background-color:lighten($color-button-constructive, 5%); 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{ .cms-content-toolbar{

7
admin/scss/ie7.scss
View File

@ -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 //fix for wrong height on users groups gridfield table header
table.ss-gridfield-table tr.title th h2 { table.ss-gridfield-table tr.title th h2 {
float:left; float:left;

22
forms/gridfield/GridFieldFilterHeader.php
View File

@ -107,12 +107,13 @@ class GridFieldFilterHeader implements GridField_HTMLProvider, GridField_DataMan
$columns = $gridField->getColumns(); $columns = $gridField->getColumns();
$filterArguments = $gridField->State->GridFieldFilterHeader->Columns->toArray(); $filterArguments = $gridField->State->GridFieldFilterHeader->Columns->toArray();
$currentColumn = 0; $currentColumn = 0;
foreach($columns as $columnField) { foreach($columns as $columnField) {
$currentColumn++; $currentColumn++;
$metadata = $gridField->getColumnMetadata($columnField); $metadata = $gridField->getColumnMetadata($columnField);
$title = $metadata['title']; $title = $metadata['title'];
if($title && $gridField->getList()->canFilterBy($columnField)) { if($title && $gridField->getList()->canFilterBy($columnField)) {
$value = ''; $value = '';
if(isset($filterArguments[$columnField])) { if(isset($filterArguments[$columnField])) {
@ -121,20 +122,29 @@ class GridFieldFilterHeader implements GridField_HTMLProvider, GridField_DataMan
$field = new TextField('filter['.$columnField.']', '', $value); $field = new TextField('filter['.$columnField.']', '', $value);
$field->addExtraClass('ss-gridfield-sort'); $field->addExtraClass('ss-gridfield-sort');
$field->setAttribute('placeholder', _t('GridField.FilterBy', "Filter by ")._t('GridField.'.$metadata['title'], $metadata['title']));
$field = new FieldGroup( $field = new FieldGroup(
$field, $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) GridField_FormAction::create($gridField, 'reset', false, 'reset', null)
->addExtraClass('ss-gridfield-button-reset') ->addExtraClass('ss-gridfield-button-reset')
->setAttribute('title', _t('GridField.ResetFilter', "Reset")) ->setAttribute('title', _t('GridField.ResetFilter', "Reset"))
); );
} else { } else {
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('', ''); $field = new LiteralField('', '');
} }
}
$forTemplate->Fields->push($field); $forTemplate->Fields->push($field);
} }

7
forms/gridfield/GridFieldSortableHeader.php
View File

@ -60,8 +60,9 @@ class GridFieldSortableHeader implements GridField_HTMLProvider, GridField_DataM
$state = $gridField->State->GridFieldSortableHeader; $state = $gridField->State->GridFieldSortableHeader;
$columns = $gridField->getColumns(); $columns = $gridField->getColumns();
$currentColumn = 0;
foreach($columns as $columnField) { foreach($columns as $columnField) {
$currentColumn++;
$metadata = $gridField->getColumnMetadata($columnField); $metadata = $gridField->getColumnMetadata($columnField);
$title = $metadata['title']; $title = $metadata['title'];
if($title && $gridField->getList()->canSortBy($columnField)) { if($title && $gridField->getList()->canSortBy($columnField)) {
@ -84,8 +85,12 @@ class GridFieldSortableHeader implements GridField_HTMLProvider, GridField_DataM
$field->addExtraClass('ss-gridfield-sorted-desc'); $field->addExtraClass('ss-gridfield-sorted-desc');
} }
} else { } else {
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>'); $field = new LiteralField($columnField, '<span class="non-sortable">' . $title . '</span>');
} }
}
$forTemplate->Fields->push($field); $forTemplate->Fields->push($field);
} }

42
javascript/GridField.js
View File

@ -5,6 +5,7 @@
* @param {Object} Additional options for jQuery.ajax() call * @param {Object} Additional options for jQuery.ajax() call
* @param {successCallback} callback to call after reloading succeeded. * @param {successCallback} callback to call after reloading succeeded.
*/ */
reload: function(ajaxOpts, successCallback) { reload: function(ajaxOpts, successCallback) {
var self = this, form = this.closest('form'), var self = this, form = this.closest('form'),
focusedElName = this.find(':input:focus').attr('name'), // Save focused element for restoring after refresh focusedElName = this.find(':input:focus').attr('name'), // Save focused element for restoring after refresh
@ -14,6 +15,7 @@
if(!ajaxOpts.data) ajaxOpts.data = []; if(!ajaxOpts.data) ajaxOpts.data = [];
ajaxOpts.data = ajaxOpts.data.concat(data); ajaxOpts.data = ajaxOpts.data.concat(data);
// Include any GET parameters from the current URL, as the view state might depend on it. // 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. // For example, a list prefiltered through external search criteria might be passed to GridField.
if(window.location.search) { if(window.location.search) {
@ -37,6 +39,17 @@
// multiple relationships via keyboard. // multiple relationships via keyboard.
if(focusedElName) self.find(':input[name="' + focusedElName + '"]').focus(); 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'); form.removeClass('loading');
if(successCallback) successCallback.apply(this, arguments); if(successCallback) successCallback.apply(this, arguments);
self.trigger('reload', self); 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({ $('.ss-gridfield .ss-gridfield-item').entwine({
onclick: function(e) { onclick: function(e) {
if($(e.target).closest('.action').length) { if($(e.target).closest('.action').length) {
@ -96,7 +121,13 @@
$('.ss-gridfield .action').entwine({ $('.ss-gridfield .action').entwine({
onclick: function(e){ 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(); e.preventDefault();
} }
}); });
@ -224,9 +255,16 @@
onkeydown: function(e) { onkeydown: function(e) {
filterbtn = this.closest('.fieldgroup').find('.ss-gridfield-button-filter'); filterbtn = this.closest('.fieldgroup').find('.ss-gridfield-button-filter');
resetbtn = this.closest('.fieldgroup').find('.ss-gridfield-button-reset'); resetbtn = this.closest('.fieldgroup').find('.ss-gridfield-button-reset');
if(e.keyCode == '13') { if(e.keyCode == '13') {
btns = this.closest('.filter-header').find('.ss-gridfield-button-filter'); 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; return false;
}else{ }else{
filterbtn.addClass('hover-alike'); filterbtn.addClass('hover-alike');

232
scss/GridField.scss
View File

@ -11,29 +11,26 @@
@import "compass/css3/images"; @import "compass/css3/images";
@import "compass/css3/text-shadow"; @import "compass/css3/text-shadow";
@import "compass/css3/border-radius"; @import "compass/css3/border-radius";
@import "../admin/scss/themes/default";
@import "../admin/scss/themes/default";
@import "_elementMixins";
/*$experimental-support-for-svg variable comes from //$experimental-support-for-svg variable comes from
imported compass/support file and enables svg gradients in IE9. //imported compass/support file and enables svg gradients in IE9.
This is needed for the background gradients to work as desired with //This is needed for the background gradients to work as desired with
multiple images. */ //multiple images.
$experimental-support-for-svg: true; $experimental-support-for-svg: true;
$gf_colour_gradient_light: #B1C0C5; $gf_colour_base: desaturate(darken(adjust-hue($color-base, -10%), 10%),5%);
$gf_colour_gradient_dark: #7F9198; $gf_colour_gradient_light: lighten($gf_colour_base, 10%);
$gf_colour_base: #95a5ab; $gf_colour_gradient_dark: darken($gf_colour_base, 5%);
$gf_colour_header_border: #819198; $gf_colour_header_border: $gf_colour_gradient_dark;
$gf_colour_subheader: #BAC8CE; $gf_colour_subheader: saturate(lighten($gf_colour_base, 15%),5%);
$gf_colour_border: rgba(0,0,0,.1); $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_font: #666;
$gf_colour_text_shadow: rgba(0,0,0,.3); $gf_colour_text_shadow: rgba(0,0,0,.3);
$color-text-blue-link:#1556B2 !default;
$gf_border_radius: 7px; $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_y: 12px;
$gf_grid_x: 16px; $gf_grid_x: 16px;
@ -136,7 +133,8 @@ $gf_grid_x: 16px;
width: auto; width: auto;
white-space:nowrap; white-space:nowrap;
&.col-buttons { &.col-buttons {
width: auto; width: 70px;
padding:0;
text-align: right; text-align: right;
} }
@ -279,7 +277,6 @@ $gf_grid_x: 16px;
th{ th{
padding: 0px; padding: 0px;
} }
} }
&:hover { &:hover {
background: #FFFAD6 !important; background: #FFFAD6 !important;
@ -304,12 +301,7 @@ $gf_grid_x: 16px;
color: #FFF; color: #FFF;
padding: 5px; padding: 5px;
border-right: 1px solid $gf_colour_border; 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 { div {
&.fieldgroup,&.fieldgroup-field { &.fieldgroup,&.fieldgroup-field {
width: 100%; width: 100%;
@ -318,11 +310,15 @@ $gf_grid_x: 16px;
&.fieldgroup { &.fieldgroup {
min-width: $gf_grid_x*12.5; min-width: $gf_grid_x*12.5;
padding-right:0; padding-right:0;
&.filter-buttons{
min-width:0;
div{
@extend .col-buttons;
width:auto;
display:inline;
}
} }
} }
&.extra,&.action {
padding: 0;
cursor: default;
} }
&.main{ &.main{
white-space:nowrap; white-space:nowrap;
@ -337,18 +333,19 @@ $gf_grid_x: 16px;
border-right:none; border-right:none;
} }
} }
&.extra,&.action {
padding: 0;
cursor: default;
}
&.extra { &.extra {
background: $gf_colour_subheader; position:relative;
background:darken($color-dark-grey, 10%);
background: rgba(#000, 0.7);
padding: 5px; padding: 5px;
border-top: $gf_colour_text_shadow; border-top: $gf_colour_text_shadow;
span {
width: auto;
display: inline;
position: static;
input { input {
height:28px; //height of input field - to match design. height:28px; //height of input field - to match design.
} }
}
button.ss-ui-button { button.ss-ui-button {
padding: .3em; padding: .3em;
line-height: 1; line-height: 1;
@ -365,6 +362,8 @@ $gf_grid_x: 16px;
@include border-top-right-radius($gf_border_radius); @include border-top-right-radius($gf_border_radius);
} }
button { button {
&#action_gridfield_relationadd:hover { &#action_gridfield_relationadd:hover {
color: #444 !important; /* Not sure why IE think it needs this */ color: #444 !important; /* Not sure why IE think it needs this */
@ -377,7 +376,7 @@ $gf_grid_x: 16px;
@include box-shadow-none; @include box-shadow-none;
} }
&.ss-gridfield-sort { &.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; border:none;
width:100%; width:100%;
text-align: left; text-align: left;
@ -386,7 +385,7 @@ $gf_grid_x: 16px;
color: #fff; color: #fff;
@include border-radius(0); @include border-radius(0);
&:hover { &:hover {
background-position: right -34px; background-position: right -30px;
} }
&.ss-gridfield-sorted-desc { &.ss-gridfield-sorted-desc {
background-position: right -72px; background-position: right -72px;
@ -395,84 +394,110 @@ $gf_grid_x: 16px;
background-position: right -116px; background-position: right -116px;
} }
} }
&.ss-gridfield-button-filter.ss-ui-button{
position:absolute; &.ss-ui-button{
top: -28px; &.ss-gridfield-button-filter{
right: -1px; $bgImage: url(../images/icons/filter-icons.png) no-repeat;
display:block; background-color:lighten($color-menu-button,10%);
text-indent:-9999em; @include gridFieldButtons;
width:30px; @include background(
height:28px; //match the height of the input field $bgImage -14px 4px,
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;
}
@include background (url(../images/icons/filter-icons.png) no-repeat -40px 6px,
linear-gradient( linear-gradient(
lighten($gf_color_button, 10%), $color-menu-button,
darken($gf_color_button, 5%) darken($color-menu-button, 10%)
)); )
&.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));
}
&.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 { border-top: 1px solid lighten($color-menu-button, 5%);
@include background (url(../images/icons/filter-icons.png) no-repeat 8px -17px,
&.hover-alike:active, &:active, &.hover-alike, &:hover {
@include background (
$bgImage -14px 4px,
linear-gradient( linear-gradient(
$gf_color_button_reset_hover, lighten($color-menu-button, 10%),
darken($gf_color_button_reset_hover, 10%) $color-menu-button
)); ));
} }
&.filtered:active {
@include background (url(../images/icons/filter-icons.png) no-repeat 8px -17px, &#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;
}
}
}
}
&.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( linear-gradient(
$gf_color_button_reset_hover, rgba(#fff,0.1),
darken($gf_color_button_reset_hover, 10%) rgba(#fff,0.1)
)); )
@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 { input {
&.ss-gridfield-sort { &.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 { &:focus {
@include box-shadow-none; @include box-shadow-none;
} }
@ -564,8 +589,11 @@ $gf_grid_x: 16px;
border-bottom: 0 none; border-bottom: 0 none;
} }
} }
td:first-child, th:first-child{ td:first-child{
border-left: 1px solid $gf_colour_border; 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 %> <% loop Fields %>
<th class="extra"><span>$Field</span></th> <th class="extra">$Field</th>
<% end_loop %> <% end_loop %>
</tr> </tr>

2
templates/Includes/GridFieldSortableHeader_Row.ss
View File

@ -1,5 +1,5 @@
<tr class="sortable-header"> <tr class="sortable-header">
<% loop Fields %> <% loop Fields %>
<th class="main col-$getName"><span>$Field</span></th> <th class="main col-$getName">$Field</th>
<% end_loop %> <% end_loop %>
</tr> </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 %> <% loop FieldList %>
<div class="fieldgroup-field $FirstLast $EvenOdd"> <div class="fieldgroup-field $FirstLast $EvenOdd">
$SmallFieldHolder $SmallFieldHolder