Permalink
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...
1 parent 5a023f9 commit 458171ff9211859ab08f8037cd7b51c5dc1f94be @adrexia adrexia committed May 16, 2012
View
@@ -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
@@ -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

Large diffs are not rendered by default.

Oops, something went wrong.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@@ -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
@@ -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;
@@ -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'),
);
@@ -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
@@ -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');
Oops, something went wrong.

0 comments on commit 458171f

Please sign in to comment.