From 9bd4e752ba1cc7a9f43c19d51f5480bf808c4e6f Mon Sep 17 00:00:00 2001
From: Will Rossiter <will.rossiter@gmail.com>
Date: Wed, 28 Sep 2011 16:06:06 +1300
Subject: [PATCH] FEATURE: initial cut of the template and styles for DataGrid

---
 .gitignore                          |   1 +
 config.rb                           |  18 +++++
 css/DataGrid.css                    |  17 ++++
 scss/DataGrid.scss                  | 120 ++++++++++++++++++++++++++++
 templates/DataGrid.ss               |  25 ++++++
 templates/Includes/DataGrid_Item.ss |   5 ++
 6 files changed, 186 insertions(+)
 create mode 100644 .gitignore
 create mode 100644 config.rb
 create mode 100644 css/DataGrid.css
 create mode 100644 scss/DataGrid.scss
 create mode 100644 templates/DataGrid.ss
 create mode 100644 templates/Includes/DataGrid_Item.ss

diff --git a/.gitignore b/.gitignore
new file mode 100644
index 000000000..5df1b9b43
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1 @@
+.sass-cache
diff --git a/config.rb b/config.rb
new file mode 100644
index 000000000..ec6b43ab3
--- /dev/null
+++ b/config.rb
@@ -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
\ No newline at end of file
diff --git a/css/DataGrid.css b/css/DataGrid.css
new file mode 100644
index 000000000..124a0fbb9
--- /dev/null
+++ b/css/DataGrid.css
@@ -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; }
diff --git a/scss/DataGrid.scss b/scss/DataGrid.scss
new file mode 100644
index 000000000..4274def13
--- /dev/null
+++ b/scss/DataGrid.scss
@@ -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;
+				}
+			}
+		}
+	}
+}
\ No newline at end of file
diff --git a/templates/DataGrid.ss b/templates/DataGrid.ss
new file mode 100644
index 000000000..b86dc4049
--- /dev/null
+++ b/templates/DataGrid.ss
@@ -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>
\ No newline at end of file
diff --git a/templates/Includes/DataGrid_Item.ss b/templates/Includes/DataGrid_Item.ss
new file mode 100644
index 000000000..27f02e7e5
--- /dev/null
+++ b/templates/Includes/DataGrid_Item.ss
@@ -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>
\ No newline at end of file