tonyair
/
silverstripe-framework
mirror of https://github.com/silverstripe/silverstripe-framework
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

ENHANCEMENT: SSF-168 updated print styles to the datagrid

This commit is contained in:
Felipe Skroski 2012-04-04 13:46:04 +12:00
parent 721184c4b3
commit 4ffef20b09
10 changed files with 61 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
admin/css/screen.css
View File

@ -35,7 +35,7 @@ If more variables exist in the future, consider creating a variables file.*/
/** ---------------------------------------------------- Double tone borders http://daverupert.com/2011/06/two-tone-borders-with-css3/ ----------------------------------------------------- */
/** ----------------------------- Sprite images ----------------------------- */
/** Helper SCSS file for generating sprites for the interface. */
.btn-icon-sprite, .ui-state-default .btn-icon-accept, .ui-state-default .btn-icon-accept_disabled, .ui-state-default .btn-icon-add, .ui-state-default .btn-icon-add_disabled, .ui-state-default .btn-icon-addpage, .ui-state-default .btn-icon-addpage_disabled, .ui-state-default .btn-icon-arrow-circle-135-left, .ui-state-default .btn-icon-back, .ui-state-default .btn-icon-back_disabled, .ui-state-default .btn-icon-chain--arrow, .ui-state-default .btn-icon-chain--exclamation, .ui-state-default .btn-icon-chain--minus, .ui-state-default .btn-icon-chain--pencil, .ui-state-default .btn-icon-chain--plus, .ui-state-default .btn-icon-chain-small, .ui-state-default .btn-icon-chain-unchain, .ui-state-default .btn-icon-chain, .ui-state-default .btn-icon-cross-circle, .ui-state-default .btn-icon-cross-circle_disabled, .ui-state-default .btn-icon-decline, .ui-state-default .btn-icon-decline_disabled, .ui-state-default .btn-icon-download-csv, .ui-state-default .btn-icon-drive-upload, .ui-state-default .btn-icon-drive-upload_disabled, .ui-state-default .btn-icon-magnifier, .ui-state-default .btn-icon-minus-circle, .ui-state-default .btn-icon-minus-circle_disabled, .ui-state-default .btn-icon-navigation, .ui-state-default .btn-icon-navigation_disabled, .ui-state-default .btn-icon-network-cloud, .ui-state-default .btn-icon-network-cloud_disabled, .ui-state-default .btn-icon-pencil, .ui-state-default .btn-icon-pencil_disabled, .ui-state-default .btn-icon-plug-disconnect-prohibition, .ui-state-default .btn-icon-plug-disconnect-prohibition_disabled, .ui-state-default .btn-icon-preview, .ui-state-default .btn-icon-preview_disabled, .ui-state-default .btn-icon-settings, .ui-state-default .btn-icon-settings_disabled, .ui-state-default .btn-icon-unpublish, .ui-state-default .btn-icon-unpublish_disabled { background: url('../images/btn-icon-s41050dc384.png') no-repeat; }
.btn-icon-sprite, .ui-state-default .btn-icon-accept, .ui-state-default .btn-icon-accept_disabled, .ui-state-default .btn-icon-add, .ui-state-default .btn-icon-add_disabled, .ui-state-default .btn-icon-addpage, .ui-state-default .btn-icon-addpage_disabled, .ui-state-default .btn-icon-arrow-circle-135-left, .ui-state-default .btn-icon-back, .ui-state-default .btn-icon-back_disabled, .ui-state-default .btn-icon-chain--arrow, .ui-state-default .btn-icon-chain--exclamation, .ui-state-default .btn-icon-chain--minus, .ui-state-default .btn-icon-chain--pencil, .ui-state-default .btn-icon-chain--plus, .ui-state-default .btn-icon-chain-small, .ui-state-default .btn-icon-chain-unchain, .ui-state-default .btn-icon-chain, .ui-state-default .btn-icon-cross-circle, .ui-state-default .btn-icon-cross-circle_disabled, .ui-state-default .btn-icon-decline, .ui-state-default .btn-icon-decline_disabled, .ui-state-default .btn-icon-download-csv, .ui-state-default .btn-icon-drive-upload, .ui-state-default .btn-icon-drive-upload_disabled, .ui-state-default .btn-icon-grid_print, .ui-state-default .btn-icon-magnifier, .ui-state-default .btn-icon-minus-circle, .ui-state-default .btn-icon-minus-circle_disabled, .ui-state-default .btn-icon-navigation, .ui-state-default .btn-icon-navigation_disabled, .ui-state-default .btn-icon-network-cloud, .ui-state-default .btn-icon-network-cloud_disabled, .ui-state-default .btn-icon-pencil, .ui-state-default .btn-icon-pencil_disabled, .ui-state-default .btn-icon-plug-disconnect-prohibition, .ui-state-default .btn-icon-plug-disconnect-prohibition_disabled, .ui-state-default .btn-icon-preview, .ui-state-default .btn-icon-preview_disabled, .ui-state-default .btn-icon-settings, .ui-state-default .btn-icon-settings_disabled, .ui-state-default .btn-icon-unpublish, .ui-state-default .btn-icon-unpublish_disabled { background: url('../images/btn-icon-s469eb2bf90.png') no-repeat; }
.ui-state-default .btn-icon-accept { background-position: 0 0; }
.ui-state-default .btn-icon-accept_disabled { background-position: 0 -17px; }
@ -61,23 +61,24 @@ If more variables exist in the future, consider creating a variables file.*/
.ui-state-default .btn-icon-download-csv { background-position: 0 -343px; }
.ui-state-default .btn-icon-drive-upload { background-position: 0 -361px; }
.ui-state-default .btn-icon-drive-upload_disabled { background-position: 0 -377px; }
.ui-state-default .btn-icon-magnifier { background-position: 0 -393px; }
.ui-state-default .btn-icon-minus-circle { background-position: 0 -409px; }
.ui-state-default .btn-icon-minus-circle_disabled { background-position: 0 -425px; }
.ui-state-default .btn-icon-navigation { background-position: 0 -441px; }
.ui-state-default .btn-icon-navigation_disabled { background-position: 0 -457px; }
.ui-state-default .btn-icon-network-cloud { background-position: 0 -473px; }
.ui-state-default .btn-icon-network-cloud_disabled { background-position: 0 -489px; }
.ui-state-default .btn-icon-pencil { background-position: 0 -505px; }
.ui-state-default .btn-icon-pencil_disabled { background-position: 0 -521px; }
.ui-state-default .btn-icon-plug-disconnect-prohibition { background-position: 0 -537px; }
.ui-state-default .btn-icon-plug-disconnect-prohibition_disabled { background-position: 0 -553px; }
.ui-state-default .btn-icon-preview { background-position: 0 -569px; }
.ui-state-default .btn-icon-preview_disabled { background-position: 0 -586px; }
.ui-state-default .btn-icon-settings { background-position: 0 -603px; }
.ui-state-default .btn-icon-settings_disabled { background-position: 0 -619px; }
.ui-state-default .btn-icon-unpublish { background-position: 0 -635px; }
.ui-state-default .btn-icon-unpublish_disabled { background-position: 0 -653px; }
.ui-state-default .btn-icon-grid_print { background-position: 0 -393px; }
.ui-state-default .btn-icon-magnifier { background-position: 0 -409px; }
.ui-state-default .btn-icon-minus-circle { background-position: 0 -425px; }
.ui-state-default .btn-icon-minus-circle_disabled { background-position: 0 -441px; }
.ui-state-default .btn-icon-navigation { background-position: 0 -457px; }
.ui-state-default .btn-icon-navigation_disabled { background-position: 0 -473px; }
.ui-state-default .btn-icon-network-cloud { background-position: 0 -489px; }
.ui-state-default .btn-icon-network-cloud_disabled { background-position: 0 -505px; }
.ui-state-default .btn-icon-pencil { background-position: 0 -521px; }
.ui-state-default .btn-icon-pencil_disabled { background-position: 0 -537px; }
.ui-state-default .btn-icon-plug-disconnect-prohibition { background-position: 0 -553px; }
.ui-state-default .btn-icon-plug-disconnect-prohibition_disabled { background-position: 0 -569px; }
.ui-state-default .btn-icon-preview { background-position: 0 -585px; }
.ui-state-default .btn-icon-preview_disabled { background-position: 0 -602px; }
.ui-state-default .btn-icon-settings { background-position: 0 -619px; }
.ui-state-default .btn-icon-settings_disabled { background-position: 0 -635px; }
.ui-state-default .btn-icon-unpublish { background-position: 0 -651px; }
.ui-state-default .btn-icon-unpublish_disabled { background-position: 0 -669px; }
.icon { text-indent: -9999px; border: none; outline: none; }
.icon.icon-24 { width: 24px; height: 24px; background: url('../images/menu-icons/24x24-s546fcae8fd.png'); }
@ -272,7 +273,7 @@ body.cms { overflow: hidden; }
/** -------------------------------------------- Tabs -------------------------------------------- */
.cms-content-header .ui-tabs-nav li, .cms-dialog .ui-tabs-nav li { margin: 0; }
.cms-content-header .ui-tabs-nav li a, .cms-dialog .ui-tabs-nav li a { font-weight: bold; line-height: 16px; padding: 12px 20px 11px; }
.cms-content-header .ui-tabs-nav .ui-state-default, .cms-content-header .ui-tabs-nav .ui-widget-content .ui-state-default, .cms-content-header .ui-tabs-nav .ui-widget-header .ui-state-default, .cms-dialog .ui-tabs-nav .ui-state-default, .cms-dialog .ui-tabs-nav .ui-widget-content .ui-state-default, .cms-dialog .ui-tabs-nav .ui-widget-header .ui-state-default { background-color: #b0bec7; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2IwYmVjNyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzhjYTFhZSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #b0bec7), color-stop(100%, #8ca1ae)); background-image: -webkit-linear-gradient(#b0bec7, #8ca1ae); background-image: -moz-linear-gradient(#b0bec7, #8ca1ae); background-image: -o-linear-gradient(#b0bec7, #8ca1ae); background-image: -ms-linear-gradient(#b0bec7, #8ca1ae); background-image: linear-gradient(#b0bec7, #8ca1ae); border-right-color: #a6a6a6; border-left-color: #d9d9d9; border-bottom: none; text-shadow: white 0 1px 0; }
.cms-content-header .ui-tabs-nav .ui-state-default, .cms-content-header .ui-tabs-nav .ui-widget-content .ui-state-default, .cms-content-header .ui-tabs-nav .ui-widget-header .ui-state-default, .cms-dialog .ui-tabs-nav .ui-state-default, .cms-dialog .ui-tabs-nav .ui-widget-content .ui-state-default, .cms-dialog .ui-tabs-nav .ui-widget-header .ui-state-default { background-color: #b0bec7; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2IwYmVjNyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzhjYTFhZSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #b0bec7), color-stop(100%, #8ca1ae)); background-image: -webkit-linear-gradient(#b0bec7, #8ca1ae); background-image: -moz-linear-gradient(#b0bec7, #8ca1ae); background-image: -o-linear-gradient(#b0bec7, #8ca1ae); background-image: -ms-linear-gradient(#b0bec7, #8ca1ae); background-image: linear-gradient(#b0bec7, #8ca1ae); border-right-color: #a6a6a6; border-left-color: #d9d9d9; border-bottom: none; text-shadow: #e6e6e6 0 1px 0; }
.cms-content-header .ui-tabs-nav .ui-state-active, .cms-content-header .ui-tabs-nav .ui-widget-content .ui-state-active, .cms-content-header .ui-tabs-nav .ui-widget-header .ui-state-active, .cms-dialog .ui-tabs-nav .ui-state-active, .cms-dialog .ui-tabs-nav .ui-widget-content .ui-state-active, .cms-dialog .ui-tabs-nav .ui-widget-header .ui-state-active { background: #eceff1; border-right-color: #a6a6a6; border-left-color: #a6a6a6; margin-right: -1px; margin-left: -1px; z-index: 2; }
.cms-content-header .ui-tabs-nav .ui-state-active a, .cms-content-header .ui-tabs-nav .ui-widget-content .ui-state-active a, .cms-content-header .ui-tabs-nav .ui-widget-header .ui-state-active a, .cms-dialog .ui-tabs-nav .ui-state-active a, .cms-dialog .ui-tabs-nav .ui-widget-content .ui-state-active a, .cms-dialog .ui-tabs-nav .ui-widget-header .ui-state-active a { border-bottom: none; }

BIN
admin/images/btn-icon-s41050dc384.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 17 KiB

BIN
admin/images/btn-icon-sc495ceeeca.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 17 KiB

2
admin/scss/_style.scss
View File

@ -206,7 +206,7 @@ body.cms {
bottom:none;
}
text-shadow: lighten($color-tab, 60%) 0 1px 0;
text-shadow: lighten($color-tab, 5%) 0 1px 0;
}
.ui-state-active,

2
css/GridField.css
View File

@ -8,6 +8,8 @@
.cms .ss-gridfield p button#action_export span.ui-button-text { padding-left: 26px; }
.cms .ss-gridfield .add-existing-autocompleter { width: 500px; }
.cms .ss-gridfield .add-existing-autocompleter input.relation-search { width: 380px; }
.cms .ss-gridfield .grid-print-button { display: inline-block; }
.cms .ss-gridfield .grid-csv-button { display: inline-block; }
.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-table thead { color: #1d2224; background: transparent; }
.cms table.ss-gridfield-table thead tr.filter-header .fieldgroup { max-width: 512px; }

2
forms/gridfield/GridFieldExportButton.php
View File

@ -56,7 +56,7 @@ class GridFieldExportButton implements GridField_HTMLProvider, GridField_ActionP
$button->setAttribute('data-icon', 'download-csv');
$button->addExtraClass('no-ajax');
return array(
$this->targetFragment => '<p>' . $button->Field() . '</p>',
$this->targetFragment => '<p class="grid-csv-button">' . $button->Field() . '</p>',
);
}

2
forms/gridfield/GridFieldPrintButton.php
View File

@ -52,7 +52,7 @@ class GridFieldPrintButton implements GridField_HTMLProvider, GridField_ActionPr
$button->addExtraClass('gridfield-button-print');
//$button->addExtraClass('no-ajax');
return array(
$this->targetFragment => '<p>' . $button->Field() . '</p>',
$this->targetFragment => '<p class="grid-print-button">' . $button->Field() . '</p>',
);
}

6
scss/GridField.scss
View File

@ -75,6 +75,12 @@ $gf_grid_x: 16px;
}
width: 500px;
}
.grid-print-button{
display: inline-block;
}
.grid-csv-button{
display: inline-block;
}
}
table.ss-gridfield-table {

29
scss/GridField_print.scss
View File

@ -1,3 +1,28 @@
table td{
border: 1px solid black;
table {
border-collapse: collapse;
font-family: Arial, sans-serif;
color: #333;
font-size: 12pt;
tr{
}
th{
border-bottom: 2px solid #333;
padding: 5px 10px;
font-weight: bold;
text-align: left;
&:first-child{
padding-left: 0px;
}
}
td{
border-top: 1px solid #aaa;
border-bottom: 1px solid #aaa;
text-align: left;
padding: 5px 10px;
&:first-child{
padding-left: 0px;
}
}
}

6
templates/Includes/GridField_print.ss
View File

@ -1,5 +1,5 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//MI" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="mi" lang="mi">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
</head>
@ -7,7 +7,7 @@
<% if $Title %><h3>$Title</h3><% end_if %>
<table>
<thead>
<tr><% control Header %><td>$CellString</td><% end_control %></tr>
<tr><% control Header %><th>$CellString</th><% end_control %></tr>
</thead>
<tbody>
<% control ItemRows %>