Adding icons to action_groups

[jsurrett]

I wanted to add an icon to the action_groups that you implemented. In order to use css, I changed the span to a div so that I can add padding for the icon. I also added a class with the action name so I would be able to have different icons for the different groups. Did I overlook anything? If this is a good idea, can it be rolled into the repository?

In the active_scaffold -> frontends -> default -> views -> _action_group.html.erb

Change:

<% if options[:level] == 0 %> <%= "#{start_level_0_tag}<div class=\"action_group\"> #{content_tag('span', as_(parent.name))}<ul>".html_safe %> <% else %> <%= "<li #{"class=\"top\"" if options[:first_action]}>#{content_tag('span', as_(parent.name))}<ul>".html_safe %> <% end %>

To:

<% if options[:level] == 0 %> <%= "#{start_level_0_tag}<div class=\"action_group\"> #{content_tag(:div, as_(parent.name), :class => (parent.name).downcase)}<ul>".html_safe %> <% else %> <%= "<li #{"class=\"top\"" if options[:first_action]}>#{content_tag(:div, as_(parent.name), :class => (parent.name).downcase)}<ul>".html_safe %> <% end %>

In the active_scaffold stylesheet, the following changes (only the parts with changes were included): ` / ActiveScaffold modifications for group actions icons /

.active-scaffold a:hover, .active-scaffold div.hover { background-color: #ff8; }

/* Header ======================== */

.active-scaffold-header div.actions a, .active-scaffold-header div.actions { float: right; font: bold 14px arial; letter-spacing: -1px; text-decoration: none; padding: 1px 2px; white-space: nowrap; margin-left: 5px; background-position: 1px 50%; background-repeat: no-repeat; }

.active-scaffold-header div.actions div.action_group { display: inline; float: right; }

.active-scaffold-header div.actions div.action_group li a, .active-scaffold-header div.actions div.action_group li div { float: none; margin: 0 2px; }

.view .active-scaffold-header div.actions a, .view .active-scaffold-header div.actions div, .view .active-scaffold-header div.actions div.action_group { float: left; }

.active-scaffold-header div.actions a.new, .active-scaffold-header div.actions a.new_existing, .active-scaffold-header div.actions a.show_search, .active-scaffold-header div.actions a.show_config_list, .active-scaffold-header div.actions div.action_group div { padding-left: 19px; background-position: 1px 50%; background-repeat: no-repeat; }

.active-scaffold-header div.actions div.action_group div { padding: 1px 2px 1px 19px; background-position: 1px 50%; background-repeat: no-repeat; margin-left: 5px; background-image: url(../../../images/icons/gears.png); /* default icon for actions or delete for none */ }

div.action_group_name { background-image: url(../../../images/icons/icon_of_choice.png); }

.active-scaffold-header div.actions a.show_config_list { background-image: url(../../../images/icons/table_gear.png); }

/* Table :: Actions (Edit, Delete) ============================= */

.active-scaffold tr.record td.actions a, .active-scaffold tr.record td.actions div { font: bold 11px verdana, sans-serif; letter-spacing: -1px; padding: 2px; margin: 0 2px; line-height: 16px; white-space: nowrap; }

.active-scaffold .actions .action_group div:hover { background-color: #ff8; }

.active-scaffold .actions .action_group { position: relative; text-align: left; color: #0066CC; }

.active-scaffold .actions .action_group ul { border: 2px solid #005CB8; list-style-type: none; margin: 0; padding: 0; position: absolute; line-height: 200%; display: none; width: 150px; right: 0px; }

.active-scaffold .actions .action_group ul ul { display: none; position: absolute; top: 0; }

.active-scaffold .actions .action_group ul li { background: none repeat scroll 0 0 #EEE; border-bottom: 1px dashed #222; display: block; padding-bottom: 5px; position: relative; width: auto; z-index: 2; }

.active-scaffold .actions .action_group ul li a { display: block; color: #333; margin: 0; padding: 3px 5px 3px 25px; }

/* Nested ======================== */

.active-scaffold .active-scaffold .active-scaffold-header div.actions a, .active-scaffold .active-scaffold .active-scaffold-header div.actions div { font: bold 11px verdana, sans-serif; padding: 0 2px 1px 17px; }

/ END ActiveScaffold modifications for group actions icons / `

[vhochstein]

Looks pretty good, do you think you can create a pull request? Have you tried on different browsers?

[jsurrett]

I have never done a pull request so I am not sure how to do it. If you send me directions or tell me where to look, I will try to create one.

I have tried it on Firefox 3.6.13, Safari 5.0.3, and Internet Explorer 8.

[vhochstein]

You first have to create a fork of my repository. commit your changes and then send me a pull request. Please take a look at : http://help.github.com/forking/

[vhochstein]

Yes, it s merged.