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

BUGFIX Changed CSS class structure of GridField to avoid duplication of ".ss-gridfield" selector in different contexts, and make selectors less verbose (no more "fieldset.ss-gridfield"). Added "field" class to GridField container to ensure it displays correctly alongside other form fields (mainly around margins and paddings)

Browse Source
This commit is contained in:
Ingo Schommer 2012-02-23 15:17:39 +01:00
parent bb42afe32f
commit 0bc6bffa9b
7 changed files with 57 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

80
css/GridField.css
View File

@ -1,41 +1,41 @@
/** Core styles for the basic GridField form field without any specific style. @package sapphire @subpackage scss @todo Add radial gradient to default delete button state @todo Create SASS mixin-function to simply swap the from/to, to to/from colours in grsdient mixins? */ /** Core styles for the basic GridField form field without any specific style. @package sapphire @subpackage scss @todo Add radial gradient to default delete button state @todo Create SASS mixin-function to simply swap the from/to, to to/from colours in grsdient mixins? */
.cms fieldset.ss-gridfield > div { margin-bottom: 35px; } .cms .ss-gridfield > div { margin-bottom: 35px; }
.cms fieldset.ss-gridfield[data-selectable] tr.ui-selected, .cms fieldset.ss-gridfield[data-selectable] tr.ui-selecting { background: #FFFAD6 !important; } .cms .ss-gridfield[data-selectable] tr.ui-selected, .cms .ss-gridfield[data-selectable] tr.ui-selecting { background: #FFFAD6 !important; }
.cms fieldset.ss-gridfield[data-selectable] td { cursor: pointer; } .cms .ss-gridfield[data-selectable] td { cursor: pointer; }
.cms table.ss-gridfield.field { display: table; box-shadow: none; padding: 0; margin: 20px 0 0 0; border-collapse: separate; border-bottom: 0 none; width: 100%; } .cms table.ss-gridfield-table { display: table; box-shadow: none; padding: 0; border-collapse: separate; border-bottom: 0 none; width: 100%; }
.cms table.ss-gridfield.field thead { color: #1d2224; background: transparent; } .cms table.ss-gridfield-table thead { color: #1d2224; background: transparent; }
.cms table.ss-gridfield.field tbody { background: #FFF; } .cms table.ss-gridfield-table tbody { background: #FFF; }
.cms table.ss-gridfield.field tbody td { /* Emulate a link by default */ } .cms table.ss-gridfield-table tbody td { /* Emulate a link by default */ }
.cms table.ss-gridfield.field tbody td button { border: none; background: none; margin: 0 0 0 2px; padding: 0; width: auto; text-shadow: none; } .cms table.ss-gridfield-table tbody td button { border: none; background: none; margin: 0 0 0 2px; padding: 0; width: auto; text-shadow: none; }
.cms table.ss-gridfield.field tfoot { color: #1d2224; } .cms table.ss-gridfield-table tfoot { color: #1d2224; }
.cms table.ss-gridfield.field tfoot tr td { background: #95a5ab; padding: .7em; border-bottom: 1px solid rgba(0, 0, 0, 0.1); } .cms table.ss-gridfield-table tfoot tr td { background: #95a5ab; padding: .7em; border-bottom: 1px solid rgba(0, 0, 0, 0.1); }
.cms table.ss-gridfield.field tr.sortable-header th { background: #7f9198; } .cms table.ss-gridfield-table tr.sortable-header th { background: #7f9198; }
.cms table.ss-gridfield.field tr:hover { background: #FFFAD6 !important; } .cms table.ss-gridfield-table tr:hover { background: #FFFAD6 !important; }
.cms table.ss-gridfield.field tr:first-child { background: transparent; } .cms table.ss-gridfield-table tr:first-child { background: transparent; }
.cms table.ss-gridfield.field tr.ss-gridfield-even { background: #f0f4f7; } .cms table.ss-gridfield-table tr.ss-gridfield-even { background: #f0f4f7; }
.cms table.ss-gridfield.field tr.ss-gridfield-even.ss-gridfield-last { border-bottom: none; } .cms table.ss-gridfield-table tr.ss-gridfield-even.ss-gridfield-last { border-bottom: none; }
.cms table.ss-gridfield.field tr.even { background: #f0f4f7; } .cms table.ss-gridfield-table tr.even { background: #f0f4f7; }
.cms table.ss-gridfield.field tr th { font-weight: bold; font-size: 12px; color: #FFF; padding: 5px; border-right: 1px solid rgba(0, 0, 0, 0.1); } .cms table.ss-gridfield-table tr th { font-weight: bold; font-size: 12px; color: #FFF; padding: 5px; border-right: 1px solid rgba(0, 0, 0, 0.1); }
.cms table.ss-gridfield.field tr th.main:first-child { -moz-border-radius-topleft: 7px; -webkit-border-top-left-radius: 7px; -o-border-top-left-radius: 7px; -ms-border-top-left-radius: 7px; -khtml-border-top-left-radius: 7px; border-top-left-radius: 7px; } .cms table.ss-gridfield-table tr th.main:first-child { -moz-border-radius-topleft: 7px; -webkit-border-top-left-radius: 7px; -o-border-top-left-radius: 7px; -ms-border-top-left-radius: 7px; -khtml-border-top-left-radius: 7px; border-top-left-radius: 7px; }
.cms table.ss-gridfield.field tr th.main:last-child { -moz-border-radius-topright: 7px; -webkit-border-top-right-radius: 7px; -o-border-top-right-radius: 7px; -ms-border-top-right-radius: 7px; -khtml-border-top-right-radius: 7px; border-top-right-radius: 7px; } .cms table.ss-gridfield-table tr th.main:last-child { -moz-border-radius-topright: 7px; -webkit-border-top-right-radius: 7px; -o-border-top-right-radius: 7px; -ms-border-top-right-radius: 7px; -khtml-border-top-right-radius: 7px; border-top-right-radius: 7px; }
.cms table.ss-gridfield.field tr th div.fieldgroup, .cms table.ss-gridfield.field tr th div.fieldgroup-field { width: auto; } .cms table.ss-gridfield-table tr th div.fieldgroup, .cms table.ss-gridfield-table tr th div.fieldgroup-field { width: auto; }
.cms table.ss-gridfield.field tr th div.fieldgroup { min-width: 200px; padding-right: 0; } .cms table.ss-gridfield-table tr th div.fieldgroup { min-width: 200px; padding-right: 0; }
.cms table.ss-gridfield.field tr th.extra, .cms table.ss-gridfield.field tr th.action { background: #7f9198; padding: 0; cursor: default; } .cms table.ss-gridfield-table tr th.extra, .cms table.ss-gridfield-table tr th.action { background: #7f9198; padding: 0; cursor: default; }
.cms table.ss-gridfield.field tr th.extra button.ss-ui-button, .cms table.ss-gridfield.field tr th.extra button:hover.ss-ui-button, .cms table.ss-gridfield.field tr th.action button.ss-ui-button, .cms table.ss-gridfield.field tr th.action button:hover.ss-ui-button { margin-left: .9em; color: #222; } .cms table.ss-gridfield-table tr th.extra button.ss-ui-button, .cms table.ss-gridfield-table tr th.extra button:hover.ss-ui-button, .cms table.ss-gridfield-table tr th.action button.ss-ui-button, .cms table.ss-gridfield-table tr th.action button:hover.ss-ui-button { margin-left: .9em; color: #222; }
.cms table.ss-gridfield.field tr th.main { border-top: 1px solid rgba(0, 0, 0, 0.1); color: #fff; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #b1c0c5), color-stop(100%, #7f9198)); background-image: -webkit-linear-gradient(#b1c0c5, #7f9198); background-image: -moz-linear-gradient(#b1c0c5, #7f9198); background-image: -o-linear-gradient(#b1c0c5, #7f9198); background-image: -ms-linear-gradient(#b1c0c5, #7f9198); background-image: linear-gradient(#b1c0c5, #7f9198); } .cms table.ss-gridfield-table tr th.main { border-top: 1px solid rgba(0, 0, 0, 0.1); color: #fff; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #b1c0c5), color-stop(100%, #7f9198)); background-image: -webkit-linear-gradient(#b1c0c5, #7f9198); background-image: -moz-linear-gradient(#b1c0c5, #7f9198); background-image: -o-linear-gradient(#b1c0c5, #7f9198); background-image: -ms-linear-gradient(#b1c0c5, #7f9198); background-image: linear-gradient(#b1c0c5, #7f9198); }
.cms table.ss-gridfield.field tr th.main span { text-shadow: rgba(0, 0, 0, 0.3) 0px -1px 0; } .cms table.ss-gridfield-table tr th.main span { text-shadow: rgba(0, 0, 0, 0.3) 0px -1px 0; }
.cms table.ss-gridfield.field tr th.extra { background: #bac8ce; padding: 5px; border-top: rgba(0, 0, 0, 0.3); } .cms table.ss-gridfield-table tr th.extra { background: #bac8ce; padding: 5px; border-top: rgba(0, 0, 0, 0.3); }
.cms table.ss-gridfield.field tr th.extra span { width: auto; display: inline; position: static; } .cms table.ss-gridfield-table tr th.extra span { width: auto; display: inline; position: static; }
.cms table.ss-gridfield.field tr th.extra button.ss-ui-button { padding: .3em; line-height: 1; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; position: relative; border-bottom-width: 0; -webkit-border-radius: 2px 2px; -moz-border-radius: 2px / 2px; -o-border-radius: 2px / 2px; -ms-border-radius: 2px / 2px; -khtml-border-radius: 2px / 2px; border-radius: 2px / 2px; } .cms table.ss-gridfield-table tr th.extra button.ss-ui-button { padding: .3em; line-height: 1; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; position: relative; border-bottom-width: 0; -webkit-border-radius: 2px 2px; -moz-border-radius: 2px / 2px; -o-border-radius: 2px / 2px; -ms-border-radius: 2px / 2px; -khtml-border-radius: 2px / 2px; border-radius: 2px / 2px; }
.cms table.ss-gridfield.field tr th.action { border-right: 0; } .cms table.ss-gridfield-table tr th.action { border-right: 0; }
.cms table.ss-gridfield.field tr th.first { -moz-border-radius-topleft: 7px; -webkit-border-top-left-radius: 7px; -o-border-top-left-radius: 7px; -ms-border-top-left-radius: 7px; -khtml-border-top-left-radius: 7px; border-top-left-radius: 7px; } .cms table.ss-gridfield-table tr th.first { -moz-border-radius-topleft: 7px; -webkit-border-top-left-radius: 7px; -o-border-top-left-radius: 7px; -ms-border-top-left-radius: 7px; -khtml-border-top-left-radius: 7px; border-top-left-radius: 7px; }
.cms table.ss-gridfield.field tr th.last { -moz-border-radius-topright: 7px; -webkit-border-top-right-radius: 7px; -o-border-top-right-radius: 7px; -ms-border-top-right-radius: 7px; -khtml-border-top-right-radius: 7px; border-top-right-radius: 7px; } .cms table.ss-gridfield-table tr th.last { -moz-border-radius-topright: 7px; -webkit-border-top-right-radius: 7px; -o-border-top-right-radius: 7px; -ms-border-top-right-radius: 7px; -khtml-border-top-right-radius: 7px; border-top-right-radius: 7px; }
.cms table.ss-gridfield.field tr th button:hover { color: #ccc !important; /* Not sure why IE think it needs this */ } .cms table.ss-gridfield-table tr th button:hover { color: #ccc !important; /* Not sure why IE think it needs this */ }
.cms table.ss-gridfield.field tr th button.ss-gridfield-sort:hover { color: #fff !important; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; } .cms table.ss-gridfield-table tr th button.ss-gridfield-sort:hover { color: #fff !important; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; }
.cms table.ss-gridfield.field tr th button.ss-gridfield-sort { background: transparent url(../images/arrows-01.png) no-repeat right 2px; border: none; width: 100%; text-align: left; padding: 4px 0; text-shadow: rgba(0, 0, 0, 0.3) 0px -1px 0; color: #fff; -moz-border-radius: 0; -webkit-border-radius: 0; -o-border-radius: 0; -ms-border-radius: 0; -khtml-border-radius: 0; border-radius: 0; } .cms table.ss-gridfield-table tr th button.ss-gridfield-sort { background: transparent url(../images/arrows-01.png) no-repeat right 2px; border: none; width: 100%; text-align: left; padding: 4px 0; text-shadow: rgba(0, 0, 0, 0.3) 0px -1px 0; color: #fff; -moz-border-radius: 0; -webkit-border-radius: 0; -o-border-radius: 0; -ms-border-radius: 0; -khtml-border-radius: 0; border-radius: 0; }
.cms table.ss-gridfield.field tr th input.ss-gridfield-sort { padding: 2px; } .cms table.ss-gridfield-table tr th input.ss-gridfield-sort { padding: 2px; }
.cms table.ss-gridfield.field tr th input.ss-gridfield-sort:focus { -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; } .cms table.ss-gridfield-table tr th input.ss-gridfield-sort:focus { -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; }
.cms table.ss-gridfield.field tr td { border-right: 1px solid rgba(0, 0, 0, 0.1); padding: 7px 12px; color: #666666; } .cms table.ss-gridfield-table tr td { border-right: 1px solid rgba(0, 0, 0, 0.1); padding: 7px 12px; color: #666666; }
.cms table.ss-gridfield.field tr td.bottom-all { -moz-border-radius-bottomleft: 7px; -webkit-border-bottom-left-radius: 7px; -o-border-bottom-left-radius: 7px; -ms-border-bottom-left-radius: 7px; -khtml-border-bottom-left-radius: 7px; border-bottom-left-radius: 7px; -moz-border-radius-bottomright: 7px; -webkit-border-bottom-right-radius: 7px; -o-border-bottom-right-radius: 7px; -ms-border-bottom-right-radius: 7px; -khtml-border-bottom-right-radius: 7px; border-bottom-right-radius: 7px; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #b1c0c5), color-stop(100%, #7f9198)); background-image: -webkit-linear-gradient(#b1c0c5, #7f9198); background-image: -moz-linear-gradient(#b1c0c5, #7f9198); background-image: -o-linear-gradient(#b1c0c5, #7f9198); background-image: -ms-linear-gradient(#b1c0c5, #7f9198); background-image: linear-gradient(#b1c0c5, #7f9198); } .cms table.ss-gridfield-table tr td.bottom-all { -moz-border-radius-bottomleft: 7px; -webkit-border-bottom-left-radius: 7px; -o-border-bottom-left-radius: 7px; -ms-border-bottom-left-radius: 7px; -khtml-border-bottom-left-radius: 7px; border-bottom-left-radius: 7px; -moz-border-radius-bottomright: 7px; -webkit-border-bottom-right-radius: 7px; -o-border-bottom-right-radius: 7px; -ms-border-bottom-right-radius: 7px; -khtml-border-bottom-right-radius: 7px; border-bottom-right-radius: 7px; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #b1c0c5), color-stop(100%, #7f9198)); background-image: -webkit-linear-gradient(#b1c0c5, #7f9198); background-image: -moz-linear-gradient(#b1c0c5, #7f9198); background-image: -o-linear-gradient(#b1c0c5, #7f9198); background-image: -ms-linear-gradient(#b1c0c5, #7f9198); background-image: linear-gradient(#b1c0c5, #7f9198); }
.cms table.ss-gridfield.field tr.last td { border-bottom: 0 none; } .cms table.ss-gridfield-table tr.last td { border-bottom: 0 none; }
.cms table.ss-gridfield.field td:first-child, .cms table.ss-gridfield.field th:first-child { border-left: 1px solid rgba(0, 0, 0, 0.1); } .cms table.ss-gridfield-table td:first-child, .cms table.ss-gridfield-table th:first-child { border-left: 1px solid rgba(0, 0, 0, 0.1); }

4
forms/gridfield/GridField.php
View File

@ -349,7 +349,7 @@ class GridField extends FormField {
$body = $content['body'] ? $this->createTag('tbody', array('class' => 'ss-gridfield-items'), implode("\n", $content['body'])) : ''; $body = $content['body'] ? $this->createTag('tbody', array('class' => 'ss-gridfield-items'), implode("\n", $content['body'])) : '';
$foot = $content['footer'] ? $this->createTag('tfoot', array(), implode("\n", $content['footer'])) : ''; $foot = $content['footer'] ? $this->createTag('tfoot', array(), implode("\n", $content['footer'])) : '';
$this->addExtraClass('ss-gridfield'); $this->addExtraClass('ss-gridfield field');
$attrs = array_diff_key( $attrs = array_diff_key(
$this->getAttributes(), $this->getAttributes(),
array('value' => false, 'type' => false, 'name' => false) array('value' => false, 'type' => false, 'name' => false)
@ -357,7 +357,7 @@ class GridField extends FormField {
$attrs['data-name'] = $this->getName(); $attrs['data-name'] = $this->getName();
$tableAttrs = array( $tableAttrs = array(
'id' => isset($this->id) ? $this->id : null, 'id' => isset($this->id) ? $this->id : null,
'class' => "field CompositeField {$this->extraClass()}", 'class' => 'ss-gridfield-table',
'cellpadding' => '0', 'cellpadding' => '0',
'cellspacing' => '0' 'cellspacing' => '0'
); );

18
javascript/GridField.js
View File

@ -1,6 +1,6 @@
(function($){ (function($){
$('fieldset.ss-gridfield').entwine({ $('.ss-gridfield').entwine({
/** /**
* @param {Object} Additional options for jQuery.ajax() call * @param {Object} Additional options for jQuery.ajax() call
*/ */
@ -52,20 +52,20 @@
} }
}); });
$('fieldset.ss-gridfield *').entwine({ $('.ss-gridfield *').entwine({
getGridField: function() { getGridField: function() {
return this.parents('fieldset.ss-gridfield:first'); return this.closest('.ss-gridfield');
} }
}); });
$('fieldset.ss-gridfield .action').entwine({ $('.ss-gridfield .action').entwine({
onclick: function(e){ onclick: function(e){
this.getGridField().reload({data: [{name: this.attr('name'), value: this.val()}]}); this.getGridField().reload({data: [{name: this.attr('name'), value: this.val()}]});
e.preventDefault(); e.preventDefault();
} }
}); });
$('fieldset.ss-gridfield .action-deleterecord').entwine({ $('.ss-gridfield .action-deleterecord').entwine({
onclick: function(e){ onclick: function(e){
if(!confirm(ss.i18n._t('TABLEFIELD.DELETECONFIRMMESSAGE'))) return false; if(!confirm(ss.i18n._t('TABLEFIELD.DELETECONFIRMMESSAGE'))) return false;
else this._super(e); else this._super(e);
@ -77,10 +77,10 @@
* ToDo ensure filter-button state is maintained after filtering (see resetState param) * ToDo ensure filter-button state is maintained after filtering (see resetState param)
* ToDo get working in IE 6-7 * ToDo get working in IE 6-7
*/ */
$('fieldset.ss-gridfield input.ss-gridfield-sort').entwine({ $('.ss-gridfield input.ss-gridfield-sort').entwine({
onfocusin: function(e) { onfocusin: function(e) {
// Dodgy results in IE <=7 & ignore if only one filter-field // Dodgy results in IE <=7 & ignore if only one filter-field
countfields = $('fieldset.ss-gridfield input.ss-gridfield-sort').length; countfields = $('.ss-gridfield input.ss-gridfield-sort').length;
if(($.browser.msie && $.browser.version <= 7) || countfields == 1) { if(($.browser.msie && $.browser.version <= 7) || countfields == 1) {
return false; return false;
} }
@ -116,7 +116,7 @@
* Allows selection of one or more rows in the grid field. * Allows selection of one or more rows in the grid field.
* Purely clientside at the moment. * Purely clientside at the moment.
*/ */
$('fieldset.ss-gridfield[data-selectable]').entwine({ $('.ss-gridfield[data-selectable]').entwine({
/** /**
* @return {jQuery} Collection * @return {jQuery} Collection
*/ */
@ -130,7 +130,7 @@
return $.map(this.getSelectedItems(), function(el) {return $(el).data('id');}); return $.map(this.getSelectedItems(), function(el) {return $(el).data('id');});
} }
}); });
$('fieldset.ss-gridfield[data-selectable] .ss-gridfield-items').entwine({ $('.ss-gridfield[data-selectable] .ss-gridfield-items').entwine({
onmatch: function() { onmatch: function() {
this._super(); this._super();

4
javascript/GridFieldSearch.js
View File

@ -25,10 +25,10 @@ jQuery(function($){
}); });
}, },
select: function(event, ui) { select: function(event, ui) {
$(this).closest("fieldset.ss-gridfield").find("#action_gridfield_relationfind").replaceWith( $(this).closest(".ss-gridfield").find("#action_gridfield_relationfind").replaceWith(
'<input type="hidden" name="relationID" value="'+ui.item.id+'" id="relationID"/>' '<input type="hidden" name="relationID" value="'+ui.item.id+'" id="relationID"/>'
); );
$(this).closest("fieldset.ss-gridfield").find("#action_gridfield_relationadd").removeAttr('disabled'); $(this).closest(".ss-gridfield").find("#action_gridfield_relationadd").removeAttr('disabled');
} }
}); });
}); });

2
javascript/HtmlEditorField.js
View File

@ -921,7 +921,7 @@ ss.editorWrappers['default'] = ss.editorWrappers.tinyMCE;
// TODO Custom event doesn't fire in IE if registered through object literal // TODO Custom event doesn't fire in IE if registered through object literal
var self = this; var self = this;
this.bind('change', function() { this.bind('change', function() {
var fileList = self.closest('form').find('fieldset.ss-gridfield'); var fileList = self.closest('form').find('.ss-gridfield');
fileList.setState('ParentID', self.getValue()); fileList.setState('ParentID', self.getValue());
fileList.reload(); fileList.reload();
}); });

2
javascript/UploadField.js
View File

@ -99,7 +99,7 @@
// TODO Allow single-select // TODO Allow single-select
dialog.find('iframe').bind('load', function(e) { dialog.find('iframe').bind('load', function(e) {
var contents = $(this).contents(), gridField = contents.find('fieldset.ss-gridfield'); var contents = $(this).contents(), gridField = contents.find('.ss-gridfield');
// TODO Fix jQuery custom event bubbling across iframes on same domain // TODO Fix jQuery custom event bubbling across iframes on same domain
// gridField.find('.ss-gridfield-items')).bind('selectablestop', function() { // gridField.find('.ss-gridfield-items')).bind('selectablestop', function() {
// }); // });

5
scss/GridField.scss
View File

@ -31,7 +31,7 @@ $gf_border_radius: 7px;
} }
.cms { .cms {
fieldset.ss-gridfield { .ss-gridfield {
& > div { & > div {
margin-bottom: 35px; margin-bottom: 35px;
} }
@ -47,11 +47,10 @@ $gf_border_radius: 7px;
} }
} }
table.ss-gridfield.field { table.ss-gridfield-table {
display: table; display: table;
box-shadow: none; box-shadow: none;
padding: 0; padding: 0;
margin: 20px 0 0 0;
border-collapse: separate; border-collapse: separate;
border-bottom: 0 none; border-bottom: 0 none;
width: 100%; width: 100%;