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 000000000..81cbc5601 Binary files /dev/null and b/admin/images/btn-icon-sd3ddece98a.png differ diff --git a/admin/images/btn-icon/cross.png b/admin/images/btn-icon/cross.png new file mode 100644 index 000000000..6a91965c7 Binary files /dev/null and b/admin/images/btn-icon/cross.png differ diff --git a/admin/scss/_ieShared.scss b/admin/scss/_ieShared.scss index 79e7ebb1f..b3e7054c1 100644 --- a/admin/scss/_ieShared.scss +++ b/admin/scss/_ieShared.scss @@ -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{ diff --git a/admin/scss/ie7.scss b/admin/scss/ie7.scss index 0cb7903b0..e9f365819 100644 --- a/admin/scss/ie7.scss +++ b/admin/scss/ie7.scss @@ -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; diff --git a/forms/gridfield/GridFieldFilterHeader.php b/forms/gridfield/GridFieldFilterHeader.php index da2e1b47f..35cf5554a 100644 --- a/forms/gridfield/GridFieldFilterHeader.php +++ b/forms/gridfield/GridFieldFilterHeader.php @@ -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'), ); 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