From c4b0ce239e2a8fa7800b91ed95a14dda3e5ff473 Mon Sep 17 00:00:00 2001 From: Daniel Ritz Date: Sun, 15 Nov 2015 22:06:03 +0100 Subject: [PATCH 1/5] Replace uses of image_tag() with CSS, part 1: admin * Replace image_tag() with CSS classes * Create some CSS classes where necessary * Change "check all" positioned on the right in "Trackers -> Summary" and "Roles -> Permissions report" instead of left like in "Worfklow" * Makes some lines shorter while at it --- app/helpers/application_helper.rb | 34 +++++++++++++++------------- app/helpers/email_addresses_helper.rb | 12 +++++----- app/views/admin/info.html.erb | 3 +-- app/views/admin/plugins.html.erb | 4 ++-- app/views/roles/permissions.html.erb | 12 ++++++---- app/views/settings/_repositories.html.erb | 15 ++++++------ app/views/trackers/fields.html.erb | 15 +++++++----- app/views/workflows/_form.html.erb | 15 +++++++----- app/views/workflows/edit.html.erb | 4 ++-- app/views/workflows/index.html.erb | 4 +++- app/views/workflows/permissions.html.erb | 4 ++-- public/stylesheets/application.css | 21 +++++++++++++++-- test/unit/helpers/application_helper_test.rb | 4 ++-- 13 files changed, 88 insertions(+), 59 deletions(-) diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb index f152e21..6567702 100644 --- a/app/helpers/application_helper.rb +++ b/app/helpers/application_helper.rb @@ -454,18 +454,18 @@ module ApplicationHelper end def reorder_links(name, url, method = :post) - link_to(image_tag('2uparrow.png', :alt => l(:label_sort_highest)), - url.merge({"#{name}[move_to]" => 'highest'}), - :method => method, :title => l(:label_sort_highest)) + - link_to(image_tag('1uparrow.png', :alt => l(:label_sort_higher)), - url.merge({"#{name}[move_to]" => 'higher'}), - :method => method, :title => l(:label_sort_higher)) + - link_to(image_tag('1downarrow.png', :alt => l(:label_sort_lower)), - url.merge({"#{name}[move_to]" => 'lower'}), - :method => method, :title => l(:label_sort_lower)) + - link_to(image_tag('2downarrow.png', :alt => l(:label_sort_lowest)), - url.merge({"#{name}[move_to]" => 'lowest'}), - :method => method, :title => l(:label_sort_lowest)) + link_to('', + url.merge({"#{name}[move_to]" => 'highest'}), :method => method, + :title => l(:label_sort_highest), :class => 'icon-only icon-move-top') + + link_to('', + url.merge({"#{name}[move_to]" => 'higher'}), :method => method, + :title => l(:label_sort_higher), :class => 'icon-only icon-move-up') + + link_to('', + url.merge({"#{name}[move_to]" => 'lower'}), :method => method, + :title => l(:label_sort_lower), :class => 'icon-only icon-move-down') + + link_to('', + url.merge({"#{name}[move_to]" => 'lowest'}), :method => method, + :title => l(:label_sort_lowest), :class => 'icon-only icon-move-bottom') end def breadcrumb(*args) @@ -887,7 +887,8 @@ module ApplicationHelper @current_section += 1 if @current_section > 1 content_tag('div', - link_to(image_tag('edit.png'), options[:edit_section_links].merge(:section => @current_section)), + link_to('', options[:edit_section_links].merge(:section => @current_section), + :class => 'icon-only icon-edit'), :class => 'contextual', :title => l(:button_edit_section), :id => "section-#{@current_section}") + heading.html_safe @@ -1098,9 +1099,10 @@ module ApplicationHelper end def toggle_checkboxes_link(selector) - link_to_function image_tag('toggle_check.png'), + link_to_function '', "toggleCheckboxesBySelector('#{selector}')", - :title => "#{l(:button_check_all)} / #{l(:button_uncheck_all)}" + :title => "#{l(:button_check_all)} / #{l(:button_uncheck_all)}", + :class => 'toggle-checkboxes' end def progress_bar(pcts, options={}) @@ -1120,7 +1122,7 @@ module ApplicationHelper def checked_image(checked=true) if checked - @checked_image_tag ||= image_tag('toggle_check.png') + @checked_image_tag ||= content_tag(:span, nil, :class => 'icon-only icon-checked') end end diff --git a/app/helpers/email_addresses_helper.rb b/app/helpers/email_addresses_helper.rb index f397e99..c30aaa6 100644 --- a/app/helpers/email_addresses_helper.rb +++ b/app/helpers/email_addresses_helper.rb @@ -22,17 +22,17 @@ module EmailAddressesHelper # Returns a link to enable or disable notifications for the address def toggle_email_address_notify_link(address) if address.notify? - link_to image_tag('email.png'), + link_to '', user_email_address_path(address.user, address, :notify => '0'), - :method => :put, + :method => :put, :remote => true, :title => l(:label_disable_notifications), - :remote => true + :class => 'icon icon-email' else - link_to image_tag('email_disabled.png'), + link_to '', user_email_address_path(address.user, address, :notify => '1'), - :method => :put, + :method => :put, :remote => true, :title => l(:label_enable_notifications), - :remote => true + :class => 'icon icon-email-disabled' end end end diff --git a/app/views/admin/info.html.erb b/app/views/admin/info.html.erb index 14d33ba..2be1d28 100644 --- a/app/views/admin/info.html.erb +++ b/app/views/admin/info.html.erb @@ -6,8 +6,7 @@ <% @checklist.each do |label, result| %> <%= label.is_a?(Symbol) ? l(label) : label %> - <%= image_tag((result ? 'true.png' : 'exclamation.png'), - :style => "vertical-align:bottom;") %> + <% end %> diff --git a/app/views/admin/plugins.html.erb b/app/views/admin/plugins.html.erb index 47c1dfa..020dbc8 100644 --- a/app/views/admin/plugins.html.erb +++ b/app/views/admin/plugins.html.erb @@ -36,7 +36,7 @@ $(document).ready(function(){ $("table.plugins td.version span").addClass("unknown"); $.each(data, function(plugin_id, plugin_data){ var s = $("tr#plugin-"+plugin_id+" td.version span"); - s.removeClass("icon-checked icon-warning unknown"); + s.removeClass("icon-ok icon-warning unknown"); if (plugin_data.url) { if (s.parent("a").length>0) { s.unwrap(); @@ -45,7 +45,7 @@ $(document).ready(function(){ s.wrap($("").attr("href", plugin_data.url).attr("target", "_blank")); } if (plugin_data.c == s.text()) { - s.addClass("icon-checked"); + s.addClass("icon-ok"); } else if (plugin_data.c) { s.addClass("icon-warning"); s.attr("title", "<%= escape_javascript l(:label_latest_compatible_version) %>: "+plugin_data.c); diff --git a/app/views/roles/permissions.html.erb b/app/views/roles/permissions.html.erb index cea4bd9..b403cff 100644 --- a/app/views/roles/permissions.html.erb +++ b/app/views/roles/permissions.html.erb @@ -9,9 +9,11 @@ <%=l(:label_permissions)%> <% @roles.each do |role| %> + <%= link_to_function('', + "toggleCheckboxesBySelector('input.role-#{role.id}')", + :title => "#{l(:button_check_all)}/#{l(:button_uncheck_all)}", + :class => 'icon-only icon-checked') %> <%= content_tag(role.builtin? ? 'em' : 'span', role.name) %> - <%= link_to_function(image_tag('toggle_check.png'), "toggleCheckboxesBySelector('input.role-#{role.id}')", - :title => "#{l(:button_check_all)}/#{l(:button_uncheck_all)}") %> <% end %> @@ -33,8 +35,10 @@ <% perms_by_module[mod].each do |permission| %> - <%= link_to_function(image_tag('toggle_check.png'), "toggleCheckboxesBySelector('.permission-#{permission.name} input')", - :title => "#{l(:button_check_all)}/#{l(:button_uncheck_all)}") %> + <%= link_to_function('', + "toggleCheckboxesBySelector('.permission-#{permission.name} input')", + :title => "#{l(:button_check_all)}/#{l(:button_uncheck_all)}", + :class => 'icon-only icon-checked') %> <%= l_or_humanize(permission.name, :prefix => 'permission_') %> <% @roles.each do |role| %> diff --git a/app/views/settings/_repositories.html.erb b/app/views/settings/_repositories.html.erb index b3c5b1b..bb7a237 100644 --- a/app/views/settings/_repositories.html.erb +++ b/app/views/settings/_repositories.html.erb @@ -23,12 +23,7 @@ <% if enabled %> - <%= - image_tag( - (scm_class.scm_available ? 'true.png' : 'exclamation.png'), - :style => "vertical-align:bottom;" - ) - %> + <%= scm_class.scm_command %> <% end %> @@ -124,7 +119,8 @@ ) %> - <%= link_to(image_tag('delete.png'), '#', :class => 'delete-commit-keywords') %> + <%= link_to('', '#', + :class => 'delete-commit-keywords icon-only icon-del') %> <% end %> @@ -133,7 +129,10 @@ <%= l(:text_comma_separated) %> - <%= link_to(image_tag('add.png'), '#', :class => 'add-commit-keywords') %> + + <%= link_to('', '#', + :class => 'add-commit-keywords icon-only icon-add') %> + diff --git a/app/views/trackers/fields.html.erb b/app/views/trackers/fields.html.erb index 285a01b..b53f1fa 100644 --- a/app/views/trackers/fields.html.erb +++ b/app/views/trackers/fields.html.erb @@ -9,9 +9,10 @@ <% @trackers.each do |tracker| %> + <%= link_to_function('', "toggleCheckboxesBySelector('input.tracker-#{tracker.id}')", + :title => "#{l(:button_check_all)}/#{l(:button_uncheck_all)}", + :class => 'icon-only icon-checked') %> <%= tracker.name %> - <%= link_to_function(image_tag('toggle_check.png'), "toggleCheckboxesBySelector('input.tracker-#{tracker.id}')", - :title => "#{l(:button_check_all)}/#{l(:button_uncheck_all)}") %> <% end %> @@ -26,8 +27,9 @@ <% Tracker::CORE_FIELDS.each do |field| %> "> - <%= link_to_function(image_tag('toggle_check.png'), "toggleCheckboxesBySelector('input.core-field-#{field}')", - :title => "#{l(:button_check_all)}/#{l(:button_uncheck_all)}") %> + <%= link_to_function('', "toggleCheckboxesBySelector('input.core-field-#{field}')", + :title => "#{l(:button_check_all)}/#{l(:button_uncheck_all)}", + :class => 'icon-only icon-checked') %> <%= l("field_#{field}".sub(/_id$/, '')) %> <% @trackers.each do |tracker| %> @@ -48,8 +50,9 @@ <% @custom_fields.each do |field| %> "> - <%= link_to_function(image_tag('toggle_check.png'), "toggleCheckboxesBySelector('input.custom-field-#{field.id}')", - :title => "#{l(:button_check_all)}/#{l(:button_uncheck_all)}") %> + <%= link_to_function('', "toggleCheckboxesBySelector('input.custom-field-#{field.id}')", + :title => "#{l(:button_check_all)}/#{l(:button_uncheck_all)}", + :class => 'icon-only icon-checked') %> <%= field.name %> <% @trackers.each do |tracker| %> diff --git a/app/views/workflows/_form.html.erb b/app/views/workflows/_form.html.erb index 76f6fef..9fb2705 100644 --- a/app/views/workflows/_form.html.erb +++ b/app/views/workflows/_form.html.erb @@ -2,8 +2,9 @@ - <%= link_to_function(image_tag('toggle_check.png'), "toggleCheckboxesBySelector('table.transitions-#{name} input')", - :title => "#{l(:button_check_all)}/#{l(:button_uncheck_all)}") %> + <%= link_to_function('', "toggleCheckboxesBySelector('table.transitions-#{name} input')", + :title => "#{l(:button_check_all)}/#{l(:button_uncheck_all)}", + :class => 'icon-only icon-checked') %> <%=l(:label_current_status)%> <%=l(:label_new_statuses_allowed)%> @@ -12,8 +13,9 @@ <% for new_status in @statuses %> - <%= link_to_function(image_tag('toggle_check.png'), "toggleCheckboxesBySelector('table.transitions-#{name} input.new-status-#{new_status.id}')", - :title => "#{l(:button_check_all)}/#{l(:button_uncheck_all)}") %> + <%= link_to_function('', "toggleCheckboxesBySelector('table.transitions-#{name} input.new-status-#{new_status.id}')", + :title => "#{l(:button_check_all)}/#{l(:button_uncheck_all)}", + :class => 'icon-only icon-checked') %> <%= new_status.name %> <% end %> @@ -24,8 +26,9 @@ <% next if old_status.nil? && name != 'always' %> "> - <%= link_to_function(image_tag('toggle_check.png'), "toggleCheckboxesBySelector('table.transitions-#{name} input.old-status-#{old_status.try(:id) || 0}')", - :title => "#{l(:button_check_all)}/#{l(:button_uncheck_all)}") %> + <%= link_to_function('', "toggleCheckboxesBySelector('table.transitions-#{name} input.old-status-#{old_status.try(:id) || 0}')", + :title => "#{l(:button_check_all)}/#{l(:button_uncheck_all)}", + :class => 'icon-only icon-checked') %> <%= old_status ? old_status.name : content_tag('em', l(:label_issue_new)) %> diff --git a/app/views/workflows/edit.html.erb b/app/views/workflows/edit.html.erb index ab9f72b..3eac0a3 100644 --- a/app/views/workflows/edit.html.erb +++ b/app/views/workflows/edit.html.erb @@ -16,12 +16,12 @@ - <%= image_tag 'bullet_toggle_plus.png' %> + - <%= image_tag 'bullet_toggle_plus.png' %> + <%= submit_tag l(:button_edit), :name => nil %> diff --git a/app/views/workflows/index.html.erb b/app/views/workflows/index.html.erb index 3ee55d1..1a07805 100644 --- a/app/views/workflows/index.html.erb +++ b/app/views/workflows/index.html.erb @@ -22,7 +22,9 @@ <% @roles.each do |role| -%> <% count = @workflow_counts[[tracker.id, role.id]] || 0 %> - <%= link_to((count > 0 ? count : image_tag('false.png')), {:action => 'edit', :role_id => role, :tracker_id => tracker}, :title => l(:button_edit)) %> + <%= link_to((count > 0 ? count : content_tag(:span, nil, :class => 'icon-only icon-not-ok')), + {:action => 'edit', :role_id => role, :tracker_id => tracker}, + :title => l(:button_edit)) %> <% end -%> diff --git a/app/views/workflows/permissions.html.erb b/app/views/workflows/permissions.html.erb index 0374021..3b8f84e 100644 --- a/app/views/workflows/permissions.html.erb +++ b/app/views/workflows/permissions.html.erb @@ -16,12 +16,12 @@ - <%= image_tag 'bullet_toggle_plus.png' %> + - <%= image_tag 'bullet_toggle_plus.png' %> + <%= submit_tag l(:button_edit), :name => nil %> diff --git a/public/stylesheets/application.css b/public/stylesheets/application.css index 095b892..47c0853 100644 --- a/public/stylesheets/application.css +++ b/public/stylesheets/application.css @@ -124,6 +124,9 @@ a.collapsible {padding-left: 12px; background: url(../images/arrow_expanded.png) a.collapsible.collapsed {background: url(../images/arrow_collapsed.png) no-repeat -5px 40%;} a#toggle-completed-versions {color:#999;} + +a.toggle-checkboxes { margin-left: 5px; padding-left: 12px; background: url(../images/toggle_check.png) no-repeat 0% 50%; } + /***** Tables *****/ table.list { border: 1px solid #e4e4e4; border-collapse: collapse; width: 100%; margin-bottom: 4px; } table.list th { background-color:#EEEEEE; padding: 4px; white-space:nowrap; } @@ -382,7 +385,7 @@ fieldset#filters td.values input {height:1em;} .add-filter {width:35%; float:right; text-align: right; vertical-align: top;} #issue_is_private_wrap {float:right; margin-right:1em;} -.toggle-multiselect {background: url(../images/bullet_toggle_plus.png) no-repeat 0% 40%; padding-left:8px; margin-left:0; cursor:pointer;} +.toggle-multiselect {background: url(../images/bullet_toggle_plus.png) no-repeat 0% 40%; padding-left:16px; margin-left:0; margin-right:5px; cursor:pointer;} .buttons { font-size: 0.9em; margin-bottom: 1.4em; margin-top: 1em; } div#issue-changesets {float:right; width:45%; margin-left: 1em; margin-bottom: 1em; background: #fff; padding-left: 1em; font-size: 90%;} @@ -1038,6 +1041,11 @@ a.close-icon:hover {background-image:url('../images/close_hl.png');} padding-top: 2px; padding-bottom: 3px; } +.icon-only { + background-position: 0% 50%; + background-repeat: no-repeat; + padding-left: 16px; +} .icon-add { background-image: url(../images/add.png); } .icon-edit { background-image: url(../images/edit.png); } @@ -1060,12 +1068,13 @@ a.close-icon:hover {background-image:url('../images/close_hl.png');} .icon-time-add { background-image: url(../images/time_add.png); } .icon-stats { background-image: url(../images/stats.png); } .icon-warning { background-image: url(../images/warning.png); } +.icon-error { background-image: url(../images/exclamation.png); } .icon-fav { background-image: url(../images/fav.png); } .icon-fav-off { background-image: url(../images/fav_off.png); } .icon-reload { background-image: url(../images/reload.png); } .icon-lock { background-image: url(../images/locked.png); } .icon-unlock { background-image: url(../images/unlock.png); } -.icon-checked { background-image: url(../images/true.png); } +.icon-checked { background-image: url(../images/toggle_check.png); } .icon-details { background-image: url(../images/zoom_in.png); } .icon-report { background-image: url(../images/report.png); } .icon-comment { background-image: url(../images/comment.png); } @@ -1076,7 +1085,15 @@ a.close-icon:hover {background-image:url('../images/close_hl.png');} .icon-zoom-out { background-image: url(../images/zoom_out.png); } .icon-passwd { background-image: url(../images/textfield_key.png); } .icon-test { background-image: url(../images/bullet_go.png); } +.icon-email { background-image: url(../images/email.png); } +.icon-email-disabled { background-image: url(../images/email_disabled.png); } .icon-email-add { background-image: url(../images/email_add.png); } +.icon-move-up { background-image: url(../images/1uparrow.png); } +.icon-move-top { background-image: url(../images/2uparrow.png); } +.icon-move-down { background-image: url(../images/1downarrow.png); } +.icon-move-bottom { background-image: url(../images/2downarrow.png); } +.icon-ok { background-image: url(../images/true.png); } +.icon-not-ok { background-image: url(../images/false.png); } .icon-file { background-image: url(../images/files/default.png); } .icon-file.text-plain { background-image: url(../images/files/text.png); } diff --git a/test/unit/helpers/application_helper_test.rb b/test/unit/helpers/application_helper_test.rb index 6b0d1c7..6c0d7ab 100644 --- a/test/unit/helpers/application_helper_test.rb +++ b/test/unit/helpers/application_helper_test.rb @@ -1243,14 +1243,14 @@ RAW # heading that contains inline code assert_match Regexp.new('
' + - 'Edit
' + + '' + '' + '

Subtitle with inline code

'), result # last heading assert_match Regexp.new('
' + - 'Edit
' + + '' + '' + '

Subtitle after pre tag

'), result -- 2.6.2