From 458171ff9211859ab08f8037cd7b51c5dc1f94be Mon Sep 17 00:00:00 2001 From: Naomi Guyer Date: Wed, 16 May 2012 12:18:23 +1200 Subject: [PATCH] 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 --- admin/css/ie7.css | 3 + admin/css/ie8.css | 1 + admin/css/screen.css | 63 ++--- admin/images/btn-icon-sd3ddece98a.png | Bin 0 -> 20071 bytes admin/images/btn-icon/cross.png | Bin 0 -> 1482 bytes admin/scss/_ieShared.scss | 8 +- admin/scss/ie7.scss | 9 +- forms/gridfield/GridFieldFilterHeader.php | 28 +- forms/gridfield/GridFieldSortableHeader.php | 11 +- javascript/GridField.js | 44 ++- scss/GridField.scss | 258 ++++++++++-------- .../Includes/GridFieldFilterHeader_Row.ss | 4 +- .../Includes/GridFieldSortableHeader_Row.ss | 2 +- templates/forms/FieldGroup.ss | 2 +- 14 files changed, 259 insertions(+), 174 deletions(-) create mode 100644 admin/images/btn-icon-sd3ddece98a.png create mode 100644 admin/images/btn-icon/cross.png diff --git a/admin/css/ie7.css b/admin/css/ie7.css index 50616dd3e..3ea206c45 100644 --- a/admin/css/ie7.css +++ b/admin/css/ie7.css @@ -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; } diff --git a/admin/css/ie8.css b/admin/css/ie8.css index 9c4a820bc..3c8e9fca5 100644 --- a/admin/css/ie8.css +++ b/admin/css/ie8.css @@ -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; } diff --git a/admin/css/screen.css b/admin/css/screen.css index 7aff9ad6d..21c9574e3 100644 --- a/admin/css/screen.css +++ b/admin/css/screen.css @@ -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'); } diff --git a/admin/images/btn-icon-sd3ddece98a.png b/admin/images/btn-icon-sd3ddece98a.png new file mode 100644 index 0000000000000000000000000000000000000000..81cbc5601731b78616ef249ad1d19c671db9375e GIT binary patch literal 20071 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 zEn%yB1wXK|=O251_c5>XState->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'), ); diff --git a/forms/gridfield/GridFieldSortableHeader.php b/forms/gridfield/GridFieldSortableHeader.php index 7ec2df4e6..4738c7525 100644 --- a/forms/gridfield/GridFieldSortableHeader.php +++ b/forms/gridfield/GridFieldSortableHeader.php @@ -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, '' . $title . ''); + if($currentColumn == count($columns)){ + $field = new LiteralField($columnField, ''); + }else{ + $field = new LiteralField($columnField, '' . $title . ''); + } } $forTemplate->Fields->push($field); } diff --git a/javascript/GridField.js b/javascript/GridField.js index f40a342a8..6d999793a 100644 --- a/javascript/GridField.js +++ b/javascript/GridField.js @@ -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 = ''; + self.addClass('showFilter').find('.filter-header').show(); + }else{ + content = ''; + 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(''); + 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'); diff --git a/scss/GridField.scss b/scss/GridField.scss index 70eb7978b..ef4557b8a 100644 --- a/scss/GridField.scss +++ b/scss/GridField.scss @@ -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; + } } } diff --git a/templates/Includes/GridFieldFilterHeader_Row.ss b/templates/Includes/GridFieldFilterHeader_Row.ss index c3a5bbd49..32c77011f 100644 --- a/templates/Includes/GridFieldFilterHeader_Row.ss +++ b/templates/Includes/GridFieldFilterHeader_Row.ss @@ -1,5 +1,5 @@ - + <% loop Fields %> - $Field + $Field <% end_loop %> diff --git a/templates/Includes/GridFieldSortableHeader_Row.ss b/templates/Includes/GridFieldSortableHeader_Row.ss index 880606e69..0197407b7 100644 --- a/templates/Includes/GridFieldSortableHeader_Row.ss +++ b/templates/Includes/GridFieldSortableHeader_Row.ss @@ -1,5 +1,5 @@ <% loop Fields %> - $Field + $Field <% end_loop %> diff --git a/templates/forms/FieldGroup.ss b/templates/forms/FieldGroup.ss index e0590d0c2..21fd1aa43 100644 --- a/templates/forms/FieldGroup.ss +++ b/templates/forms/FieldGroup.ss @@ -1,4 +1,4 @@ -
id="$ID"<% end_if %>> +
id="$ID"<% end_if %>> <% loop FieldList %>
$SmallFieldHolder