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