Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

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
  • Loading branch information...
commit 458171ff9211859ab08f8037cd7b51c5dc1f94be 1 parent 5a023f9
@adrexia adrexia authored
View
3  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; }
View
1  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; }
View
63 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'); }
View
BIN  admin/images/btn-icon-sd3ddece98a.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  admin/images/btn-icon/cross.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
8 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{
View
9 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;
View
28 forms/gridfield/GridFieldFilterHeader.php
@@ -88,7 +88,7 @@ public function getManipulatedData(GridField $gridField, SS_List $dataList) {
$state = $gridField->State->GridFieldFilterHeader;
if(!isset($state->Columns)) {
return $dataList;
- }
+ }
$filterArguments = $state->Columns->toArray();
foreach($filterArguments as $columnName => $value ) {
@@ -107,12 +107,13 @@ public function getHTMLFragments($gridField) {
$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 @@ public function getHTMLFragments($gridField) {
$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'),
);
View
11 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 @@ public function getHTMLFragments($gridField) {
$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 @@ public function getHTMLFragments($gridField) {
$field->addExtraClass('ss-gridfield-sorted-desc');
}
} else {
- $field = new LiteralField($columnField, '<span class="non-sortable">' . $title . '</span>');
+ if($currentColumn == count($columns)){
+ $field = new LiteralField($columnField, '<button name="showFilter" class="ss-gridfield-button-filter" id="showFilter"></button>');
+ }else{
+ $field = new LiteralField($columnField, '<span class="non-sortable">' . $title . '</span>');
+ }
}
$forTemplate->Fields->push($field);
}
View
44 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 = '<span class="non-sortable"></span>';
+ self.addClass('showFilter').find('.filter-header').show();
+ }else{
+ content = '<button name="showFilter" class="ss-gridfield-button-filter" id="showFilter"></button>';
+ self.removeClass('showFilter').find('.filter-header').hide();
+ }
+
+ self.find('.sortable-header th:last').html(content);
+
form.removeClass('loading');
if(successCallback) successCallback.apply(this, arguments);
self.trigger('reload', self);
@@ -76,6 +89,18 @@
}
});
+
+
+ $('.ss-gridfield #showFilter').entwine({
+ onclick: function(e) {
+ $('.filter-header').show('slow');
+ this.closest('.ss-gridfield').addClass('showFilter');
+ this.parent().html('<span class="non-sortable"></span>');
+ e.preventDefault();
+ }
+ });
+
+
$('.ss-gridfield .ss-gridfield-item').entwine({
onclick: function(e) {
if($(e.target).closest('.action').length) {
@@ -93,10 +118,16 @@
this.css('cursor', 'default');
}
});
-
+
$('.ss-gridfield .action').entwine({
onclick: function(e){
- this.getGridField().reload({data: [{name: this.attr('name'), value: this.val()}]});
+ var filterState='show'; //filterstate should equal current state.
+
+ if(this.hasClass('ss-gridfield-button-close') || !(this.closest('.ss-gridfield').hasClass('showFilter'))){
+ filterState='hidden';
+ }
+
+ this.getGridField().reload({data: [{name: this.attr('name'), value: this.val(), filter: filterState}]});
e.preventDefault();
}
});
@@ -224,9 +255,16 @@
onkeydown: function(e) {
filterbtn = this.closest('.fieldgroup').find('.ss-gridfield-button-filter');
resetbtn = this.closest('.fieldgroup').find('.ss-gridfield-button-reset');
+
if(e.keyCode == '13') {
btns = this.closest('.filter-header').find('.ss-gridfield-button-filter');
- this.getGridField().reload({data: [{name: btns.attr('name'), value: btns.val()}]});
+
+ var filterState='show'; //filterstate should equal current state.
+ if(this.hasClass('ss-gridfield-button-close')||!(this.closest('.ss-gridfield').hasClass('showFilter'))){
+ filterState='hidden';
+ }
+
+ this.getGridField().reload({data: [{name: btns.attr('name'), value: btns.val(), filter: filterState}]});
return false;
}else{
filterbtn.addClass('hover-alike');
View
258 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;
- }
- @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));
- }
- &.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%)
- ));
+
+ &.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;
+ }
+ }
+ }
}
- &.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-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)
+ )
+ );
+ }
+
}
- }
+ &.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;
+ }
}
}
View
4 templates/Includes/GridFieldFilterHeader_Row.ss
@@ -1,5 +1,5 @@
-<tr class="filter-header">
+<tr class="filter-header" style="display:none;">
<% loop Fields %>
- <th class="extra"><span>$Field</span></th>
+ <th class="extra">$Field</th>
<% end_loop %>
</tr>
View
2  templates/Includes/GridFieldSortableHeader_Row.ss
@@ -1,5 +1,5 @@
<tr class="sortable-header">
<% loop Fields %>
- <th class="main col-$getName"><span>$Field</span></th>
+ <th class="main col-$getName">$Field</th>
<% end_loop %>
</tr>
View
2  templates/forms/FieldGroup.ss
@@ -1,4 +1,4 @@
-<div class="fieldgroup <% if Zebra %>fieldgroup-zebra<% end_if %>" <% if ID %>id="$ID"<% end_if %>>
+<div class="<% if extraClass %>$extraClass<% else %>fieldgroup<% end_if %><% if Zebra %> fieldgroup-zebra<% end_if %>" <% if ID %>id="$ID"<% end_if %>>
<% loop FieldList %>
<div class="fieldgroup-field $FirstLast $EvenOdd">
$SmallFieldHolder
Please sign in to comment.
Something went wrong with that request. Please try again.