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

ENHANCEMENT: styled the header of the datagrid (SSF-106)

This commit is contained in:
Felipe Skroski 2012-02-22 16:25:11 +13:00
parent b389138f50
commit 1ebd83df1a
7 changed files with 43 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
admin/css/screen.css
View File

@ -115,7 +115,7 @@ form.small .field input.text, form.small .field textarea, form.small .field sele
.field .chzn-container-single .chzn-single { height: 26px; line-height: 26px; /* not relative, as then we'd had to redo most of chzn */ font-size: 12px; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #efefef), color-stop(10%, #ffffff), color-stop(90%, #ffffff), color-stop(100%, #efefef)); background-image: -webkit-linear-gradient(#efefef, #ffffff 10%, #ffffff 90%, #efefef); background-image: -moz-linear-gradient(#efefef, #ffffff 10%, #ffffff 90%, #efefef); background-image: -o-linear-gradient(#efefef, #ffffff 10%, #ffffff 90%, #efefef); background-image: -ms-linear-gradient(#efefef, #ffffff 10%, #ffffff 90%, #efefef); background-image: linear-gradient(#efefef, #ffffff 10%, #ffffff 90%, #efefef); }
.field .chzn-container-single .chzn-single:hover, .field .chzn-container-single .chzn-single:focus, .field .chzn-container-single .chzn-single:active { text-decoration: none; outline: none; }
.field .chzn-container-single .chzn-single div { width: 24px; }
.field .chzn-container-single .chzn-single div b { background-position: 1px 4px; }
.field .chzn-container-single .chzn-single div b { background-position: 4px 0px; }
.field input.hasDatepicker { width: 50%; max-width: 96px; }
/** ---------------------------------------------------- Buttons ---------------------------------------------------- */
@ -304,7 +304,7 @@ body.cms { overflow: hidden; }
.cms-content-tools td { border-bottom: 1px solid #ced7dc; padding: 7px 2px; font-size: 11px; }
/** CMS Batch actions */
.cms-content-batchactions, .cms-content-constructive-actions { float: right; }
.cms-content-constructive-actions { float: left; }
.cms-content-batchactions { float: right; position: relative; display: block; margin-right: 8px; }
.cms-content-batchactions form > * { display: block; float: left; }
@ -385,7 +385,7 @@ form.member-profile-form #Permissions .optionset li { float: none; width: auto;
.cms .ui-widget-overlay { background-color: #000; background-image: none; }
.ui-dialog { background: url("../images/textures/bg_cms_main_content.png") repeat left top #f0f3f4; border: 3px solid #000 !important; border-radius: 8px; overflow: visible; padding: 0; }
.ui-dialog .ui-dialog-titlebar.ui-widget-header { font-size: 14px; background-color: #92a5b2; padding: 4px 4px 4px 16px; border-bottom: 2px solid #8399a7; -moz-border-radius: 0; -webkit-border-radius: 0; -o-border-radius: 0; -ms-border-radius: 0; -khtml-border-radius: 0; border-radius: 0; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ced7dc), color-stop(100%, #92a5b2)); background-image: -webkit-linear-gradient(#ced7dc, #92a5b2); background-image: -moz-linear-gradient(#ced7dc, #92a5b2); background-image: -o-linear-gradient(#ced7dc, #92a5b2); background-image: -ms-linear-gradient(#ced7dc, #92a5b2); background-image: linear-gradient(#ced7dc, #92a5b2); }
.ui-dialog .ui-dialog-titlebar.ui-widget-header { font-size: 14px; background-color: #92a5b2; padding: 4px 4px 4px 16px; border-bottom: 2px solid #8399a7; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ced7dc), color-stop(100%, #92a5b2)); background-image: -webkit-linear-gradient(#ced7dc, #92a5b2); background-image: -moz-linear-gradient(#ced7dc, #92a5b2); background-image: -o-linear-gradient(#ced7dc, #92a5b2); background-image: -ms-linear-gradient(#ced7dc, #92a5b2); background-image: linear-gradient(#ced7dc, #92a5b2); }
body.cms-dialog { overflow: auto; background: url("../images/textures/bg_cms_main_content.png") repeat left top #f0f3f4; }

3
admin/scss/_style.scss
View File

@ -894,8 +894,7 @@ form.member-profile-form {
background-color: #92a5b2;
padding: $grid-vertical/2 $grid-horizontal/2 $grid-vertical/2 $grid-horizontal*2;
border-bottom: 2px solid #8399a7;
@include border-radius-top(4px);
@include border-radius-bottom(0px);
@include background-image(linear-gradient(#ced7dc, #92a5b2));
}
}

11
css/GridField.css
View File

@ -7,20 +7,21 @@
.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.field 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.field tr.sortable-header th { background: #7f9198; }
.cms table.ss-gridfield.field tr.title { -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; -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.title th { position: relative; background: #7f9198; border-top: 1px solid rgba(0, 0, 0, 0.1); color: #fff; padding: 10px; font-size: 18px; min-height: 40px; 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); -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; -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; text-shadow: rgba(0, 0, 0, 0.3) 0px -1px 0; }
.cms table.ss-gridfield.field tr.title th .new { font-size: 14px; border-color: rgba(0, 0, 0, 0.1); position: absolute; right: 10px; top: 5px; }
.cms table.ss-gridfield.field tr.sortable-header { background: #bac8ce; }
.cms table.ss-gridfield.field tr:hover { background: #FFFAD6 !important; }
.cms table.ss-gridfield.field tr:first-child { background: transparent; }
.cms table.ss-gridfield.field 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.field 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.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.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.field tr th div.fieldgroup, .cms table.ss-gridfield.field 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.field tr th.extra, .cms table.ss-gridfield.field tr th.action { background: #7f9198; padding: 0; cursor: default; }
.cms table.ss-gridfield.field tr th.extra, .cms table.ss-gridfield.field tr th.action { 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.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.field tr th.main { border-top: 1px solid rgba(0, 0, 0, 0.1); color: #fff; background: #9cb0b9; border-bottom: 1px solid rgba(0, 0, 0, 0.1); }
.cms table.ss-gridfield.field 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.field tr th.extra span { width: auto; display: inline; position: static; }

6
forms/gridfield/GridFieldConfig.php
View File

@ -75,15 +75,15 @@ class GridFieldConfig_Base extends GridFieldConfig {
* @param int $itemsPerPage - How many items per page should show up per page
* @return GridFieldConfig_Base
*/
public static function create($itemsPerPage=25){
return new GridFieldConfig_Base($itemsPerPage=25);
public static function create($itemsPerPage=15){
return new GridFieldConfig_Base($itemsPerPage=15);
}
/**
*
* @param int $itemsPerPage - How many items per page should show up
*/
public function __construct($itemsPerPage=25) {
public function __construct($itemsPerPage=15) {
$this->addComponent(new GridFieldTitle());
$this->addComponent(new GridFieldSortableHeader());
$this->addComponent(new GridFieldFilter());

4
forms/gridfield/GridFieldPaginator.php
View File

@ -18,7 +18,7 @@ class GridFieldPaginator implements GridField_HTMLProvider, GridField_DataManipu
*
* @var int
*/
protected $itemsPerPage = 25;
protected $itemsPerPage = 15;
/**
* Which template to use for rendering
@ -31,7 +31,7 @@ class GridFieldPaginator implements GridField_HTMLProvider, GridField_DataManipu
*
* @param int $itemsPerPage - How many items should be displayed per page
*/
public function __construct($itemsPerPage=25) {
public function __construct($itemsPerPage=15) {
$this->itemsPerPage = $itemsPerPage;
}

33
scss/GridField.scss
View File

@ -72,11 +72,32 @@ $gf_border_radius: 7px;
}
}
tr {
&.sortable-header {
tr {
&.title {
@include border-top-radius($gf_border_radius);
th {
position: relative;
background: $gf_colour_gradient_dark;
border-top: 1px solid $gf_colour_border;
color:#fff;
padding: 10px;
font-size: 18px;
min-height: 40px;
@include background-image(linear-gradient($gf_colour_gradient_light, $gf_colour_gradient_dark));
@include border-top-radius($gf_border_radius);
@include single-text-shadow($gf_colour_text_shadow, 0px, -1px, 0);
.new{
font-size: 14px;
border-color: $gf_colour_border;
position: absolute;
right: 10px;
top: 5px;
}
}
}
&.sortable-header {
background: $gf_colour_subheader;
}
&:hover {
background: #FFFAD6 !important;
@ -102,10 +123,10 @@ $gf_border_radius: 7px;
padding: 5px;
border-right: 1px solid $gf_colour_border;
&.main:first-child{
@include border-top-left-radius($gf_border_radius);
//@include border-top-left-radius($gf_border_radius);
}
&.main:last-child{
@include border-top-right-radius($gf_border_radius);
//@include border-top-right-radius($gf_border_radius);
}
div {
&.fieldgroup,&.fieldgroup-field {
@ -117,7 +138,6 @@ $gf_border_radius: 7px;
}
}
&.extra,&.action {
background: $gf_colour_gradient_dark;
padding: 0;
cursor: default;
button,button:hover {
@ -130,7 +150,8 @@ $gf_border_radius: 7px;
&.main{
border-top: 1px solid $gf_colour_border;
color:#fff;
@include background-image(linear-gradient($gf_colour_gradient_light, $gf_colour_gradient_dark));
background: darken($gf_colour_subheader,10%);
border-bottom: 1px solid $gf_colour_border;
span{
@include single-text-shadow($gf_colour_text_shadow, 0px, -1px, 0);
}

2
templates/Includes/GridFieldTitle.ss
View File

@ -1,3 +1,3 @@
<tr class="title">
<th colspan="$ColumnCount">$Title <a href="$NewLink">new</a></th>
<th colspan="$ColumnCount">$Title <a href="$NewLink" class="action ss-ui-action-constructive ss-ui-button ui-button ui-widget ui-state-default ui-corner-all new">Add new</a></th>
</tr>