Permalink
Browse files

Remove story table <thead>

Changes story column header into a <div> element within the same
<td> as the stories.
  • Loading branch information...
1 parent 9b03bbd commit 22398f8c5eb923a89b7096050c0d847919b3c787 @malclocke malclocke committed Apr 4, 2012
@@ -19,7 +19,7 @@ $(function() {
});
- $('thead a.toggle-column, #column-toggles a').click(function(el){
+ $('.column_header a.toggle-column, #column-toggles a').click(function(el){
//Find relevant column from class name
var className = _.detect( el.target.classList, function(elClass){ return elClass.match(/hide_\w+/) });
$('.'+className.replace(/hide_/,'')+'_column').toggle();
@@ -218,6 +218,7 @@ table.stories {
table.stories td {
vertical-align: top;
background-color: #ccc;
+ @include border-radius(5px 5px 0 0);
}
div.storycolumn {
@@ -226,7 +227,8 @@ div.storycolumn {
}
/* Story columns headers */
-table.stories th {
+.column_header {
+ text-align: center;
background: $darkgrey;
@include background(linear-gradient(top, $darkgrey, $darkgrey*0.75));
color: #eee;
@@ -37,20 +37,24 @@ $(function() {
<% end %>
<table class="stories" width="100%">
- <thead>
- <tr>
- <th class="done_column">Done<a class="toggle-column hide_done" title="Close">&times;</a></th>
- <th class="in_progress_column">In Progress<a class="toggle-column hide_in_progress" title="Close">&times;</a></th>
- <th class="backlog_column">Backlog<a class="toggle-column hide_backlog" title="Close">&times;</a></th>
- <th class="chilly_bin_column">Chilly Bin<a class="toggle-column hide_chilly_bin" title="Close">&times;</a></th>
- </tr>
- </thead>
<tbody>
<tr>
- <td class="done_column" style="width: 25%"><div id="done" class="storycolumn"></div></td>
- <td class="in_progress_column" style="width: 25%"><div id="in_progress" class="storycolumn sortable"></div></td>
- <td class="backlog_column" style="width: 25%"><div id="backlog" class="storycolumn sortable"></div></td>
- <td class="chilly_bin_column" style="width: 25%"><div id="chilly_bin" class="storycolumn sortable"></div></td>
+ <td class="done_column" style="width: 25%">
+ <div class="column_header">Done<a href="#" class="toggle-column hide_done" title="Close">&times;</a></div>
+ <div id="done" class="storycolumn"></div>
+ </td>
+ <td class="in_progress_column" style="width: 25%">
+ <div class="column_header">In Progress<a href="#" class="toggle-column hide_in_progress" title="Close">&times;</a></div>
+ <div id="in_progress" class="storycolumn sortable"></div>
+ </td>
+ <td class="backlog_column" style="width: 25%">
+ <div class="column_header">Backlog<a href="#" class="toggle-column hide_backlog" title="Close">&times;</a></div>
+ <div id="backlog" class="storycolumn sortable"></div>
+ </td>
+ <td class="chilly_bin_column" style="width: 25%">
+ <div class="column_header">Chilly Bin<a href="#" class="toggle-column hide_chilly_bin" title="Close">&times;</a></div>
+ <div id="chilly_bin" class="storycolumn sortable"></div>
+ </td>
</tr>
</tbody>
</table>
@@ -114,20 +114,24 @@ $(function() {
<% end %>
<table class="stories" width="100%">
- <thead>
- <tr>
- <th class="done_column">Done<a class="toggle-column hide_done" title="Close">&times;</a></th>
- <th class="in_progress_column">In Progress<a class="toggle-column hide_in_progress" title="Close">&times;</a></th>
- <th class="backlog_column">Backlog<a class="toggle-column hide_backlog" title="Close">&times;</a></th>
- <th class="chilly_bin_column">Chilly Bin<a class="toggle-column hide_chilly_bin" title="Close">&times;</a></th>
- </tr>
- </thead>
<tbody>
<tr>
- <td class="done_column" style="width: 25%"><div id="done" class="storycolumn"></div></td>
- <td class="in_progress_column" style="width: 25%"><div id="in_progress" class="storycolumn sortable"></div></td>
- <td class="backlog_column" style="width: 25%"><div id="backlog" class="storycolumn sortable"></div></td>
- <td class="chilly_bin_column" style="width: 25%"><div id="chilly_bin" class="storycolumn sortable"></div></td>
+ <td class="done_column" style="width: 25%">
+ <div class="column_header">Done<a class="toggle-column hide_done" title="Close">&times;</a></div>
+ <div id="done" class="storycolumn"></div>
+ </td>
+ <td class="in_progress_column" style="width: 25%">
+ <div class="column_header">In Progress<a class="toggle-column hide_in_progress" title="Close">&times;</a></div>
+ <div id="in_progress" class="storycolumn sortable"></div>
+ </td>
+ <td class="backlog_column" style="width: 25%">
+ <div class="column_header">Backlog<a class="toggle-column hide_backlog" title="Close">&times;</a></div>
+ <div id="backlog" class="storycolumn sortable"></div>
+ </td>
+ <td class="chilly_bin_column" style="width: 25%">
+ <div class="column_header">Chilly Bin<a class="toggle-column hide_chilly_bin" title="Close">&times;</a></div>
+ <div id="chilly_bin" class="storycolumn sortable"></div>
+ </td>
</tr>
</tbody>
</table>
@@ -55,4 +55,48 @@
end
+ describe "show and hide columns" do
+
+ before do
+ project
+ Capybara.ignore_hidden_elements = true
+ end
+
+ it "hides and shows the columns", :js => true do
+
+ visit project_path(project)
+
+ columns = {
+ "done" => "Done",
+ "in_progress" => "In Progress",
+ "backlog" => "Backlog",
+ "chilly_bin" => "Chilly Bin"
+ }
+
+ columns.each do |column, button_text|
+ selector = "table.stories td.#{column}_column"
+ page.should have_css(selector)
+
+ # Hide the column
+ within('#column-toggles') do
+ click_on button_text
+ end
+ page.should_not have_css(selector)
+
+ # Show the column
+ within('#column-toggles') do
+ click_on button_text
+ end
+ page.should have_css(selector)
+
+ # Hide the column with the 'close' button in the column header
+ within("#{selector} .column_header") do
+ click_link 'Close'
+ end
+ page.should_not have_css(selector)
+
+ end
+ end
+ end
+
end

0 comments on commit 22398f8

Please sign in to comment.