mirror of
https://github.com/silverstripe/silverstripe-framework
synced 2024-10-22 14:05:37 +02:00
FEATURE: initial cut of the template and styles for DataGrid
This commit is contained in:
Will Rossiter
parent
7d90aa3c10
commit
9bd4e752ba
1
.gitignore
vendored
Normal file
1
.gitignore
vendored
Normal file
@ -0,0 +1 @@
|
|||||||
|
.sass-cache
|
||||||
18
config.rb
Normal file
18
config.rb
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
# Require any additional compass plugins here.
|
||||||
|
require 'compass-colors'
|
||||||
|
|
||||||
|
project_type = :stand_alone
|
||||||
|
# Set this to the root of your project when deployed:
|
||||||
|
http_path = "/"
|
||||||
|
css_dir = "css"
|
||||||
|
sass_dir = "scss"
|
||||||
|
images_dir = "images"
|
||||||
|
javascripts_dir = "javascript"
|
||||||
|
output_style = :compact
|
||||||
|
|
||||||
|
# To enable relative paths to assets via compass helper functions. Uncomment:
|
||||||
|
relative_assets = true
|
||||||
|
|
||||||
|
# disable comments in the output. We want admin comments
|
||||||
|
# to be verbose
|
||||||
|
line_comments = false
|
||||||
17
css/DataGrid.css
Normal file
17
css/DataGrid.css
Normal file
@ -0,0 +1,17 @@
|
|||||||
|
/** Core styles for the basic DataGrid form field without any specific style. @package sapphire @subpackage scss */
|
||||||
|
.ss-datagrid { border: none; }
|
||||||
|
.ss-datagrid table { width: 100%; border-collapse: collapse; border-spacing: 0; background: #fff; border: 1px solid #c1c1c1; }
|
||||||
|
.ss-datagrid thead { color: #5a5a5a; background: #dadada; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #f3f3f3), color-stop(100%, #dadada)); background-image: -webkit-linear-gradient(#f3f3f3, #dadada); background-image: -moz-linear-gradient(#f3f3f3, #dadada); background-image: -o-linear-gradient(#f3f3f3, #dadada); background-image: -ms-linear-gradient(#f3f3f3, #dadada); background-image: linear-gradient(#f3f3f3, #dadada); }
|
||||||
|
.ss-datagrid thead th { font-weight: bold; padding: 8px 24px 8px 8px; position: relative; border: 1px solid #c1c1c1; border-width: 0 1px 1px 0; }
|
||||||
|
.ss-datagrid thead th.ss-datagrid-sortable.hover { color: #747474; cursor: pointer; background: #f3f3f3; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #e7e7e7)); background-image: -webkit-linear-gradient(#ffffff, #e7e7e7); background-image: -moz-linear-gradient(#ffffff, #e7e7e7); background-image: -o-linear-gradient(#ffffff, #e7e7e7); background-image: -ms-linear-gradient(#ffffff, #e7e7e7); background-image: linear-gradient(#ffffff, #e7e7e7); }
|
||||||
|
.ss-datagrid thead th.ss-datagrid-sorted { background: #e7e7e7; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #dadada), color-stop(100%, #f3f3f3)); background-image: -webkit-linear-gradient(#dadada, #f3f3f3); background-image: -moz-linear-gradient(#dadada, #f3f3f3); background-image: -o-linear-gradient(#dadada, #f3f3f3); background-image: -ms-linear-gradient(#dadada, #f3f3f3); background-image: linear-gradient(#dadada, #f3f3f3); }
|
||||||
|
.ss-datagrid thead th.ss-datagrid-sorted.hover { background: #f3f3f3; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #e7e7e7), color-stop(100%, #ffffff)); background-image: -webkit-linear-gradient(#e7e7e7, #ffffff); background-image: -moz-linear-gradient(#e7e7e7, #ffffff); background-image: -o-linear-gradient(#e7e7e7, #ffffff); background-image: -ms-linear-gradient(#e7e7e7, #ffffff); background-image: linear-gradient(#e7e7e7, #ffffff); }
|
||||||
|
.ss-datagrid thead th .ui-icon { position: absolute; top: 5px; right: 0; }
|
||||||
|
.ss-datagrid thead th.ss-datagrid-desc .ui-icon { background-position: 0 -48px; }
|
||||||
|
.ss-datagrid thead th.ss-datagrid-asc .ui-icon { background-position: -64px -48px; }
|
||||||
|
.ss-datagrid td { padding: 8px; border-right: 1px solid #f3f3f3; }
|
||||||
|
.ss-datagrid td.ss-datagrid-last { border-right: none; }
|
||||||
|
.ss-datagrid tr.ss-datagrid-even { border: 1px solid #c6e5f6; border-width: 1px 0; background: #f2f9fd; }
|
||||||
|
.ss-datagrid tr.ss-datagrid-even.ss-datagrid-last { border-bottom: none; }
|
||||||
|
.ss-datagrid tr.ss-datagrid-even td { border-right: 1px solid #dceffa; }
|
||||||
|
.ss-datagrid tr.ss-datagrid-even td.ss-datagrid-last { border-right: none; }
|
||||||
120
scss/DataGrid.scss
Normal file
120
scss/DataGrid.scss
Normal file
@ -0,0 +1,120 @@
|
|||||||
|
/**
|
||||||
|
* Core styles for the basic DataGrid form field without any specific style.
|
||||||
|
*
|
||||||
|
* @package sapphire
|
||||||
|
* @subpackage scss
|
||||||
|
*/
|
||||||
|
|
||||||
|
@import "compass/css3";
|
||||||
|
|
||||||
|
$base: #dadada;
|
||||||
|
$zebra: #f2f9fd;
|
||||||
|
|
||||||
|
.ss-datagrid {
|
||||||
|
border: none;
|
||||||
|
|
||||||
|
table {
|
||||||
|
width: 100%;
|
||||||
|
border-collapse: collapse;
|
||||||
|
border-spacing: 0;
|
||||||
|
background: #fff;
|
||||||
|
border: 1px solid darken($base, 10%);
|
||||||
|
}
|
||||||
|
|
||||||
|
thead {
|
||||||
|
color: darken($base, 50%);
|
||||||
|
|
||||||
|
background: $base;
|
||||||
|
|
||||||
|
@include background-image(linear-gradient(
|
||||||
|
lighten($base, 10%), $base
|
||||||
|
));
|
||||||
|
|
||||||
|
|
||||||
|
th {
|
||||||
|
font-weight: bold;
|
||||||
|
padding: 8px 24px 8px 8px;
|
||||||
|
position: relative;
|
||||||
|
border: 1px solid darken($base, 10%);
|
||||||
|
border-width: 0 1px 1px 0;
|
||||||
|
|
||||||
|
&.ss-datagrid-sortable {
|
||||||
|
|
||||||
|
&.hover {
|
||||||
|
color: darken($base, 40%);
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
background: lighten($base, 10%);
|
||||||
|
|
||||||
|
@include background-image(linear-gradient(
|
||||||
|
lighten($base, 15%), lighten($base, 5%)
|
||||||
|
));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.ss-datagrid-sorted {
|
||||||
|
background: lighten($base, 5%);
|
||||||
|
|
||||||
|
@include background-image(linear-gradient(
|
||||||
|
$base, lighten($base, 10%)
|
||||||
|
));
|
||||||
|
|
||||||
|
&.hover {
|
||||||
|
background: lighten($base, 10%);
|
||||||
|
|
||||||
|
@include background-image(linear-gradient(
|
||||||
|
lighten($base, 5%), lighten($base, 12%)
|
||||||
|
));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui-icon {
|
||||||
|
position: absolute;
|
||||||
|
top: 5px;
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.ss-datagrid-desc .ui-icon {
|
||||||
|
background-position: 0 -48px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.ss-datagrid-asc .ui-icon {
|
||||||
|
background-position: -64px -48px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
tbody {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
td {
|
||||||
|
padding: 8px;
|
||||||
|
border-right: 1px solid lighten($base, 10%);
|
||||||
|
|
||||||
|
&.ss-datagrid-last {
|
||||||
|
border-right: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
tr {
|
||||||
|
|
||||||
|
&.ss-datagrid-even {
|
||||||
|
border: 1px solid darken($zebra, 10%);
|
||||||
|
border-width: 1px 0;
|
||||||
|
background: $zebra;
|
||||||
|
|
||||||
|
&.ss-datagrid-last {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
td {
|
||||||
|
border-right: 1px solid darken($zebra, 5%);
|
||||||
|
|
||||||
|
&.ss-datagrid-last {
|
||||||
|
border-right: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
25
templates/DataGrid.ss
Normal file
25
templates/DataGrid.ss
Normal file
@ -0,0 +1,25 @@
|
|||||||
|
<% require css(sapphire/thirdparty/jquery-ui-themes/smoothness/jquery-ui.css) %>
|
||||||
|
<% require css(sapphire/css/DataGrid.css) %>
|
||||||
|
|
||||||
|
<div class="ss-datagrid ui-state-default">
|
||||||
|
<table>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<% control Headings %>
|
||||||
|
<th class="<% if FirstLast %>ss-datagrid-{$FirstLast} <% if IsSortable %>ss-datagrid-sortable<% end_if %> <% if IsSorted %>ss-datagrid-sorted ss-datagrid-{$SortedDirection}">
|
||||||
|
$Title <span class="ui-icon"></span></th>
|
||||||
|
<% end_control %>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
|
||||||
|
<tbody>
|
||||||
|
<% control Items %>
|
||||||
|
<% include DataGrid_Item %>
|
||||||
|
<% end_control %>
|
||||||
|
</tbody>
|
||||||
|
|
||||||
|
<tfoot>
|
||||||
|
|
||||||
|
</tfoot>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
5
templates/Includes/DataGrid_Item.ss
Normal file
5
templates/Includes/DataGrid_Item.ss
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
<tr class="ss-datagrid-{$EvenOdd}">
|
||||||
|
<% control Fields %>
|
||||||
|
<td <% if FirstLast %>class="ss-datagrid-{$FirstLast}"<% end_if %>>$Value</td>
|
||||||
|
<% end_control %>
|
||||||
|
</tr>
|
||||||
Loading…
Reference in New Issue
Block a user