Skip to content
Browse files

Bunch of style and interaction improvements for batch actions:

- Table rows highlight when selected
- Better selected state for batch action button
- More spacing between titlebar and page content
and more...
  • Loading branch information...
1 parent ae73a31 commit b8db4c65d3fb3bf360ad517f107bfd44a4164a38 @mattvague committed Oct 5, 2011
View
53 app/assets/javascripts/active_admin/base.js
@@ -10,33 +10,46 @@ $(function(){
return false;
});
+ // Batch actions stuff
+
$('#batch_actions_button').toggle(function() {
- $("#batch_actions_popover").fadeIn(50);
+ if ($(this).hasClass("selected")) {
+ $("#batch_actions_popover").fadeIn(50);
+ };
}, function() {
$("#batch_actions_popover").fadeOut(100);
});
- $('.index_table thead :checkbox').toggle(function() {
- $('#batch_actions_button').removeClass("disabled");
- $('#batch_actions_button').addClass("selected");
- $(this).parents(".index_table").find('tr :checkbox').attr('checked', 'true');
- $(this).attr('checked', 'true');
- }, function() {
- $('#batch_actions_button').addClass("disabled");
- $('#batch_actions_button').removeClass("selected");
- $(this).parents(".index_table").find('tr :checkbox').attr('checked', '');
- $(this).attr('checked', 'false');
+ $('.index_table thead :checkbox').click(function() {
+ if ($(this).attr('checked') == true) {
+ $('#batch_actions_button').removeClass("disabled");
+ $('#batch_actions_button').addClass("selected");
+ $(this).parents(".index_table").find('tr :checkbox').attr('checked', 'true');
+ $(this).parents(".index_table").find('tr').addClass("selected");
+ } else {
+ $('#batch_actions_button').addClass("disabled");
+ $('#batch_actions_button').removeClass("selected");
+ $(this).parents(".index_table").find('tr :checkbox').attr('checked', '');
+ $(this).parents(".index_table").find('tr').removeClass("selected");
+ }
});
- $('.index_table tbody :checkbox').toggle(function() {
- $('#batch_actions_button').removeClass("disabled");
- $('#batch_actions_button').addClass("selected");
- return true;
- }, function() {
- $('#batch_actions_button').addClass("disabled");
- $('#batch_actions_button').removeClass("selected");
- return true;
-
+ $('.index_table tbody :checkbox').click(function() {
+ if ($(this).attr('checked') == true) {
+ $('#batch_actions_button').removeClass("disabled");
+ $('#batch_actions_button').addClass("selected");
+ $(this).parents('tr').addClass("selected");
+ } else {
+ if ($(this).parents(".index_table").find("tbody").find("input:checked").length == 0) {
+ $('#batch_actions_button').addClass("disabled");
+ $('#batch_actions_button').removeClass("selected");
+ };
+
+ $(this).parents('tr').removeClass("selected");
+
+ $(this).parents(".index_table").find('thead th :checkbox').attr('checked', '');
+
+ }
});
});
View
1 app/assets/stylesheets/active_admin/_header.css.scss
@@ -5,6 +5,7 @@
@include text-shadow(#000);
overflow: visible;
padding: 9px $horizontal-page-margin;
+ position: relative;
z-index: 900;
h1 {
View
2 app/assets/stylesheets/active_admin/components/_flash_messages.css.scss
@@ -9,6 +9,8 @@ body.logged_in {
line-height: 1.0em;
margin-bottom: 10px;
padding: 13px 30px 11px;
+ position: relative;
+ top: -15px;
&.flash_notice {
@include gradient(#dce9dd, #ccdfcd);
View
2 app/assets/stylesheets/active_admin/components/_popovers.css.scss
@@ -23,7 +23,7 @@
content: "";
position: absolute;
top: -6px;
- left: 10px;
+ left: 50px;
border-width: 0 6px 6px;
border-style: solid;
border-color: $primary-color transparent;
View
32 app/assets/stylesheets/active_admin/components/_scopes.scss
@@ -1,23 +1,9 @@
-//.scopes {
-// float: left;
-// margin-bottom: 10px;
-// font-size: 1.0em;
-//
-// .scope {
-// padding: 4px 8px 3px 8px;
-// margin-right: 4px;
-// a { text-decoration: none; font-weight: bold; color: #888; }
-// a:hover { text-decoration: underline; ; }
-// &.selected {
-// @include rounded(5px);
-// @include inset-shadow(0,1px,0,#ccc);
-// @include text-shadow;
-// background: #efefef;
-// color: #666;
-// em { font-weight: bold; font-style: normal;
-// }
-// }
-// .count{ color: #aaa; font-size: 0.9em; }
-// }
-// .scopes_seperator { display: none; }
-//}
+.scopes {
+ li {
+ .count {
+ color: #8e979e;
+ font-weight: normal;
+ font-size: 0.9em;
+ }
+ }
+}
View
22 app/assets/stylesheets/active_admin/components/_table_tools.css.scss
@@ -37,19 +37,14 @@ a.table_tools_button {
}
&.selected {
- @include gradient(#73a8c8, #4d7cad);
- @include box-shadow(0 1px 0px rgba(0,0,0,0.10), 0 0 0 1px #6fa4c6 inset);
- @include border-colors(#5786b2, #4f79a1, #466b8f);
- @include text-shadow(#162d7c);
+ @include dark-button;
+ font-size: 0.9em;
+ padding: 4px 13px;
- color: #FFF;
+ color: #efefef;
.arrow {
- border-color: #FFF transparent transparent;
- }
-
- &:active {
- @include inset-shadow(0, 1px, 2px, rgba(0,0,0,0.30));
+ border-color: #efefef transparent transparent;
}
}
@@ -91,12 +86,13 @@ a.table_tools_button {
&.selected {
a {
- @include gradient(#eeeeee, #f9f9f9);
- @include box-shadow(0 1px 0px rgba(0,0,0,0.12), 0 1px 0px 0 rgba(0,0,0,0.05) inset);
+ background: #ededed;
+ @include box-shadow(0 1px 0px 0 rgba(0,0,0,0.06) inset);
+ color: #989ca0;
cursor: default;
&:hover {
- color: #777;
+ color: #989ca0;
}
}
}
View
2 app/assets/stylesheets/active_admin/components/_tables.css.scss
@@ -46,6 +46,8 @@ table.index_table {
tr.even td { background: $table-stripe-color; }
+ tr.selected td { background: $table-selected-color; }
+
td {
padding: 10px $cell-horizontal-padding 8px $cell-horizontal-padding;
border-bottom: 1px solid #e8e8e8;
View
7 app/assets/stylesheets/active_admin/mixins/_buttons.css.scss
@@ -1,5 +1,4 @@
@mixin default-button {
- //@include shadow;
@include gradient(lighten($primary-color, 15%), darken($primary-color, 12%));
@include rounded(200px);
@include text-shadow(#000);
@@ -53,4 +52,10 @@
@mixin dark-button {
@include default-button;
+
+ &:hover {
+ color: #fff;
+ @include icon-color(#fff);
+ @include gradient(lighten($primary-color, 20%), darken($primary-color, 18%));
+ }
}
View
1 app/assets/stylesheets/active_admin/mixins/_variables.css.scss
@@ -9,6 +9,7 @@ $section-header-text-color: $primary-color;
$current-menu-item-background: lighten($primary-color, 12%);
$hover-menu-item-background: lighten($primary-color, 12%);
$table-stripe-color: lighten($primary-color, 57%);
+$table-selected-color: #edf2f6;
$error-color: #932419;
// Sizes
View
4 app/assets/stylesheets/active_admin/structure/_title_bar.scss
@@ -8,8 +8,10 @@
width: 100%;
position: relative;
margin: 0;
+ margin-bottom: 15px;
padding: 10px $horizontal-page-margin;
-
+ z-index: 800;
+
#titlebar_left, #titlebar_right {
height: 50px;
vertical-align: middle;

0 comments on commit b8db4c6

Please sign in to comment.
Something went wrong with that request. Please try again.