diff --git a/css/GridField.css b/css/GridField.css index 5c0a4e993..9f3de7d8d 100644 --- a/css/GridField.css +++ b/css/GridField.css @@ -92,10 +92,10 @@ .cms table.ss-gridfield-table tr th button.ss-gridfield-sort.ss-gridfield-sorted-asc { background-position: right -116px; } .cms table.ss-gridfield-table tr th button.ss-ui-button.ss-gridfield-button-filter { background-color: #55a4d2; border: none; display: block; text-indent: -9999em; width: 30px; height: 25px; background: url(../images/icons/filter-icons.png) no-repeat -14px 4px, url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzMzOGRjMSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzI4NzA5OSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background: url(../images/icons/filter-icons.png) no-repeat -14px 4px, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #338dc1), color-stop(100%, #287099)); background: url(../images/icons/filter-icons.png) no-repeat -14px 4px, -webkit-linear-gradient(#338dc1, #287099); background: url(../images/icons/filter-icons.png) no-repeat -14px 4px, -moz-linear-gradient(#338dc1, #287099); background: url(../images/icons/filter-icons.png) no-repeat -14px 4px, -o-linear-gradient(#338dc1, #287099); background: url(../images/icons/filter-icons.png) no-repeat -14px 4px, -ms-linear-gradient(#338dc1, #287099); background: url(../images/icons/filter-icons.png) no-repeat -14px 4px, linear-gradient(#338dc1, #287099); border-top: 1px solid #4199cd; } .cms table.ss-gridfield-table tr th button.ss-ui-button.ss-gridfield-button-filter.hover-alike:active, .cms table.ss-gridfield-table tr th button.ss-ui-button.ss-gridfield-button-filter:active, .cms table.ss-gridfield-table tr th button.ss-ui-button.ss-gridfield-button-filter.hover-alike, .cms table.ss-gridfield-table tr th button.ss-ui-button.ss-gridfield-button-filter:hover { background: url(../images/icons/filter-icons.png) no-repeat -14px 4px, url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzU1YTRkMiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzMzOGRjMSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background: url(../images/icons/filter-icons.png) no-repeat -14px 4px, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #55a4d2), color-stop(100%, #338dc1)); background: url(../images/icons/filter-icons.png) no-repeat -14px 4px, -webkit-linear-gradient(#55a4d2, #338dc1); background: url(../images/icons/filter-icons.png) no-repeat -14px 4px, -moz-linear-gradient(#55a4d2, #338dc1); background: url(../images/icons/filter-icons.png) no-repeat -14px 4px, -o-linear-gradient(#55a4d2, #338dc1); background: url(../images/icons/filter-icons.png) no-repeat -14px 4px, -ms-linear-gradient(#55a4d2, #338dc1); background: url(../images/icons/filter-icons.png) no-repeat -14px 4px, linear-gradient(#55a4d2, #338dc1); } -.cms table.ss-gridfield-table tr th button.ss-ui-button.ss-gridfield-button-filter#showFilter { margin-left: 12px; border: none; background: url(../images/icons/filter-icons.png) no-repeat -17px 6px; } -.cms table.ss-gridfield-table tr th button.ss-ui-button.ss-gridfield-button-filter#showFilter span { opacity: 0.4; position: absolute; width: 10px; left: 30px; top: 40%; background: url(../admin/images/btn_arrow_down_grey.png) no-repeat 0px 0px; } -.cms table.ss-gridfield-table tr th button.ss-ui-button.ss-gridfield-button-filter#showFilter:hover { background: url(../images/icons/filter-icons.png) no-repeat -40px 6px; } -.cms table.ss-gridfield-table tr th button.ss-ui-button.ss-gridfield-button-filter#showFilter:hover span { opacity: 0.9; } +.cms table.ss-gridfield-table tr th button.ss-ui-button.ss-gridfield-button-filter.trigger { margin-left: 12px; border: none; background: url(../images/icons/filter-icons.png) no-repeat -17px 6px; } +.cms table.ss-gridfield-table tr th button.ss-ui-button.ss-gridfield-button-filter.trigger span { opacity: 0.4; position: absolute; width: 10px; left: 30px; top: 40%; background: url(../admin/images/btn_arrow_down_grey.png) no-repeat 0px 0px; } +.cms table.ss-gridfield-table tr th button.ss-ui-button.ss-gridfield-button-filter.trigger:hover { background: url(../images/icons/filter-icons.png) no-repeat -40px 6px; } +.cms table.ss-gridfield-table tr th button.ss-ui-button.ss-gridfield-button-filter.trigger:hover span { opacity: 0.9; } .cms table.ss-gridfield-table tr th button.ss-ui-button.ss-gridfield-button-close { background: url(../images/icons/filter-icons.png) no-repeat 7px -17px; border: none; display: block; text-indent: -9999em; width: 30px; height: 25px; width: 25px; opacity: 0.8; margin-right: -5px; } .cms table.ss-gridfield-table tr th button.ss-ui-button.ss-gridfield-button-close.hover-alike:active, .cms table.ss-gridfield-table tr th button.ss-ui-button.ss-gridfield-button-close:active, .cms table.ss-gridfield-table tr th button.ss-ui-button.ss-gridfield-button-close.hover-alike, .cms table.ss-gridfield-table tr th button.ss-ui-button.ss-gridfield-button-close:hover { opacity: 1; background: url(../images/icons/filter-icons.png) no-repeat 7px -17px, url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0icmdiYSgyNTUsIDI1NSwgMjU1LCAwLjEpIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSJyZ2JhKDI1NSwgMjU1LCAyNTUsIDAuMSkiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA='); background: url(../images/icons/filter-icons.png) no-repeat 7px -17px, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(255, 255, 255, 0.1)), color-stop(100%, rgba(255, 255, 255, 0.1))); background: url(../images/icons/filter-icons.png) no-repeat 7px -17px, -webkit-linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1)); background: url(../images/icons/filter-icons.png) no-repeat 7px -17px, -moz-linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1)); background: url(../images/icons/filter-icons.png) no-repeat 7px -17px, -o-linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1)); background: url(../images/icons/filter-icons.png) no-repeat 7px -17px, -ms-linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1)); background: url(../images/icons/filter-icons.png) no-repeat 7px -17px, linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1)); } .cms table.ss-gridfield-table tr th button.ss-ui-button.ss-gridfield-button-reset { border: none; display: block; text-indent: -9999em; width: 30px; height: 25px; position: absolute; top: -21px; right: -1px; width: 20px; height: 20px; display: none; } diff --git a/forms/gridfield/GridFieldSortableHeader.php b/forms/gridfield/GridFieldSortableHeader.php index fefe4dd6c..c93bf8c2b 100644 --- a/forms/gridfield/GridFieldSortableHeader.php +++ b/forms/gridfield/GridFieldSortableHeader.php @@ -86,7 +86,7 @@ class GridFieldSortableHeader implements GridField_HTMLProvider, GridField_DataM } } else { if($currentColumn == count($columns) && $gridField->getConfig()->getComponentByType('GridFieldFilterHeader')){ - $field = new LiteralField($columnField, ''); + $field = new LiteralField($columnField, ''); }else{ $field = new LiteralField($columnField, '' . $title . ''); } diff --git a/javascript/GridField.js b/javascript/GridField.js index 044a572a0..482612ade 100644 --- a/javascript/GridField.js +++ b/javascript/GridField.js @@ -44,7 +44,7 @@ content = ''; self.addClass('show-filter').find('.filter-header').show(); }else{ - content = ''; + content = ''; self.removeClass('show-filter').find('.filter-header').hide(); } diff --git a/scss/GridField.scss b/scss/GridField.scss index 375b41bbb..b234c8832 100644 --- a/scss/GridField.scss +++ b/scss/GridField.scss @@ -418,7 +418,7 @@ $gf_grid_x: 16px; )); } - &#showFilter{ //The magnifying glass before filter is opened + &.trigger{ //The magnifying glass before filter is opened margin-left: $gf_grid_y; border:none; @include background ($bgImage -17px 6px);